nessar/Portfolio
1
0 Fork 0
Code Issues 2 Pull Requests 3 Packages Projects Releases Wiki Activity

started timeline

Browse Source
This commit is contained in:
nessar committed 2023-03-26 04:59:33 +02:00
1 parent 23a22c2f4f
commit 8c410cacf8
16 files changed
+408 -119
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+2 -2
View File
@@ -3,12 +3,12 @@
<head>
<meta charset="UTF-8">
<link rel="icon" href="/logo.svg">
<link rel="icon" href="/avatarTO.svg">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Théophyl Hoguet - Portfolio</title>
</head>
<body>
<body style="overflow-x: hidden;">
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
public/avatarTO.svg
Symlink
+1
View File
@@ -0,0 +1 @@
../src/assets/images/avatarTO.svg
src/App.vue
+43 -115
View File
@@ -2,6 +2,9 @@
import type { Engine } from "tsparticles-engine";
import { defineComponent } from 'vue';
import { loadFull } from "tsparticles";
import about from "@/components/about.vue";
import timeline from "@/components/timeline.vue";
import skills from "@/components/skills.vue";
const particlesInit = async (engine: Engine) => {
await loadFull(engine);
};
@@ -10,154 +13,79 @@ const particlesInit = async (engine: Engine) => {
export default defineComponent({
name: 'App',
created() {
window.addEventListener('scroll', this.handleScroll);
},
unmounted() {
window.removeEventListener('scroll', this.handleScroll);
},
methods: {
handleScroll(event: Event) {
const scroll = window.scrollY;
},
}
});
</script>
<template>
<header>
<nav>
<!-- <img alt="Logo" src="@/assets/images/logo.svg" class="logo" /> -->
</nav>
<Particles id="tsparticles" :particlesInit="particlesInit" url="particles.json" />
<nav>
<img alt="Logo" src="@/assets/images/avatarTO.svg" class="logo" />
<div class="links">
<ol>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ol>
</div>
</nav>
</header>
<main>
<div class="about">
<h1>Hi, I'm <span class="name">Théophyl</span></h1>
<div class="bio">
<div class="imagePerso">
<img src="@/assets/images/proCircleBlur.png" alt="Photo de moi" />
</div>
<div class="info">
<p>
Hello and welcome to my portfolio! I am currently a student in Computer Science at the Université de
Bordeaux.
<br />
<br />
Ever since I was 10 years old, I have had a love for programming. The idea of being able to create
something from scratch using code fascinated me, and I knew from a young age that I wanted to pursue
a
career in this field. Over the years, I have continued to develop my skills and knowledge,
constantly
seeking out new technologies and programming languages to learn.
<br />
<br />
As a student, I have had the opportunity to work on many exciting projects. These projects have not
only
allowed me to put my skills into practice, but they have also given me the chance to work with other
students and professionals in the field. (see <a href="#projects">projects</a> section of the
website)
<br />
<br />
Thank you for taking the time to learn more about me, and I hope to have the opportunity to work
with
you in the future.
</p>
</div>
</div>
</div>
<div class="transi">
</div>
<div class="projects">
</div>
<about />
<timeline />
<skills />
</main>
</template>
<style scoped>
nav {
.links ol {
list-style: none;
display: flex;
display: row;
gap: 3vw;
padding: 0;
}
.links a {
color: white;
text-decoration: none;
font-family: raleway_semi_bold;
font-size: large;
}
.button {
display: flex;
justify-content: center;
align-items: center;
height: 10vh;
width: 100vw;
width: 100%;
height: 100%;
background: rgb(110, 161, 255);
border-radius: 10px;
}
.projects {
nav {
display: flex;
justify-content: space-evenly;
justify-content: space-between;
align-items: center;
flex-direction: row;
height: 50vh;
height: 20vh;
width: 100vw;
background: #0b1829;
padding: 0 3vw 0 3vw;
}
.transi {
height: 8vw;
width: 120vw;
margin: -4vw 0 -4vw 0;
background-color: rgb(29, 29, 29);
transform: rotate(-4deg) scale(1.2, 1);
z-index: 1;
nav .logo {
width: min(calc(100vw / 5), calc(50vh/5));
}
.logo {
max-width: 100%;
height: 400px;
}
.info {
width: 50%;
}
header {
height: 100vh;
width: 100vw;
background: radial-gradient(ellipse at bottom, #0b1829 0%, #000000 100%)
background: radial-gradient(ellipse at bottom, #292929 0%, #000000 100%)
}
.about {
display: flex;
align-items: center;
flex-direction: column;
gap: 20px;
padding: 4vw 0 4vw 0;
margin-bottom: 4vw;
}
.bio {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: row;
height: 50vh;
width: 100vw;
}
.about {
color: white;
}
.about a {
color: rgb(110, 161, 255);
}
.imagePerso {
width: 30%;
border-radius: 50%;
overflow: hidden;
}
.imagePerso img {
width: 100%;
height: 100%;
object-fit: cover;
}
main {
height: 100vh;
width: 100vw;
background: rgb(29, 29, 29);
}
src/assets/css/font.css
+14
View File
@@ -0,0 +1,14 @@
@font-face {
font-family: raleway_semi_bold;
src: url("@/assets/fonts/Raleway-SemiBold.ttf");
}
@font-face {
font-family: montserrat_semi_bold;
src: url("@/assets/fonts/Montserrat-SemiBold.ttf");
}
@font-face {
font-family: montserrat_regular;
src: url("@/assets/fonts/Montserrat-Regular.ttf");
}
src/assets/css/main.css
+4 -1
View File
@@ -1,4 +1,6 @@
@import url("base.css");
@import url("font.css");
html::-webkit-scrollbar {
/* Chrome, Safari, Opera */
@@ -6,7 +8,8 @@ html::-webkit-scrollbar {
}
html {
overflow: auto;
overflow-x: hidden;
-ms-overflow-style: none;
scrollbar-width: none;
scroll-behavior: smooth;
}
src/assets/fonts/Montserrat-Regular.ttf
BIN
View File
Binary file not shown.
src/assets/fonts/Montserrat-SemiBold.ttf
BIN
View File
Binary file not shown.
src/assets/fonts/Raleway-SemiBold.ttf
BIN
View File
Binary file not shown.
src/assets/images/avatarTO.svg
+1
View File
@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><defs><style>.cls-1,.cls-5,.cls-8{fill:#fff;}.cls-2{fill:#f2a98a;}.cls-10,.cls-2,.cls-4,.cls-5,.cls-6,.cls-8,.cls-9{stroke:#231f20;stroke-miterlimit:10;}.cls-3{fill:#141418;}.cls-4{fill:#fcc4a5;}.cls-10,.cls-4,.cls-6{stroke-width:2px;}.cls-6{fill:#68000b;}.cls-7{fill:#aa1d3d;}.cls-8,.cls-9{stroke-width:3px;}.cls-10,.cls-9{fill:none;}</style></defs><circle class="cls-1" cx="200" cy="200" r="200"/><path class="cls-2" d="M112.74,265.12H229.32v67.49c0,30.37-46.62,55-58.29,55h0c-14.66,0-58.29-24.62-58.29-55V265.12Z" transform="translate(0 0)"/><path class="cls-3" d="M292.3,220.13h0a7.78,7.78,0,0,0,7.7-7.77V138.15a87.15,87.15,0,0,0-87.16-87H185.77v96.26l98.74,4.54v60.44a7.78,7.78,0,0,0,7.79,7.77Z" transform="translate(0 0)"/><path class="cls-4" d="M291.64,161v81.25a97.91,97.91,0,1,1-195.82.66V157.25a96,96,0,0,1,96.05-96A99.81,99.81,0,0,1,291.64,161Z" transform="translate(0 0)"/><path class="cls-3" d="M293,164.76a.12.12,0,0,1-.23,0,69.71,69.71,0,0,0-24.6-45.94,78.41,78.41,0,0,0-6.82-5,67.57,67.57,0,0,0-7.16-4.1l-2.38-1.13a72.36,72.36,0,0,0-12.42-4.29l-1.46-.31-2.22-.44-1.39-.26-.18,0-1.25-.18-3.17-.37a68.75,68.75,0,0,0-7.32-.38H203.78a147,147,0,0,0-33.05,5.23c-13.07,3.63-25.6,9.08-33.42,14-32.17,20-39.73,64.68-41,73.32v0c0,.66,0,1.32,0,2l-.12.12-14.06.39-.13-.11q-1.44-23-2.9-46.09h0C79,90.76,128.55,41.83,189.63,41.82a111.28,111.28,0,0,1,78.23,32q2.4,2.34,4.62,4.83a.11.11,0,0,1-.06.19l-17.71,3.53h0c1.33,1.19,2.6,2.41,3.87,3.67l.66.65c1.53,1.54,3.17,3.14,4.44,4.7l.22.25a117.55,117.55,0,0,1,14.2,19.86c.86,1.5,1.71,3.13,2.5,4.6A114.69,114.69,0,0,1,293,164.76Z" transform="translate(0 0)"/><path class="cls-3" d="M262.86,83.85c-.59.65-1.22,1.28-1.84,1.88l-1.07,1a41.09,41.09,0,0,1-13.24,7.61c-.72.25-1.48.5-2.2.69a38.08,38.08,0,0,1-7.42,1.31l-2.19-.44c-.91-.19-1.85-.34-2.79-.47L229,95.06a71.85,71.85,0,0,0-9.74-3.67L211,89a41.23,41.23,0,0,1-4.89-4.26,38,38,0,0,1-6.26-8.58,38.73,38.73,0,0,1-3.13-29.59h0c.22-.72.44-1.44.69-2.13a38.86,38.86,0,0,1,5.67-10.36,37.16,37.16,0,0,1,6.26-6.52,36.52,36.52,0,0,1,6-4l34.16-18.6,18.85,34a35.39,35.39,0,0,1,2.1,4.45c.25.63.47,1.25.66,1.88a38.59,38.59,0,0,1-8.24,38.55Z" transform="translate(0 0)"/><path class="cls-3" d="M229.76,69.32a33.34,33.34,0,0,1-16,19,27.91,27.91,0,0,1-3.47,1.6L209,89.51a104.39,104.39,0,0,0-32.66-5.26,34,34,0,0,1-4.1-4.13,33.39,33.39,0,0,1-1.35-40.74L178.38,29l12-16.69,27.12,19.48,1.19.91a33.34,33.34,0,0,1,11,36.67Z" transform="translate(0 0)"/><path class="cls-3" d="M269.87,90.78h0c4-7.22,13.42-10,21-6.18h0l13.77,6.89h0l-7.26,13.08c-4,7.22-13.42,10-21,6.18h0a14.43,14.43,0,0,1-6.51-20Z" transform="translate(0 0)"/><path class="cls-3" d="M193.5,51a21.18,21.18,0,0,1,0,6.26A20.52,20.52,0,0,1,189.9,66a22.46,22.46,0,0,1-1.5,1.88h-.85a64.19,64.19,0,0,0-19.79,6.26A25,25,0,0,1,164.32,73a21,21,0,0,1-12.09-15.66,22.08,22.08,0,0,1,0-7l1.28-8L155.61,30l20.64,3.39.94.18a20.74,20.74,0,0,1,11,6.27A21,21,0,0,1,193.5,51Z" transform="translate(0 0)"/><path class="cls-4" d="M97.63,229.1a20.09,20.09,0,1,1,0-40.17" transform="translate(0 0)"/><path class="cls-4" d="M286.37,188.93a20.09,20.09,0,0,1,0,40.17" transform="translate(0 0)"/><polygon class="cls-2" points="94.63 200.02 94.63 218.02 86.22 209.02 94.63 200.02"/><polygon class="cls-2" points="290.44 218.02 290.44 200.02 298.85 209.02 290.44 218.02"/><path class="cls-5" d="M184.34,311.21" transform="translate(0 0)"/><path class="cls-6" d="M153.5,284.43c-.18.81,8.65,1.49,16,8.67,2.85,2.79,3.79,4.9,5.33,7.17a21.65,21.65,0,0,0,3.67,4.16c1.22,1.09,7.27,6.48,14,7,8,.62,15.59-7.31,26.2-18.83,1.57-1.7,2.84-3,5.38-5.62a30.57,30.57,0,0,1,2.63-2.59c2-1.6,3.38-1.95,7.3-3.73.68-.31,2.1-1,5-2.39s7.6-3.71,7.54-3.84-15.2,9.09-31.67,13C183.6,294.85,153.84,282.9,153.5,284.43Z" transform="translate(0 0)"/><path class="cls-7" d="M179.28,303.91a26.09,26.09,0,0,0,6.16,4.28,25.67,25.67,0,0,0,7,2.3,14,14,0,0,0,4.6-.62,17.77,17.77,0,0,0,4.3-2.13,32,32,0,0,0,3.89-2.84,52.33,52.33,0,0,1-25.92-1Z" transform="translate(0 0)"/><path class="cls-5" d="M170.62,292.77a71.84,71.84,0,0,0,8.87,2,77.54,77.54,0,0,0,13.38.82,112.28,112.28,0,0,0,12.76-.92c4.59-.54,8.46-1.21,11.38-1.78l7-7.07-10.26,2.42a118.62,118.62,0,0,1-21.17,2.1,127,127,0,0,1-22.22-1.87,79.24,79.24,0,0,1-9.35-1.94,14.16,14.16,0,0,1,2,.8A23.33,23.33,0,0,1,167.2,290C168.12,290.7,169.3,291.62,170.62,292.77Z" transform="translate(0 0)"/><path class="cls-3" d="M296.31,48.7l-2.73,25.15a25.14,25.14,0,0,1-15.16,20.48c-.67.27-1.34.54-2,.77a25.24,25.24,0,0,1-8,1.24,20.51,20.51,0,0,1-2.48-.15h-.63a50.48,50.48,0,0,0-5.61-3.25l-1.87-.9a47.39,47.39,0,0,0-3.35-5.27l-.94-1.26a52.12,52.12,0,0,0-9.67-9.62,9.56,9.56,0,0,0-.22-1.39,25.83,25.83,0,0,1,1.88-13.37l.28-.6c.32-.64.64-1.29,1-1.94a25.48,25.48,0,0,1,6.33-7.23,25,25,0,0,1,18.17-5.19l1.89.2,2,.22h.38Z" transform="translate(0 0)"/><path class="cls-3" d="M105.68,118.25h0c-4-7.22-13.42-10-21-6.18h0L70.89,119h0L78.15,132c4,7.22,13.42,10,21,6.18h0a14.42,14.42,0,0,0,6.51-20Z" tranLine truncated
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

src/assets/json/particles.json
+1 -1
View File
@@ -43,7 +43,7 @@
"line_linked": {
"enable": true,
"distance": 120,
"color": "#1bbef5",
"color": "#fd2222",
"opacity": 0.6786669718037545,
"width": 1
},
src/assets/json/projects.json
+22
View File
@@ -0,0 +1,22 @@
{
"projects": {
"name": "test1",
"year": 2021,
"type": "School Project",
"desc": "This is a test project",
"tech": [
"HTML",
"CSS",
"JavaScript"
],
"links": {
"title": "https://www.google.com",
"github": "https://www.github.com",
"release": "https://www.release.com"
},
"images": {
"main": "https://www.google.com",
"alt": "https://www.google.com"
}
}
}
src/components/about.vue
+122
View File
@@ -0,0 +1,122 @@
<template>
<a id="about" />
<div class="about">
<h1>Hi, I'm <span class="name">Théophyl</span></h1>
<div class="photoInfo">
<div class="imagePerso">
<img src="@/assets/images/proCircleBlur.png" alt="Photo de moi" />
</div>
<div class="info">
<p>
Welcome to my portfolio!
<br />
<br />
I am currently a Computer Science student at the Université de Bordeaux, where I am gaining the
knowledge and skills required to excel in this field.
<br />
<br />
Ever since I was 10 years old, programming has been my passion. I am fascinated by the idea of
creating
something from scratch using code, and I knew from a young age that I wanted to pursue a career in
this
field. Over the years, I have continued to develop my skills and knowledge, constantly seeking out
new
technologies and programming languages to learn.
<br />
<br />
As a student, I have had the opportunity to work on many exciting projects. These projects have not
only
allowed me to put my skills into practice, but they have also given me the chance to work with other
students and professionals in the field. For more details, please check out the <a
href="#projects">projects</a> section of my website.
<br />
<br />
Thank you for taking the time to learn more about me. I hope to have the opportunity to work with
you in
the future.
</p>
</div>
</div>
</div>
<div class="transi">
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
.info {
width: 50%;
font-family: montserrat_regular;
}
.transi {
height: 8vw;
width: 100%;
margin: -4vw 0 -4vw 0;
background-color: rgb(29, 29, 29);
transform: rotate(-4deg) scale(1.2, 1);
z-index: 1;
}
.about {
display: flex;
align-items: center;
flex-direction: column;
gap: 20px;
padding: 4vw 0 4vw 0;
margin-bottom: 4vw;
font-family: montserrat_semi_bold;
}
.photoInfo {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: row;
width: 100vw;
}
.about {
color: white;
}
.about a {
color: rgb(110, 161, 255);
text-decoration: none;
}
.imagePerso {
width: 30%;
border-radius: 50%;
overflow: hidden;
}
.imagePerso img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media screen and (max-width: 1000px) {
.about {
padding: 4vw 0 4vw 0;
height: auto;
}
.photoInfo {
flex-direction: column;
}
.imagePerso {
width: 30%;
}
.info {
width: 80%;
}
}
</style>
src/components/contact.vue
+11
View File
@@ -0,0 +1,11 @@
<template>
<div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped></style>
src/components/project.vue
+11
View File
@@ -0,0 +1,11 @@
<template>
<div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped></style>
src/components/skills.vue
+16
View File
@@ -0,0 +1,16 @@
<template>
<div class="skills">
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
.skills {
height: 100vh;
background-color: white;
}
</style>
src/components/timeline.vue
+160
View File
@@ -0,0 +1,160 @@
<template>
<div class="spacer timeline" />
<div class="timeline" id="timeline">
<a id="projects" />
<div id="animStart" />
<div class="transform" id="transform">
<div class="circle" />
<div class="connector" />
<div class="project">
<div class="infos">
<h1>titre</h1>
<p>descriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescription
</p>
<div class="button">
<a href="test">test</a>
</div>
</div>
<video>
<source src="@/assets/videos/test.mp4" type="video/mp4" />
</video>
</div>
</div>
</div>
<div id="animStop" />
</template>
<script setup lang="ts">
import { defineComponent } from 'vue';
</script>
<script lang="ts">
export default defineComponent({
name: 'timeline',
created() {
window.addEventListener('scroll', this.handleScroll);
},
data() {
return {
};
},
methods: {
handleScroll(event: Event) {
if (this.activateAnimation()) {
const timeline = document.getElementById('timeline')!.getBoundingClientRect();
if (!timeline) return;
const position = timeline.top;
document.getElementById('transform')?.setAttribute('style', `transform: translateY(calc(-50vh + ${-position}px)) rotate(${-position}deg);`);
}
// else {
// document.getElementById('transform')?.setAttribute('style', `transform: translateY(-50vh) rotate(0deg);`);
// }
},
activateAnimation() {
let start = document.getElementById('animStart')?.getBoundingClientRect();
let stop = document.getElementById('animStop')?.getBoundingClientRect();
if (!start || !stop) return false;
if (stop.top >= 0 && stop.bottom <= (window.innerHeight || document.documentElement.clientHeight))
return false;
else {
if (start.top >= 0)
return false;
else
return true;
}
},
},
})
</script>
<style scoped>
.spacer {
height: 20vh !important;
}
.timeline {
background: linear-gradient(to right, #000000, #292929, #000000);
height: 1000vh;
}
.transform {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
height: 200vh;
width: 200vw;
margin-left: -100vw;
transform: translateY(-50vh);
margin-bottom: -100vh;
}
.circle {
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: transparent;
position: absolute;
z-index: 1;
border: 5vw groove white;
}
.project {
padding: 15px;
display: flex;
align-items: center;
justify-content: left;
flex-direction: column;
border: 5px solid white;
border-radius: 25px;
width: 70vw;
/* margin: 10vh 5vw 0 15vw; */
filter: drop-shadow(0px 0px 20px rgba(255, 255, 255, 0.5));
}
.connector {
margin-left: 110vw;
height: 5px;
width: 10vw;
background-color: rgb(255, 255, 255);
z-index: 3;
}
video {
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden;
border-radius: 15px;
}
.project .infos {
width: 80%;
z-index: 2;
}
/* Styles for screens taller than wide */
@media screen and (orientation: portrait) {
.circle {
width: 30vw;
height: 30vw;
}
.infos {
background-color: rgb(29, 27, 41);
margin-bottom: -25px;
border-radius: 25px;
padding: 25px;
word-break: break-all;
}
}
/* Styles for screens wider than tall */
@media screen and (orientation: landscape) {
.circle {
width: 80vh;
height: 80vh;
}
}
</style>