diff --git a/assets/Manrope-VariableFont_wght.ttf b/assets/fonts/Manrope-VariableFont_wght.ttf similarity index 100% rename from assets/Manrope-VariableFont_wght.ttf rename to assets/fonts/Manrope-VariableFont_wght.ttf diff --git a/assets/OverpassMono-VariableFont_wght.ttf b/assets/fonts/OverpassMono-VariableFont_wght.ttf similarity index 100% rename from assets/OverpassMono-VariableFont_wght.ttf rename to assets/fonts/OverpassMono-VariableFont_wght.ttf diff --git a/assets/FlorianSylvain.jpg b/assets/imgs/FlorianSylvain.jpg similarity index 100% rename from assets/FlorianSylvain.jpg rename to assets/imgs/FlorianSylvain.jpg diff --git a/assets/imgs/Pong2D.gif b/assets/imgs/Pong2D.gif new file mode 100644 index 0000000..afd577d Binary files /dev/null and b/assets/imgs/Pong2D.gif differ diff --git a/assets/imgs/Pong2D.png b/assets/imgs/Pong2D.png new file mode 100644 index 0000000..b89bc4a Binary files /dev/null and b/assets/imgs/Pong2D.png differ diff --git a/assets/imgs/Pong2D_blur.png b/assets/imgs/Pong2D_blur.png new file mode 100644 index 0000000..ae02545 Binary files /dev/null and b/assets/imgs/Pong2D_blur.png differ diff --git a/assets/imgs/Pong3D.gif b/assets/imgs/Pong3D.gif new file mode 100644 index 0000000..b16d065 Binary files /dev/null and b/assets/imgs/Pong3D.gif differ diff --git a/assets/imgs/Pong3D.png b/assets/imgs/Pong3D.png new file mode 100644 index 0000000..7f579d4 Binary files /dev/null and b/assets/imgs/Pong3D.png differ diff --git a/assets/imgs/Pong3D_blur.png b/assets/imgs/Pong3D_blur.png new file mode 100644 index 0000000..1d1bbba Binary files /dev/null and b/assets/imgs/Pong3D_blur.png differ diff --git a/assets/imgs/RisitasBot.gif b/assets/imgs/RisitasBot.gif new file mode 100644 index 0000000..7c53e93 Binary files /dev/null and b/assets/imgs/RisitasBot.gif differ diff --git a/assets/imgs/RisitasBot.png b/assets/imgs/RisitasBot.png new file mode 100644 index 0000000..efaee5b Binary files /dev/null and b/assets/imgs/RisitasBot.png differ diff --git a/assets/imgs/RisitasBot_blur.png b/assets/imgs/RisitasBot_blur.png new file mode 100644 index 0000000..916fc0a Binary files /dev/null and b/assets/imgs/RisitasBot_blur.png differ diff --git a/assets/imgs/Riverwood.png b/assets/imgs/Riverwood.png new file mode 100644 index 0000000..793c1aa Binary files /dev/null and b/assets/imgs/Riverwood.png differ diff --git a/assets/imgs/Riverwood_blur.png b/assets/imgs/Riverwood_blur.png new file mode 100644 index 0000000..fa084c8 Binary files /dev/null and b/assets/imgs/Riverwood_blur.png differ diff --git a/assets/test.jpg b/assets/test.jpg deleted file mode 100644 index 1ff7ff1..0000000 Binary files a/assets/test.jpg and /dev/null differ diff --git a/index.html b/index.html index 6dcb3e7..0be7e9b 100644 --- a/index.html +++ b/index.html @@ -41,7 +41,7 @@

About

- +

IT student at Gustave Eiffel University and R&D Developer Apprentice at WATT Earth, I've always been passionate about computer science. Web design, video games, and algorithms are my main spearhead in computer science.

@@ -90,7 +90,59 @@

Projects

-

todo

+ +
+
+
+ +
+
+

+ My first project in Python (with Pygame). It's a simple pong, with a main menu, a pause menu and a game over. +

+
+
+
+ +
+
+
+ +
+
+

+ My very first project on Unity. It's a simple pong with some effects and a rather calm atmosphere. +

+
+
+
+ +
+
+
+ +
+
+

+ Risitas_Bot is a Discord bot that can connect your Twitch chat to a Discord channel in real time, make your friends laugh by playing the meme "Issou!" on command in a voice channel and even give you some statistics about your Osu! account and last ranked games. +

+
+
+ + +
+
+
+ +
+
+

+ Work of students of DUT info 1 (IUT of Marne-la-Vallée). The students had to create a sound production inspired by the short film "Calls" by Timothée Hochet. +

+
+
+ +
@@ -98,6 +150,8 @@

todo

