From f82286f129b7de7a8ea87a9abe8d6d2231447060 Mon Sep 17 00:00:00 2001
From: TheThomaas <thethomaas@protonmail.ch>
Date: Wed, 30 Aug 2023 22:47:33 +0200
Subject: [PATCH] Change color theme

---
 index.html | 225 ++++++++++++++++++++++++++---------------------------
 main.scss  | 150 +++++++++++++++++++++++------------
 2 files changed, 213 insertions(+), 162 deletions(-)

diff --git a/index.html b/index.html
index f4c6bfb..65e05f2 100644
--- a/index.html
+++ b/index.html
@@ -12,8 +12,8 @@
     <header class="wrapper-full">
         <nav>
             <ul>
-                <li><a href="#projects" aria-current="page">Projects</a></li>
-                <li><a href="#about">About me</a></li>
+                <li><a href="#about" aria-current="page">About me</a></li>
+                <li><a href="#projects">Projects</a></li>
                 <li><a href="#experience">Experiece</a></li>
             </ul>
         </nav>
@@ -23,107 +23,8 @@
             <h1>Hi! I'm Thomas</h1>
             <p>Welcome to my website</p>
         </section>
-
-        <section class="wrapper-full projects-section">
-            <h2 id="projects">My projects</h2>
-            <ul>
-                <!-- <li>
-                    <article>
-                        <div class="top">
-                            <span></span>
-                            <div class="links">
-                                <a href="#" title="Checkout the website"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>web</title><path d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
-                                <a href="#" title="Source on Github"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>github</title><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
-                            </div>
-                        </div>
-                        <div class="content">
-                            <h3>Title</h3>
-                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo voluptatum expedita, cum odio odit, similique.</p>
-                        </div>
-                        <img class="background" src="https://placehold.co/200x150" alt="Placeholder image">
-                    </article>
-                </li> -->
-                <li>
-                    <article>
-                        <div class="top">
-                            <span></span>
-                            <div class="links">
-                                <a href="#" title="Source on Github"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>github</title><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
-                            </div>
-                        </div>
-                        <div class="content">
-                            <h3>Cancre Simulator</h3>
-                            <p>Un jeu fait pour les Portes Ouvertes 2020</p>
-                        </div>
-                        <img class="background" src="https://placehold.co/200x150" alt="Placeholder image">
-                    </article>
-                </li>
-                <li>
-                    <article>
-                        <div class="top">
-                            <span></span>
-                            <div class="links">
-                                <a href="#" title="Checkout the website"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>web</title><path d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
-                                <a href="#" title="Source on Github"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>github</title><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
-                            </div>
-                        </div>
-                        <div class="content">
-                            <h3>Sigfox Temperature</h3>
-                            <p>Des capteurs de température affichés sur un tableau de bord</p>
-                        </div>
-                        <img class="background" src="https://placehold.co/200x150" alt="Placeholder image">
-                    </article>
-                </li>
-                <li>
-                    <article>
-                        <div class="top">
-                            <span></span>
-                            <div class="links">
-                                <a href="#" title="Source on Github"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>github</title><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
-                            </div>
-                        </div>
-                        <div class="content">
-                            <h3>Snake</h3>
-                            <p>Un snake réalisé en Java</p>
-                        </div>
-                        <img class="background" src="https://placehold.co/200x150" alt="Placeholder image">
-                    </article>
-                </li>
-                <li>
-                    <article>
-                        <div class="top">
-                            <span></span>
-                            <div class="links">
-                                <a href="#" title="Checkout the website"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>web</title><path d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
-                                <a href="#" title="Source on Github"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>github</title><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
-                            </div>
-                        </div>
-                        <div class="content">
-                            <h3>LDAP</h3>
-                            <p>Ajouter, voir et se connecter à des utilisateurs LDAP depuis un site</p>
-                        </div>
-                        <img class="background" src="https://placehold.co/200x150" alt="Placeholder image">
-                    </article>
-                </li>
-                <li>
-                    <article>
-                        <div class="top">
-                            <span></span>
-                            <div class="links">
-                                <a href="#" title="Source on Github"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>github</title><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
-                            </div>
-                        </div>
-                        <div class="content">
-                            <h3>Qui est-ce ?</h3>
-                            <p>Un "Qui est-ce ?" fait en Python et avec des LEGO Mindstorms</p>
-                        </div>
-                        <img class="background" src="https://placehold.co/200x150" alt="Placeholder image">
-                    </article>
-                </li>
-            </ul>
-        </section>
-
-        <section class="wrapper-full about-section">
+        
+        <section class="wrapper about-section">
             <div class="about">
                 <div>
                     <img src="https://placehold.co/400" alt="Placeholder image">
