diff --git a/CV.html b/CV.html
new file mode 100644
index 0000000..bdc3bb8
--- /dev/null
+++ b/CV.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="fr">
+    <head>
+        <title>CV</title>
+        <meta charset="UTF-8" />
+        <link rel="stylesheet" href="static/style.css" />
+        <script src="static/js/utils.js" defer></script>
+    </head>
+    <body>
+        <header>
+            <div class="links">
+                <a href="/" class="header_button">Home Page</a>
+                <a href="projects.html" class="header_button">Projets</a>
+                <a href="about.html" class="header_button">A propos de moi</a>
+                <a href="surprise.html" class="header_button">Surprise :)</a>
+                <a href="https://djalim.fr" class="header_button">Blog Perso</a>
+            </div>
+            <button
+                id="display_header_links"
+                onclick="toggle_all_header_links()"
+            >
+                ▼
+            </button>
+        </header>
+
+        <main>
+            <h1>SIMAILA Djalim</h1>
+            <h2>Developper, Sys-admin</h2>
+            <br />
+            <h2>Contact</h2>
+            <p>
+                Mail :
+                <a href="mailto:djalim.simaila@etu.univ-amu.fr"
+                    >djalim.simaila@etu.univ-amu.fr</a
+                >
+            </p>
+            <br />
+            <h2>Formation</h2>
+            <ul>
+                <li>Bac : (2021) Bac General NSI_MATH</li>
+                <li>
+                    BUT : (2024) BUT informatique :Conception d’applications
+                </li>
+            </ul>
+            <br />
+            <h2>Experiences</h2>
+            <ul>
+                <li>
+                    Stage : (2018) DOSI -IUT Digne-les-Bains : Administrateur
+                    réseaux et systèmes
+                </li>
+                <li>
+                    Stage : (2023) INRAE - Le Tholonet : Développement de
+                    logiciel d’aide à la recherche
+                </li>
+                <li>
+                    Stage : (2024) LPL - Aix-en-Provence : Développement
+                    d’application mobile d’aide a la lecture
+                </li>
+                <li>
+                    Freelance : (2024) SyntaxSoft - CEO : Développement de
+                    logiciels
+                </li>
+            </ul>
+        </main>
+
+        <footer>
+            <p>
+                Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du
+                JavaScript ♥️
+            </p>
+            <p>©2025</p>
+        </footer>
+    </body>
+</html>
diff --git a/TP3.html b/TP3.html
index d37a84a..69eedb2 100644
--- a/TP3.html
+++ b/TP3.html
@@ -24,7 +24,7 @@
             </button>
         </header>
 
-        <div id="main">
+        <main>
             <div id="game_selection">
                 <button type="button" onclick="setup_game_one()">
                     Game 1 : You guess
@@ -66,7 +66,7 @@
                     Back to game selection
                 </button>
             </div>
-        </div>
+        </main>
 
         <footer>
             <p>
diff --git a/TP4.html b/TP4.html
index 7438df4..99b5c6c 100644
--- a/TP4.html
+++ b/TP4.html
@@ -24,16 +24,20 @@
             </button>
         </header>
 
-        <div id="main">
+        <main>
             <div id="pokemon_team">
-                <img id="pokemon_frame" alt="" />
+                <img
+                    id="pokemon_frame"
+                    src="/static/assets/images/pokeball.png"
+                    alt=""
+                />
                 <p id="pokemon_name"></p>
                 <p id="pokemon_desc"></p>
                 <button type="button" onclick="chose_random_pokemon()">
                     Check out a random pokemon
                 </button>
             </div>
-        </div>
+        </main>
 
         <footer>
             <p>
diff --git a/TP5.html b/TP5.html
index 8be6f80..a7fd8d8 100644
--- a/TP5.html
+++ b/TP5.html
@@ -28,33 +28,35 @@
             </button>
         </header>
 
-        <h1>Grocery list</h1>
+        <main>
+            <h1>Grocery list</h1>
 
