mon code ne change plus ma page depuis la semaine derniere, meme avec des reset sur ces versions, la version affiche etait juste un test qui n'a plus pus etre mis a jour mais voici une version du code qui devrait fonctionner

3 weeks ago · 6416fb1380
parent 1c5bdb2ff4
commit 6416fb1380
5 changed files with 108 additions and 52 deletions
--- a/css/.style.css.swp
+++ b/css/.style.css.swp
--- a/css/style.css
+++ b/css/style.css
@ -13,7 +13,7 @@ header {
    display: flex;
    justify-content: space-between;
    align-items: center;
-    padding: 10px;
+    padding: 0px;
    box-shadow: none;
    border-bottom: none;
    width: 100%;
@ -26,6 +26,9 @@ header nav {
 }

 header .explorer-box {
+    margin: 60px;
+    margin-top: 30px;
+    margin-bottom: 0px;
    display: flex;
    width: 500px;
    height: 200px;
@ -128,6 +131,7 @@ header .right-pane .file-item:hover {
    display: flex;
    justify-content: center;
    align-items: center;
+    padding: 20px;
 }

 #sub-sections {
@ -136,18 +140,40 @@ header .right-pane .file-item:hover {
    flex-wrap: wrap;
 }

-#content-display {
+div.content-wrapper {
+    display: flex;
+    flex-direction: column; 
+    align-items: flex-start;
    background: #FFF;
    color: #011C2D;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    max-width: 800px;
+    max-width: 600px;
    width: 90%;
-    margin: 20px;
+    margin-left: 50px;
    overflow: auto;
 }

+.sheet {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    width: 100%;
+}
+
+.image-wrapper {
+    display: flex;
+    justify-content: center; 
+    align-items: center; 
+    width: 600px;
+    margin-bottom: 20px;
+}
+
+.content-wrapper {
+    flex: 1;
+}
+
 .sheet h1, .sheet h2 {
    border-bottom: 2px solid #011C2D;
    padding-bottom: 10px;
@ -157,3 +183,45 @@ header .right-pane .file-item:hover {
 .sheet p, .sheet h3 {
    margin: 15px 0;
 }
+
+.external-image {
+    display: block;
+    max-width: 100%;
+    height: auto;
+}
+
+@media screen and (max-width: 1000px) {
+    .sheet {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .image-wrapper {
+        width: 100%;
+        margin-right: 0;
+        margin-bottom: 20px;
+    }
+
+    .external-image {
+        max-width: 100%;
+        height: auto;
+    }
+}
+
+/* Ajoutez ces styles pour le readme */
+.readme-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.readme-header h1 {
+    margin: 0;
+}
+
+.readme-image {
+    max-width: 100px;
+    height: auto;
+    margin-left: 20px;
+}
--- a/index.html
+++ b/index.html
@ -3,7 +3,7 @@
 <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="shortcut icon" href="thibaudla_riviere-gillet-portfolio/pictures/files/files.png" type="image/x-icon">
    <link rel="stylesheet" href="thibaudla_riviere-gillet-portfolio/css/style.css">
 </head>
 <body>
@ -19,7 +19,7 @@
                    </ul>
                </div>
            </div>
-            <a href="thibaudla_riviere-gillet-portfolio/pictures/doc/cv.pdf" id="cv-button" download>
+            <a href="thibaudla_riviere-gillet-portfolio/pictures/images/cv.pdf" id="cv-button" download>
                <button id="cv-download-button">CV</button>
            </a>
        </nav>
--- a/js/.script.js.swp
+++ b/js/.script.js.swp
--- a/js/script.js
+++ b/js/script.js
@ -4,56 +4,34 @@ document.addEventListener('DOMContentLoaded', function () {
    const contentDisplay = document.getElementById('content-display');

    const sectionsData = {
-        about: {
-            name: 'About',
-            items: []
-        },
        projects: {
-            name: 'Projects',
+            name: 'Projets',
            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: 'cv',
+                    filextension: '.sty',
+                    title: "Projet 1.01 : Découverte de l'open source",
+                    content: "Ce projet consiste en la simplification de la creation d’un CV en LaTeX. <br>J'ai donc appris ce nouveau language et développé un plugin public en m'appuyant sur la documentation et les communautés en ligne. <br><br>Celles-ci m’ont permis de comprendre qu’un code doit autosuffisant et compréhensible, facilitant ainsi sa réutilisation et son adaptation. <br><br>Cette expérience m'a permis de comprendre que tout peut être décrit par des règles, et donc, implémentable par des algorithmes.",
+                    repo: 'https://codefirst.iut.uca.fr/git/thibaud.la_riviere-gillet/CV-Thibaud'
                },
                {
-                    filename: 'Mont-blanc',
-                    filextension: '.LDA',
-                    title: 'Mont-blanc (LDA) Project',
-                    content: 'Contenu du projet Mont-blanc (LDA)',
-                    repo: 'https://github.com/user/Mont-blanc'
+                    filename: 'pert',
+                    filextension: '.c',
+                    title: "SAE S1.02 : Comparaison d'approches algorithmiques",
+                    content: "Lors de cette SAE de C, nous devions, par groupe de 2 à 3, développer une application console. <br>Celle-ci implémente la méthode PERT sur les différentes étapes de construction d'un bâtiment. Le projet nécessitait de prendre en compte la date de début du projet, la durée des tâches et leurs dépendances. <br><br>Ce projet m'a particulièrement intéressé car il m'a permis de comprendre et de mettre en place différentes structures de données ainsi que des optimisations logicielles. <br><br>En plus de cela, il m'a permis de comprendre l'importance de la gestion de projet. J'y ai appris à anticiper les différents livrables à identifier les étapes critiques et à prendre du recul sur l'avancement du projet.",
+                    repo: 'https://codefirst.iut.uca.fr/git/thibaud.la_riviere-gillet/SAE_S1.02_Comparaison_d_approches_algorithmiques'
                },
-                {
-                    filename: 'test',
-                    filextension: '.test',
-                    title: 'test',
-                    content: 'Contenu du projet test',
-                    repo: 'https://github.com/user/test'
-                }
            ]
        },
-        contact: {
-            name: 'Contact',
-            items: []
-        },
        readme: {
            name: 'Readme',
            items: [
                {
                    filename: 'README',
                    filextension: '.md',
-                    title: 'README',
-                    content: 'il y a un bug ',
-                    repo: 'https://github.com/user/repo'
+                    title: 'READ THIBAUD LA RIVIERE',
+                    content: " ## À propos de moi<br>Bienvenue dans mon portfolio. Je suis un étudiant en informatique. Je suis plutôt curieux et passionné par les énigmes. C'est par ces biais que je me suis retrouvé au BUT de Clermont-Ferrand. Mon parcours est jalonné par divers projets que vous pouvez explorer pour mieux comprendre mes compétences et mes réalisations.<br>### Projets<br> - [CV](./project/cv.sty)<br> - **Description :**<br> - Ce projet consiste en la simplification de la création d’un CV en LaTeX.<br> - **Compétences acquises :**<br>- Maîtrise de LaTeX<br> - Développement de plugins<br> - Documentation et partage de code<br><br> - [PERT](./projets/pert.c)<br> - **Description :**<br> - Ce projet implémente la méthode PERT pour gérer les différentes étapes de construction d'un bâtiment. Il prend en compte la date de début du projet, la durée des tâches et leurs dépendances.<br> - **Compétences acquises :**<br> - Gestion de projet<br> - Optimisation logicielle<br> - Structures de données avancées<br><br> ### Contact<br> Email : [Thibaud.LA_RIVIERE-GILLET@etu.uca.fr](Thibaud.LA_RIVIERE-GILLET@etu.uca.fr)<br> Je note ici que le bouton de téléchargement du CV ne fonctionne pas sur la version en ligne de ce site. Je vous encourage donc à aller lire le projet qui entoure mon CV. <br>",
+                    repo: 'https://codefirst.iut.uca.fr/git/thibaud.la_riviere-gillet/portfolio'
                }
            ]
        }
@ -80,12 +58,17 @@ document.addEventListener('DOMContentLoaded', function () {
            const item = sectionsData.readme.items[0];
            contentDisplay.innerHTML = `
                <div class="sheet">
-                    <h1>${item.title}</h1>
-                    <p>${item.content}</p>
-                    <p><a href="${item.repo}" target="_blank">Repository</a></p>
+                    <div class="content-wrapper">
+                        <div class="readme-header">
+                            <h1>${item.title}</h1>
+                            <img src="thibaudla_riviere-gillet-portfolio/pictures/images/me.png" alt="me" class="readme-image">
+                        </div>
+                        <p>${item.content}</p>
+                        <p><a href="${item.repo}" target="_blank">Repository</a></p>
+                    </div>
                </div>
            `;
-            return; 
+            return;
        }

        subSections.innerHTML = '';
@ -93,13 +76,12 @@ document.addEventListener('DOMContentLoaded', function () {
            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}">
+                <img src="thibaudla_riviere-gillet-portfolio/pictures/files/files.png" alt="${item.filename}${item.filextension}" class="file-img">
                <br>
-                <a href="#" class="sub-link" data-content="${item.content}" data-title="${item.title}" data-repo="${item.repo}">${item.filename}${item.filextension}</a>
+                <a href="#" class="sub-link" data-content="${item.content}" data-title="${item.title}" data-repo="${item.repo}" data-filename="${item.filename}">${item.filename}${item.filextension}</a>
            `;
            subSections.appendChild(li);

-            // Ajouter un événement de clic pour chaque sous-section
            li.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector('.file-item.selected')?.classList.remove('selected');
@ -108,11 +90,17 @@ document.addEventListener('DOMContentLoaded', function () {
                const content = li.querySelector('.sub-link').getAttribute('data-content');
                const title = li.querySelector('.sub-link').getAttribute('data-title');
                const repo = li.querySelector('.sub-link').getAttribute('data-repo');
+                const filename = li.querySelector('.sub-link').getAttribute('data-filename');
                contentDisplay.innerHTML = `
                    <div class="sheet">
-                        <h1>${title}</h1>
-                        <p>${content}</p>
-                        <p><a href="${repo}" target="_blank">Repository</a></p>
+                        <div class="image-wrapper">
+                            <img src="thibaudla_riviere-gillet-portfolio/pictures/files/${filename}.png" alt="${title}" class="external-image">
+                        </div>
+                        <div class="content-wrapper">
+                            <h1>${title}</h1>
+                            <p>${content}</p>
+                            <p><a href="${repo}" target="_blank">Repository</a></p>
+                        </div>
                    </div>
                `;
            });