diff --git a/assets/imgs/Pong3D.gif b/assets/imgs/Pong3D.gif index b16d065..352bec4 100644 Binary files a/assets/imgs/Pong3D.gif and b/assets/imgs/Pong3D.gif differ diff --git a/assets/imgs/Riverwood.gif b/assets/imgs/Riverwood.gif new file mode 100644 index 0000000..19f3aea Binary files /dev/null and b/assets/imgs/Riverwood.gif differ diff --git a/assets/imgs/ThesesFr.gif b/assets/imgs/ThesesFr.gif new file mode 100644 index 0000000..4015700 Binary files /dev/null and b/assets/imgs/ThesesFr.gif differ diff --git a/assets/imgs/ThesesFr.png b/assets/imgs/ThesesFr.png new file mode 100644 index 0000000..72245a9 Binary files /dev/null and b/assets/imgs/ThesesFr.png differ diff --git a/assets/imgs/ThesesFr_blur.png b/assets/imgs/ThesesFr_blur.png new file mode 100644 index 0000000..1199866 Binary files /dev/null and b/assets/imgs/ThesesFr_blur.png differ diff --git a/index.html b/index.html index 0b69a62..fb72692 100644 --- a/index.html +++ b/index.html @@ -90,59 +90,73 @@

Projects

- -
-
-
- -
-
-

- 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. -

-
+
+
+
+
+ +
+
+

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

+
+
-
-
-
-
- -
-
-

- 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. -

+
+
+
+ +
+
+

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

+
-
-
-
-
- -
-
-

- 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. -

-
-
-
+
+
+
+ +
+
+

+ 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. +

+
+
+
+ +
+
+
+ +
+
+

+ The goal was to retrieve the dataset provided by theses.fr, to normalize it, and to create a site allowing to consult these data, first in the form of a simple but visually pleasant list, then in a second time to summarize the research in the form of graphics (and a map). +

+
+
+
+ +
diff --git a/script.js b/script.js index c4f6957..f6b9b48 100644 --- a/script.js +++ b/script.js @@ -5,16 +5,15 @@ const mainTitle = document.querySelector('.main-title'); const navBarElems = document.querySelector('body > header > nav'); const contentElems = document.querySelectorAll('#content > div, .main-title'); -function toMove(toClass, inClass) { +function toAddClass(toClass, inClass) { "use strict"; - const elementsToMove = document.querySelectorAll(toClass); + const elementsToAddClass = document.querySelectorAll(toClass); - if (elementsToMove !== null) { - elementsToMove.forEach(function (elem) { - const distInView = ( - elem.getBoundingClientRect().bottom - (elem.offsetHeight) / 2 - ) - window.innerHeight; + if (elementsToAddClass !== null) { + elementsToAddClass.forEach(function (elem) { + const distInView = elem.getBoundingClientRect().top + - window.innerHeight + 100; if (distInView < 0) { elem.classList.add(inClass); } @@ -73,9 +72,9 @@ function updateUrl() { function scrollHandler() { "use strict"; - toMove('.to-fade', 'fade-in'); - toMove('.to-grow', 'grow-in'); - toMove('.to-slide', 'slide-in'); + toAddClass('.to-fade', 'fade-in'); + toAddClass('.to-grow', 'grow-in'); + toAddClass('.to-slide', 'slide-in'); updateTitle(); diff --git a/stylesheet.css b/stylesheet.css index 9e22a5c..5931f50 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -36,9 +36,11 @@ header { } nav { - display: flex; + display: inline-flex; flex-direction: column; + align-items: flex-start; gap: 10px; + font-size: 1.6em; letter-spacing: 4px; } @@ -49,15 +51,33 @@ nav a:first-letter { } nav a { + position: relative; + font-family: Manrope; - transform: translateX(-100%); opacity: 0; + + transform: translateX(-100%); transition: transform 600ms, opacity 600ms, letter-spacing 200ms; } -nav a:hover { - letter-spacing: 6px; +nav a::after { + content: ''; + + position: absolute; + left: 0; + bottom: -3px; + + background: #3AC414; + + width: 0; + height: 3px; + + transition: width 200ms ease-in-out; +} + +nav a:hover::after { + width: 100%; } nav a:nth-child(0n+2) { @@ -274,18 +294,22 @@ header:hover { font-size: smaller; } -#projects { - display: grid; - gap: 30px; +.projects-list { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + gap: 10px; } -#projects > div { +.projects-list > div { position: relative; display: flex; justify-content: center; align-items: center; + width: 300px; height: 250px; border-radius: 0.5em; @@ -293,7 +317,7 @@ header:hover { overflow: hidden; } -#projects > div::before, #projects > div::after { +.projects-list > div::before, .projects-list > div::after { content: ''; position: absolute; top: 0; @@ -302,26 +326,26 @@ header:hover { width: 100%; height: 100%; - background-color: #D6FFC9; + background-color: #fff; border-radius: inherit; transition: transform 500ms; } -#projects > div::before { +.projects-list > div::before { transform: translate(-100%, -100%); } -#projects > div::after { +.projects-list > div::after { z-index: -1; transform: translate(100%, 100%); } -#projects > div:hover::before { +.projects-list > div:hover::before { transform: translate(-0.5em, -0.5em); } -#projects > div:hover::after { +.projects-list > div:hover::after { transform: translate(0, 0); } @@ -333,10 +357,14 @@ header:hover { border-radius: inherit; cursor: pointer; + + transform: translateX(-150%); + transition: transform 200ms; } #projects article:hover .plus-button { backdrop-filter: blur(2px); + background-color: #0005; box-shadow: inset #121212 0 0 100px; } @@ -360,7 +388,8 @@ header:hover { .plus-button svg { opacity: 0; - fill: #CAEBC0; + fill: #fff; + filter: drop-shadow(0 0 10px #0003); width: 20%; height: 20%; transition: opacity 200ms; @@ -402,6 +431,14 @@ header:hover { background: center / cover no-repeat url('assets/imgs/Riverwood.gif'); } +#thesesFr { + background: center / contain no-repeat url('assets/imgs/ThesesFr.png'), center / cover url('assets/imgs/ThesesFr_blur.png'); +} + +#thesesFr:hover { + background: center / cover no-repeat url('assets/imgs/ThesesFr.gif'); +} + .degree { font-variation-settings: 'wght' 400; }