-        <form
-            action="javascript:;"
-            onsubmit="addNewItemToList()"
-            onreset="clear_input()"
-        >
-            <button id="clear_button" type="reset">
-                <i class="bi bi-eraser"></i>
-            </button>
-            <input
-                type="text"
-                id="new_item_input"
-                placeholder="A new pair of Jordans"
-            />
-            <input type="number" id="new_item_quantity" value="1" min="0" />
-            <select id="new_item_unit">
-                <option value="unit">unit</option>
-                <option value="L">L</option>
-                <option value="KG">KG</option>
-            </select>
-            <button type="submit">
-                <i class="bi bi-plus"></i>
-            </button>
-        </form>
+            <form
+                action="javascript:;"
+                onsubmit="addNewItemToList()"
+                onreset="clear_input()"
+            >
+                <button id="clear_button" type="reset">
+                    <i class="bi bi-eraser"></i>
+                </button>
+                <input
+                    type="text"
+                    id="new_item_input"
+                    placeholder="A new pair of Jordans"
+                />
+                <input type="number" id="new_item_quantity" value="1" min="0" />
+                <select id="new_item_unit">
+                    <option value="unit">unit</option>
+                    <option value="L">L</option>
+                    <option value="KG">KG</option>
+                </select>
+                <button type="submit">
+                    <i class="bi bi-plus"></i>
+                </button>
+            </form>
 
-        <div id="grocery_list"></div>
+            <div id="grocery_list"></div>
+        </main>
 
         <footer>
             <p>
diff --git a/TP6.html b/TP6.html
index 8416d73..9b8a478 100644
--- a/TP6.html
+++ b/TP6.html
@@ -5,6 +5,7 @@
         <meta charset="UTF-8" />
         <link rel="stylesheet" href="static/style.css" />
         <script src="static/js/utils.js" defer></script>
+        <script src="static/js/TP6.js" defer></script>
         <link
             rel="stylesheet"
             href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
@@ -26,7 +27,8 @@
                 ▼
             </button>
         </header>
-        <div id="main">
+
+        <main>
             <div id="setupGame">
                 <p>how many spins do you want to simulate</p>
                 <input
@@ -36,15 +38,20 @@
                     min="1"
                     value="10000"
                 />
-                <button type="" onclick="setupGame()">Start Spins</button>
+                <button type="button" onclick="setupGame()">Start Spins</button>
             </div>
             <div>
-                <h2>Current Spin</h2>
-                <h3 id="currentSpin"></h3>
+                <h2 id="currentSpin">Current spin</h2>
             </div>
             <div id="lastSpins"></div>
             <p id="spinCounter"></p>
-        </div>
+            <div id="report">
+                <p id="winrate"></p>
+                <p id="winpercentage"></p>
+                <p id="gains"></p>
+            </div>
+        </main>
+
         <footer>
             <p>
                 Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du
@@ -53,5 +60,4 @@
             <p>©2025</p>
         </footer>
     </body>
-    <script src="static/js/TP6.js" defer></script>
 </html>
diff --git a/blocs.html b/blocs.html
new file mode 100644
index 0000000..8f02d55
--- /dev/null
+++ b/blocs.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="fr">
+    <head>
+        <title>Homepage</title>
+        <meta charset="UTF-8" />
+        <link rel="stylesheet" href="static/style.css" />
+        <script src="static/js/utils.js" defer></script>
+    </head>
+    <body>
+        <header>
+            <div class="links">
+                <a href="/" class="header_button">Home Page</a>
+                <a href="projects.html" class="header_button">Projets</a>
+                <a href="about.html" class="header_button">A propos de moi</a>
+                <a href="surprise.html" class="header_button">Surprise :)</a>
+                <a href="https://djalim.fr" class="header_button">Blog Perso</a>
+            </div>
+            <button
+                id="display_header_links"
+                onclick="toggle_all_header_links()"
+            >
+                ▼
+            </button>
+        </header>
+
+        <main>
+            <div
+                style="
+                    display: flex;
+                    flex-direction: column;
+                    height: 40vh;
+                    width: 60vw;
+                    gap: 10px;
+                "
+            >
+                <div
+                    class="blue"
+                    style="background-color: #00b0f0; flex: 1"
+                ></div>
+                <div
+                    class="red-green"
+                    style="
+                        flex: 2;
+                        display: flex;
+                        flex-direction: row;
+                        justify-content: space-between;
+                        gap: 10px;
+                    "
+                >
+                    <div
+                        class="red"
+                        style="background-color: #ff0000; flex: 1"
+                    ></div>
+                    <div
+                        class="green"
+                        style="background-color: #00b050; flex: 2"
+                    ></div>
+                </div>
+                <div
+                    class="yellow"
+                    style="background-color: #ffff00; flex: 1"
+                ></div>
+            </div>
+        </main>
+
+        <footer>
+            <p>
+                Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du
+                JavaScript ♥️
+            </p>
+            <p>©2025</p>
+        </footer>
+    </body>
+</html>
diff --git a/index.html b/index.html
index 1006175..15e82e7 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
         <title>Homepage</title>
         <meta charset="UTF-8" />
         <link rel="stylesheet" href="static/style.css" />
