diff --git a/README.md b/README.md
deleted file mode 100644
index 13811c6..0000000
--- a/README.md
+++ /dev/null
@@ -1,25 +0,0 @@
-[![Build Status](https://codefirst.iut.uca.fr/api/badges/thibaud.la_riviere-gillet/portfoli/status.svg)](https://codefirst.iut.uca.fr/thibaud.la_riviere-gillet/portfoli)  
-
-# portfolio
-
-# Mon Portfolio
-
-Ce dépôt a pour objectif final de contenir et de mettre à jour mon portfolio. Vous pouvez y accéder en utilisant la commande git clone. 
-
-## Utilisation
-
-Je vous conseille de commencer par lire la page d'accueil du wiki, qui explique les spécificités de ce rendu. Ensuite, examinez dans l'ordre le contexte, les personas ainsi que les user stories de 1 à 3. Étudiez le diagramme de flux pour comprendre la démarche suivie. Enfin, examinez l'interprétation graphique que j'ai faite de ce portfolio avec la maquette.
-
-Une fois que vous aurez accompli toutes ces étapes, vous pourrez visiter mon portfolio et en comprendre entièrement l'utilisation.
-
-
-## BUG connnu 
-
-CV.css n'affiche pas le cv
-Me.md doit etre definis 
-Mont-blanc_LDA ne fonctionne pas
-si vous trouvez les differentes erreures, veuillez m'en informer 
-
-## Auteurs
-
-Thibaud La Riviere
diff --git a/caps_presentation/SAE_1.02.png b/caps_presentation/SAE_1.02.png
deleted file mode 100644
index 9431f69..0000000
Binary files a/caps_presentation/SAE_1.02.png and /dev/null differ
diff --git a/caps_presentation/a_propos_de_moi.png b/caps_presentation/a_propos_de_moi.png
deleted file mode 100644
index 235da12..0000000
Binary files a/caps_presentation/a_propos_de_moi.png and /dev/null differ
diff --git a/css/About/main_about.css b/css/About/main_about.css
deleted file mode 100644
index 0f7d620..0000000
--- a/css/About/main_about.css
+++ /dev/null
@@ -1,56 +0,0 @@
-#files_about 
-{
-    display: flex;
-}
-
-#About
-{
-    background-color: #173964;
-}
-
-#About:hover #files_about
-{
-    display: flex;
-}
-
-.repertory-box:hover #About
-{
-    background-color: rgba(36, 36, 36, 0.80);
-}
-
-.repertory-box:hover #files_about{
-    display: none;
-}
-
-.cv a
-{
-    color: rgb(215, 130, 100, 1.0);
-}
-
-.cv p 
-{
-    padding-left: 15%;
-}
-
-.cv h1, .cv h3 
-{
-    color: rgb(227, 140, 98, 1.0);
-}
-
-
-.cv mark, date 
-{
-    color: rgb(157, 241, 240, 1.0);
-}
-
-date 
-{
-    position: absolute;
-    font-weight: bold;
-    right: 10%;
-}
-
-.cv
-{
-    background-image: url('../../pictures/back_md.jpg');
-}
\ No newline at end of file
diff --git a/css/About/style_cv.css.css b/css/About/style_cv.css.css
deleted file mode 100644
index e69de29..0000000
diff --git a/css/About/style_img.jpg.css b/css/About/style_img.jpg.css
deleted file mode 100644
index 3702060..0000000
--- a/css/About/style_img.jpg.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.cv img
-{
-    float: right;
-    width: 19%;
-}
\ No newline at end of file
diff --git a/css/Contact/main_contact.css b/css/Contact/main_contact.css
deleted file mode 100644
index d67bd6e..0000000
--- a/css/Contact/main_contact.css
+++ /dev/null
@@ -1,24 +0,0 @@
-#files_contact
-{
-    display: flex;
-}
-
-#Contact
-{
-    background-color: #173964;
-}
-
-#Contact:hover #files_contact
-{
-    display: flex;
-}
-
-.repertory-box:hover #Contact
-{
-    background-color: rgba(36, 36, 36, 0.80);
-}
-
-.repertory-box:hover #files_contact
-{
-    display: none;
-}
\ No newline at end of file
diff --git a/css/Contact/style_Plus.html.css b/css/Contact/style_Plus.html.css
deleted file mode 100644
index 344092f..0000000
--- a/css/Contact/style_Plus.html.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.galerie-container 
-{
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    margin: 20px;
-}
-
-.galerie 
-{
-    text-decoration: none;
-    margin: 10px;
-    text-align: center;
-}
-
-.galerie img 
-{
-    width: 200px;
-    height: 200px;
-    object-fit: cover;
-    cursor: pointer;
-}
-
-.galerie:hover:after 
-{
-    content: attr(title);
-    color: #FFF;
-}
-
-.galerie .image {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-}
diff --git a/css/Contact/style_me.md.css b/css/Contact/style_me.md.css
deleted file mode 100644
index 9b07b1d..0000000
--- a/css/Contact/style_me.md.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.me 
-{
-	background-color: black;
-}
\ No newline at end of file
diff --git a/css/Projects/main_projects.css b/css/Projects/main_projects.css
deleted file mode 100644
index 7d8f735..0000000
--- a/css/Projects/main_projects.css
+++ /dev/null
@@ -1,30 +0,0 @@
-#files_projects 
-{
-    display: flex;
-}
-
-#Projects
-{
-    background-color: #173964;
-}
-
-#Projects:hover #files_projects
-{
-    display: flex;
-}
-
-.repertory-box:hover #Projects
-{
-    background-color: rgba(36, 36, 36, 0.80);
-}
-
-.repertory-box:hover #files_projects{
-    display: none;
-}
-
-.mont_blanc img, .forty-two img
-{
-    float: right;
-    padding-right: 10%;
-    width: 30%;
-}
\ No newline at end of file
diff --git a/css/Projects/style_Maquette.html.css b/css/Projects/style_Maquette.html.css
deleted file mode 100644
index db7e932..0000000
--- a/css/Projects/style_Maquette.html.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.Maquette mark
-{
-    color: indianred;
-}
-
-.indentation0
-{
-    padding-left: 0px;
-}
-
-.indentation1
-{
-    padding-left: 60px;
-}
-
-.indentation2
-{
-    padding-left: 120px;
-}
-
-.indentation3
-{
-    padding-left: 180px;
-}
-
-
-.Maquette
-{
-    background-image: url('../../pictures/back_md.jpg');
-}
diff --git a/css/Projects/style_Mont-blanc_LDA.css b/css/Projects/style_Mont-blanc_LDA.css
deleted file mode 100644
index 02f7fba..0000000
--- a/css/Projects/style_Mont-blanc_LDA.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.mont_blanc
-{
-    background-color: black;
-}
-
-@media screen and (min-width: 900px)
-{
-    .mont_blanc
-    {
-        height: auto;
-        bottom: auto;
-    }
-}
diff --git a/css/Projects/style_ft_42.c.css b/css/Projects/style_ft_42.c.css
deleted file mode 100644
index 2a8f545..0000000
--- a/css/Projects/style_ft_42.c.css
+++ /dev/null
@@ -1,31 +0,0 @@
-.forty-two h1, .forty-two h2, .forty-two strong, .forty-two em
-{
-    opacity: 80%;
-}
-
-.forty-two h3 
-{
-    color: rgb(150, 190, 150, 1.0);
-}
-
-.forty-two mark 
-{
-    color: rgb(157, 241, 240, 1.0);
-}
-
-function
-{
-    color: #A73964;
-    font-weight: bold;
-}
-
-.forty-two img
-{
-    opacity: 80%;
-}
-
-.forty-two
-{
-    background-image: url('../../pictures/back_c.jpg');
-}
-
diff --git a/css/fonts.css b/css/fonts.css
deleted file mode 100644
index d411627..0000000
--- a/css/fonts.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.readme a, .readme em
-{
-    color: rgb(215, 130, 100, 1.0);
-}
-
-.readme p 
-{
-    padding-left: 15%;
-}
-
-
-.readme strong
-{
-    color: rgb(195, 155, 100, 1.0);
-}
-
-
-.readme mark 
-{
-    color: rgb(100, 135, 200, 1.0);
-}
-
diff --git a/css/style.css b/css/style.css
index d69874a..8160aaf 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,231 +1,159 @@
-body 
-{
-    background: #011C2D;
-    margin: 0;
-    min-height: 100vh
-}
-
-.container
-{
-    color: #FFF;
-    padding-left: 5%;
-}
-
-a
-{
-    text-decoration: none;
-}
-
-mark
-{
-    background: transparent;
-}
-
-#pion_container
-{
-    display: none;
+header .cv-container {
+    position: relative;
+    right: 25%; 
+    transform: translateX(50%);
 }
 
-#pion_repertory
-{
-    width: 50px;
+#cv-download-button {
+    padding: 8px 15px;
+    background: #FFF;
+    color: #173964;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
 }
 
-.pictures
-{
-    position: absolute;
-    bottom: 0px;
-    padding-left: 1%;
-    width: 64%;
-    z-index: 0;
+#cv-download-button:hover {
+    background: #1A4D7B;
+    color: #FFF;
 }
 
-.pictures_files:after 
-{
-    content: attr(title);
+/* Autres styles */
+body {
+    background: #011C2D;
+    margin: 0;
+    min-height: 100vh;
+    font-family: Arial, sans-serif;
+    display: flex;
+    flex-direction: column;
     color: #FFF;
 }
 
-.readme 
-{
-    background-image: url('../pictures/back_md.jpg');
+header {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    box-shadow: none;
+    border-bottom: none;
+    width: 100%;
 }
 
+header nav {
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
 
-header nav
-{
+header .explorer-box {
     display: flex;
-    height: 250px;
-    width: 600px;
-    position: relative;
-    top: 50px;
-    left: 60px;
-    background: #173964;
+    width: 500px;
+    height: 200px;
+    border: 1px solid #FFF;
     border-radius: 10px;
     overflow: hidden;
-    border-style: groove;
-    border-width: 2px;
-    box-shadow: 3px;
+    background: #173964;
 }
 
-header .repertory-box 
-{
-    flex: 0 0 170; 
-    height: 100%;
-    border-radius: 10px;
-    background-color: rgba(36, 36, 36, 0.80);
+header .left-pane {
+    background: #2A2A2A;
+    padding: 10px;
+    width: 100px;
 }
 
-header .repertory-box ul 
-{
+header .right-pane {
+    background: #173964;
+    padding: 10px;
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    overflow-y: auto; 
+}
+
+header .left-pane ul, header .right-pane ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
-header .repertory-box a 
-{
-    display: block;
-    padding: 8px;
-    padding-right: 40px;
-    padding-left: 40px;
+header .left-pane li, header .right-pane li {
+    margin: 5px;
+}
+
+header .left-pane a, header .right-pane a {
     text-decoration: none;
     color: #FFF;
+    padding: 5px 10px;
     transition: background-color 0.3s ease;
+    display: block;
 }
 
-header .repertory-box a:hover 
-{
-    background: #173964;
-}
-
-header .files-box a:hover 
-{
-    background-color: rgba(36, 36, 36, 0.80);
-}
-
-header .pictures_files 
-{
-    max-width: 80px; 
+header .left-pane a.active, header .right-pane li:hover {
+    background: #1A4D7B;
+    border-radius: 5px;
 }
 
-header .pictures_files  
-{
+header .right-pane .file-item {
+    text-align: center;
+    width: 100px; 
+    height: 100px; 
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
+    justify-content: center;
+    margin: 5px;
+    transition: background-color 0.3s ease;
 }
 
-header .repertory-box .files-box 
-{
-    position: absolute;
-    top: 0;
-    left: 22%; 
-    height: 90%;
-    padding-top: 10px;
+header .right-pane .file-item img {
+    margin-bottom: -20px; 
+    width: 60px;
+    height: 50px;
+}
+
+header .right-pane .file-item a {
+    margin-top: 0; 
+    width: 100%;
     text-align: center;
-    font-size: 15px;
-    display: none;
-    overflow: auto;
 }
 
-header .repertory-box ul.files li
-{
-    width: 200px;
-    margin: 0px;
+header .right-pane .file-item:hover {
+    background: #1A4D7B;
+    border-radius: 5px;
 }
 
-header .repertory-box .files-box ul.files 
-{
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
+header .right-pane .file-item:hover img,
+header .right-pane .file-item:hover a {
+    background: none; 
 }
 
-.repertory:hover .files-box 
-{
+.container {
+    flex: 1;
     display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
-.cv, .forty-two, .Maquette, .mont_blanc, .readme, .me
-{
-    background-size: cover; 
-    overflow: auto;
-    position: fixed;
+#content-display {
+    background: #FFF;
+    color: #011C2D;
     border-radius: 10px;
-    width: 50%;
-    height: 75%;
-    right: 10%;
-    bottom: 0px;
-    border-style: solid;
-    border-color: black;
-    border-width: 2px;
-    z-index: 2;
-}
-
-@media screen and (max-width: 900px)
-{
-    header nav
-    {
-        display: flex;
-        height: 140px;
-        width: 100%;
-        position: relative;
-        top: 0px;
-        left: 0px;
-        background: #173964;
-        border-radius: 10px;
-        overflow: hidden;
-        border-style: none;
-    }
-    .cv, .forty-two, .Maquette, .mont_blanc, .readme, .me
-    {
-        position: fixed;
-        border-radius: 10px;
-        width: 100%;
-        height: calc(100vh - 140px);
-        right: 0px;
-        bottom: 0px;
-    }
-    .pictures
-    {
-        display: none;
-    }
-    #pion_container
-    {
-        display: flex;
-        position: absolute;
-        right: 0px;
-        bottom: 0px;
-        width: 50px;
-    }
-}
-
-@media screen and (max-width: 550px)
-{
-    header .repertory-box .files-box ul.files 
-    {
-        display: flex;
-        flex-wrap: wrap; 
-        justify-content: flex-end;
-    }
-}
-
-
-@media screen and (max-height: 700px)
-{
-    .pictures
-    {
-        display: none;
-    }
-
-    #pion_container
-    {
-        display: flex;
-        position: absolute;
-        right: 0px;
-        bottom: 0px;
-        width: 50px;
-    }
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    max-width: 800px;
+    width: 90%;
+    margin: 20px;
+    overflow: auto;
 }
 
+.sheet h1, .sheet h2 {
+    border-bottom: 2px solid #011C2D;
+    padding-bottom: 10px;
+    margin-bottom: 20px;
+}
+
+.sheet p, .sheet h3 {
+    margin: 15px 0;
+}
diff --git a/pictures/CV.pdf b/cv.pdf
similarity index 100%
rename from pictures/CV.pdf
rename to cv.pdf
diff --git a/html/CV.css.html b/html/CV.css.html
deleted file mode 100644
index 72013e7..0000000
--- a/html/CV.css.html
+++ /dev/null
@@ -1,92 +0,0 @@
-<!-- 
-    File: CV.css.html
-    Owner: Thibaud La Riviere
-    License: MIT License
--->
-<!DOCTYPE html> 
-<html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <title> It's me </title>
-        <link rel="shortcut icon" href="la_riviere-gilletthibaud-portfolio/pictures/files.jpg" type="image/x-icon">
-        <link type="text/css" rel="stylesheet" href="../css/style.css">
-        <link type="text/css" rel="stylesheet" href="../css/fonts.css">
-        <link type="text/css" rel="stylesheet" href="../css/About/main_about.css">
-        <link type="text/css" rel="stylesheet" href="../css/About/style_cv.css.css">
-        <link type="text/css" rel="stylesheet" href="../css/About/style_img.jpg.css">
-    </head>
-    <header>
-        <nav>
-            <div class="repertory-box">
-                <ul id="repertory">
-                    <li class="repertory" id="About">
-                        <a> About </a>
-                        <div id="files_about" class="files-box">
-                            <ul class="files">
-                                <li>
-                                    <a href="CV.css.html" class="pictures_files" title="CV.css"> 
-                                        <img src="../pictures/files.jpg" class="pictures_files" 
-                                        alt="CV.css" width="80px" height="65px">
-                                    </a>
-                                </li>
-                            </ul>
-                        </div>
-                    </li>
-                    <li class="repertory" id="Projects">
-                        <a> Projects </a>
-                        <div class="files-box" id="files_projects">
-                            <ul class="files">
-                                <li> 
-                                    <a href="ft_42.c.html" class="pictures_files" title="ft_42.css"> 
-                                        <img src="../pictures/files.jpg" class="pictures_files" 
-                                        alt="ft_42.css" width="80px" height="65px"> 
-                                    </a>
-                                </li>
-                                <li>
-                                    <a href="Maquette.html.html" class="pictures_files" title="Maquette.html"> 
-                                        <img src="../pictures/files.jpg" class="pictures_files" 
-                                        alt="Maquette.html" width="80px" height="65px"> 
-                                    </a>
-                                </li>
-                                <li>
-                                    <a href="Mont-Blanc_LDA.html" class="pictures_files" title="Mont-blanc (LDA)"> 
-                                        <img src="../pictures/files.jpg" class="pictures_files" 
-                                        alt="Mont-blanc (LDA)" width="80px" height="65px">
-                                    </a>
-                                </li>
-                            </ul>
-                        </div>
-                    </li>
-                    <li class="repertory" id="Contact">
-                        <a> Contact </a>
-                        <div class="files-box" id="files_contact">
-                            <ul class="files">
-                                <li> 
-                                    <a href="index_repete.html" class="pictures_files" title="Me.md"> 
-                                        <img src="../pictures/files.jpg" class="pictures_files" 
-                                        alt="Me.md" width="80px" height="65px"> 
-                                    </a>
-                                </li>
-                            </ul>
-                        </div>
-                    </li>
-                    <li class="repertory" id="Readme">
-                        <a href="../index_repete.html"> Readme </a>
-                    </li>
-                </ul>
-            </div>
-            <a href="www.chess.com/" >
-                <img src="../pictures/pion.jpg" id="pion_container" target="_blank" 
-                alt="Plus.html" width="50px" height="72px">
-            </a>
-        </nav>
-    </header>
-    <body>
-        <div class="readme container">
-            <img src="../pictures/CV.pdf">
-        </div>
-        <a href="www.chess.com/" class="pictures" target="_blank" title="Rencontrons nous autrement  :"> 
-            <img src="../pictures/chessboard.jpg" class="pictures" alt="chessboard" width="auto" height="auto">
-        </a>
-    </body>
-</html>
\ No newline at end of file
diff --git a/html/Maquette.html.html b/html/Maquette.html.html
deleted file mode 100644
index c503175..0000000
--- a/html/Maquette.html.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!-- 
-    File: Maquette.html.html
-    Owner: Thibaud La Riviere
-    License: MIT License
--->
-<!DOCTYPE html> 
-<html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <title> It's me </title>
-        <link rel="shortcut icon" href="la_riviere-gilletthibaud-portfolio/pictures/files.jpg" type="image/x-icon">
-        <link type="text/css" rel="stylesheet" href="../css/style.css">
-        <link type="text/css" rel="stylesheet" href="../css/fonts.css">
-        <link type="text/css" rel="stylesheet" href="../css/Projects/main_projects.css">
-        <link type="text/css" rel="stylesheet" href="../css/Projects/style_Maquette.html.css">
-    </head>
-    <header>
-        <nav>
-            <div class="repertory-box">
-                <ul id="repertory">
-                    <li class="repertory" id="About">
-                        <a> About </a>
-                        <div id="files_about" class="files-box">
-                            <ul class="files">
-                                <li>
-                                    <a href="CV.css.html" class="pictures_files" title="CV.css"> 
-                                        <img src="../pictures/files.jpg" class="pictures_files" 
-                                        alt="CV.css" width="80px" height="65px">
-                                    </a>
-                                </li>
-                            </ul>
-                        </div>
-                    </li>
-                    <li class="repertory" id="Projects">
-                        <a> Projects </a>
-                        <div class="files-box" id="files_projects">
-                            <ul class="files">
-                                <li> 
-                                    <a href="ft_42.c.html" class="pictures_files" title="ft_42.css"> 
-                                        <img src="../pictures/files.jpg" class="pictures_files" 
-                                        alt="ft_42.css" width="80px" height="65px">  
-                                    </a>
-                                </li>
-                                <li>
-                                    <a href="Maquette.html.html" class="pictures_files" title="Maquette.html"> 
-                                        <img src="../pictures/files.jpg" class="pictures_files" 
-                                        alt="Maquette.html" width="80px" height="65px"> 
-                                    </a>
-                                </li>
-                                <li>
-                                   <a href="Mont-Blanc_LDA.html" class="pictures_files" title="Mont-blanc (LDA)"> 
-                                        <img src="../pictures/files.jpg" class="pictures_files" 
-                                        alt="Mont-blanc (LDA)" width="80px" height="65px">
-                                    </a>
-                                </li>
-                            </ul>
-                        </div>
-                    </li>
-                    <li class="repertory" id="Contact">
-                        <a> Contact </a>
-                        <div class="files-box" id="files_contact">
-                            <ul class="files">
-                                <li> 
-                                    <a href="index_repete.html" class="pictures_files" title="Me.md"> 
-                                        <img src="../pictures/files.jpg" class="pictures_files" 
-                                        alt="Me.md" width="80px" height="65px"> 
-                                    </a>
-                                </li>
-                            </ul>
-                        </div>
-                    </li>
-                    <li class="repertory" id="Readme">
-                        <a href="../index_repete.html"> Readme </a>
-                    </li>
-                </ul>
-            </div>
-            <a href="www.chess.com/" >
-                <img src="../pictures/pion.jpg" id="pion_container" target="_blank" 
-                alt="Plus.html" width="50px" height="72px">
-            </a>
-        </nav>
-    </header>
-    <body>
-        <div class="readme container">
-            <h1> <strong> # </strong> Bienvenue sur Mon Portfolio ! </h1>
-            <p>
-                Je suis <strong> ** </strong> Thibaud La Riviere <strong> ** </strong>, 
-                un étudiant en première année d'informatique passionné par le monde du développement et de la cuisine. 
-                Ce portfolio est une vitrine de mes compétences et de mes projets. 
-                N'hésitez pas à explorer et me contacter 
-                si vous avez des questions ou des opportunités de collaboration !
-            </p>
-            <h2> <strong> ## </strong> A propos de moi </h2>
-            <p>
-                Étant doté d'un fort intérêt pour les technologies informatiques, 
-                je suis à la recherche d'une formation qui me permettra 
-                de consolider mes connaissances et mes compétences dans ce domaine. 
-                Mon objectif est d'acquérir une solide formation pour être prêt à relever les défis de demain.
-            </p>
-            <h2> <strong> ## </strong> Projets </h2>
-            <p> - [<em> <a href="ft_42.c.html">ft_42 </a>
-            </em>](<strong> ./Projects/ft_42.c </strong>) : </p>
-            <p> 
-                Il s'agit d'un concours d'informatique permettant d'accéder à l'école 42.
-            </p>
-            <p> - [<em> <a href="Maquette.html.html">Maquette du Portfoliol </a>
-            </em>](<strong> ./projects/ft_/.//maquette.jpg </strong>) : </p>
-            <p>
-                Il s'agit de la maquette du portfolio que vous êtes en train de lire.
-            </p>
-            <p> - Et pleins d'autres </p>
-                <h2> <strong> ## </strong> Contact </h2>
-            <p> Pour me contacter, vous pouvez m'envoyer un e-mail à </p>
-            <p> 
-                [ <em> <a href="../index_repete.html"> larivieregillet12@gmail.com </a> 
-                </em>] <br> (<mark> mailto:larivieregillet12@gmail.com </mark>)
-            </p>
-        </div>
-        <div class="Maquette container">
-            <p>
-                <div class="indentation0">
-                <mark><</mark>  !DOCTYPE html <mark>></mark>  <br>
-                <mark><</mark>  html lang="fr" <mark>></mark> <br>
-                </div>
-                    <div class="indentation1">
-                    <mark><</mark>  head <mark>></mark> <br> 
-                    </div>
-                        <div class="indentation2">
-                        <mark><</mark>  meta charset="UTF-8" <mark>></mark> <br>
-                        <mark><</mark>  title <mark>></mark> Conception d'un Portfolio 
-                        <mark><</mark> /title <mark>></mark> <br>
-                        </div>
-                    <div class="indentation1">
-                    <mark><</mark>  /head <mark>></mark> <br>
-                    <mark><</mark>  body <mark>></mark> <br>
-                    </div>
-                        <div class="indentation2">
-                        <mark><</mark>  header <mark>></mark> <br> 
-                        </div>
-                            <div class="indentation3">
-                            <mark><</mark>  h1 <mark>></mark> Conception d'un Portfolio Explorer 
-                            <mark><</mark> /h1 <mark>></mark> <br>
-                            </div>
-                        <div class="indentation2">
-                        <mark><</mark>  /header <mark>></mark> <br> 
-                        <mark><</mark>  section <mark>></mark> <br> 
-                        </div>
-                            <div class="indentation3">
-                            <mark><</mark>  h2 <mark>></mark> 1. Organisation Intuitive des Contenus 
-                            <mark><</mark> /h2 <mark>></mark> <br>
-                            <mark><</mark>  pre <mark>></mark> <br>
-                            </div>
-            </p>
-                            <div class="indentation3">
-                            <pre>
-La conception de mon Portfolio Explorer a débuté 
-par une organisation logique des informations. En 
-utilisantune structure familière basée sur un 
-explorateur de fichiers que tout le monde utilise 
-au quotidien, j'ai créé un environnement où les 
-visiteurs se sentent instantanément à l'aise. 
-Les catégories claires ("About", "Projects", 
-"Contact") assurent une navigation intuitive.</pre>
-                            </div>
-            <p>
-                            <div class="indentation3">
-                            <mark><</mark>  /pre <mark>></mark> <br>
-                            <mark><</mark>  h2 <mark>></mark> 2. Navigation Simplifiée 
-                            <mark><</mark> /h2 <mark>></mark> <br>
-                            <mark><</mark>  pre <mark>></mark>  <br>
-                            </div>
-            </p>
-                            <div class="indentation3">
-                            <pre>
-Les liens ont été soigneusement structurés pour 
-simplifier la navigation. Chaque section du portfolio 
-est accessible en un clic. L'utilisation de liens 
-relatifs permet une compréhension facile, même pour 
-ceux qui ne sont pas familiers avec les technologies web.</pre>
-                            </div>
-            <p>
-                            <div class="indentation3">
-                            <mark><</mark>  /pre <mark>></mark> <br>
-                            <mark><</mark>  h2 <mark>></mark> 
-                            3. Icônes Visuelles pour une Identification Instantanée 
-                            <mark><</mark> /h2 <mark>></mark> <br>
-                            <mark><</mark>  pre <mark>></mark> <br>
-                            </div>
-            </p>
-                            <div class="indentation3">
-                            <pre>
-L'ajout d'icônes de dossiers apporte une dimension 
-visuelle sympathique à chaque catégorie. Ces petites 
-touches graphiques facilitent l'identification 
-instantanée des sections, créant ainsi une expérience 
-utilisateur plus intuitive. </pre>
-                            </div>
-            <p>
-                            <div class="indentation3">
-                            <mark><</mark>  /pre <mark>></mark> <br>
-                            <mark><</mark>  h2 <mark>></mark> 
-                            4. Accessibilité Universelle 
-                            <mark><</mark> /h2> <mark>></mark> <br>
-                            <mark><</mark>  pre <mark>></mark> <br>
-                            </div>
-            </p>
-                            <div class="indentation3">
-                            <pre>
-L'objectif principal était de rendre mon portfolio 
-explorer accessible à tous. En utilisant un modèle 
-familier et une navigation simplifiée, j'ai créé un 
-espace où chacun peut explorer mon travail aisément. 
-L'interface conviviale assure une expérience agréable, 
-que l'on soit technophile ou non. </pre>
-                            </div>
-            <p>
-                            <div class="indentation3">
-                            <mark><</mark>  /pre <mark>></mark> <br>
-                            </div>
-                        <div class="indentation2">
-                        <mark><</mark>  /section <mark>></mark> <br> 
-                        </div>
-                    <div class="indentation1">
-                    <mark><</mark>  /body <mark>></mark> <br>
-                    </div>
-                <div class="indentation0">
-                <mark><</mark>  /html> <br>
-                </div>
-            </p>
-        </div>
-        <a href="www.chess.com/" class="pictures" target="_blank" title="Rencontrons nous autrement  :"> 
-            <img src="../pictures/chessboard.jpg" class="pictures" alt="chessboard" width="auto" height="auto">
-        </a>
-    </body>
-</html>
\ No newline at end of file
diff --git a/html/Mont-blanc_LDA.html b/html/Mont-blanc_LDA.html
deleted file mode 100644
index c28b6dd..0000000
--- a/html/Mont-blanc_LDA.html
+++ /dev/null
@@ -1,145 +0,0 @@
-<!-- 
-    File: Mont-blanc_LDA.html
-    Owner: Thibaud La Riviere
-    License: MIT License
--->
-<!DOCTYPE html> 
-<html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <title> It's me </title>
-        <link rel="shortcut icon" href="la_riviere-gilletthibaud-portfolio/pictures/files.jpg" type="image/x-icon">
-        <link type="text/css" rel="stylesheet" href="../css/style.css">
-        <link type="text/css" rel="stylesheet" href="../css/fonts.css">
-        <link type="text/css" rel="stylesheet" href="../css/Projects/main_projects.css">
-        <link type="text/css" rel="stylesheet" href="../css/Projects/style_Mont-blanc_LDA.css">
-    </head>
-    <header>
-        <nav>
-            <div class="repertory-box">
-                <ul id="repertory">
-                    <li class="repertory" id="About">
-                        <a> About </a>
-                        <div id="files_about" class="files-box">
-                            <ul class="files">
-                                <li>
-                                    <a href="CV.css.html" class="pictures_files" title="CV.css"> 
-                                        <img src="../pictures/files.jpg" class="pictures_files" 
-                                        alt="CV.css" width="80px" height="65px">
-                                    </a>
-                                </li>
-                            </ul>
-                        </div>
-                    </li>
-                    <li class="repertory" id="Projects">
-                        <a> Projects </a>
-                        <div class="files-box" id="files_projects">
-                            <ul class="files">
-                                <li> 
-                                    <a href="ft_42.c.html" class="pictures_files" title="ft_42.css"> 
-                                        <img src="../pictures/files.jpg" class="pictures_files" 
-                                        alt="ft_42.css" width="80px" height="65px"> 
-                                    </a>
-                                </li>
-                                <li>
-                                    <a href="Maquette.html.html" class="pictures_files" title="Maquette.html"> 
-                                        <img src="../pictures/files.jpg" class="pictures_files" 
-                                        alt="Maquette.html" width="80px" height="65px"> 
-                                    </a>
-                                </li>
-                                <li>
-                                   <a href="Mont-Blanc_LDA.html" class="pictures_files" title="Mont-blanc (LDA)"> 
-                                        <img src="../pictures/files.jpg" class="pictures_files" 
-                                        alt="Mont-blanc (LDA)" width="80px" height="65px">
-                                    </a>
-                                </li>
-                            </ul>
-                        </div>
-                    </li>
-                    <li class="repertory" id="Contact">
-                        <a> Contact </a>
-                        <div class="files-box" id="files_contact">
-                            <ul class="files">
-                                <li> 
-                                    <a href="index_repete.html" class="pictures_files" title="Me.md"> 
-                                        <img src="../pictures/files.jpg" class="pictures_files" 
-                                        alt="Me.md" width="80px" height="65px"> 
-                                    </a>
-                                </li>
-                            </ul>
-                        </div>
-                    </li>
-                    <li class="repertory" id="Readme">
-                        <a href="../index_repete.html"> Readme </a>
-                    </li>
-                </ul>
-            </div>
-            <a href="www.chess.com/" >
-                <img src="../pictures/pion.jpg" id="pion_container" target="_blank" 
-                alt="Plus.html" width="50px" height="72px">
-            </a>
-        </nav>
-    </header>
-    <body>
-        <div class="readme container">
-            <h1> <strong> # </strong> Bienvenue sur Mon Portfolio ! </h1>
-            <p>
-                Je suis <strong> ** </strong> Thibaud La Riviere <strong> ** </strong>, 
-                un étudiant en première année d'informatique passionné par le monde du développement et de la cuisine. 
-                Ce portfolio est une vitrine de mes compétences et de mes projets. 
-                N'hésitez pas à explorer et me contacter 
-                si vous avez des questions ou des opportunités de collaboration !
-            </p>
-            <h2> <strong> ## </strong> A propos de moi </h2>
-            <p>
-                Étant doté d'un fort intérêt pour les technologies informatiques, 
-                je suis à la recherche d'une formation qui me permettra 
-                de consolider mes connaissances et mes compétences dans ce domaine. 
-                Mon objectif est d'acquérir une solide formation pour être prêt à relever les défis de demain.
-            </p>
-            <h2> <strong> ## </strong> Projets </h2>
-            <p> - [<em> <a href="ft_42.c.html">ft_42 </a>
-            </em>](<strong> ./Projects/ft_42.c </strong>) : </p>
-            <p> 
-                Il s'agit d'un concours d'informatique permettant d'accéder à l'école 42.
-            </p>
-            <p> - [<em> <a href="Maquette.html.html">Maquette du Portfoliol </a>
-            </em>](<strong> ./projects/ft_/.//maquette.jpg </strong>) : </p>
-            <p>
-                Il s'agit de la maquette du portfolio que vous êtes en train de lire.
-            </p>
-            <p> - Et pleins d'autres </p>
-                <h2> <strong> ## </strong> Contact </h2>
-            <p> Pour me contacter, vous pouvez m'envoyer un e-mail à </p>
-            <p> 
-                [ <em> <a href="../index.html"> larivieregillet12@gmail.com </a> 
-                </em>] <br> (<mark> mailto:larivieregillet12@gmail.com </mark>)
-            </p>
-        </div>
-        <div class="mont_blanc container">
-            <p>
-                <img src="../pictures/mont_blanc.jpg" alt="Mont-blanc pastry" width="auto" height="auto">
-                Début du Programme : Recette du Mont Blanc <br> <br>
-                // Ingrédients <br>
-                purée_de_marrons <- 500g <br>
-                crème_liquide <- 250ml <br>
-                sucre_en_poudre <- 2 cuillères_à_soupe <br>
-                extrait_de_vanille <- 1 cuillère_à_café <br>
-                meringues <- 200g <br>
-                chantilly <- quantité_suffisante <br>
-                marrons_glacés <- en_option <br><br> 
-                // Étapes <br>
-                créer_crème_de_marrons(purée_de_marrons, extrait_de_vanille) <br>
-                préparer_chantilly(crème_liquide, sucre_en_poudre) <br>
-                écraser_meringues (meringues) <br>
-                assembler_mont_blanc(crème_de_marrons, meringues, chantilly) <br>
-                décorer_avec_marrons_glacés (marrons_glacés) <br> <br>
-                Servir_Mont_Blanc(froid) <br> <br> 
-                Fin du Programme <br>
-            </p>
-        </div>
-        <a href="www.chess.com/" class="pictures" target="_blank" title="Rencontrons nous autrement  :"> 
-            <img src="../pictures/chessboard.jpg" class="pictures" alt="chessboard" width="auto" height="auto">
-        </a>
-    </body>
-</html>
\ No newline at end of file
diff --git a/html/ft_42.c.html b/html/ft_42.c.html
deleted file mode 100644
index f9a4114..0000000
--- a/html/ft_42.c.html
+++ /dev/null
@@ -1,153 +0,0 @@
-<!-- 
-    File: ft_42.c.html
-    Owner: Thibaud La Riviere
-    License: MIT License
--->
-<!DOCTYPE html> 
-<html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <title> It's me </title>
-        <link rel="shortcut icon" href="../pictures/files.jpg" type="image/x-icon">
-        <link type="text/css" rel="stylesheet" href="../css/style.css">
-        <link type="text/css" rel="stylesheet" href="../css/fonts.css">
-        <link type="text/css" rel="stylesheet" href="../css/Projects/main_projects.css">
-        <link type="text/css" rel="stylesheet" href="../css/Projects/style_ft_42.c.css">
-    </head>
-    <header>
-        <nav>
-            <div class="repertory-box">
-                <ul id="repertory">
-                    <li class="repertory" id="About">
-                        <a> A_propos </a>
-                        <div id="files_about" class="files-box">
-                            <ul class="files">
-                                <li>
-                                    <a href="CV.css.html" class="pictures_files" title="CV.css"> 
-                                        <img src="../pictures/files.jpg" class="pictures_files" 
-                                        alt="CV.css" width="80px" height="65px">
-                                    </a>
-                                </li>
-                            </ul>
-                        </div>
-                    </li>
-                    <li class="repertory" id="Projects">
-                        <a> Projets </a>
-                        <div class="files-box" id="files_projects">
-                            <ul class="files">
-                                <li> 
-                                    <a href="ft_42.c.html" class="pictures_files" title="ft_42.css"> 
-                                        <img src="../pictures/files.jpg" class="pictures_files" 
-                                        alt="gantt.c" width="80px" height="65px"> 
-                                    </a>
-                                </li>
-                                <li>
-                                    <a href="Maquette.html.html" class="pictures_files" title="Maquette.html"> 
-                                        <img src="../pictures/files.jpg" class="pictures_files" 
-                                        alt="Maquette.html" width="80px" height="65px"> 
-                                    </a>
-                                </li>
-                                <li>
-                                   <a href="Mont-Blanc_LDA.html" class="pictures_files" title="Mont-blanc (LDA)"> 
-                                        <img src="../pictures/files.jpg" class="pictures_files" 
-                                        alt="Mont-blanc (LDA)" width="80px" height="65px">
-                                    </a>
-                                </li>
-                            </ul>
-                        </div>
-                    </li>
-                    <li class="repertory" id="Contact">
-                        <a> Contact </a>
-                        <div class="files-box" id="files_contact">
-                            <ul class="files">
-                                <li> 
-                                    <a href="index_repete.html" class="pictures_files" title="Me.md"> 
-                                        <img src="../pictures/files.jpg" class="pictures_files" 
-                                        alt="Me.md" width="80px" height="65px">  
-                                    </a>
-                                </li>
-                            </ul>
-                        </div>
-                    </li>
-                    <li class="repertory" id="Readme">
-                        <a href="../index_repete.html"> Readme </a>
-                    </li>
-                </ul>
-            </div>
-            <a href="www.chess.com/" >
-                <img src="../pictures/pion.jpg" id="pion_container" target="_blank" 
-                alt="Plus.html" width="50px" height="72px">
-            </a>
-        </nav>
-    </header>
-    <body>
-        <div class="readme container">
-            <h1> <strong> # </strong> Bienvenue sur Mon Portfolio ! </h1>
-            <p>
-                Je suis <strong> ** </strong> Thibaud La Riviere <strong> ** </strong>, 
-                un étudiant en première année d'informatique passionné par le monde du développement et de la cuisine. 
-                Ce portfolio est une vitrine de mes compétences et de mes projets. 
-                N'hésitez pas à explorer et me contacter 
-                si vous avez des questions ou des opportunités de collaboration !
-            </p>
-            <h2> <strong> ## </strong> A propos de moi </h2>
-            <p>
-                Étant doté d'un fort intérêt pour les technologies informatiques, 
-                je suis à la recherche d'une formation qui me permettra 
-                de consolider mes connaissances et mes compétences dans ce domaine. 
-                Mon objectif est d'acquérir une solide formation pour être prêt à relever les défis de demain.
-            </p>
-            <h2> <strong> ## </strong> Projets </h2>
-            <p> - [<em> <a href="ft_42.c.html">ft_42 </a>
-            </em>](<strong> ./Projects/ft_42.c </strong>) : </p>
-            <p> 
-                Il s'agit d'un concours d'informatique permettant d'accéder à l'école 42.
-            </p>
-            <p> - [<em> <a href="Maquette.html.html">Maquette du Portfoliol </a>
-            </em>](<strong> ./projects/ft_/.//maquette.jpg </strong>) : </p>
-            <p>
-                Il s'agit de la maquette du portfolio que vous êtes en train de lire.
-            </p>
-            <p> - Et pleins d'autres </p>
-                <h2> <strong> ## </strong> Contact </h2>
-            <p> Pour me contacter, vous pouvez m'envoyer un e-mail à </p>
-            <p> 
-                [ <em> <a href="../index.html"> larivieregillet12@gmail.com </a> 
-                </em>] <br> (<mark> mailto:larivieregillet12@gmail.com </mark>)
-            </p>
-        </div>
-        <div class="forty-two container">
-            <img src="../pictures/42.jpg" alt="42 logo" width="auto" height="auto">
-            <h1> <mark>#</mark> include <mark><</mark> unistd.h <mark>></mark> </h1>
-            <h3> <function> printf </function> 
-            (" L'École 42 : Une Aventure Éducative Exceptionnelle "); </h3>
-            <p> /<mark>*</mark> <br>
-                L'école 42 offre une expérience éducative exceptionnelle, 
-                repoussant les frontières de l'apprentissage traditionnel. 
-                Ici, les étudiants sont immergés dans le monde de la programmation et de la technologie, 
-                résolvant des défis complexes et collaborant sur des projets innovants. 
-                <br><mark>*</mark>/
-            </p>
-            <h3> <function> printf </function> (" Approche Pédagogique Unique "); </h3>
-            <p> /<mark>*</mark> <br> 
-                Cette approche pédagogique unique permet aux apprenants de développer
-                leurs compétences techniques tout en encourageant la créativité et le travail d'équipe. 
-                L'école 42 favorise également un environnement inclusif où la diversité est célébrée. 
-             <br><mark>*</mark>/
-            </p>
-            <h3> <function> printf </function> (" Cultiver l'Innovation et l'Inclusivité "); </h3>
-            <p> /<mark>*</mark> <br> 
-                Les étudiants sont encouragés à explorer, à échouer et à réussir, 
-                cultivant ainsi des compétences essentielles pour 
-                l'industrie technologique en constante évolution. 
-                C'est un lieu où l'éducation devient une aventure stimulante 
-                et où les futurs innovateurs trouvent l'inspiration pour façonner 
-                le monde numérique de demain. 
-                <br><mark>*</mark>/
-            </p>
-        </div>
-        <a href="www.chess.com/" class="pictures" target="_blank" title="Rencontrons nous autrement  :"> 
-            <img src="../pictures/chessboard.jpg" class="pictures" alt="chessboard" width="auto" height="auto">
-        </a>
-    </body>
-</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index f70bc85..1eed7e8 100644
--- a/index.html
+++ b/index.html
@@ -1,120 +1,33 @@
-<!-- 
-    File: index.html
-    Owner: Thibaud La Riviere
-    License: MIT License
--->
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
+<!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <title> It's me </title>
-        <link rel="shortcut icon" href="thibaudla_riviere-gillet-portfolio/pictures/files.jpg" type="image/x-icon">
-        <link type="text/css" rel="stylesheet" href="thibaudla_riviere-gillet-portfolio/css/style.css">
-        <link type="text/css" rel="stylesheet" href="thibaudla_riviere-gillet-portfolio/css/fonts.css">
-    </head>
+<head>
+    <meta charset="UTF-8">
+    <title>Portfolio - Thibaud La Riviere</title>
+    <link rel="shortcut icon" href="thibaudla_riviere-gillet-portfolio/pictures/files.jpg" type="image/x-icon">
+    <link rel="stylesheet" href="thibaudla_riviere-gillet-portfolio/css/style.css">
+</head>
+<body>
     <header>
         <nav>
-            <div class="repertory-box">
-                <ul id="repertory">
-                    <li class="repertory" id="About">
-                        <a> A_propos </a>
-                        <div id="files_about" class="files-box">
-                            <ul class="files">
-                                <li>
-                                    <a href="thibaudla_riviere-gillet-portfolio/html/CV.css.html" class="pictures_files" title="CV.css"> 
-                                        <img src="thibaudla_riviere-gillet-portfolio/pictures/files.jpg" class="pictures_files" 
-                                        alt="CV.css" width="80px" height="65px">
-                                    </a>
-                                </li>
-                            </ul>
-                        </div>
-                    </li>
-                    <li class="repertory" id="Projects">
-                        <a> Projets </a>
-                        <div class="files-box" id="files_projects">
-                            <ul class="files">
-                                <li> 
-                                    <a href="thibaudla_riviere-gillet-portfolio/html/ft_42.c.html" class="pictures_files" title="ft_42.css"> 
-                                        <img src="thibaudla_riviere-gillet-portfolio/pictures/files.jpg" class="pictures_files" 
-                                        alt="ft_42.css" width="80px" height="65px"> 
-                                    </a>
-                                </li>
-                                <li>
-                                    <a href="thibaudla_riviere-gillet-portfolio/html/Maquette.html.html" class="pictures_files" title="Maquette.html"> 
-                                        <img src="thibaudla_riviere-gillet-portfolio/pictures/files.jpg" class="pictures_files" 
-                                        alt="Maquette.html" width="80px" height="65px"> 
-                                    </a>
-                                </li>
-                                <li>
-                                   <a href="thibaudla_riviere-gillet-portfolio/html/Mont-Blanc_LDA.html" class="pictures_files" title="Mont-blanc (LDA)"> 
-                                        <img src="thibaudla_riviere-gillet-portfolio/pictures/files.jpg" class="pictures_files" 
-                                        alt="Mont-blanc (LDA)" width="80px" height="65px">
-                                    </a>
-                                </li>
-                            </ul>
-                        </div>
-                    </li>
-                    <li class="repertory" id="Contact">
-                        <a> Contact </a>
-                        <div class="files-box" id="files_contact">
-                            <ul class="files">
-                                <li> 
-                                    <a href="thibaudla_riviere-gillet-portfolio/index_repete.html" class="pictures_files" title="Me.md"> 
-                                        <img src="thibaudla_riviere-gillet-portfolio/pictures/files.jpg" class="pictures_files" 
-                                        alt="Me.md" width="80px" height="65px"> 
-                                    </a>
-                                </li>
-                            </ul>
-                        </div>
-                    </li>
-                    <li class="repertory" id="Readme">
-                        <a href="thibaudla_riviere-gillet-portfolio/index_repete.html"> Readme </a>
-                    </li>
-                </ul>
+            <div class="explorer-box">
+                <div class="left-pane">
+                    <ul id="global-sections">
+                    </ul>
+                </div>
+                <div class="right-pane">
+                    <ul id="sub-sections">
+                    </ul>
+                </div>
             </div>
-            <a href="www.chess.com/" >
-                <img src="thibaudla_riviere-gillet-portfolio/pictures/pion.jpg" id="pion_container" target="_blank" 
-                alt="Plus.html" width="50px" height="72px">
+            <a href="cv.pdf" id="cv-button" download>
+                <button id="cv-download-button">CV</button>
             </a>
         </nav>
     </header>
-    <body>
-        <div class="readme container">
-            <h1> <strong> # </strong> Bienvenue sur Mon Portfolio ! </h1>
-            <p>
-                Je suis <strong> ** </strong> Thibaud La Riviere <strong> ** </strong>, 
-                étudiant en première année d'informatique à l'IUT de Clermont-Ferrand. 
-                Je suis arrivé dans ce domaine par curiosité. En effet, d'abord par la découverte de l'algorithmie à travers différents échanges, 
-                puis par la création de différents projets personnels liés à l'informatique dans sa globalité.
-            </p>
-            <h2> <strong> ## </strong> A propos de moi </h2>
-            <p>
-                Je suis quelqu’un qui aime travailler par projet et avoir un résultat tangible à la fin. 
-                C’est d’ailleurs pour cela que je préfère travailler en groupe sur des sujets qui sont réellement utiles au quotidien, 
-                comme lors de notre <a href="" >seconde SAE de C </a> au BUT. J’ai également apprécié ce devoir car nous utilisions le langage C,
-                ce qui m’a permis de comprendre le fonctionnement à bas niveau des programmes que j’utilise quotidiennement.
-            </p>
-            <h2> <strong> ## </strong> Projets </h2>
-            <p> - [<em> <a href="thibaudla_riviere-gillet-portfolio/html/ft_42.c.html">ft_42 </a>
-            </em>](<strong> ./Projects/ft_42.c </strong>) : </p>
-            <p> 
-                Il s'agit d'un concours d'informatique permettant d'accéder à l'école 42.
-            </p>
-            <p> - [<em> <a href="thibaudla_riviere-gillet-portfolio/html/Maquette.html.html">Maquette du Portfoliol </a>
-            \</em>](<strong> ./projects/ft_/./maquette.jpg </strong>) : </p>
-            <p>
-                Il s'agit de la maquette du portfolio que vous êtes en train de lire.
-            </p>
-            <p> - Et pleins d'autres </p>
-                <h2> <strong> ## </strong> Contact </h2>
-            <p> Pour me contacter, vous pouvez m'envoyer un e-mail à </p>
-            <p> 
-                [ <em> <a href="thibaudla_riviere-gillet-portfolio/index.html"> Thibaud.LA_RIVIERE-GILLET@etu.uca.fr </a> </em>] 
-                <br> (<mark> mailto:Thibaud.LA_RIVIERE-GILLET@etu.uca.fr </mark>)
-            </p>
-        </div>
-        <a href="www.chess.com/" class="pictures" target="_blank" title="Rencontrons nous autrement  :"> 
-            <img src="thibaudla_riviere-gillet-portfolio/pictures/chessboard.jpg" class="pictures" alt="chessboard" width="auto" height="auto">
-        </a>
-    </body>
-</html>
\ No newline at end of file
+    <main class="container">
+        <section id="content-display">
+        </section>
+    </main>
+    <script src="thibaudla_riviere-gillet-portfolio/js/script.js"></script>
+</body>
+</html>
diff --git a/index_repete.html b/index_repete.html
deleted file mode 100644
index a6a3c53..0000000
--- a/index_repete.html
+++ /dev/null
@@ -1,121 +0,0 @@
-<!-- 
-    File: index_repete.html
-    Owner: Thibaud La Riviere
-    License: MIT License
--->
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
-<html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <title> It's me </title>
-        <link rel="shortcut icon" href="pictures/files.jpg" type="image/x-icon">
-        <link type="text/css" rel="stylesheet" href="css/style.css">
-        <link type="text/css" rel="stylesheet" href="css/fonts.css">
-    </head>
-    <header>
-        <nav>
-            <div class="repertory-box">
-                <ul id="repertory">
-                    <li class="repertory" id="About">
-                        <a> About </a>
-                        <div id="files_about" class="files-box">
-                            <ul class="files">
-                                <li>
-                                    <a href="html/CV.css.html" class="pictures_files" title="CV.css"> 
-                                        <img src="pictures/files.jpg" class="pictures_files" 
-                                        alt="CV.css" width="80px" height="65px">
-                                    </a>
-                                </li>
-                            </ul>
-                        </div>
-                    </li>
-                    <li class="repertory" id="Projects">
-                        <a> Projects </a>
-                        <div class="files-box" id="files_projects">
-                            <ul class="files">
-                                <li> 
-                                    <a href="html/ft_42.c.html" class="pictures_files" title="ft_42.css"> 
-                                        <img src="pictures/files.jpg" class="pictures_files" 
-                                        alt="ft_42.css" width="80px" height="65px"> 
-                                    </a>
-                                </li>
-                                <li>
-                                    <a href="html/Maquette.html.html" class="pictures_files" title="Maquette.html"> 
-                                        <img src="pictures/files.jpg" class="pictures_files" 
-                                        alt="Maquette.html" width="80px" height="65px"> 
-                                    </a>
-                                </li>
-                                <li>
-                                   <a href="html/Mont-Blanc_LDA.html" class="pictures_files" title="Mont-blanc (LDA)"> 
-                                        <img src="pictures/files.jpg" class="pictures_files" 
-                                        alt="Mont-blanc (LDA)" width="80px" height="65px">
-                                    </a>
-                                </li>
-                            </ul>
-                        </div>
-                    </li>
-                    <li class="repertory" id="Contact">
-                        <a> Contact </a>
-                        <div class="files-box" id="files_contact">
-                            <ul class="files">
-                                <li> 
-                                    <a href="index_repete.html" class="pictures_files" title="Me.md"> 
-                                        <img src="pictures/files.jpg" class="pictures_files" 
-                                        alt="Me.md" width="80px" height="65px"> 
-                                    </a>
-                                </li>
-                            </ul>
-                        </div>
-                    </li>
-                    <li class="repertory" id="Readme">
-                        <a href="index_repete.html"> Readme </a>
-                    </li>
-                </ul>
-            </div>
-            <a href="www.chess.com/" >
-                <img src="pictures/pion.jpg" id="pion_container" target="_blank" 
-                alt="Plus.html" width="50px" height="72px">
-            </a>
-        </nav>
-    </header>
-    <body>
-        <div class="readme container">
-            <h1> <strong> # </strong> Bienvenue sur Mon Portfolio ! </h1>
-            <p>
-                Je suis <strong> ** </strong> Thibaud La Riviere <strong> ** </strong>, 
-                un étudiant en première année d'informatique passionné par le monde du développement et de la cuisine. 
-                Ce portfolio est une vitrine de mes compétences et de mes projets. 
-                N'hésitez pas à explorer et me contacter 
-                si vous avez des questions ou des opportunités de collaboration !
-            </p>
-            <h2> <strong> ## </strong> A propos de moi </h2>
-            <p>
-                Étant doté d'un fort intérêt pour les technologies informatiques, 
-                je suis à la recherche d'une formation qui me permettra 
-                de consolider mes connaissances et mes compétences dans ce domaine. 
-                Mon objectif est d'acquérir une solide formation pour être prêt à relever les défis de demain.
-            </p>
-            <h2> <strong> ## </strong> Projets </h2>
-            <p> - [<em> <a href="html/ft_42.c.html">ft_42 </a>
-            </em>](<strong> ./Projects/ft_42.c </strong>) : </p>
-            <p> 
-                Il s'agit d'un concours d'informatique permettant d'accéder à l'école 42.
-            </p>
-            <p> - [<em> <a href="html/Maquette.html.html">Maquette du Portfoliol </a>
-            \</em>](<strong> ./projects/ft_/.//maquette.jpg </strong>) : </p>
-            <p>
-                Il s'agit de la maquette du portfolio que vous êtes en train de lire.
-            </p>
-            <p> - Et pleins d'autres </p>
-                <h2> <strong> ## </strong> Contact </h2>
-            <p> Pour me contacter, vous pouvez m'envoyer un e-mail à </p>
-            <p> 
-                [ <em> <a href="index_repete.html"> larivieregillet12@gmail.com </a> </em>] 
-                <br> (<mark> mailto:larivieregillet12@gmail.com </mark>)
-            </p>
-        </div>
-        <a href="www.chess.com/" class="pictures" target="_blank" title="Rencontrons nous autrement  :"> 
-            <img src="pictures/chessboard.jpg" class="pictures" alt="chessboard" width="auto" height="auto">
-        </a>
-    </body>
-</html>
\ No newline at end of file
diff --git a/js/.script.js.swo b/js/.script.js.swo
new file mode 100644
index 0000000..14957db
Binary files /dev/null and b/js/.script.js.swo differ
diff --git a/js/.script.js.swp b/js/.script.js.swp
new file mode 100644
index 0000000..0cafbc5
Binary files /dev/null and b/js/.script.js.swp differ
diff --git a/js/script.js b/js/script.js
new file mode 100644
index 0000000..c754132
--- /dev/null
+++ b/js/script.js
@@ -0,0 +1,122 @@
+document.addEventListener('DOMContentLoaded', function ()
+{
+    const globalSections = document.getElementById('global-sections');
+    const subSections = document.getElementById('sub-sections');
+    const contentDisplay = document.getElementById('content-display');
+
+    const sectionsData = 
+    {
+        about:
+	{
+            name: 'About',
+            items: []
+        },
+        projects:
+	{
+            name: 'Projects',
+            items: [
+                {
+			filename: 'ft_42',
+			filextension: '.css',
+			title: 'ft_42.css Project',
+			content: 'Contenu du projet ft_42.css',
+			repo: 'https://github.com/user/ft_42'
+		},
+                {
+			filename: 'Maquette',
+			filextension: '.html',
+			title: 'Maquette Project',
+			content: 'Contenu du projet Maquette.html',
+			repo: 'https://github.com/user/Maquette'
+		},
+                {
+			filename: 'Mont-blanc',
+			filextension: '.LDA',
+			title: 'Mont-blanc (LDA) Project',
+			content: 'Contenu du projet Mont-blanc (LDA)',
+			repo: 'https://github.com/user/Mont-blanc'
+		}
+            ]
+        },
+        contact:
+	{
+            name: 'Contact',
+            items: []
+        },
+        readme:
+	{
+            name: 'Readme',
+            items: [
+                {
+			filename: 'README',
+			filextension: '.md',
+			title: 'README',
+			content: 'Contenu du README.md',
+			repo: 'https://github.com/user/repo'
+		}
+            ]
+        }
+    };
+
+    Object.keys(sectionsData).forEach(key => {
+        const section = sectionsData[key];
+        const li = document.createElement('li');
+        li.classList.add('section');
+        li.setAttribute('data-section', key);
+        li.innerHTML = `<a href="#${key}" class="nav-link">${section.name}</a>`;
+        globalSections.appendChild(li);
+    });
+
+    const sectionElements = document.querySelectorAll('#global-sections .section');
+
+    function displaySectionContent(sectionName)
+    {
+        document.querySelector('.nav-link.active')?.classList.remove('active');
+        document.querySelector(`[data-section="${sectionName}"] .nav-link`).classList.add('active');
+
+        if (sectionName === 'readme')
+	{
+            subSections.innerHTML = '';
+        }
+
+        subSections.innerHTML = '';
+        sectionsData[sectionName].items.forEach(item => {
+            const li = document.createElement('li');
+            li.classList.add('file-item');
+            li.innerHTML = `
+                <img src="thibaudla_riviere-gillet-portfolio/pictures/files/files.png" alt="${item.filename}${item.filextension}" class="file-img" data-content="${item.content}" data-title="${item.title}" data-repo="${item.repo}">
+                <br>
+                <a href="#" class="sub-link" data-content="${item.content}" data-title="${item.title}" data-repo="${item.repo}">${item.filename}${item.filextension}</a>
+            `;
+            subSections.appendChild(li);
+        });
+    }
+
+    sectionElements.forEach(section => {
+        section.addEventListener('click', function ()
+	{
+            const sectionName = this.getAttribute('data-section');
+            displaySectionContent(sectionName);
+        });
+    });
+
+    subSections.addEventListener('click', function (e)
+    {
+        if (e.target.classList.contains('sub-link') || e.target.classList.contains('file-img'))
+	{
+            e.preventDefault();
+            const content = e.target.getAttribute('data-content');
+            const title = e.target.getAttribute('data-title');
+            const repo = e.target.getAttribute('data-repo');
+            contentDisplay.innerHTML = `
+                <div class="sheet">
+                    <h1>${title}</h1>
+                    <p>${content}</p>
+                    <p><a href="${repo}" target="_blank">Repository</a></p>
+                </div>
+            `;
+        }
+    });
+
+    displaySectionContent('readme');
+});
diff --git a/pictures/42.jpg b/pictures/42.jpg
deleted file mode 100644
index 022e745..0000000
Binary files a/pictures/42.jpg and /dev/null differ
diff --git a/pictures/Diagramme_de_Flux2-min.jpg b/pictures/Diagramme_de_Flux2-min.jpg
deleted file mode 100644
index e6f2533..0000000
Binary files a/pictures/Diagramme_de_Flux2-min.jpg and /dev/null differ
diff --git a/pictures/Diagrammes_de_Flux-min.jpg b/pictures/Diagrammes_de_Flux-min.jpg
deleted file mode 100644
index 7e0c282..0000000
Binary files a/pictures/Diagrammes_de_Flux-min.jpg and /dev/null differ
diff --git a/pictures/Portfolio-min.jpg b/pictures/Portfolio-min.jpg
deleted file mode 100644
index beebf26..0000000
Binary files a/pictures/Portfolio-min.jpg and /dev/null differ
diff --git a/pictures/back_c.jpg b/pictures/back_c.jpg
deleted file mode 100644
index b07a941..0000000
Binary files a/pictures/back_c.jpg and /dev/null differ
diff --git a/pictures/back_md.jpg b/pictures/back_md.jpg
deleted file mode 100644
index 1aa08cf..0000000
Binary files a/pictures/back_md.jpg and /dev/null differ
diff --git a/pictures/chessboard.jpg b/pictures/chessboard.jpg
deleted file mode 100644
index 339c43d..0000000
Binary files a/pictures/chessboard.jpg and /dev/null differ
diff --git a/pictures/files.jpg b/pictures/files.jpg
deleted file mode 100644
index 19350d1..0000000
Binary files a/pictures/files.jpg and /dev/null differ
diff --git a/pictures/files/files.png b/pictures/files/files.png
new file mode 100644
index 0000000..f49be33
Binary files /dev/null and b/pictures/files/files.png differ
diff --git a/pictures/its_me.jpg b/pictures/its_me.jpg
deleted file mode 100644
index 319e59a..0000000
Binary files a/pictures/its_me.jpg and /dev/null differ
diff --git a/pictures/mont_Blanc.jpg b/pictures/mont_Blanc.jpg
deleted file mode 100644
index 9dbbdfe..0000000
Binary files a/pictures/mont_Blanc.jpg and /dev/null differ
diff --git a/pictures/pion.jpg b/pictures/pion.jpg
deleted file mode 100644
index 3d7ba81..0000000
Binary files a/pictures/pion.jpg and /dev/null differ