feat: update navigation links and add new pages for improved user experience

- Change "Surprise :)" link to "Vibe check" across multiple HTML files for consistency and clarity.
- Add a new "about.html" page to provide information about the author.
- Introduce a new "quizz.html" page for user interaction and engagement.
- Create new project pages for "Lieutenant Champignon" and "Pong" to showcase additional projects.
- Remove outdated project pages and links to streamline the project section.
- Add new assets including images and PDFs to enhance content presentation.
- Update JavaScript functions for form validation and score calculation in the quizz page.
- Improve styling in CSS for better visual hierarchy and layout consistency.

TP3.html

@@ -13,7 +13,7 @@
                 <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="/quizz" class="header_button">Vibe check</a>
                 <a href="https://djalim.fr" class="header_button">Blog Perso</a>
             </div>
             <button

TP4.html

@@ -13,7 +13,7 @@
                 <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="/quizz" class="header_button">Vibe check</a>
                 <a href="https://djalim.fr" class="header_button">Blog Perso</a>
             </div>
             <button

TP5.html

@@ -17,7 +17,7 @@
                 <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="/quizz" class="header_button">Vibe check</a>
                 <a href="https://djalim.fr" class="header_button">Blog Perso</a>
             </div>
             <button

TP6.html

@@ -17,7 +17,7 @@
                 <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="/quizz" class="header_button">Vibe check</a>
                 <a href="https://djalim.fr" class="header_button">Blog Perso</a>
             </div>
             <button
@@ -46,10 +46,12 @@
             <div id="lastSpins"></div>
             <p id="spinCounter"></p>
             <div id="report">
+                <p id="nbq"></p>
                 <p id="winrate"></p>
                 <p id="winpercentage"></p>
                 <p id="gains"></p>
             </div>
+            <a href="/static/rapport.pdf" class="header_button">Rapport</a>
         </main>
 
         <footer>

about.html

@@ -12,7 +12,7 @@
                 <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="/quizz" class="header_button">Vibe check</a>
                 <a href="https://djalim.fr" class="header_button">Blog Perso</a>
             </div>
             <button
@@ -35,11 +35,19 @@
                 >
             </p>
             <br />
+            <a class="header_button" href="/static/CV 2025.pdf"
+                >CV format pdf</a
+            >
             <h2>Formation</h2>
             <ul>
                 <li>Bac : (2021) Bac General NSI_MATH</li>
                 <li>
-                    BUT : (2024) BUT informatique :Conception d’applications
+                    BUT Info Aix : (2024) BUT informatique :Conception
+                    d’applications
+                </li>
+                <li>
+                    Polytech Marseille : (2024-2027) Cycle ingenieur
+                    informatique
                 </li>
             </ul>
             <br />
@@ -49,6 +57,10 @@
                     Stage : (2018) DOSI -IUT Digne-les-Bains : Administrateur
                     réseaux et systèmes
                 </li>
+                <li>
+                    Stage : (2019) CYBERCAFE-Games Digne-les-Bains : Assemblage
+                    d'ordinateurs
+                </li>
                 <li>
                     Stage : (2023) INRAE - Le Tholonet : Développement de
                     logiciel d’aide à la recherche

blocs.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="fr">
     <head>
-        <title>Homepage</title>
+        <title>Flexbox blocs</title>
         <meta charset="UTF-8" />
         <link rel="stylesheet" href="/static/style.css" />
         <script src="/static/js/utils.js" defer></script>
@@ -12,7 +12,7 @@
                 <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="/quizz" class="header_button">Vibe check</a>
                 <a href="https://djalim.fr" class="header_button">Blog Perso</a>
             </div>
             <button

index.html

@@ -12,7 +12,7 @@
                 <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="/quizz" class="header_button">Vibe check</a>
                 <a href="https://djalim.fr" class="header_button">Blog Perso</a>
             </div>
             <button

projects.html

@@ -12,7 +12,7 @@
                 <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="/quizz" class="header_button">Vibe check</a>
                 <a href="https://djalim.fr" class="header_button">Blog Perso</a>
             </div>
             <button
@@ -40,7 +40,7 @@
 
             <a href="/TP5.html" class="box project">
                 <h2>TP5</h2>
-                <p>A groceery list that is stored in your browser</p>
+                <p>A grocery list that is stored in your browser</p>
             </a>
 
             <a href="/TP6.html" class="box project">
@@ -53,6 +53,18 @@
                 <p>A flexbox example</p>
             </a>
 
