diff --git a/css/.style.css.swp b/css/.style.css.swp deleted file mode 100644 index df106d6..0000000 Binary files a/css/.style.css.swp and /dev/null differ 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 @@ Portfolio - Thibaud La Riviere - + @@ -19,7 +19,7 @@ - + diff --git a/js/.script.js.swp b/js/.script.js.swp deleted file mode 100644 index 072b6e9..0000000 Binary files a/js/.script.js.swp and /dev/null differ 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.
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.

Celles-ci m’ont permis de comprendre qu’un code doit autosuffisant et compréhensible, facilitant ainsi sa réutilisation et son adaptation.

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.
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.

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.

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
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.
### Projets
 - [CV](./project/cv.sty)
 - **Description :**
- Ce projet consiste en la simplification de la création d’un CV en LaTeX.
- **Compétences acquises :**
- Maîtrise de LaTeX
- Développement de plugins
- Documentation et partage de code

- [PERT](./projets/pert.c)
 - **Description :**
 - 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.
- **Compétences acquises :**
- Gestion de projet
- Optimisation logicielle
- Structures de données avancées

### Contact
Email : [Thibaud.LA_RIVIERE-GILLET@etu.uca.fr](Thibaud.LA_RIVIERE-GILLET@etu.uca.fr)
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.
", + 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 = `
-

${item.title}

-

${item.content}

-

Repository

+
+
+

${item.title}

+ me +
+

${item.content}

+

Repository

+
`; - return; + return; } subSections.innerHTML = ''; @@ -93,13 +76,12 @@ document.addEventListener('DOMContentLoaded', function () { const li = document.createElement('li'); li.classList.add('file-item'); li.innerHTML = ` - ${item.filename}${item.filextension} + ${item.filename}${item.filextension}
- ${item.filename}${item.filextension} + ${item.filename}${item.filextension} `; 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 = `
-

${title}

-

${content}

-

Repository

+
+ ${title} +
+
+

${title}

+

${content}

+

Repository

+
`; });