From 6416fb13807083e7ca646588b65b3cf782a38f1b Mon Sep 17 00:00:00 2001
From: "thibaud.la_riviere-gillet" <thibaud.la_riviere-gillet@etu.uca.fr>
Date: Mon, 10 Jun 2024 08:45:24 +0200
Subject: [PATCH] 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

---
 css/.style.css.swp | Bin 12288 -> 0 bytes
 css/style.css      |  76 +++++++++++++++++++++++++++++++++++++++---
 index.html         |   4 +--
 js/.script.js.swp  | Bin 16384 -> 0 bytes
 js/script.js       |  80 +++++++++++++++++++--------------------------
 5 files changed, 108 insertions(+), 52 deletions(-)
 delete mode 100644 css/.style.css.swp
 delete mode 100644 js/.script.js.swp

diff --git a/css/.style.css.swp b/css/.style.css.swp
deleted file mode 100644
index df106d679f5a628e06a0bd6b1c55fd0c61a784d2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 12288
zcmeI2ON<mn7{_Zx!52O-L}Owo-4HR^?(Lb~Wuf-~EJ$1x6N3^DfL2e}%#`$WxBb|i
zjRA~C4F>e)4a68w6EDWZXWZzKi-c&R+>8egcu?cP2l4UmM|IEa%#K+(7?PUZ-_A@w
zzWToZ_kC40*|Cg0GrQ<!y+ZJ~iIA_~+h3pDzjesQ+c*r8qyPHwS;Qi)J6?@BgDyS<
zgQGimcp&op(SZBjXe|s!!)V^&I$jOBRh?4`C<QJ>fjFvbn^u#tYQ;#*4BvGpy=Bd#
zmts-fs}xWQC<T-PN&%&SQa~x76i^CWW(q|95IGE=ugLv=Eq@+b^qjv{Pf7u$fKosy
zpcGIFC<T-PN&%&SQa~x76i^CWh6*tJqrZg@|3g>7dHnxhe*XXcMnb*?=fKC{Rqz~W
zfIZ+5up8VDs$d<scmpBdfwSNva1y)%j)9}#FmS+bFb%eXEnov!3s!)iRul3S_yn8+
zN5M<r2#CR6FasvR1Q-YFz)JAT^@My6z61;4EpQr~0&{?Yhru-13bufo0RewqN64Sx
z9C#m`0xts#JOmyD4}hPqCFC3M8CU?Hg5%(M5P~PbE>Hotfs5A=ase!Wx51m>G<X&~
z1s(_cz+Pa2VXy}LaWx^ofnUKn@F6$}PJrX!7>EG}_k!(U8jOIo;O|w0`~c2_&%rz3
z8E^<31Pt5<Ccy+42X}+p!76ZJCB_A3!53fwybDf%Bj82w0tmrAFar#52lx@SbRL`m
zAAmQ&>)<3f0%~9e7(fRaxD~7bNgbZK@-l2B<?{cmz(GRsXtAInT$5HN{5CbFh#odM
zkElOF^H<F=`ZQXgxVU_^tlNaESzZ)*Et6Iazde=O^O<c6w^5v_6lW|iuz66NsKU9>
zbA(NYjY?&Ebw}Z7vr>9mEj{&Sc~Ez}Ig_$D^0LunsO9)`!j76I-E6FvSG2YK*e0XH
zm$nu*nVncO=r~;21cHXeHW(u`|J5t^bj8#eW*$tyY!Qc$y0BdH94|1-n39B8tahLg
zc(H5a#Lk^Nr^s;4b0h9Xnk_=#Ve@5_b%(>@fcYj({$>v3SD7?9n;lACVO*FBV@nHp
zEfSs^mUfsU8m=ZH-hz8I48?=&#wX)267_j4_n`aapn>${4klb4l%vRK)1Z1nt!x|L
zF*%(?JF7uz*YTLGSusk+HJeE~OG8n>+)yMjm>qJ#NvKH;eJrG$g*=O(76)OXvG0j8
ztVIby>1P*b$4%;buDm_ZP-Sv#^TzS~s-6rb!Q{1Urp1wTQ{PY)1yT0`G(;MYgRcZW
zwqe3ppVv_!8qLV0IFOC%dopBZp%vl?9_rAlkI+ko*Xg*_yU7_kjq2%mn$KKL^}29)
zS`IzR^LC`A)zV!GdDB!3>220)8osz_QY~w^fdf%iD%0dLbeWgj{Km9#2HO#>Mro;U
z@|RORa>^(wWMD%q*+yxf+9Jpr57HrjEjP<+pDvODK+Z)9bR3ELq++l%#Wen(>cipn
zC@T-9GfW_}e1!HH&k<S8EOAl~xdRorT_&jzz`_?|4`iY&Cr3r&B`a9(+*-^wsbDs*
zc>&9&j;zaN3?1?H^}VA&yQ-r1en<2*;D|D2X#opv*W8i6cSIOz>Gyo)T+};C?DQQa
zcFIxYBB;%GE`!TnG`c)21@2m?<oqc8?3hi8vMVPES=B}Amatmgmi$Z+X|>EzVYIIo
ziN`W{lQxBI^Ss*@m43&#>4pP~WVzEQDo6HXwWl8^$|FS?XUnd1nYVqcO6gXnU1p|~
zBA?xtoI3iOb=m9yV|kErzg4bgmRIg%%A<X<u%tUZ^Izz*8rLiy&2g#mBA3(hDHgAQ
zW1++3Q6#m<WY6|snX_gcI}WYRTEaoOZwmxNgM`>9V80WHde&$yY(r%>F_+FZ^TYWj
RIB&nMnv(lX%d?Z6*FVyC(_#Ps

diff --git a/css/style.css b/css/style.css
index bd2ada5..e24f1dd 100644
--- 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;
+}
diff --git a/index.html b/index.html
index f9a89fa..b266d5f 100644
--- 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>
diff --git a/js/.script.js.swp b/js/.script.js.swp
deleted file mode 100644
index 072b6e9b2a6d8238abd88335792b6fc4eec9b97f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 16384
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
NjgpCHv~<qF{soZ`)|CJN

diff --git a/js/script.js b/js/script.js
index f53ece1..6f1a706 100644
--- 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>
                 `;
             });