From 6b4e9a0d710ea308267bc4f9781200212398e2d4 Mon Sep 17 00:00:00 2001
From: Thomas <48221879+TheThomaas@users.noreply.github.com>
Date: Fri, 16 Jun 2023 09:08:22 +0200
Subject: [PATCH] Add files via upload

---
 index.html | 125 +++++++++++++++++++++++----------
 main.scss  | 202 +++++++++++++++++++++++++++++++++++++++++++----------
 2 files changed, 254 insertions(+), 73 deletions(-)
diff --git a/index.html b/index.html
index 584e112..f4c6bfb 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
 <body>
     <header class="wrapper-full">
         <nav>
-            <ul class="list-inline">
+            <ul>
                 <li><a href="#projects" aria-current="page">Projects</a></li>
                 <li><a href="#about">About me</a></li>
                 <li><a href="#experience">Experiece</a></li>
@@ -19,61 +19,114 @@
         </nav>
     </header>
     <main>
-        <div class="wrapper-full hero-section">
+        <section class="wrapper-full hero-section">
             <h1>Hi! I'm Thomas</h1>
             <p>Welcome to my website</p>
-        </div>
+        </section>
 
-        <div class="wrapper-full projects-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>
-                        <img src="https://placehold.co/200x150" alt="Placeholder image">
-                        <div>
-                            <h3>Title</h3>
-                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo voluptatum expedita, cum odio odit, similique, ipsa quidem dolor amet consequuntur unde officia fugit atque.</p>
-                            <a href="#">Link</a>
+                        <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>
-                        <img src="https://placehold.co/200x150" alt="Placeholder image">
-                        <div>
-                            <h3>Title</h3>
-                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo voluptatum expedita, cum odio odit, similique, ipsa quidem dolor amet consequuntur unde officia fugit atque.</p>
-                            <a href="#">Link</a>
+                        <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>
-                        <img src="https://placehold.co/200x150" alt="Placeholder image">
-                        <div>
-                            <h3>Title</h3>
-                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo voluptatum expedita, cum odio odit, similique, ipsa quidem dolor amet consequuntur unde officia fugit atque.</p>
-                            <a href="#">Link</a>
+                        <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>
-                        <img src="https://placehold.co/200x150" alt="Placeholder image">
-                        <div>
-                            <h3>Title</h3>
-                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo voluptatum expedita, cum odio odit, similique, ipsa quidem dolor amet consequuntur unde officia fugit atque.</p>
-                            <a href="#">Link</a>
+                        <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>
-        </div>
+        </section>
 
-        <div class="wrapper-full">
-            <div class="about-section">
+        <section class="wrapper-full about-section">
+            <div class="about">
                 <div>
-                    <img src="https://placehold.co/200" alt="Placeholder image">
+                    <img src="https://placehold.co/400" alt="Placeholder image">
                 </div>
                 <div>
                     <h2 id="about">About me</h2>
@@ -92,11 +145,11 @@
                     </ul>
                 </div>
             </div>
-        </div>
+        </section>
 
-        <div class="wrapper-full studies-section">
+        <section class="wrapper-full experiences-section">
             <h2 id="experience">My experiences</h2>
-            <ol class="list-inline timeline">
+            <ol class="timeline">
                 <li>
                     <h3>School 1</h3>
                     <h4>Lorem ipsum</h4>
@@ -108,11 +161,13 @@
                     <div><time datetime="2023">2023</time><span>-</span><time datetime="2023">2023</time></div>
                 </li>
             </ol>
-        </div>
+        </section>
 
-        <div class="download-section">
-            <a href="#" download class="btn">Download as PDF</a>
-        </div>
+        <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>
     </main>
     <footer class="wrapper-full">
         <ul class="list-inline">