+            <a href="/projects/snake.html" class="box project">
+                <h2>Snake</h2>
+                <p>A snake game</p>
+            </a>
+
+            <a href="/projects/pong.html" class="box project">
+                <h2>Pong</h2>
+                <p>A pong game</p>
+            </a>
+
+            <hr />
+
             <div id="title">
                 <h1>Mes projets</h1>
             </div>
@@ -70,31 +82,13 @@
             </a>
             <a href="/projects/superspaceinvader.html" class="box project">
                 <h2>Super Space Invader</h2>
-                <p>A space invader made in C</p>
+                <p>A space invader made in C</p> </a
+            ><a href="/projects/lieutenantchampignon.html" class="box project">
+                <h2>Lieutenant Champignon</h2>
+                <p>A Captain Toad clone made in unity in five days</p>
             </a>
-            <a href="/projects/httpserver.html" class="box project">
+            <a href="https://git.djalim.fr/DjalimSimaila" class="box project">
-                <h2>Simple Http server</h2>
+                <h2>More Projects</h2>
-                <p>A work in progress lightweight HTTP server made in C++</p>
-            </a>
-            <a href="/projects/clipsync.html" class="box project">
-                <h2>ClipSync</h2>
-                <p>
-                    A linux deamon and an android app to sync clipboard beteen
-                    devices
-                </p>
-            </a>
-            <a href="/projects/truthinquiry.html" class="box project">
-                <h2>TruthInquiry</h2>
-                <p>
-                    A serious game made in Flask about facial expression and a
-                    murder
-                </p>
-            </a>
-            <a href="/projects/retrodb.html" class="box project">
-                <h2>The Great Retro library</h2>
-                <p>
-                    A website where you can play all your favorites retro games
-                </p>
             </a>
         </main>
 

projects/crazyspace.html

@@ -16,7 +16,7 @@
                 <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="/quizz" class="header_button">Vibe check</a>
                 <a href="https://djalim.fr" class="header_button">Blog Perso</a>
             </div>
             <button

projects/lieutenantchampignon.html

@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="fr">
+    <head>
+        <title>
+            Lieutenant Champignon - Super explorateur des Enfers - DeluXe Black
+            Edition VS Dark Roger
+        </title>
+        <meta charset="UTF-8" />
+        <link rel="stylesheet" href="/static/style.css" />
+        <script src="/static/js/utils.js" defer></script>
+        <link
+            rel="stylesheet"
+            href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
+        />
+    </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="/quizz" class="header_button">Vibe check</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>
+                Lieutenant Champignon - Super explorateur des Enfers - DeluXe
+                Black Edition VS Dark Roger Featuring "No One" from the serie My
+                Little Pony
+            </h1>
+            <img
+                src="/static/assets/images/lcsededbevdrfnoftsmlp.png"
+                style="width: 80%"
+            />
+            <p>
+                Lieutenant Champignon is a Captain Toad clone made in 5 days in
+                Unity for a Game Making course
+            </p>
+            <img src="/static/assets/images/Map.png" style="width: 80%" />
+            <a
+                href="
+                https://git.djalim.fr/DjalimSimaila/LieutenantChampignon"
+                ><u>source code</u></a
+            >
+        </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>

projects/pokemonkreteed.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="fr">
     <head>
-        <title>Crazy Space</title>
+        <title>Pokemon Kreye</title>
         <meta charset="UTF-8" />
         <link rel="stylesheet" href="/static/style.css" />
         <script src="/static/js/utils.js" defer></script>
@@ -9,14 +9,6 @@
             rel="stylesheet"
             href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
         />
-        <script language="javascript" defer>
-            function init() {
-                const iframe = document.getElementById("iframe");
-                const iframeContent = iframe.contentWindow.document;
-                iframeContent.body.getElementById("game").style.borderRadius =
-                    "10px";
-            }
-        </script>
     </head>
     <body>
         <header>
@@ -24,7 +16,7 @@
                 <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="/quizz" class="header_button">Vibe check</a>
                 <a href="https://djalim.fr" class="header_button">Blog Perso</a>
             </div>
             <button
@@ -49,23 +41,33 @@
                 WARNING THIS GAME WAS MADE BY A TEENAGER AT THE TIME, THE HUMOR
                 IS GROSS
             </h1>
-            <iframe
+            <div
-                src="https://retrodb.djalim.fr/emulator?rom_id=1&console_core=gba"
                 style="
-                    width: 600px;
+                    width: 584px;
-                    height: 496px;
+                    height: 480px;
-                    border: none;
+                    border-radius: 10px;
-                    & html body div div#game.ejs_parent {
+                    overflow: hidden;
-                        border-radius: 10px;
-                    }
                 "