@@ -147,26 +48,124 @@
             </div>
         </section>
 
+        <section class="wrapper-full projects-section">
+            <h2 id="projects">My projects</h2>
+            <ul>
+                <!-- <li>
+                    <article>
+                        <div class="top">
+                            <span></span>
+                            <div class="links">
+                                <a href="#" title="Checkout the website"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>web</title><path d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
+                                <a href="#" title="Source on Github"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>github</title><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
+                            </div>
+                        </div>
+                        <div class="content">
+                            <h3>Title</h3>
+                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo voluptatum expedita, cum odio odit, similique.</p>
+                        </div>
+                    </article>
+                </li> -->
+                <li>
+                    <article>
+                        <div class="top">
+                            <span></span>
+                            <div class="links">
+                                <a href="#" title="Source on Github"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>github</title><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
+                            </div>
+                        </div>
+                        <div class="content">
+                            <h3>Cancre Simulator</h3>
+                            <p>Un jeu fait pour les Portes Ouvertes 2020</p>
+                        </div>
+                    </article>
+                </li>
+                <li>
+                    <article style="--background: rgb(255, 143, 143);">
+                        <div class="top">
+                            <span></span>
+                            <div class="links">
+                                <a href="#" title="Checkout the website"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>web</title><path d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
+                                <a href="#" title="Source on Github"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>github</title><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
+                            </div>
+                        </div>
+                        <div class="content">
+                            <h3>Sigfox Temperature</h3>
+                            <p>Des capteurs de température affichés sur un tableau de bord</p>
+                        </div>
+                    </article>
+                </li>
+                <li>
+                    <article>
+                        <div class="top">
+                            <span></span>
+                            <div class="links">
+                                <a href="#" title="Source on Github"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>github</title><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
+                            </div>
+                        </div>
+                        <div class="content">
+                            <h3>Snake</h3>
+                            <p>Un snake réalisé en Java</p>
+                        </div>
+                    </article>
+                </li>
+                <li>
+                    <article>
+                        <div class="top">
+                            <span></span>
+                            <div class="links">
+                                <a href="#" title="Checkout the website"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>web</title><path d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
+                                <a href="#" title="Source on Github"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>github</title><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
+                            </div>
+                        </div>
+                        <div class="content">
+                            <h3>LDAP</h3>
+                            <p>Ajouter, voir et se connecter à des utilisateurs LDAP depuis un site</p>
+                        </div>
+                    </article>
+                </li>
+                <li>
+                    <article>
+                        <div class="top">
+                            <span></span>
+                            <div class="links">
+                                <a href="#" title="Source on Github"><i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>github</title><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" /></svg></i></a>
+                            </div>
+                        </div>
+                        <div class="content">
+                            <h3>Qui est-ce ?</h3>
+                            <p>Un "Qui est-ce ?" fait en Python et avec des LEGO Mindstorms</p>
+                        </div>
+                    </article>
+                </li>
+            </ul>
+        </section>
+        
         <section class="wrapper-full experiences-section">
             <h2 id="experience">My experiences</h2>
             <ol class="timeline">
                 <li>