+
+
diff --git a/script.js b/script.js index 8de278b..c4f6957 100644 --- a/script.js +++ b/script.js @@ -55,7 +55,7 @@ function updateUrl() { contentElems.forEach(function (elem) { const pos = elem.getBoundingClientRect().top; - if (pos <= 0) { + if (pos <= 50) { if (max === null || pos > max) { max = pos; index = Array.from(contentElems).indexOf(elem); diff --git a/stylesheet.css b/stylesheet.css index dbb70c2..9e22a5c 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -1,11 +1,11 @@ @font-face { font-family: 'Manrope'; - src: url('assets/Manrope-VariableFont_wght.ttf') format('truetype'); + src: url('assets/fonts/Manrope-VariableFont_wght.ttf') format('truetype'); } @font-face { font-family: 'Overpass'; - src: url('assets/OverpassMono-VariableFont_wght.ttf') format('truetype'); + src: url('assets/fonts/OverpassMono-VariableFont_wght.ttf') format('truetype'); } * { @@ -15,14 +15,14 @@ body { width: 100%; - height: 2000px; + height: 100%; margin: 0; color: #fff; font-family: Manrope; font-variation-settings: 'wght' 500; - background-color: #101010; + background-color: #121212; } header { @@ -32,7 +32,7 @@ header { padding: 10px 10px 10px 110px; background-color: #253622; transform: translateY(-100%); - transition: transform 200ms ease-in-out; + transition: transform 200ms ease-in-out, gap 200ms ease-in-out; } nav { @@ -76,7 +76,7 @@ nav a:nth-child(0n+5) { h2 { letter-spacing: 2px; padding-bottom: 10px; - border-bottom: 2px solid #101010; + border-bottom: 2px solid #121212; } h2:first-letter { @@ -134,7 +134,11 @@ a { } .hamburger:hover > span { - background: #D0DBCC; + background: #D6FFC9; +} + +header:hover { + transform: translateY(calc(-100% + 25px)); } .to-cross .hamburger { @@ -177,12 +181,12 @@ a { .main-title h1 { cursor: pointer; - transition: text-shadow 200ms ease-in-out, transform 200ms ease-in-out; + transition: text-shadow 200ms, transform 200ms; } .main-title h1:hover { - transform: translateX(-5px) translateY(-5px); - text-shadow: #253622 10px 10px 10px; + transform: translateX(-2.5px) translateY(-2.5px); + text-shadow: #253622 5px 5px 0; } .to-fade { @@ -195,11 +199,11 @@ a { } #content > div { - padding: 55px 10%; + padding: 50px 10%; } #content > div:nth-child(2n-1) { - color: #101010; + color: #121212; background-color: #fff; } @@ -207,7 +211,7 @@ a { border-bottom: 2px solid #fff; } -#content img { +#about img { width: 300px; height: 300px; @@ -270,6 +274,134 @@ a { font-size: smaller; } +#projects { + display: grid; + gap: 30px; +} + +#projects > div { + position: relative; + + display: flex; + justify-content: center; + align-items: center; + + height: 250px; + + border-radius: 0.5em; + + overflow: hidden; +} + +#projects > div::before, #projects > div::after { + content: ''; + position: absolute; + top: 0; + left: 0; + + width: 100%; + height: 100%; + + background-color: #D6FFC9; + + border-radius: inherit; + transition: transform 500ms; +} + +#projects > div::before { + transform: translate(-100%, -100%); +} + +#projects > div::after { + z-index: -1; + transform: translate(100%, 100%); +} + +#projects > div:hover::before { + transform: translate(-0.5em, -0.5em); +} + +#projects > div:hover::after { + transform: translate(0, 0); +} + +#projects article { + position: relative; + + width: calc(100% - 0.5em); + height: calc(100% - 0.5em); + border-radius: inherit; + + cursor: pointer; +} + +#projects article:hover .plus-button { + backdrop-filter: blur(2px); + box-shadow: inset #121212 0 0 100px; +} + +#projects article:hover .plus-button svg { + opacity: 100%; +} + +.plus-button { + position: absolute; + + display: flex; + justify-content: center; + align-items: center; + + width: 100%; + height: 100%; + border-radius: inherit; + + transition: box-shadow 200ms; +} + +.plus-button svg { + opacity: 0; + fill: #CAEBC0; + width: 20%; + height: 20%; + transition: opacity 200ms; +} + +.article-content { + display: none; +} + +#pong2D { + background: center / contain no-repeat url('assets/imgs/Pong2D.png'), center / cover url('assets/imgs/Pong2D_blur.png'); +} + +#pong2D:hover { + background: center / cover no-repeat url('assets/imgs/Pong2D.gif'); +} + +#pong3D { + background: center / contain no-repeat url('assets/imgs/Pong3D.png'), center / cover url('assets/imgs/Pong3D_blur.png'); +} + +#pong3D:hover { + background: center / cover no-repeat url('assets/imgs/Pong3D.gif'); +} + +#risitasBot { + background: center / contain no-repeat url('assets/imgs/RisitasBot.png'), center / cover url('assets/imgs/RisitasBot_blur.png'); +} + +#risitasBot:hover { + background: center / cover no-repeat url('assets/imgs/RisitasBot.gif'); +} + +#riverwood { + background: center / contain no-repeat url('assets/imgs/Riverwood.png'), center / cover url('assets/imgs/Riverwood_blur.png'); +} + +#riverwood:hover { + background: center / cover no-repeat url('assets/imgs/Riverwood.gif'); +} + .degree { font-variation-settings: 'wght' 400; }