-                id="iframe"
-                onload="init()"
-                allowfullscreen
-                title="Pokemon kreye edition player"
-                allow="web-share"
             >
-            </iframe>
+                <iframe
+                    src="https://retrodb.djalim.fr/emulator?rom_id=1&console_core=gba"
+                    style="
+                        width: 600px;
+                        height: 496px;
+                        position: relative;
+                        top: -8px;
+                        left: -8px;
+                        border: none;
+                        & html body div div#game.ejs_parent {
+                            border-radius: 10px;
+                        }
+                    "
+                    allowfullscreen
+                    title="Pokemon kreye edition player"
+                    allow="web-share"
+                >
+                </iframe>
+            </div>
         </main>
 
         <footer>

projects/pong.html

@@ -0,0 +1,255 @@
+<!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>
+        <script language="javascript" defer>
+            function getSinus(angle) {
+                return Math.sin(angle);
+            }
+
+            function getCosinus(angle) {
+                return Math.cos(angle);
+            }
+
+            class Player {
+                constructor(
+                    x,
+                    y,
+                    width,
+                    height,
+                    color,
+                    speed,
+                    upKey,
+                    downKey,
+                    canvas,
+                ) {
+                    this.x = x;
+                    this.y = y;
+                    this.width = width;
+                    this.height = height;
+                    this.color = color;
+                    this.speed = speed;
+                    this.upKey = upKey;
+                    this.downKey = downKey;
+                    this.movingUp = false;
+                    this.movingDown = false;
+                    this.points = 0;
+                    this.canvas = canvas;
+                }
+
+                draw(ctx) {
+                    ctx.fillStyle = this.color;
+                    ctx.fillRect(this.x, this.y, this.width, this.height);
+                }
+
+                moveUp() {
+                    this.y -= this.speed;
+                }
+                moveDown() {
+                    this.y += this.speed;
+                }
+                move() {
+                    if (this.movingUp && this.y > 0) {
+                        this.moveUp();
+                    }
+                    if (
+                        this.movingDown &&
+                        this.y < this.canvas.height - this.height
+                    ) {
+                        this.moveDown();
+                    }
+                }
+                updateKeys(event) {
+                    this.movingUp =
+                        event.key == this.upKey && event.type == "keydown";
+                    this.movingDown =
+                        event.key == this.downKey && event.type == "keydown";
+                }
+            }
+
+            class Ball {
+                constructor(x, y, radius, color, speed) {
+                    this.x = x;
+                    this.y = y;
+                    this.radius = radius;
+                    this.color = color;
+                    this.horizontal_speed = speed;
+                    this.vertical_speed = speed;
+                    this.default_speed = speed;
+                    this.angle = Math.random() * 2 * Math.PI;
+                }
+
+                reset() {
+                    this.angle = Math.random() * 2 * Math.PI;
+                    this.x = 450;
+                    this.y = 250;
+                    this.horizontal_speed = this.default_speed;
+                    this.vertical_speed = this.default_speed;
+                }
+
+                draw(ctx) {
+                    ctx.beginPath();
+                    ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
+                    ctx.fillStyle = this.color;
+                    ctx.fill();
+                }
+
+                move() {
+                    this.x += this.horizontal_speed * getCosinus(this.angle);
+                    this.y += this.vertical_speed * getSinus(this.angle);
+                }
+            }
+
+            class Game {
+                constructor(background_color, circle_color) {
+                    this.background_color = background_color;
+                    this.circle_color = circle_color;
+                    this.canvas = document.createElement("canvas");
+                    this.canvas.width = 900;
+                    this.canvas.height = 500;
+                    this.canvas.style.border = "5px solid #44475a";
+                    this.canvas.style.borderRadius = "10px";
+                    this.canvas.style.margin = "auto";
+                    this.canvas.style.display = "block";
+                    this.canvas.style.width = "70%";
+                    document.querySelector("main").appendChild(this.canvas);
+                    this.ctx = this.canvas.getContext("2d");
+                    this.ball = new Ball(450, 250, 20, this.circle_color, 3);
+                    this.Player1 = new Player(
+                        10,
+                        0,
+                        20,
+                        100,
+                        "white",
+                        3,
+                        "z",
+                        "s",
+                        this.canvas,
+                    );
+                    this.Player2 = new Player(
+                        870,
+                        0,
+                        20,
+                        100,
+                        "white",
+                        3,
+                        "ArrowUp",
+                        "ArrowDown",
+                        this.canvas,
+                    );
+                }
+
+                colorBackground() {
+                    this.ctx.fillStyle = this.background_color;
+                    this.ctx.fillRect(0, 0, 900, 500);
+                    this.ctx.fillStyle = "white";
+                    this.ctx.font = "30px Arial";
+                    this.ctx.fillText(this.Player1.points, 100, 50);
+                    this.ctx.fillText(this.Player2.points, 800, 50);
+                }
+
+                draw() {
+                    this.ball.draw(this.ctx);
+                    this.Player1.draw(this.ctx);
+                    this.Player2.draw(this.ctx);
+                }
+
+                colision() {
+                    // Player collisions
+                    if (
+                        this.ball.x + this.ball.radius >= this.Player2.x &&
+                        this.ball.y >= this.Player2.y &&
+                        this.ball.y <= this.Player2.y + this.Player2.height
+                    ) {
+                        this.ball.horizontal_speed *= -1.1;
+                    }
+
+                    if (
+                        this.ball.x - this.ball.radius <=
+                            this.Player1.x + this.Player1.width &&
+                        this.ball.y >= this.Player1.y &&
+                        this.ball.y <= this.Player1.y + this.Player1.height
+                    ) {
+                        this.ball.horizontal_speed *= -1.1;
+                    }
+                    // Wall collisions
+                    if (
+                        this.ball.x + this.ball.radius >= 900 ||
+                        this.ball.x - this.ball.radius <= 0
+                    ) {
+                        if (this.ball.x + this.ball.radius >= 900) {
+                            this.Player1.points += 1;
+                        } else {
+                            this.Player2.points += 1;
+                        }
+                        this.ball.reset();
+                    }
+                    if (
+                        this.ball.y + this.ball.radius >= 500 ||
+                        this.ball.y - this.ball.radius <= 0
+                    ) {
+                        this.ball.vertical_speed *= -1;
+                    }
+                }
+
+                step() {
+                    this.colorBackground();
+                    this.draw();
+                    this.ball.move();
+                    this.colision();
+                    this.Player1.move();
+                    this.Player2.move();
+                    //this.Player1.y = this.ball.y - this.Player1.height / 2;
+                    this.Player2.y = this.ball.y - this.Player2.height / 2;
+                }
+            }
+
+            function loadGame() {
+                const game = new Game("#282a36", "#6272a4");
+
+                document.addEventListener("keydown", function (event) {
+                    game.Player1.updateKeys(event);
+                    game.Player2.updateKeys(event);
+                });
+                document.addEventListener("keyup", function (event) {
+                    game.Player1.updateKeys(event);
+                    game.Player2.updateKeys(event);
+                });
+
+                setInterval(() => game.step(), 1);
+            }
+        </script>
+    </head>
+    <body onload="loadGame()">
+        <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="/quizz" class="header_button">Vibe check</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>
+            <p>Left player: z to go up and s to go down</p>
+        </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>