-                    <h3>School 1</h3>
-                    <h4>Lorem ipsum</h4>
-                    <div><time datetime="2023">2023</time><span>-</span><time datetime="2023">2023</time></div>
+                    <h3><time datetime="2023">2023</time><span>-</span><time datetime="2023">2023</time></h3>
+                    <p>Lorem ipsum, School 1</p>
                 </li>
                 <li>
-                    <h3>School 2</h3>
-                    <h4>Lorem ipsum</h4>
-                    <div><time datetime="2023">2023</time><span>-</span><time datetime="2023">2023</time></div>
+                    <h3><time datetime="2023">2023</time><span>-</span><time datetime="2023">2023</time></h3>
+                    <p>Lorem ipsum, School 2</p>
                 </li>
             </ol>
         </section>
 
-        <section class="download-section">
-            <a href="#" download class="btn icon">
-                <i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>tray-arrow-down</title><path d="M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 15L17.55 9.54L16.13 8.13L13 11.25V2H11V11.25L7.88 8.13L6.46 9.55L12 15Z" /></svg></i><span>Download as PDF</span>
-            </a>
+        <section class="wrapper-full download-section">
+            <div class="content">
+                <div class="flex-container column">
+                    <p>You want to print this document ?</p>
+                    <i></i>
+                    <a href="#" download class="btn icon--download">
+                        Download as PDF
+                        <!-- <i></i><span>Download as PDF</span> -->
+                    </a>
+                </div>
+            </div>
         </section>
     </main>
     <footer class="wrapper-full">
diff --git a/main.scss b/main.scss
index ce5b427..bd4cc77 100644
--- a/main.scss
+++ b/main.scss
@@ -48,9 +48,9 @@
 :where(html) {
   overflow-x: hidden;
 }
-:where(html, body) {
-  block-size: 100%;
-}
+// :where(html, body) {
+//   block-size: 100%;
+// }
 :where(body) {
   text-rendering: optimizeSpeed;
   line-height: 1.5;
@@ -123,6 +123,15 @@
   background-color: var(--background-color, none);
 }
 
+.flex-container {
+  display: inline-flex;
+  align-items: center;
+
+  &.column {
+    flex-direction: column;
+  }
+}
+
 
 
 