diff --git a/main.scss b/main.scss
index c64001b..ce5b427 100644
--- a/main.scss
+++ b/main.scss
@@ -594,22 +594,42 @@ details[open] summary + * {
 
 
 
-
-header, footer {
-  background-color: var(--primary);
-  padding: 1rem 2rem;
+body {
+  header, footer {
+    background-color: var(--primary);
+    padding: .5rem clamp(.2rem, 3vw, 2rem);  
+  }
 }
 header {
   position: fixed;
+  z-index: 10;
   inset-block-start: 0;
   inset-inline: 0;
+
+  @media screen and (max-width: 767px) {
+    &.wrapper-full {
+      nav {
+          grid-column: 1 / -1;
+      }
+    }
+  }
+
   nav {
     ul {
+      display: flex;
       justify-content: end;
+      padding: 0;
+      list-style: none;
+
+      @media screen and (max-width: 767px) {
+        justify-content: start;
+      }
     }
+
     li {
       padding: 6px 20px;
-      --item-separator: none;
+      padding: 6px clamp(10px, 3vw, 20px);
+      margin: 0;
   
       @media screen and (min-width: 768px) {
         display: inline-block;
@@ -648,6 +668,7 @@ main {
 }
 footer {
   justify-items: center;
+  margin-block-start: 1.5rem;
   .list-inline {
     a {
       text-decoration: underline;
@@ -656,6 +677,19 @@ footer {
   }
 }
 
+i {
+  vertical-align: text-top;
+  fill: var(--fill-color, var(--primary-light));
+  display: inline-block;
+  block-size: 1.5rem;
+  aspect-ratio: 1;
+  
+  svg {
+    aspect-ratio: 1;
+    block-size: 1.5rem;
+  }
+}
+
 .hero-section {
   background-color: var(--primary);
   height: 65vh;
@@ -665,51 +699,77 @@ footer {
   align-items: center;
   justify-content: center;
 }
+
 .projects-section {
-  margin-block: 1rem;
   ul {
-    display: flex;
-    flex-wrap: nowrap;
-    gap: var(--gutter);
-    overflow-y: scroll;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+    gap: 1rem;
   }
+
+  li {
+    border-radius: var(--border-radius);
+    overflow: hidden;
+  }
+
   article {
-    width: clamp(9rem, 20vw, 13rem);
-    // width: 14rem;
-    // min-width: 200px;
-    // max-width: 250px;
+    position: relative;
+    height: 100%;
+    padding: .4rem;
     display: flex;
     flex-direction: column;
-    background-color: var(--primary);
-    border-radius: var(--border-radius);
-    
-    img {
-      border-radius: var(--border-radius) var(--border-radius) 0 0;
-    }
+    justify-content: space-between;
+    gap: 2.5rem;
+  }
 
-    div {
-      padding: .5rem 1rem .8rem 1rem;
-    }
+  .background {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    object-fit: cover;
+  }
 
-    a {
-      float: inline-end;
-      border-radius: var(--border-radius);
-      border: var(--border-width) solid var(--text);
-      margin-block-start: 1rem;
-      padding: .1rem .5rem;
-      transition: background-color .2s ease-in-out, color .2s ease-in-out;
-
-      &:hover {
-        background-color: var(--text);
-        color: var(--background);
+  a {
+    &:hover {
+      i {
+        --fill-color: var(--text-2);
       }
     }
   }
+
+  i {
+    --fill-color: var(--text);
+  }
+
+  .top {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .links {
+    display: flex;
+    gap: .2rem;
+    align-self: flex-end;
+  }
+
+  .content {
+    padding: 1rem .4rem 0 .4rem;
+  }
 }
+
 .about-section {
+  background-color: var(--primary);
+  padding-block: 2rem;
+  margin-block: 2.5rem;
+}
+.about {
   display: flex;
   gap: 2rem;
   align-items: center;
+
   & > div:first-child {
     inline-size: 30%;
   }
@@ -719,8 +779,7 @@ footer {
   img {
     margin: 1rem auto;
     inline-size: 100%;
-    min-inline-size: 150px;
-    max-inline-size: 300px;
+    inline-size: clamp(200px, 100%, 400px);
     aspect-ratio: 1;
     border-radius: 100%;
     border: 4px solid var(--primary-dark)
@@ -729,20 +788,87 @@ footer {
     margin-block-start: 1rem;
     gap: .2rem;
   }
+
+  @media screen and (max-width: 767px) {
+    flex-direction: column;
+
+    & > div:first-child, & > div:last-child {
+      inline-size: 100%;
+    }
+
+    img {
+      inline-size: clamp(200px, 50vw, 300px);
+      margin: 0 auto;
+    }
+  }
+}
+
+.timeline {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding: 0;
+
+  &:before {
+    content: '';
+    position: absolute;
+    inline-size: 6px;
+    background-color: var(--light-1);
+    inset: 0 0 0 1.5rem;
+    margin-inline-start: -3px;
+  }
+
+  li {
+    position: relative;
+    margin: 0;
+    padding: 10px 40px;
+    padding: 1rem 0 1rem 3.5rem;
+
+    &:after {
+      content: '';
+      position: absolute;
+      aspect-ratio: 1;
+      inline-size: 26px;
+      background-color: var(--light-1);
+      border: 4px solid var(--secondary-dark);
+      inset-inline-start: .9rem;
+      inset-block-start: 1.5rem;
+      border-radius: 50%;
+      z-index: 1;
+    }
+  }
 }
 
 
 .download-section {
   text-align: center;
-  margin-block: 2rem 1rem;
+  margin-block: 2rem 1.5rem;
 }
+
 .btn {
   padding: .4rem .8rem;
   text-decoration: none;
   transition: background-color .2s ease-in-out, text-decoration .2s ease-in-out;
 
+  &: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;
+  //   }
+  }
+
   &:hover {
     background-color: var(--dark-2);
     text-decoration: underline;
   }
-}
\ No newline at end of file
+}