projects/pycord.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="fr">
     <head>
-        <title>Crazy Space</title>
+        <title>Pycord</title>
         <meta charset="UTF-8" />
         <link rel="stylesheet" href="/static/style.css" />
         <script src="/static/js/utils.js" defer></script>
@@ -16,7 +16,7 @@
                 <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="/quizz" class="header_button">Vibe check</a>
                 <a href="https://djalim.fr" class="header_button">Blog Perso</a>
             </div>
             <button
@@ -34,7 +34,10 @@
                 <br />
                 It uses npyscreen as a tui library and Mysql as a database.
             </p>
-            <a>source code</a>
+            <img src="/static/assets/images/pycord menu.png" />
+            <a href="https://git.djalim.fr/DjalimSimaila/Pycord"
+                ><u>source code</u></a
+            >
         </main>
 
         <footer>

projects/script.js

@@ -0,0 +1,175 @@
+function getSinus(angle) {
+    return Math.sin(angle);
+}
+
+function getCosinus(angle) {
+    return Math.cos(angle);
+}
+
+class Player {
+    constructor(x, y, width, height, color, speed, upKey, downKey) {
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+        this.color = color;
+        this.speed = speed;
+        this.upKey = upKey;
+        this.downKey = downKey;
+        this.points = 0;
+    }
+
+    draw(ctx) {
+        ctx.fillStyle = this.color;
+        ctx.fillRect(this.x, this.y, this.width, this.height);
+    }
+
+    moveUp() {
+        this.y -= this.speed;
+    }
+    moveDown() {
+        this.y += this.speed;
+    }
+    move(event) {
+        if (event.key == this.upKey) {
+            this.moveUp();
+        }
+        if (event.key == this.downKey) {
+            this.moveDown();
+        }
+    }
+}
+
+class Ball {
+    constructor(x, y, radius, color, speed) {
+        this.x = x;
+        this.y = y;
+        this.radius = radius;
+        this.color = color;
+        this.horizontal_speed = speed;
+        this.vertical_speed = speed;
+        this.angle = Math.random() * 2 * Math.PI;
+    }
+
+    reset() {
+        this.angle = Math.random() * 2 * Math.PI;
+        this.x = 450;
+        this.y = 250;
+        this.horizontal_speed = 5;
+        this.vertical_speed = 5;
+    }
+
+    draw(ctx) {
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
+        ctx.fillStyle = this.color;
+        ctx.fill();
+    }
+
+    move() {
+        this.x += this.horizontal_speed * getCosinus(this.angle);
+        this.y += this.vertical_speed * getSinus(this.angle);
+    }
+}
+
+class Game {
+    constructor(background_color, circle_color) {
+        this.background_color = background_color;
+        this.circle_color = circle_color;
+        this.canvas = document.createElement("canvas");
+        this.canvas.width = 900;
+        this.canvas.height = 500;
+        this.canvas.style.border = "5px solid #44475a";
+        this.canvas.style.borderRadius = "10px";
+        this.canvas.style.margin = "auto";
+        this.canvas.style.display = "block";
+        this.canvas.style.width = "70%";
+        document.body.appendChild(this.canvas);
+        this.ctx = this.canvas.getContext("2d");
+        this.ball = new Ball(450, 250, 20, this.circle_color, 5);
+        this.Player1 = new Player(10, 0, 20, 100, "white", 15, "z", "s");
+        this.Player2 = new Player(
+            870,
+            0,
+            20,
+            100,
+            "white",
+            15,
+            "ArrowUp",
+            "ArrowDown"
+        );
+    }
+
+    colorBackground() {
+        this.ctx.fillStyle = this.background_color;
+        this.ctx.fillRect(0, 0, 900, 500);
+        this.ctx.fillStyle = "white";
+        this.ctx.font = "30px Arial";
+        this.ctx.fillText(this.Player1.points, 100, 50);
+        this.ctx.fillText(this.Player2.points, 800, 50);
+    }
+
+    draw() {
+        this.ball.draw(this.ctx);
+        this.Player1.draw(this.ctx);
+        this.Player2.draw(this.ctx);
+    }
+
+    colision() {
+        // Player collisions
+        if (
+            this.ball.x + this.ball.radius >= this.Player2.x &&
+            this.ball.y >= this.Player2.y &&
+            this.ball.y <= this.Player2.y + this.Player2.height
+        ) {
+            this.ball.horizontal_speed *= -1;
+        }
+
+        if (
+            this.ball.x - this.ball.radius <=
+                this.Player1.x + this.Player1.width &&
+            this.ball.y >= this.Player1.y &&
+            this.ball.y <= this.Player1.y + this.Player1.height
+        ) {
+            this.ball.horizontal_speed *= -1;
+        }
+        // Wall collisions
+        if (
+            this.ball.x + this.ball.radius >= 900 ||
+            this.ball.x - this.ball.radius <= 0
+        ) {
+            if (this.ball.x + this.ball.radius >= 900) {
+                this.Player1.points += 1;
+            } else {
+                this.Player2.points += 1;
+            }
+            this.ball.reset();
+        }
+        if (
+            this.ball.y + this.ball.radius >= 500 ||
+            this.ball.y - this.ball.radius <= 0
+        ) {
+            this.ball.vertical_speed *= -1;
+        }
+    }
+
+    step() {
+        this.colorBackground();
+        this.draw();
+        this.ball.move();
+        this.colision();
+        this.Player1.y = this.ball.y - this.Player1.height / 2;
+        this.Player2.y = this.ball.y - this.Player2.height / 2;
+    }
+}
+
+const game = new Game("#282a36", "#6272a4");
+
+document.addEventListener("keypress", function (event) {
+    game.Player1.move(event);
+});
+document.addEventListener("keydown", function (event) {
+    game.Player2.move(event);
+});
+
+setInterval(() => game.step(), 1);

