🚧 WIP Section projets

index.html

@@ -41,7 +41,7 @@
             <div class="to-fade" id="about">
                 <h2>About</h2>
                 <div class="block">
-                    <img class="to-grow" src="assets/FlorianSylvain.jpg">
+                    <img class="to-grow" src="assets/imgs/FlorianSylvain.jpg">
                     <p>
                         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.
                     </p>
@@ -90,7 +90,59 @@
 
             <div class="to-fade" id="projects">
                 <h2>Projects</h2>
-                <p>todo</p>
+
+                <div>
+                    <article id="pong2D">
+                        <div class="plus-button">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
+                        </div>
+                        <div class="article-content">
+                            <p>
+                                My first project in Python (with Pygame). It's a simple pong, with a main menu, a pause menu and a game over.
+                            </p>
+                        </div>
+                    </article>
+                </div>
+
+                <div>
+                    <article id="pong3D">
+                        <div class="plus-button">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
+                        </div>
+                        <div class="article-content">
+                            <p>
+                                My very first project on Unity. It's a simple pong with some effects and a rather calm atmosphere.
+                            </p>
+                        </div>
+                    </article>
+                </div>
+
+                <div>
+                    <article id="risitasBot">
+                        <div class="plus-button">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
+                        </div>
+                        <div class="article-content">
+                            <p>
+                                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.
+                            </p>
+                        </div>
+                    </div>
+                </article>
+
+                <div>
+                    <article id="riverwood">
+                        <div class="plus-button">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
+                        </div>
+                        <div class="article-content">
+                            <p>
+                                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.
+                            </p>
+                        </div>
+                    </div>
+                </article>
+
             </div>
 
             <div class="to-fade" id="contact">
@@ -98,6 +150,8 @@
                 <p>todo</p>
             </div>
 
+            <div style="height: 100vh;"></div>
+
         </div>
 
         <script type="text/javascript" src="script.js"></script>

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);

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);
+    transform: translateX(-2.5px) translateY(-2.5px);
-    text-shadow: #253622 10px 10px 10px;
+    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;
 }