diff --git a/Accueil.html b/Accueil.html
new file mode 100644
index 0000000000000000000000000000000000000000..85a2f03c5c4333eabbd9b3bf440ed941771f04fb
--- /dev/null
+++ b/Accueil.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Alexandre DEHAINE</title>
+ <link rel="stylesheet" href="carroussel.css">
+</head>
+<header>
+ <div class="site-name">
+ <h1>Alexandre DEHAINE</h1>
+ </div>
+ </header>
+<body>
+
+ <!-- Barre de navigation -->
+ <nav class="navbar">
+ <ul>
+ <li><a href="Accueil.html">Accueil</a></li>
+ <li><a href="Formations.html#">Formations</a></li>
+ <li><a href="Skills.html">Skills</a></li>
+ <li><a href="Experiences.html">Expériences et projets perso</a></li>
+ <li><a href="Loisirs.html">Loisirs</a></li>
+ </ul>
+ </nav>
+
+ <main>
+ <img
+ class="poster_photo"
+ src="./Images/Accueil/Picture.png"
+ alt="Photo"
+ />
+ <p class="intro">
+ Etudiant de 20, passioné par l'informatique depuis 10 ans, je suis en BUT Informatique à l'Université de Lille.
+ </p>
+</body>
+</html>
diff --git a/Experiences.html b/Experiences.html
new file mode 100644
index 0000000000000000000000000000000000000000..96b15f3799ef96898f178ece986de92b2ef44cb6
--- /dev/null
+++ b/Experiences.html
@@ -0,0 +1,196 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Alexandre DEHAINE</title>
+ <link rel="stylesheet" href="carroussel.css">
+</head>
+<header>
+ <div class="site-name">
+ <h1>Alexandre DEHAINE</h1>
+ </div>
+ </header>
+<body>
+
+ <!-- Barre de navigation -->
+ <nav class="navbar">
+ <ul>
+ <li><a href="Accueil.html">Accueil</a></li>
+ <li><a href="Formations.html#">Formations</a></li>
+ <li><a href="Skills.html">Skills</a></li>
+ <li><a href="Experiences.html">Expériences et projets perso</a></li>
+ <li><a href="Loisirs.html">Loisirs</a></li>
+ </ul>
+ </nav>
+
+ <main>
+ <div class="text-container">
+ <p><a href="https://gitlab.univ-lille.fr/alexandre.dehaine.etu/sae-1.01-implementation" target="_blank">SAÉ 1.01 : Implémentation d'un besoin client</a></p>
+ <p>Le but de cette SAÉ est de créer un générateur de site web statique en iJava. Il fallait donc automatiser la créations de pages avec un format précis, ainsi que l’importation des données qui servent à remplir ces pages. Le format des pages ainsi que les méthodes à utiliser étaient imposé par le client, il fallait donc également respecter le cahier des charges.</p>
+ </div>
+ <div class="carousel-container" id="carousel1">
+ <button class="prev" onclick="prevSlide(0)">❮</button>
+ <div class="carousel">
+ <img class="carousel-image" src="./Images/Experiences/E1.1.png" alt="Image 1">
+ <img class="carousel-image" src="./Images/Experiences/E1.2.png" alt="Image 2">
+ <img class="carousel-image" src="./Images/Experiences/E1.3.png" alt="Image 3">
+ </div>
+ <button class="next" onclick="nextSlide(0)">❯</button>
+ </div>
+ <div class="dots-container" id="dots1">
+ <span class="dot" onclick="goToSlide(0, 0)"></span>
+ <span class="dot" onclick="goToSlide(1, 0)"></span>
+ <span class="dot" onclick="goToSlide(2, 0)"></span>
+ </div>
+
+ <div class="text-container">
+ <p><a href="https://gitlab.univ-lille.fr/florian.gambirasio.etu/Labyrinthe-Perdu" target="_blank">SAÉ 1.02 : Comparaisons d'algorithmes</a></p>
+ <p>Le but de cette SAÉ est de crée un Logiciel ludo-pédagogique pour élèves de primaire, donc un jeu solo tour par tour, d’énigmes non mathématique et de niveau primaire.
+ Nous avons opté pour un jeu dans lequel le joueur se déplacerai dans un Labyrinthe, en combattant des monstres (en répondant à des questions), jusqu’à vaincre le boss.
+ Je me suis chargé, entre autres mais majoritairement, de la génération aléatoire du Labyrinthe. J’ai opté pour un assemblage aléatoire fini de salles pré-définies, pérennant un Labyrinthe différant à chaque partie mais toujours facile à aborder et également moins complexe à programmer qu’une génération procédurale (totalement aléatoire et infinie).</p>
+ </div>
+ <div class="carousel-container" id="carousel2">
+ <button class="prev" onclick="prevSlide(1)">❮</button>
+ <div class="carousel">
+ <img class="carousel-image" src="./Images/Experiences/E2.1.png" alt="Image 1">
+ <img class="carousel-image" src="./Images/Experiences/E2.2.png" alt="Image 2">
+ </div>
+ <button class="next" onclick="nextSlide(1)">❯</button>
+ </div>
+ <div class="dots-container" id="dots2">
+ <span class="dot" onclick="goToSlide(0, 1)"></span>
+ <span class="dot" onclick="goToSlide(1, 1)"></span>
+ </div>
+
+ <div class="text-container">
+ <p><a href="https://gitlab.univ-lille.fr/alexandre.dehaine.etu/sae-1.05-1.06-rdb-ee-site" target="_blank">SAÉ 1.05 - 1.06 : Recueil des besoins / Découverte de l’environnement économique </a></p>
+ <p>Le but de cette SAÉ était de crée une extension du site web d’une entreprise choisie. On devait créer une ou plusieurs pages reprenant la DA (direction artistique) du site original pour apporter à l’entreprise un service de covoiturage pour les employé afin d’aider la démarche RSE de l’entreprise. Nous avons donc crée un maquette du site puis 11 pages d’extension pour la société Air Liquide. Sur ces pages, nous pouvions lire et comprendre les démarches du projet, louer un véhicule, proposer un véhicule à la location, voir et gérer ses rendez-vous et réservations lorsque connecté ainsi que contacter l’entreprise et accéder aux conditions d’utilisation du service.</p>
+ </div>
+ <div class="carousel-container" id="carousel3">
+ <button class="prev" onclick="prevSlide(2)">❮</button>
+ <div class="carousel">
+ <img class="carousel-image" src="./Images/Experiences/E3.1.png" alt="Image 1">
+ <img class="carousel-image" src="./Images/Experiences/E3.2.png" alt="Image 2">
+ <img class="carousel-image" src="./Images/Experiences/E3.3.png" alt="Image 3">
+ <img class="carousel-image" src="./Images/Experiences/E3.4.png" alt="Image 4">
+ </div>
+ <button class="next" onclick="nextSlide(2)">❯</button>
+ </div>
+ <div class="dots-container" id="dots3">
+ <span class="dot" onclick="goToSlide(0, 2)"></span>
+ <span class="dot" onclick="goToSlide(1, 2)"></span>
+ <span class="dot" onclick="goToSlide(2, 2)"></span>
+ <span class="dot" onclick="goToSlide(3, 2)"></span>
+ </div>
+
+ <div class="text-container">
+ <p><a href="https://gitlab.univ-lille.fr/sae2.01-2.02/2024/C6" target="_blank">SAÉ 2.01+2.02 : Développement d'une application et exploration algorithmique</a></p>
+ <p>Le but de cette SAÉ était de crée un logiciel qui permet à l’utilisateur de trouver le chemin idéal pour aller d’un point A à un point B en suivant au mieux les critères fournis, c’est à dire : le temps, la consommation de CO2 et le prix. Elle comprend donc trois parties : le logiciel, l’interface et les graphes.
+ Il faut que l’application soit efficace, pratique et intuitive. Le SAÉ n’est pas encore fini à ce stade mais j’ai développer quelques fonctions qui permettent d’importer des données depuis un CSV en ressources utilisables par les autre fonction, j’ai également fais le diagramme UML, le graphe ainsi que les fichiers CSV respectant des normes strictes pour que les données soit facilement importé dans les fonctions mentionnées ci-dessus.</p>
+ </div>
+ <div class="carousel-container" id="carousel4">
+ <button class="prev" onclick="prevSlide(3)">❮</button>
+ <div class="carousel">
+ <img class="carousel-image" src="./Images/Experiences/E4.1.png" alt="Image 1">
+ <img class="carousel-image" src="./Images/Experiences/E4.2.png" alt="Image 2">
+ </div>
+ <button class="next" onclick="nextSlide(3)">❯</button>
+ </div>
+ <div class="dots-container" id="dots4">
+ <span class="dot" onclick="goToSlide(0, 3)"></span>
+ <span class="dot" onclick="goToSlide(1, 3)"></span>
+ </div>
+
+ <div class="text-container">
+ <p><a href="https://gitlab.univ-lille.fr/2024-projet-agile-de-rentree/groupe-13" target="_blank">Projet Agile : Infinite Dungeons</a></p>
+ <p>Le but de ce projet était de développer une petite application, ici un jeu, en java en une semaine en suivant la méthode agile. Nous avons réalisé le jeu Infinite Dungeons, un jeu dont le but est d’avancé le plus loin possible dans une succession de combats infini.</p>
+ </div>
+ <div class="carousel-container" id="carousel5">
+ <button class="prev" onclick="prevSlide(4)">❮</button>
+ <div class="carousel">
+ <img class="carousel-image" src="./Images/Experiences/E5.1.png" alt="Image 1">
+ <img class="carousel-image" src="./Images/Experiences/E5.2.png" alt="Image 2">
+ <img class="carousel-image" src="./Images/Experiences/E5.3.png" alt="Image 3">
+ <img class="carousel-image" src="./Images/Experiences/E5.4.png" alt="Image 4">
+ <img class="carousel-image" src="./Images/Experiences/E5.5.png" alt="Image 5">
+ <img class="carousel-image" src="./Images/Experiences/E5.6.png" alt="Image 6">
+ </div>
+ <button class="next" onclick="nextSlide(4)">❯</button>
+ </div>
+ <div class="dots-container" id="dots5">
+ <span class="dot" onclick="goToSlide(0, 4)"></span>
+ <span class="dot" onclick="goToSlide(1, 4)"></span>
+ <span class="dot" onclick="goToSlide(2, 4)"></span>
+ <span class="dot" onclick="goToSlide(3, 4)"></span>
+ <span class="dot" onclick="goToSlide(4, 4)"></span>
+ <span class="dot" onclick="goToSlide(5, 4)"></span>
+ </div>
+
+ <div class="text-container">
+ <p><a href="https://gitlab.univ-lille.fr/sae302/2024/G1_SAE3.3" target="_blank">SAÉ 3.02 Développement d'application d'apprentissage supervisé</a></p>
+ <p>Le but de cette SAE était de mettre en place l'organisation d’un projet et de créer, en équipe, une application en suivant une démarche de développement itérative et incrémentale (algo K-NN). En partant d'un besoin décrit de manière imprécise ou incomplète par un client, l'objectif était de clarifier, compléter, collecter et formaliser le besoin, puis de développer une application communicante intégrant la manipulation des données et respectant les paradigmes de qualité (ergonomie des IHM, qualité logicielle…).</p>
+ </div>
+ <div class="carousel-container" id="carousel6">
+ <button class="prev" onclick="prevSlide(5)">❮</button>
+ <div class="carousel">
+ <img class="carousel-image" src="./Images/Experiences/E6.1.png" alt="Image 1">
+ <img class="carousel-image" src="./Images/Experiences/E6.2.png" alt="Image 2">
+ <img class="carousel-image" src="./Images/Experiences/E6.3.png" alt="Image 3">
+ </div>
+ <button class="next" onclick="nextSlide(5)">❯</button>
+ </div>
+ <div class="dots-container" id="dots6">
+ <span class="dot" onclick="goToSlide(0, 5)"></span>
+ <span class="dot" onclick="goToSlide(1, 5)"></span>
+ <span class="dot" onclick="goToSlide(2, 5)"></span>
+ </div>
+
+ <div class="text-container">
+ <p><a href="https://gitlab.univ-lille.fr/alexandre.dehaine.etu/sae-r4.01" target="_blank">SAÉ S4.A02.1 : Web Backend</a></p>
+ <p>L’objectif de cette SAÉ consistait à réaliser une petite application web de réseau social nommée CampusTalk permettant à chaque utilisateur de créer des fils de discussion avec une ou plusieurs personnes, de poster des messages textuels dans les différents fils, et de lire les messages des autres abonnés au même fil.</p>
+ </div>
+ <div class="carousel-container" id="carousel7">
+ <button class="prev" onclick="prevSlide(6)">❮</button>
+ <div class="carousel">
+ <img class="carousel-image" src="./Images/Experiences/E7.1.png" alt="Image 1">
+ <img class="carousel-image" src="./Images/Experiences/E7.2.png" alt="Image 2">
+ <img class="carousel-image" src="./Images/Experiences/E7.3.png" alt="Image 3">
+ </div>
+ <button class="next" onclick="nextSlide(6)">❯</button>
+ </div>
+ <div class="dots-container" id="dots7">
+ <span class="dot" onclick="goToSlide(0, 6)"></span>
+ <span class="dot" onclick="goToSlide(1, 6)"></span>
+ <span class="dot" onclick="goToSlide(2, 6)"></span>
+ </div>
+
+ <div class="text-container">
+ <p><a href="https://steamcommunity.com/sharedfiles/filedetails/?id=2903207756" target="_blank">Projet Personel : Terraria One Piece Mod</a></p>
+ <p>J’ai rejoint ce projet en janvier 2022 mais il existe depuis décembre 2022. C’est un Mod (contenu additionnel d’un jeu vidéo crée par la communauté) visant à amener l’univers du manga One Piece dans le jeu vidéo Terraria. Nous somme 3 à travailler dessus : Minion, le créateur originel du mod, Jacsmith, qui à rejoint peu après, et moi. Le projet n’est pas open source il n’est donc pas possible de voir le code pour le moment. </p>
+ </div>
+ <div class="carousel-container" id="carousel8">
+ <button class="prev" onclick="prevSlide(7)">❮</button>
+ <div class="carousel">
+ <img class="carousel-image" src="./Images/Experiences/E8.1.png" alt="Image 1">
+ <img class="carousel-image" src="./Images/Experiences/E8.2.png" alt="Image 2">
+ <img class="carousel-image" src="./Images/Experiences/E8.3.png" alt="Image 3">
+ <img class="carousel-image" src="./Images/Experiences/E8.4.gif" alt="Image 4">
+ </div>
+ <button class="next" onclick="nextSlide(7)">❯</button>
+ </div>
+ <div class="dots-container" id="dots8">
+ <span class="dot" onclick="goToSlide(0, 7)"></span>
+ <span class="dot" onclick="goToSlide(1, 7)"></span>
+ <span class="dot" onclick="goToSlide(2, 7)"></span>
+ </div>
+ </main>
+
+ <!-- Pied de page -->
+ <footer class="footer">
+ <p>© 2025 Nihon no Monogatari. Tous droits réservés.</p>
+ </footer>
+
+ <script src="carrousel.js"></script>
+</body>
+</html>
diff --git a/Formations.html b/Formations.html
new file mode 100644
index 0000000000000000000000000000000000000000..a992072f00e02ef9a9cad17008b23155b8cfa8b1
--- /dev/null
+++ b/Formations.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Alexandre DEHAINE</title>
+ <link rel="stylesheet" href="carroussel.css">
+</head>
+<header>
+ <div class="site-name">
+ <h1>Alexandre DEHAINE</h1>
+ </div>
+ </header>
+<body>
+
+ <!-- Barre de navigation -->
+ <nav class="navbar">
+ <ul>
+ <li><a href="Accueil.html">Accueil</a></li>
+ <li><a href="Formations.html#">Formations</a></li>
+ <li><a href="Skills.html">Skills</a></li>
+ <li><a href="Experiences.html">Expériences et projets perso</a></li>
+ <li><a href="Loisirs.html">Loisirs</a></li>
+ </ul>
+ </nav>
+
+ <main>
+ <!-- Premier carrousel -->
+ <div class="carousel-container" id="carousel1">
+ <button class="prev" onclick="prevSlide(0)">❮</button>
+ <div class="carousel">
+ <img class="carousel-image" src="image1.jpg" alt="Image 1">
+ <img class="carousel-image" src="image2.jpg" alt="Image 2">
+ <img class="carousel-image" src="image3.jpg" alt="Image 3">
+ </div>
+ <button class="next" onclick="nextSlide(0)">❯</button>
+ </div>
+ <div class="dots-container" id="dots1">
+ <span class="dot" onclick="goToSlide(0, 0)"></span>
+ <span class="dot" onclick="goToSlide(1, 0)"></span>
+ <span class="dot" onclick="goToSlide(2, 0)"></span>
+ </div>
+
+ <!-- Zone de texte -->
+ <div class="text-container">
+ <p>Bienvenue dans notre galerie d'images ! Découvrez nos magnifiques paysages à travers ces carrousels.</p>
+ </div>
+
+ <!-- Deuxième carrousel -->
+ <div class="carousel-container" id="carousel2">
+ <button class="prev" onclick="prevSlide(1)">❮</button>
+ <div class="carousel">
+ <img class="carousel-image" src="image4.jpg" alt="Image 4">
+ <img class="carousel-image" src="image5.jpg" alt="Image 5">
+ <img class="carousel-image" src="image6.jpg" alt="Image 6">
+ </div>
+ <button class="next" onclick="nextSlide(1)">❯</button>
+ </div>
+ <div class="dots-container" id="dots2">
+ <span class="dot" onclick="goToSlide(0, 1)"></span>
+ <span class="dot" onclick="goToSlide(1, 1)"></span>
+ <span class="dot" onclick="goToSlide(2, 1)"></span>
+ </div>
+ </main>
+
+ <!-- Pied de page -->
+ <footer class="footer">
+ <p>© 2025 Nihon no Monogatari. Tous droits réservés.</p>
+ </footer>
+
+ <script src="carrousel.js"></script>
+</body>
+</html>
diff --git a/Images/Accueil/Picture.png b/Images/Accueil/Picture.png
new file mode 100644
index 0000000000000000000000000000000000000000..35d9e48a30bbdf2d4e31dc9468e76241382108a2
Binary files /dev/null and b/Images/Accueil/Picture.png differ
diff --git a/Images/Experiences/E1.1.png b/Images/Experiences/E1.1.png
new file mode 100644
index 0000000000000000000000000000000000000000..adf555b68440a5fab2b1336f9c9992f35713f863
Binary files /dev/null and b/Images/Experiences/E1.1.png differ
diff --git a/Images/Experiences/E1.2.png b/Images/Experiences/E1.2.png
new file mode 100644
index 0000000000000000000000000000000000000000..4f15e677d244f0d6c96133d266aa87193b25e382
Binary files /dev/null and b/Images/Experiences/E1.2.png differ
diff --git a/Images/Experiences/E1.3.png b/Images/Experiences/E1.3.png
new file mode 100644
index 0000000000000000000000000000000000000000..cf54bbf096e42716066eeac570eeb620e70d550c
Binary files /dev/null and b/Images/Experiences/E1.3.png differ
diff --git a/Images/Experiences/E2.1.png b/Images/Experiences/E2.1.png
new file mode 100644
index 0000000000000000000000000000000000000000..0c975c883e29239fbf9e5025becc3c5e5223020c
Binary files /dev/null and b/Images/Experiences/E2.1.png differ
diff --git a/Images/Experiences/E2.2.png b/Images/Experiences/E2.2.png
new file mode 100644
index 0000000000000000000000000000000000000000..e20d7c827857f297fd467e3dcb4381a20d3c6880
Binary files /dev/null and b/Images/Experiences/E2.2.png differ
diff --git a/Images/Experiences/E3.1.png b/Images/Experiences/E3.1.png
new file mode 100644
index 0000000000000000000000000000000000000000..230b56d53fb6d2ec5c6b7f34d5fa6518d68f8ccc
Binary files /dev/null and b/Images/Experiences/E3.1.png differ
diff --git a/Images/Experiences/E3.2.png b/Images/Experiences/E3.2.png
new file mode 100644
index 0000000000000000000000000000000000000000..131ca40dcb81ac6b21725aedbd2a9f09f111d0d3
Binary files /dev/null and b/Images/Experiences/E3.2.png differ
diff --git a/Images/Experiences/E3.3.png b/Images/Experiences/E3.3.png
new file mode 100644
index 0000000000000000000000000000000000000000..2df262b5c8fb586712842005bff95f76c0926181
Binary files /dev/null and b/Images/Experiences/E3.3.png differ
diff --git a/Images/Experiences/E3.4.png b/Images/Experiences/E3.4.png
new file mode 100644
index 0000000000000000000000000000000000000000..975fee67659c10d1521c8138ed522dcca3455303
Binary files /dev/null and b/Images/Experiences/E3.4.png differ
diff --git a/Images/Experiences/E4.1.png b/Images/Experiences/E4.1.png
new file mode 100644
index 0000000000000000000000000000000000000000..97502cc9b63a1f1eb2862521372240cbe3861cd0
Binary files /dev/null and b/Images/Experiences/E4.1.png differ
diff --git a/Images/Experiences/E4.2.png b/Images/Experiences/E4.2.png
new file mode 100644
index 0000000000000000000000000000000000000000..ee119d9c5e8beb640c1a11c3b5221225f36bca5d
Binary files /dev/null and b/Images/Experiences/E4.2.png differ
diff --git a/Images/Experiences/E5.1.png b/Images/Experiences/E5.1.png
new file mode 100644
index 0000000000000000000000000000000000000000..a47218f2812a7aba345335481b77e8b308675545
Binary files /dev/null and b/Images/Experiences/E5.1.png differ
diff --git a/Images/Experiences/E5.2.png b/Images/Experiences/E5.2.png
new file mode 100644
index 0000000000000000000000000000000000000000..a6309d6d2b96390eeaf49f77dbbb4a78e0312287
Binary files /dev/null and b/Images/Experiences/E5.2.png differ
diff --git a/Images/Experiences/E5.3.png b/Images/Experiences/E5.3.png
new file mode 100644
index 0000000000000000000000000000000000000000..d6ecdf18176f044454bc993cdb90aec694f6b7d1
Binary files /dev/null and b/Images/Experiences/E5.3.png differ
diff --git a/Images/Experiences/E5.4.png b/Images/Experiences/E5.4.png
new file mode 100644
index 0000000000000000000000000000000000000000..f1379dc91416527ef2c0ea48c94acc9fd8c4937f
Binary files /dev/null and b/Images/Experiences/E5.4.png differ
diff --git a/Images/Experiences/E5.5.png b/Images/Experiences/E5.5.png
new file mode 100644
index 0000000000000000000000000000000000000000..1eedb8bde832bdad4c34e88bc32d07b8fde0ce00
Binary files /dev/null and b/Images/Experiences/E5.5.png differ
diff --git a/Images/Experiences/E5.6.png b/Images/Experiences/E5.6.png
new file mode 100644
index 0000000000000000000000000000000000000000..e965720ebe0e7d47a712a803cbef6ce5c85d0cac
Binary files /dev/null and b/Images/Experiences/E5.6.png differ
diff --git a/Images/Experiences/E6.1.png b/Images/Experiences/E6.1.png
new file mode 100644
index 0000000000000000000000000000000000000000..e11c56859bd704b74e2d2fae489f4639e9a66cab
Binary files /dev/null and b/Images/Experiences/E6.1.png differ
diff --git a/Images/Experiences/E6.2.png b/Images/Experiences/E6.2.png
new file mode 100644
index 0000000000000000000000000000000000000000..97c05e8ef76f62c5ce7b4e41b282b437d8e19116
Binary files /dev/null and b/Images/Experiences/E6.2.png differ
diff --git a/Images/Experiences/E6.3.png b/Images/Experiences/E6.3.png
new file mode 100644
index 0000000000000000000000000000000000000000..5ceeb14eeca098d2fdfdaeef66d65dca19e86e7c
Binary files /dev/null and b/Images/Experiences/E6.3.png differ
diff --git a/Images/Experiences/E7.1.png b/Images/Experiences/E7.1.png
new file mode 100644
index 0000000000000000000000000000000000000000..cdd8ed6b6f07c15c1a7ad06e9a35162483eba153
Binary files /dev/null and b/Images/Experiences/E7.1.png differ
diff --git a/Images/Experiences/E7.2.png b/Images/Experiences/E7.2.png
new file mode 100644
index 0000000000000000000000000000000000000000..458cb907785bd6ad4d091a343e433d63f4f731ba
Binary files /dev/null and b/Images/Experiences/E7.2.png differ
diff --git a/Images/Experiences/E7.3.png b/Images/Experiences/E7.3.png
new file mode 100644
index 0000000000000000000000000000000000000000..5cd04005c17ba02940784964f9af4ab74913ae6d
Binary files /dev/null and b/Images/Experiences/E7.3.png differ
diff --git a/Images/Experiences/E8.1.png b/Images/Experiences/E8.1.png
new file mode 100644
index 0000000000000000000000000000000000000000..4dc3de287409f02632547224703d11f78ede9b80
Binary files /dev/null and b/Images/Experiences/E8.1.png differ
diff --git a/Images/Experiences/E8.2.png b/Images/Experiences/E8.2.png
new file mode 100644
index 0000000000000000000000000000000000000000..6bd423e566780fb5f61eac963fe2a1d7894fffc7
Binary files /dev/null and b/Images/Experiences/E8.2.png differ
diff --git a/Images/Experiences/E8.3.png b/Images/Experiences/E8.3.png
new file mode 100644
index 0000000000000000000000000000000000000000..83ccc90a8825388ed12ed9b8882daec33375b41b
Binary files /dev/null and b/Images/Experiences/E8.3.png differ
diff --git a/Images/Experiences/E8.4.gif b/Images/Experiences/E8.4.gif
new file mode 100644
index 0000000000000000000000000000000000000000..00ef5c307c40b40aa74e4f14304f2050c01ac502
Binary files /dev/null and b/Images/Experiences/E8.4.gif differ
diff --git a/Images/Loisirs/Anime.png b/Images/Loisirs/Anime.png
new file mode 100644
index 0000000000000000000000000000000000000000..0edef2808aaa3010d8a2cac7336e1e0762706032
Binary files /dev/null and b/Images/Loisirs/Anime.png differ
diff --git a/Images/Loisirs/Basketball.png b/Images/Loisirs/Basketball.png
new file mode 100644
index 0000000000000000000000000000000000000000..595b2c3d05315ffbeee22181d07e1f2a9a1a2f1e
Binary files /dev/null and b/Images/Loisirs/Basketball.png differ
diff --git a/Images/Loisirs/Clap.png b/Images/Loisirs/Clap.png
new file mode 100644
index 0000000000000000000000000000000000000000..54d2b6239f899e089aa96b1d226dd50ae5307442
Binary files /dev/null and b/Images/Loisirs/Clap.png differ
diff --git a/Images/Loisirs/Controller.png b/Images/Loisirs/Controller.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2f0820f0157933d75e156c8fee6ec21c3287d08
Binary files /dev/null and b/Images/Loisirs/Controller.png differ
diff --git a/Images/Loisirs/Keyboard.png b/Images/Loisirs/Keyboard.png
new file mode 100644
index 0000000000000000000000000000000000000000..d5b0971838ff365e56e78a75813d35b108b477a1
Binary files /dev/null and b/Images/Loisirs/Keyboard.png differ
diff --git a/Images/Skills/C.png b/Images/Skills/C.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc7dbd7ba43b533f4ea3b90b70e8339c4431a134
Binary files /dev/null and b/Images/Skills/C.png differ
diff --git a/Images/Skills/CSS.png b/Images/Skills/CSS.png
new file mode 100644
index 0000000000000000000000000000000000000000..81bb9cf0d5ef71927d0b01ad5e6f5c13fe089f98
Binary files /dev/null and b/Images/Skills/CSS.png differ
diff --git a/Images/Skills/CSharp.png b/Images/Skills/CSharp.png
new file mode 100644
index 0000000000000000000000000000000000000000..b20b31c0370731dffb29e219872463e684084187
Binary files /dev/null and b/Images/Skills/CSharp.png differ
diff --git a/Images/Skills/HTML.png b/Images/Skills/HTML.png
new file mode 100644
index 0000000000000000000000000000000000000000..ac7d5637155d4ece6f82150ed737dc278a630269
Binary files /dev/null and b/Images/Skills/HTML.png differ
diff --git a/Images/Skills/Java.png b/Images/Skills/Java.png
new file mode 100644
index 0000000000000000000000000000000000000000..9c67246d450bd5891caf64d9754acbd6f52458c6
Binary files /dev/null and b/Images/Skills/Java.png differ
diff --git a/Images/Skills/TOEIC.png b/Images/Skills/TOEIC.png
new file mode 100644
index 0000000000000000000000000000000000000000..118c58b8b2af6b67cd591dc0f2fc9c086f113bba
Binary files /dev/null and b/Images/Skills/TOEIC.png differ
diff --git a/Loisirs.html b/Loisirs.html
new file mode 100644
index 0000000000000000000000000000000000000000..ce031d76b0de6c5b269d2a4ae559914c3e976d4c
--- /dev/null
+++ b/Loisirs.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Alexandre DEHAINE</title>
+ <link rel="stylesheet" href="carroussel.css">
+</head>
+<header>
+ <div class="site-name">
+ <h1>Alexandre DEHAINE</h1>
+ </div>
+ </header>
+<body>
+
+ <!-- Barre de navigation -->
+ <nav class="navbar">
+ <ul>
+ <li><a href="Accueil.html">Accueil</a></li>
+ <li><a href="Formations.html#">Formations</a></li>
+ <li><a href="Skills.html">Skills</a></li>
+ <li><a href="Experiences.html">Expériences et projets perso</a></li>
+ <li><a href="Loisirs.html">Loisirs</a></li>
+ </ul>
+ </nav>
+
+ <main>
+ <table width="100%" style="padding-left: 20%; padding-right: 20%; padding-top: 10%;">
+ <tr>
+ <th><img src="./Images/Loisirs/Keyboard.png" alt="Java" width="40%"/></th>
+ <th><img src="./Images/Loisirs/Basketball.png" alt="Java" width="40%"/></th>
+ <th><img src="./Images/Loisirs/Controller.png" alt="Java" width="40%"/></th>
+ <th><img src="./Images/Loisirs/Clap.png" alt="Java" width="40%"/></th>
+ <th><img src="./Images/Loisirs/Anime.png" alt="Java" width="40%"/></th>
+ </tr>
+ <tr>
+ <td style="text-align: center;">Dévellopements de jeux vidéo et mods</td>
+ <td style="text-align: center;">Basketball</td>
+ <td style="text-align: center;">Jeux vidéo</td>
+ <td style="text-align: center;">Films et séries</td>
+ <td style="text-align: center;">Mangas et Animés</td>
+ </tr>
+ </table>
+ </main>
+</body>
+</html>
diff --git a/Skills.html b/Skills.html
new file mode 100644
index 0000000000000000000000000000000000000000..d65c06f4d52dab751513daf433ca8a07bf5acfa0
--- /dev/null
+++ b/Skills.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Alexandre DEHAINE</title>
+ <link rel="stylesheet" href="carroussel.css">
+</head>
+<header>
+ <div class="site-name">
+ <h1>Alexandre DEHAINE</h1>
+ </div>
+ </header>
+<body>
+ <nav class="navbar">
+ <ul>
+ <li><a href="Accueil.html">Accueil</a></li>
+ <li><a href="Formations.html#">Formations</a></li>
+ <li><a href="Skills.html">Skills</a></li>
+ <li><a href="Experiences.html">Expériences et projets perso</a></li>
+ <li><a href="Loisirs.html">Loisirs</a></li>
+ </ul>
+</nav>
+ <style>
+ /* Container for the images */
+ .image-row {
+ display: flex;
+ justify-content: space-between; /* Adjust space between images */
+ gap: 20px; /* Optional: space between images */
+ padding: 10%;
+ padding-top: 5%;
+ }
+
+ /* Style for individual images */
+ .image-row img {
+ width: 150px; /* Set a fixed width for the images */
+ transition: transform 0.3s ease; /* Smooth transition for scaling effect */
+ }
+
+ /* Hover effect: scale the image when hovered */
+ .image-row img:hover {
+ transform: scale(1.2); /* Increase the size of the image on hover */
+ }
+
+ </style>
+ <main>
+ <div class="image-row">
+ <img src="./Images/Skills/Java.png" alt="Java" class="hardJava"/>
+ <img src="./Images/Skills/HTML.png" alt="HTML"/>
+ <img src="./Images/Skills/CSS.png" alt="CSS"/>
+ <img src="./Images/Skills/C.png" alt="C"/>
+ <img src="./Images/Skills/CSharp.png" alt="C#"/>
+ <img src="./Images/Skills/TOEIC.png" alt="Toeic"/>
+ </div>
+ </main>
+</body>
+</html>
diff --git a/carrousel.js b/carrousel.js
new file mode 100644
index 0000000000000000000000000000000000000000..3b2642ed68a17c8a08095b076c43f4db13cbdc08
--- /dev/null
+++ b/carrousel.js
@@ -0,0 +1,45 @@
+let carousels = [
+ { index: 0, slides: [], dots: [] },
+ { index: 0, slides: [], dots: [] },
+ { index: 0, slides: [], dots: [] },
+ { index: 0, slides: [], dots: [] },
+ { index: 0, slides: [], dots: [] },
+ { index: 0, slides: [], dots: [] },
+ { index: 0, slides: [], dots: [] },
+ { index: 0, slides: [], dots: [] }
+];
+
+function initializeCarousels() {
+ for (let i = 0; i < carousels.length; i++) {
+ carousels[i].slides = document.querySelectorAll(`#carousel${i + 1} .carousel-image`);
+ carousels[i].dots = document.querySelectorAll(`#dots${i + 1} .dot`);
+ updateCarousel(i);
+ }
+}
+
+function updateCarousel(carouselIndex) {
+ const offset = -carousels[carouselIndex].index * 100;
+ document.querySelector(`#carousel${carouselIndex + 1} .carousel`).style.transform = `translateX(${offset}%)`;
+ carousels[carouselIndex].dots.forEach(dot => dot.classList.remove("active"));
+ carousels[carouselIndex].dots[carousels[carouselIndex].index].classList.add("active");
+}
+
+function nextSlide(carouselIndex) {
+ carousels[carouselIndex].index = (carousels[carouselIndex].index + 1) % carousels[carouselIndex].slides.length;
+ updateCarousel(carouselIndex);
+}
+
+function prevSlide(carouselIndex) {
+ carousels[carouselIndex].index = (carousels[carouselIndex].index - 1 + carousels[carouselIndex].slides.length) % carousels[carouselIndex].slides.length;
+ updateCarousel(carouselIndex);
+}
+
+function goToSlide(index, carouselIndex) {
+ carousels[carouselIndex].index = index;
+ updateCarousel(carouselIndex);
+}
+
+setInterval(() => nextSlide(0), 8000); // Défilement automatique du premier carrousel toutes les 8 secondes
+setInterval(() => nextSlide(1), 8000); // Défilement automatique du deuxième carrousel toutes les 8 secondes
+
+initializeCarousels();
diff --git a/carroussel.css b/carroussel.css
new file mode 100644
index 0000000000000000000000000000000000000000..371ecbb4e95c0d9472332233febc66528e6296ef
--- /dev/null
+++ b/carroussel.css
@@ -0,0 +1,263 @@
+body {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ background: linear-gradient(135deg, #e3f2f1, #b0bec5); /* Dégradé de bleu clair et gris clair */
+ font-family: 'Poppins', sans-serif;
+}
+
+/* Ajout d'un effet de texture subtile */
+body::before {
+ content: "";
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: url('texture.png') repeat;
+ opacity: 0.05;
+ z-index: -1;
+}
+
+/* Header */
+header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 20px 40px;
+ background-color: rgba(60, 60, 60, 0.8); /* Fond gris foncé avec transparence */
+ position: relative;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ z-index: 10;
+}
+
+/* Logo */
+.logo-container {
+ flex: 1;
+}
+
+.logo {
+ width: 60px;
+ height: auto;
+ transition: transform 0.3s ease;
+}
+
+.logo:hover {
+ transform: scale(1.1);
+}
+
+/* Nom du site */
+.site-name {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.site-name h1 {
+ font-size: 2rem;
+ color: #F1F8E9; /* Blanc cassé */
+ margin: 0;
+ font-family: 'Roboto', sans-serif;
+ letter-spacing: 2px;
+}
+
+/* Container pour le bouton "Se connecter" */
+.login-container {
+ flex-shrink: 0;
+}
+
+/* Bouton Se connecter */
+.login-button {
+ background-color: #455a64; /* Gris bleu foncé */
+ color: #fff;
+ padding: 10px 15px;
+ border-radius: 10px;
+ transition: all 0.3s ease;
+ font-family: 'Roboto', sans-serif;
+}
+
+.login-button:hover {
+ background-color: #607d8b; /* Gris bleu clair */
+ border-color: #607d8b;
+}
+
+/* Barre de navigation modernisée */
+.navbar {
+ background: rgba(255, 255, 255, 0.6);
+ background: linear-gradient(135deg, rgba(38, 50, 56, 0.9), rgba(96, 125, 139, 0.9)); /* Dégradé bleu-gris */
+ padding: 10px 0;
+ position: sticky;
+ top: 0;
+ z-index: 10;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ border-bottom-left-radius: 50px;
+ border-bottom-right-radius: 50px;
+ margin-bottom: 0;
+ margin-top: 0;
+}
+
+.navbar ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.navbar ul li {
+ margin: 0 20px;
+}
+
+.navbar ul li a {
+ text-decoration: none;
+ color: #F1F8E9;
+ font-size: 18px;
+ padding: 10px 15px;
+ position: relative;
+ font-family: 'Roboto', sans-serif;
+ transition: all 0.3s ease;
+}
+
+.navbar ul li a:hover {
+ color: #81c784; /* Vert clair */
+ transform: scale(1.1);
+}
+
+.navbar ul li a::after {
+ content: "";
+ position: absolute;
+ bottom: -5px;
+ left: 0;
+ width: 100%;
+ height: 2px;
+ background-color: #80cbc4; /* Bleu clair */
+ transform: scaleX(0);
+ transform-origin: bottom right;
+ transition: transform 0.25s ease-out;
+}
+
+.navbar ul li a:hover::after {
+ transform: scaleX(1);
+ transform-origin: bottom left;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+ .navbar ul {
+ flex-direction: column;
+ }
+
+ .navbar ul li {
+ margin: 10px 0;
+ }
+}
+
+/* Effet verre dépoli pour les sections */
+main, .text-container {
+ padding: 20px;
+ backdrop-filter: blur(10px);
+ flex: 1;
+ padding: 40px 0;
+}
+
+/* Carrousel */
+.carousel-container {
+ position: relative;
+ width: 600px; /* Largeur du conteneur */
+ margin: auto;
+ overflow: hidden;
+ margin-bottom: 40px;
+}
+
+.carousel-container img {
+ width: 100%; /* L'image s'adapte à la largeur du conteneur */
+ height: 100%; /* L'image s'adapte à la hauteur du conteneur */
+ object-fit: contain; /* L'image conserve son rapport d'aspect sans déformation */
+ object-position: center; /* Centrer l'image si elle est plus petite que le conteneur */
+ margin: 0 auto;
+ display: block;
+ flex: 0 0 auto;
+}
+
+.carousel {
+ display: flex;
+ transition: transform 0.5s ease-in-out;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+
+.prev, .next {
+ z-index: 10;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ background-color: rgba(0, 0, 0, 0.5);
+ color: #F1F8E9;
+ border: none;
+ cursor: pointer;
+ padding: 5px;
+ font-size: 20px;
+ border-radius: 50%;
+ width: 30px;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.prev { left: 10px; }
+.next { right: 10px; }
+
+.dots-container {
+ text-align: center;
+ margin-top: 10px;
+}
+
+.dot {
+ height: 10px;
+ width: 10px;
+ margin: 5px;
+ background-color: lightgray;
+ border-radius: 50%;
+ display: inline-block;
+ cursor: pointer;
+}
+
+.dot.active {
+ background-color: gray;
+}
+
+/* Style de la zone de texte */
+.text-container {
+ text-align: center;
+ margin: 20px auto;
+ width: 60%;
+ font-size: 18px;
+ color: #455a64; /* Gris bleu foncé */
+}
+
+/* Pied de page */
+.footer {
+ background-color: #455a64;
+ color: #F1F8E9;
+ text-align: center;
+ padding: 15px 0;
+ margin-top: 40px;
+}
+
+.poster_photo {
+ float: right;
+ margin-left: 30px;
+ padding-right: 10%;
+}
+
+.intro{
+ padding-left: 20% ;
+}
\ No newline at end of file