projects/snake.html

@@ -0,0 +1,231 @@
+<!doctype html>
+<body style="background-color: #282a36; margin: 0; width: 100vw; height: 100vh">
+    <h2
+        id="status"
+        style="
+            color: white;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+        "
+    ></h2>
+    <canvas
+        style="
+            border-radius: 10px;
+            display: flex;
+            margin: auto;
+            width: 100%;
+            height: 100%;
+        "
+        id="canvas"
+    ></canvas>
+</body>
+<script>
+    class Game {
+        constructor() {
+            const { width, height } = document
+                .getElementById("canvas")
+                .getBoundingClientRect();
+            document.getElementById("canvas").setAttribute("width", width);
+            document.getElementById("canvas").setAttribute("height", height);
+            this.boxSize = 15;
+            this.canvasWidth = width;
+            this.canvasHeight = height;
+            this.p = 0;
+            this.score = 0;
+            this.board = new Board(
+                this.canvasWidth,
+                this.canvasHeight,
+                this.boxSize,
+                this.p,
+            );
+            this.snake = new Snake(0, 0);
+            this.apple = new Apple(0, 0);
+            this.gridWidth = this.canvasWidth / this.boxSize;
+            this.gridHeight = this.canvasHeight / this.boxSize;
+            this.LastInput = "ArrowDown";
+            this.input = "ArrowDown";
+        }
+
+        init() {
+            let x = Math.floor(Math.random() * this.gridWidth);
+            let y = Math.floor(Math.random() * this.gridHeight);
+            this.apple.position = [x, y];
+            this.board.drawBoard();
+            document.addEventListener("keydown", (event) => {
+                const keyName = event.key;
+                if (
+                    keyName === "ArrowUp" ||
+                    keyName === "ArrowDown" ||
+                    keyName === "ArrowLeft" ||
+                    keyName === "ArrowRight"
+                ) {
+                    this.input = keyName;
+                }
+            });
+            this.update();
+        }
+
+        computeMovement(keypressed) {
+            this.snake.tail.push(this.snake.head);
+            if (
+                (keypressed === "ArrowUp" && this.LastInput == "ArrowDown") ||
+                (keypressed === "ArrowDown" && this.LastInput == "ArrowUp") ||
+                (keypressed === "ArrowLeft" &&
+                    this.LastInput == "ArrowRight") ||
+                (keypressed === "ArrowRight" && this.LastInput == "ArrowLeft")
+            ) {
+                keypressed = this.LastInput;
+            } else {
+                this.LastInput = keypressed;
+            }
+            switch (keypressed) {
+                case "ArrowUp":
+                    this.snake.head = [
+                        this.snake.head[0],
+                        this.snake.head[1] - 1,
+                    ];
+                    break;
+                case "ArrowDown":
+                    this.snake.head = [
+                        this.snake.head[0],
+                        this.snake.head[1] + 1,
+                    ];
+                    break;
+                case "ArrowLeft":
+                    this.snake.head = [
+                        this.snake.head[0] - 1,
+                        this.snake.head[1],
+                    ];
+                    break;
+                case "ArrowRight":
+                    this.snake.head = [
+                        this.snake.head[0] + 1,
+                        this.snake.head[1],
+                    ];
+                    break;
+                default:
+                    console.log("Should not happen");
+                    break;
+            }
+            if (
+                this.snake.head[0] >= this.gridWidth ||
+                this.snake.head[0] < 0 ||
+                this.snake.head[1] >= this.gridHeight ||
+                this.snake.head[1] < 0
+            )
+                this.dead = true;
+
+            this.snake.tail.forEach((box) => {
+                if (
+                    box[0] === this.snake.head[0] &&
+                    box[1] === this.snake.head[1]
+                ) {
+                    this.dead = true;
+                }
+            });
+
+            if (
+                this.snake.head[0] === this.apple.position[0] &&
+                this.snake.head[1] === this.apple.position[1]
+            ) {
+                this.snake.tailLenght++;
+                this.score++;
+                let x = Math.floor(Math.random() * this.gridWidth);
+                let y = Math.floor(Math.random() * this.gridHeight);
+                this.apple.position = [x, y];
+            }
+
+            while (this.snake.tail.length > this.snake.tailLenght) {
+                this.snake.tail.shift(0);
+            }
+        }
+
+        update() {
+            this.computeMovement(this.input);
+            this.board.clear();
+            //this.board.drawScore(this.score);
+            this.board.drawSnake(this.snake);
+            this.board.drawApple(this.apple);
+            this.board.drawBoard();
+            if (!this.dead)
+                setTimeout(() => {
+                    this.update();
+                }, 100);
+            else {
+                document.getElementById("status").textContent =
+                    "PERDU, n'hesite pas a recommencer :)";
+            }
+        }
+    }
+
+    class Apple {
+        constructor(x, y) {
+            this.color = "#6272a4";
+            this.position = [x, y];
+        }
+    }
+
+    class Snake {
+        constructor(x, y) {
+            this.color = "#bd93f9";
+            this.head = [x, y];
+            this.tailLenght = 1;
+            this.tail = [[x, y]];
+        }
+    }
+
+    class Board {
+        constructor(canvasWidth, canvasHeight, boxSize, padding) {
+            this.canvasWidth = canvasWidth;
+            this.canvasHeight = canvasHeight;
+            this.boxSize = boxSize;
+            this.p = padding;
+            this.canvas = document.getElementById("canvas");
+            this.context = canvas.getContext("2d");
+        }
+        clear() {
+            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        }
+        drawBoard() {
+            for (let x = 0; x <= this.canvasWidth; x += this.boxSize) {
+                this.context.moveTo(0 + x + this.p, this.p);
+                this.context.lineTo(0 + x + this.p, this.canvasHeight + this.p);
+            }
+
+            for (let x = 0; x <= this.canvasHeight; x += this.boxSize) {
+                this.context.moveTo(this.p, 0 + x + this.p);
+                this.context.lineTo(this.canvasWidth + this.p, 0 + x + this.p);
+            }
+            this.context.strokeStyle = "#44475a";
+            this.context.stroke();
+        }
+        fillBox(x, y, color) {
+            this.context.fillStyle = color;
+            this.context.fillRect(
+                x * this.boxSize + this.p,
+                y * this.boxSize + this.p,
+                this.boxSize,
+                this.boxSize,
+            );
+        }
+        drawScore(score) {
+            this.context.font = "200px serif";
+            this.context.strokeText(score, 280, 370);
+        }
+        drawApple(apple) {
+            this.fillBox(apple.position[0], apple.position[1], apple.color);
+        }
+        drawSnake(snake) {
+            this.fillBox(snake.head[0], snake.head[1], snake.color);
+            snake.tail.forEach((box) => {
+                this.fillBox(box[0], box[1], snake.color);
+            });
+        }
+    }
+
+    g = new Game();
+    g.init();
+</script>