@@ -595,12 +604,17 @@ details[open] summary + * {
 
 
 body {
+  --start: var(--primary-light);
+  --end: var(--secondary);
+  background: var(--start);
+  background: linear-gradient(180deg, var(--start) 0%, var(--end) 100%);
+
   header, footer {
-    background-color: var(--primary);
     padding: .5rem clamp(.2rem, 3vw, 2rem);  
   }
 }
 header {
+  background-color: var(--primary);
   position: fixed;
   z-index: 10;
   inset-block-start: 0;
@@ -617,7 +631,7 @@ header {
   nav {
     ul {
       display: flex;
-      justify-content: end;
+      justify-content: flex-end;
       padding: 0;
       list-style: none;
 
@@ -667,6 +681,7 @@ main {
   }
 }
 footer {
+  background-color: var(--secondary);
   justify-items: center;
   margin-block-start: 1.5rem;
   .list-inline {
@@ -691,7 +706,6 @@ i {
 }
 
 .hero-section {
-  background-color: var(--primary);
   height: 65vh;
   text-align: center;
   display: flex;
@@ -713,6 +727,7 @@ i {
   }
 
   article {
+    --background: url('https://placehold.co/200x150');
     position: relative;
     height: 100%;
     padding: .4rem;
@@ -720,27 +735,23 @@ i {
     flex-direction: column;
     justify-content: space-between;
     gap: 2.5rem;
-  }
-
-  .background {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    object-fit: cover;
+    z-index: 1;
+    background: var(--background);
+    background-repeat: no-repeat;
+    background-size: cover;
   }
 
   a {
     &:hover {
       i {
-        --fill-color: var(--text-2);
+        fill: #3a3a3a;
       }
     }
   }
 
   i {
     --fill-color: var(--text);
+    transition: fill .2s ease-in-out;
   }
 
   .top {
@@ -760,10 +771,10 @@ i {
   }
 }
 
-.about-section {
-  background-color: var(--primary);
+.about-section, 
+.projects-section,
+.experiences-section {
   padding-block: 2rem;
-  margin-block: 2.5rem;
 }
 .about {
   display: flex;
@@ -819,56 +830,97 @@ i {
   }
 
   li {
+    --size: 3rem;
     position: relative;
-    margin: 0;
-    padding: 10px 40px;
-    padding: 1rem 0 1rem 3.5rem;
+    margin: 1.4rem 0;
+    padding: 0 0 0 calc(var(--size) + .8rem);
+
+    &:first-child {
+      margin-top: 3rem;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+      margin-bottom: -10px;
+    }
 
     &:after {
       content: '';
       position: absolute;
       aspect-ratio: 1;
-      inline-size: 26px;
+      inline-size: var(--size);
       background-color: var(--light-1);
-      border: 4px solid var(--secondary-dark);
-      inset-inline-start: .9rem;
-      inset-block-start: 1.5rem;
+      border: 6px solid var(--secondary-dark);
+      inset-inline-start: 0;
+      // inset-inline-start: .9rem;
+      inset-block-end: 50%;
+      transform: translateY(50%);
+      // inset-block-end: 0;
+      // inset-block-start: 1.5rem;
       border-radius: 50%;
       z-index: 1;
     }
   }
 }
 
-
-.download-section {
-  text-align: center;
-  margin-block: 2rem 1.5rem;
+.experiences-section {
+  p {
+    margin: 0;
+  }
 }
 
 .btn {
-  padding: .4rem .8rem;
+  --hover: var(--dark-2);
+  --active: var(--dark-2);
   text-decoration: none;
-  transition: background-color .2s ease-in-out, text-decoration .2s ease-in-out;
+  transition: background-color .1s ease-in-out;
+  display: inline-flex;
+  flex-direction: row;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  min-height: 2.5rem;
+  padding: .5rem 1rem;
+  width: fit-content;
+  align-items: center;
+  max-height: none;
+  max-width: 100%;
+  
+  &[class*="icon"]:before {
+    --icon-size: 1.4rem;
+    content: '';
+    display: block;
+    flex: 0 0 auto;
+    background-color: currentColor;
+    mask-size: 100% 100%;
+    height: var(--icon-size);
+    width: var(--icon-size);
+    margin-left: -.125rem;
+    margin-right: .5rem;
+  }
 
-  &:has(> i) { padding-inline-start: .6rem; }
-  &.icon { padding-inline-start: .6rem; }
-
-  i {
-  //   vertical-align: text-top;
-  //   fill: var(--primary-light);
-  //   display: inline-block;
-    margin-inline-end: .4rem;
-  //   block-size: 1.5rem;
-  //   aspect-ratio: 1;
-    
-  //   svg {
-  //     aspect-ratio: 1;
-  //     block-size: 1.5rem;
-  //   }
+  &.icon--download:before {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Etray-arrow-down%3C/title%3E%3Cpath d='M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 15L17.55 9.54L16.13 8.13L13 11.25V2H11V11.25L7.88 8.13L6.46 9.55L12 15Z' /%3E%3C/svg%3E");
   }
 
   &:hover {
-    background-color: var(--dark-2);
-    text-decoration: underline;
+    background-color: var(--hover);
+  }
+  &:active {
+    background-color: var(--active);
   }
 }
+
+.download-section {
+  text-align: center;
+  margin-block: 3.5rem;
+
+  .btn {
+    color: var(--secondary-light);
+  }
+
+  .content {
+    p {
+      font-size: 1.4rem;
+    }
+  }
+}
\ No newline at end of file