-        <script src="static/js/utils.js" defer />
+        <script src="static/js/utils.js" defer></script>
     </head>
     <body>
         <header>
@@ -23,53 +23,62 @@
             </button>
         </header>
 
-        <div id="title">
-            <h1>I love commiting war crimes :)</h1>
-        </div>
+        <main>
+            <div class="title">
+                <h1>I love commiting war crimes :)</h1>
+            </div>
 
-        <div id="content">
-            <p>
-                Qu'est-ce que le Lorem Ipsum? Le Lorem Ipsum est simplement du
-                faux texte employé dans la composition et la mise en page avant
-                impression. Le Lorem Ipsum est le faux texte standard de
-                l'imprimerie depuis les années 1500, quand un imprimeur anonyme
-                assembla ensemble des morceaux de texte pour réaliser un livre
-                spécimen de polices de texte. Il n'a pas fait que survivre cinq
-                siècles, mais s'est aussi adapté à la bureautique informatique,
-                sans que son contenu n'en soit modifié. Il a été popularisé dans
-                les années 1960 grâce à la vente de feuilles Letraset contenant
-                des passages du Lorem Ipsum, et, plus récemment, par son
-                inclusion dans des applications de mise en page de texte, comme
-                Aldus PageMaker. Pourquoi l'utiliser? On sait depuis longtemps
-                que travailler avec du texte lisible et contenant du sens est
-                source de distractions, et empêche de se concentrer sur la mise
-                en page elle-même. L'avantage du Lorem Ipsum sur un texte
-                générique comme 'Du texte. Du texte. Du texte.' est qu'il
-                possède une distribution de lettres plus ou moins normale, et en
-                tout cas comparable avec celle du français standard. De
-                nombreuses suites logicielles de mise en page ou éditeurs de
-                sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et
-                une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux
-                sites qui n'en sont encore qu'à leur phase de construction.
-                Plusieurs versions sont apparues avec le temps, parfois par
-                accident, souvent intentionnellement (histoire d'y rajouter de
-                petits clins d'oeil, voire des phrases embarassantes). D'où
-                vient-il? Contrairement à une opinion répandue, le Lorem Ipsum
-                n'est pas simplement du texte aléatoire. Il trouve ses racines
-                dans une oeuvre de la littérature latine classique datant de 45
-                av. J.-C., le rendant vieux de 2000 ans. Un professeur du
-                Hampden-Sydney College, en Virginie, s'est intéressé à un des
-                mots latins les plus obscurs, consectetur, extrait d'un passage
-                du Lorem Ipsum, et en étudiant tous les usages de ce mot dans la
-                littérature classique, découvrit la source incontestable du
-                Lorem Ipsum. Il provient en fait des sections 1.10.32 et 1.10.33
-                du "De Finibus Bonorum et Malorum" (Des Suprêmes Biens et des
-                Suprêmes Maux) de Cicéron. Cet ouvrage, très populaire pendant
-                la Renaissance, est un traité sur la théorie de l'éthique. Les
-                premières lignes du Lorem Ipsum, "Lorem ipsum dolor sit
-                amet...", proviennent de la section
-            </p>
-        </div>
+            <div class="box horizontal warp-on-small-screen">
+                <img
+                    src="/static/assets/images/mwa.jpg"
+                    alt="Moi"
+                    width="935"
+                    height="935"
+                    style="
+                        border-radius: 10px;
+                        max-width: 320px;
+                        max-height: 320px;
+                        width: auto;
+                        height: auto;
+                    "
+                />
+                <div>
+                    <p>
+                        Je m'appelle <b>Djalim</b>, j'ai 21 ans et je suis un
+                        developpeur et etudiant en BUT Informatique à Aix en
+                        Provence.
+                    </p>
+                    <p>
+                        Je suis passioné d'Informatique, je sais que c'est tres
+                        vague mais ça englobe tout ce que j'aime faire :
+                    </p>
+                    <ul>
+                        <li>
+                            <p style="display: inline">
+                                Créer des logiciels (scripts, applications,
+                                jeux, you name it, I do it)
+                            </p>
+                        </li>
+                        <li>
+                            <p style="display: inline">
+                                Créer et configurer des serveurs/workstations
+                                Linux (Debian, Ubuntu, Arch, Manjaro, Fedora,
+                                CentOS, etc...)
+                            </p>
+                        </li>
+                        <li>
+                            <p style="display: inline">
+                                Créer des api et des bases de données
+                            </p>
+                        </li>
+                    </ul>
+                    <p>
+                        Bref, je fais plein de trucs. Je suis aussi passioné par
+                        les mangas, les jeux vidéos et les animes.
+                    </p>
+                </div>
+            </div>
+        </main>
 
         <footer>
             <p>
diff --git a/projects.html b/projects.html
index 4abbe8d..e5739bd 100644
--- a/projects.html
+++ b/projects.html
@@ -23,33 +23,44 @@
             </button>
         </header>
 
-        <div id="title">
-            <h1>Mes projets</h1>
-        </div>
-
-        <div id="content">
-            <div class="project_box">
-                <img
-                    class="project_box_thumbnail"
-                    src="static/assets/images/Da_fookin_owl-1.png"
-                    alt="placeholder"
-                />
-                <p class="project_box_summary">
-                    Le Lorem Ipsum est simplement du faux texte employé dans la
-                    composition et la mise en page avant impression. Le Lorem
-                    Ipsum est le faux texte standard de l'imprimerie depuis les
-                    années 1500, quand un imprimeur anonyme assembla ensemble
-                    des morceaux de texte pour réaliser un livre spécimen de
-                    polices de texte. Il n'a pas fait que survivre cinq siècles,
-                    mais s'est aussi adapté à la bureautique informatique, sans
-                    que son contenu n'en soit modifié. Il a été popularisé dans
-                    les années 1960 grâce à la vente de feuilles Letraset
-                    contenant des passages du Lorem Ipsum, et, plus récemment,
-                    par son inclusion dans des applications de mise en page de
-                    texte, comme Aldus PageMaker
-                </p>
+        <main>
+            <div class="title">
+                <h1>Mes TPS</h1>
             </div>
-        </div>
+
+            <a href="/TP3.html" class="box project">
+                <h2>TP3</h2>
+                <p>Lorem Ipsum</p>
+            </a>
+
+            <a href="/TP4.html" class="box project">
+                <h2>TP4</h2>
+                <p>Lorem Ipsum</p>
+            </a>
+
+            <a href="/TP5.html" class="box project">
+                <h2>TP5</h2>
+                <p>Lorem Ipsum</p>
+            </a>
+
+            <a href="/TP6.html" class="box project">
+                <h2>TP6</h2>
+                <p>Lorem Ipsum</p>
+            </a>
+
+            <a href="/blocs.html" class="box project">
+                <h2>Blocs flexbox</h2>
+                <p>Lorem Ipsum</p>
+            </a>
+
+            <div id="title">
+                <h1>Mes projets</h1>
+            </div>
+            <a href="/TP6.html" class="box project">
+                <h2>TP6</h2>
+                <p>Lorem Ipsum</p>
+            </a>
+        </main>
 
         <footer>
             <p>
diff --git a/static/assets/images/mwa.jpg b/static/assets/images/mwa.jpg
new file mode 100644
index 0000000..f4ea2d8
Binary files /dev/null and b/static/assets/images/mwa.jpg differ
diff --git a/static/assets/images/pokeball.png b/static/assets/images/pokeball.png
new file mode 100644
index 0000000..2bb39d1
Binary files /dev/null and b/static/assets/images/pokeball.png differ
diff --git a/static/js/TP6.js b/static/js/TP6.js
index 3a59459..d8d27e6 100644
--- a/static/js/TP6.js
+++ b/static/js/TP6.js
@@ -119,11 +119,14 @@ function qualifyingPreprocess() {
 }
 
 function setupGame() {
+  let numberOfSpins = document.getElementById("maxSpinInput").value;
+  if (numberOfSpins > 1000000) numberOfSpins = 1000000;
+  if (numberOfSpins < 1) numberOfSpins = 1;
   spinArray = generate_random_array(
     document.getElementById("maxSpinInput").value,
   );
   document.getElementById("setupGame").classList.add("hidden");
-  spinInterval = setInterval(() => processSpin(), 500);
+  spinInterval = setInterval(() => processSpin(), 0);
 }
 
 function processSpin() {
@@ -153,11 +156,13 @@ function processSpin() {
   currentSpin += 1;
   if (currentSpin == spinArray.length) {
     clearInterval(spinInterval);
+    showReport();
   }
 }
 
 function showCurrentSpin() {
-  document.getElementById("currentSpin").textContent = spinArray[currentSpin];
+  document.getElementById("currentSpin").textContent =
+    "Current Spin :" + spinArray[currentSpin];
   document.getElementById("lastSpins").replaceChildren();
   spinArray.slice(lowerBound(), currentSpin).forEach((number) => {
     let numberDiv = document.createElement("div");
@@ -168,3 +173,17 @@ function showCurrentSpin() {
   document.getElementById("spinCounter").textContent =
     "" + currentSpin + "/" + spinArray.length;
 }
+
+function showReport() {
+  let numberOfQualifying = winingNumbers.length + losingNumbers.length;
+  let winrate = winingNumbers.length / numberOfQualifying;
+  let winpercentage = winrate * 100;
+  let gains = -9 * losingNumbers.length;
+  winingNumbers.forEach((number) => {
+    gains += number[1];
+  });
+
+  document.getElementById("winrate").textContent = winrate;
+  document.getElementById("winpercentage").textContent = winpercentage;
+  document.getElementById("gains").textContent = gains;
+}
diff --git a/static/style.css b/static/style.css
index 372f37a..fa5afb3 100644
--- a/static/style.css
+++ b/static/style.css
@@ -5,25 +5,57 @@
 
 * {
     font-family: JetBrainsMono;
+    margin: 0;
+    padding: 0;
     --color-text: #f8f8f2;
     --color-background: #282a36;
     --color-current-line: #44475a;
     --color-purple: #bd93f9;
 }
 
+a {
+    text-decoration: none;
+    color: var(--color-text);
+}
+
+p,
+ul {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+ul {
+    & > li {
+        padding-left: 20px;
+        &::marker {
+            content: none;
+            display: none;
+        }
+        &::before {
+            content: "—";
+            padding-left: 10px;
+        }
+    }
+}
+
 body {
     color: var(--color-text);
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
+    min-height: 100vh;
     background-color: var(--color-background);
     flex-direction: column;
+    & > :not(header, main, footer) {
+        display: none;
+    }
 }
 
 header {
     display: flex;
     background-color: var(--color-current-line);
     border-radius: 20px;
+    margin: 1rem 1rem 20px 1rem;
     padding: 10px;
     overflow: hidden;
     & > .links {
@@ -69,14 +101,20 @@ header {
     background-color: var(--color-purple);
     text-decoration: none !important;
     text-align: center;
+    transition: transform 0.3s ease-out;
+    &:hover {
+        transform: scale(1.06);
+        background-color: var(--color-purple);
+    }
 }
 
-.header_button:hover {
-    background-color: var(--color-purple);
-}
-
-#title {
-    padding: 1rem;
+main {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    max-width: 80%;
+    gap: 1rem;
 }
 
 footer {
@@ -86,16 +124,31 @@ footer {
     justify-content: space-evenly;
     background-color: var(--color-current-line);
     border-radius: 20px;
-    padding: 4px 20px;
-    margin-top: 20px;
+    padding: 12px;
+    margin: 20px 1rem 1rem 1rem;
 }
 
-#main {
+.box {
+    background-color: var(--color-current-line);
+    padding: 12px;
+    border-radius: 20px;
     display: flex;
-    justify-content: center;
-    align-items: center;
     flex-direction: column;
-    height: 100vh;
+    gap: 1rem;
+    &.horizontal {
+        flex-direction: row;
+    }
+    &:is(a) {
+        transition: transform 0.3s ease-out;
+        &:hover {
+            transform: scale(1.06);
+        }
+    }
+}
+@media screen and (max-width: 739px) {
+    .box.horizontal.warp-on-small-screen {
+        flex-wrap: wrap;
+    }
 }
 
 #pokemon_team {
@@ -123,14 +176,6 @@ button:hover {
     background-color: var(--color-purple);
 }
 
-#content {
-    background-color: var(--color-current-line);
-    padding: 10px;
-    border-radius: 20px;
-    margin-left: 10rem;
-    margin-right: 10rem;
-}
-
 .project_box {
     flex-direction: row;
     display: flex;
@@ -184,7 +229,7 @@ select {
 .spinNumber {
     margin: 2px;
     padding: 2px;
-    background-color: var(--color-purple);
+    border: 1px solid var(--color-purple);
     border-radius: 5px;
 }
 
@@ -193,3 +238,7 @@ select {
     flex-direction: row;
     gap: 4px;
 }
+
+#maxSpinInput {
+    width: 7rem;
+}