projects/superspaceinvader.html

@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="fr">
+    <head>
+        <title>Super Space Invader : Turbo Apocalypse DELUXE VS. GOD</title>
+        <meta charset="UTF-8" />
+        <link rel="stylesheet" href="/static/style.css" />
+        <script src="/static/js/utils.js" defer></script>
+        <link
+            rel="stylesheet"
+            href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
+        />
+    </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="/quizz" class="header_button">Vibe check</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>Super Space Invader : Turbo Apocalypse DELUXE VS. GOD</h1>
+            <img src="/static/assets/images/ssitadvg.png" style="width: 80%" />
+            Super space invader : tadbvs is a space invader clone made in C++
+            and mingl as a graphic library
+            <p>
+                <br />
+                It has a two sets of sprites and features God, He break the
+                fourth wall and sends aliens straight at you.
+            </p>
+            <img src="/static/assets/images/mainMenu.png" />
+            <img src="/static/assets/images/gameplay.png" />
+            <a
+                href="https://git.djalim.fr/DjalimSimaila/SuperSpaceInvaderTurboApocalypseVsGOD"
+                ><u>source code</u></a
+            >
+        </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>

quizz.html

@@ -0,0 +1,102 @@
+<!doctype html>
+<html lang="fr">
+    <head>
+        <title>Quizz</title>
+        <meta charset="UTF-8" />
+        <link rel="stylesheet" href="/static/style.css" />
+        <script src="/static/js/utils.js" defer></script>
+        <link
+            rel="stylesheet"
+            href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
+        />
+    </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="/quizz" class="header_button">Vibe check</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>Vibe Check</h1>
+            <form name="vibe" action="javascript:;" onsubmit="validate()">
+                <p>First you need to introduce yourself</p>
+                <label for="fname">First name:</label>
+                <input type="text" id="fname" name="fname" /><br />
+                <label for="lname">Last name:</label>
+                <input type="text" id="lname" name="lname" /><br />
+                <label for="birth">birthdate:</label>
+                <input type="text" id="birth" name="birth" /><br />
+                <label for="email">email:</label>
+                <input type="text" id="email" name="email" /><br />
+                <label for="phone">phone number:</label>
+                <input type="text" id="phone" name="phone" /><br />
+                <p>Now, answer thoses questions</p>
+                <label for="os-select">What's your os ?</label>
+                <select name="os-select" id="os-select">
+                    <option value="linux">Linux based os</option>
+                    <option value="windows">Windows</option>
+                    <option value="macos">MacOs</option>
+                    <option value="god's os">TempleOs</option>
+                    <option value="tetrisos">TetrisOs</option>
+                </select>
+                <br />
+                <p>Who created Minecraft ?</p>
+                <input type="radio" id="db" name="mc_creator" value="db" />
+                <label for="html">DinnerBone</label><br />
+                <input type="radio" id="jeb" name="mc_creator" value="jeb" />
+                <label for="css">Jeb</label><br />
+                <input
+                    type="radio"
+                    id="notch"
+                    name="mc_creator"
+                    value="notch"
+                />
+                <label for="css">Notch</label><br />
+                <input type="radio" id="miku" name="mc_creator" value="miku" />
+                <label for="javascript">Hatsune Miku</label>
+                <br />
+                <br />
+                <label for="phone">What is the best vocaloid song</label><br />
+                <input type="text" id="voca" name="voca" /><br />
+                <label for="phone">What is your worth in euro</label><br />
+                <input type="number" id="worth" name="worth" />
+                <br /><br />
+                <a class="header_button" href="https://humainavendre.com/"
+                    >Calculate it here</a
+                >
+                <br />
+                <label for="sns-select">Best social media app ?</label>
+                <select name="sns-select" id="sns-select">
+                    <option value="Twitter">Twitter</option>
+                    <option value="X">X</option>
+                    <option value="Facebook">Facebook</option>
+                    <option value="My Space">Myspace</option>
+                    <option value="Club Pinguin">Club Pinguin</option>
+                    <option value="TikTok">TikTok</option></select
+                ><br />
+                <button type="submit" value="Submit">
+                    Pass the vibe check
+                </button>
+            </form>
+        </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>

static/js/TP6.js

@@ -149,6 +149,7 @@ function processSpin() {
       delete qualifyingNumbers[number];
     }
   }
+  console.log(spinArray[currentSpin]);
   console.log(potentialQualifyingNumbers);
   console.log(qualifyingNumbers);
   console.log(winingNumbers);
@@ -183,7 +184,10 @@ function showReport() {
     gains += number[1];
   });
 
-  document.getElementById("winrate").textContent = winrate;
+  document.getElementById("nbq").textContent =
-  document.getElementById("winpercentage").textContent = winpercentage;
+    "Number of qualifying numbers : " + numberOfQualifying;
+  document.getElementById("winrate").textContent = "wirate : " + winrate;
+  document.getElementById("winpercentage").textContent =
+    "win percentage : " + winpercentage;
   document.getElementById("gains").textContent = gains;
 }

static/js/utils.js

@@ -13,3 +13,66 @@ function toggle_all_header_links() {
     ? "▲"
     : "▼";
 }
+
+function validate() {
+  let fname = document.getElementById("fname").value.trim();
+  let lname = document.getElementById("lname").value.trim();
+  let birth = document.getElementById("birth").value.trim();
+  let email = document.getElementById("email").value.trim();
+  let phone = document.getElementById("phone").value.trim();
+  let mcCreator = document.querySelector("input[name='mc_creator']:checked");
+  let worth = document.getElementById("worth").value.trim();
+
+  let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  let phonePattern = /^\+?[0-9]{7,15}$/;
+  let birthPattern = /^(\d{4})-(\d{2})-(\d{2})$/; // Format YYYY-MM-DD
+
+  if (fname === "" || lname === "") {
+    alert("First name and last name are required.");
+    return;
+  }
+
+  if (!birthPattern.test(birth)) {
+    alert("Please enter a valid birthdate in YYYY-MM-DD format.");
+    return;
+  }
+
+  if (!emailPattern.test(email)) {
+    alert("Please enter a valid email address.");
+    return;
+  }
+
+  if (!phonePattern.test(phone)) {
+    alert("Please enter a valid phone number.");
+    return;
+  }
+
+  if (!mcCreator) {
+    alert("Please select the creator of Minecraft.");
+    return;
+  }
+
+  if (worth === "" || isNaN(worth) || worth < 0) {
+    alert("Please enter a valid worth in euros.");
+    return;
+  }
+  calculateScore();
+}
+function calculateScore() {
+  let score = 0;
+  let os = document.getElementById("os-select").value;
+  let mcCreator = document.querySelector(
+    "input[name='mc_creator']:checked",
+  ).value;
+  let voca = document.getElementById("voca").value.trim().toLowerCase();
+  let worth = parseFloat(document.getElementById("worth").value);
+  let sns = document.getElementById("sns-select").value;
+
+  if (os === "linux") score += 1;
+  if (mcCreator === "miku") score += 1;
+  if (voca === "electric angel") score += 1;
+  if (worth > 5000000) score += 1;
+  if (sns === "Twitter") score += 1;
+
+  alert("Your score is: " + score + "/5");
+}

static/style.css

@@ -38,6 +38,14 @@ ul {
     }
 }
 
+hr {
+    margin: 1rem 0;
+    border: none;
+    border-top: solid 1px var(--color-text);
+    min-width: 80px;
+    width: 80%;
+}
+
 body {
     color: var(--color-text);
     display: flex;