From 9203ced8aa320f3cd1af854871b238312c03d033 Mon Sep 17 00:00:00 2001
From: hugo <hugo.creneau@etu.uca.fr>
Date: Thu, 6 Jun 2024 09:40:54 +0200
Subject: [PATCH] codesmell

---
 index.html | 533 ++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 368 insertions(+), 165 deletions(-)

diff --git a/index.html b/index.html
index 2ab2e07..b9ebe43 100644
--- a/index.html
+++ b/index.html
@@ -40,14 +40,22 @@
                         <div class="home-info padd-15">
                             <h3 class="hello">Bonjour, je m'appelle <span class="name">Hugo Creneau</span></h3>
                             <h3 class="my-profession">Je suis <span class="typing">Developpeur</span></h3>
-                            <p>En tant qu'étudiant en Première année de <strong>BUT Informatique</strong> passionné par le développement web, 
-                                je maîtrise les langages HTML, CSS, JavaScript et Python pour créer des applications web <strong>efficaces</strong>
-                                . Mon approche <strong>créative</strong> se reflète dans mes projets, tandis que mon <strong>adaptabilité</strong> 
-                                me permet de relever les défis techniques qui se présentent. Ma <strong>rigueur</strong> garantit la qualité et la 
-                                fiabilité de chaque développement. En combinant mes <strong>compétences</strong> techniques, incluant des 
-                                connaissances en frameworks tels que <strong>Vue, Nuxt, Angular, React</strong>, et mes <strong>qualités</strong>, 
-                                je suis capable de transformer des concepts en applications web de manière professionnelle. Pour la rentrée 2024, 
-                                je suis à la recherche d'une <strong>alternance</strong> dans le domaine du développement web sur un rythme de 3 
+                            <p>En tant qu'étudiant en Première année de <strong>BUT Informatique</strong> 
+                                passionné par le développement web, 
+                                je maîtrise les langages HTML, CSS, JavaScript et Python pour créer des 
+                                applications web <strong>efficaces</strong>
+                                . Mon approche <strong>créative</strong> se reflète dans mes projets, 
+                                tandis que mon <strong>adaptabilité</strong> 
+                                me permet de relever les défis techniques qui se présentent. Ma 
+                                <strong>rigueur</strong> garantit la qualité et la 
+                                fiabilité de chaque développement. En combinant mes <strong>compétences</strong> 
+                                techniques, incluant des 
+                                connaissances en frameworks tels que <strong>Vue, Nuxt, Angular, React</strong>
+                                , et mes <strong>qualités</strong>, 
+                                je suis capable de transformer des concepts en applications web de manière 
+                                professionnelle. Pour la rentrée 2024, 
+                                je suis à la recherche d'une <strong>alternance</strong> dans le domaine du 
+                                développement web sur un rythme de 3 
                                 mois 3 mois.</p>
                             <p>Je vous invite à télécharger mon CV ci-dessous ou à consulter mon LinkedIn.</p>
                             <a href="./images/CVHugoCRENEAU.pdf" download="./images/CVHugoCRENEAU.pdf" class="btn" id="boutonCV">Mon CV</a>
@@ -80,21 +88,31 @@
                                                         <em class="fa fa-calendar"></em> 2023 -2024
                                                     </h3>
                                                     <h4 class="timeline-title">1ere année BUT Informatique</h4>
-                                                    <p class="timeline-text">Le <strong>BUT Informatique</strong> me plonge dans le développement, 
-                                                        un monde d'opportunités pour l'innovation. Durant cette année, j'ai abordé de nombreux 
-                                                        sujets tels que le <strong>développement web</strong> avec les langages HTML et CSS, mais 
-                                                        également le <strong>développement objet</strong> en C# et C++ et Python ainsi que 
-                                                        l'<strong>administration de bases de données</strong> en PostgreSQL.</p>
+                                                    <p class="timeline-text">Le <strong>BUT Informatique</strong> 
+                                                        me plonge dans le développement, 
+                                                        un monde d'opportunités pour l'innovation. Durant 
+                                                        cette année, j'ai abordé de nombreux 
+                                                        sujets tels que le <strong>développement web</strong> 
+                                                        avec les langages HTML et CSS, mais 
+                                                        également le <strong>développement objet</strong> en 
+                                                        C# et C++ et Python ainsi que 
+                                                        l'<strong>administration de bases de données</strong> 
+                                                        en PostgreSQL.</p>
                                                 </div>
                                                 <div class="timeline-item">
                                                     <div class="circle-dot"></div>
                                                     <h3 class="timeline-date">
                                                         <em class="fa fa-calendar"></em> 2021 - 2023
                                                     </h3>
-                                                    <h4 class="timeline-title">Obtention du diplome du Baccalauréat</h4>
-                                                    <p class="timeline-text">Durant ces années au lycée Jean-Zay à Thiers(63), j'ai obtenu le 
-                                                        diplome du <strong>Baccalauréat</strong> avec <strong>mention</strong> en étudiant les 
-                                                        spécialités Mathématiques, Physique-Chimie et Numérique et sciences de l'informatique(NSI).
+                                                    <h4 class="timeline-title">
+                                                        Obtention du diplome du Baccalauréat
+                                                    </h4>
+                                                    <p class="timeline-text">Durant ces années au lycée 
+                                                        Jean-Zay à Thiers(63), j'ai obtenu le 
+                                                        diplome du <strong>Baccalauréat</strong> avec 
+                                                        <strong>mention</strong> en étudiant les 
+                                                        spécialités Mathématiques, Physique-Chimie et 
+                                                        Numérique et sciences de l'informatique(NSI).
                                                     </p>
                                                 </div>
                                             </div>
@@ -109,19 +127,31 @@
                                                 <div class="timeline-item">
                                                     <div class="circle-dot"></div>
                                                     <h3 class="timeline-date">
-                                                        <em class="fa fa-calendar"></em> 22-23 mai 2022 - 3-4 juin 2023
+                                                        <em class="fa fa-calendar"></em> 22-23 mai 2022 - 
+                                                        3-4 juin 2023
                                                     </h3>
-                                                    <h4 class="timeline-title">Bénévolat durant l'évenement enduforez</h4>
-                                                    <p class="timeline-text">En mai 2022 et en juin 2023, je faisais partie des responsables de 
-                                                        l’<strong>organisation</strong> d’un événement de VTT nommé EnduForez accueillant plus de 
-                                                        700 participants. J’ai donc dû participer a la <strong>gestion</strong> du logement des 
-                                                        personnes, de leur <strong>restauration</strong>, du <strong>stockage</strong> de leurs 
-                                                        véhicules, de l’<strong>acheminement</strong> des participants par navettes sur le lieu de 
-                                                        départ de l’événement, ainsi que leur <strong>ravitaillement</strong> lors du parcours. 
-                                                        Cette expérience m’a donc permis de prendre mes <strong>responsabilités</strong> lors de 
-                                                        l’organisation d’un événement sportif accueillant de nombreuses personnes ainsi que 
-                                                        d’apprendre à <strong>réagir</strong> vite face à des situations pouvant s’avérer 
-                                                        problématiques telles que, lors de cet événement, des prises de <strong>retard</strong> 
+                                                    <h4 class="timeline-title">Bénévolat durant l'évenement 
+                                                        enduforez</h4>
+                                                    <p class="timeline-text">En mai 2022 et en juin 
+                                                        2023, je faisais partie des responsables de 
+                                                        l’<strong>organisation</strong> d’un événement 
+                                                        de VTT nommé EnduForez accueillant plus de 
+                                                        700 participants. J’ai donc dû participer a la 
+                                                        <strong>gestion</strong> du logement des 
+                                                        personnes, de leur <strong>restauration</strong>
+                                                        , du <strong>stockage</strong> de leurs 
+                                                        véhicules, de l’<strong>acheminement</strong> des 
+                                                        participants par navettes sur le lieu de 
+                                                        départ de l’événement, ainsi que leur 
+                                                        <strong>ravitaillement</strong> lors du parcours. 
+                                                        Cette expérience m’a donc permis de prendre mes 
+                                                        <strong>responsabilités</strong> lors de 
+                                                        l’organisation d’un événement sportif accueillant 
+                                                        de nombreuses personnes ainsi que 
+                                                        d’apprendre à <strong>réagir</strong> vite face à 
+                                                        des situations pouvant s’avérer 
+                                                        problématiques telles que, lors de cet événement, 
+                                                        des prises de <strong>retard</strong> 
                                                         liées aux navettes.</p>
                                                     <img src="images/end2.png" id="end1" alt="" width="auto" height="auto">
                                                 </div>
@@ -148,9 +178,12 @@
                                     <em class="fa fa-pencil-alt"></em>
                                 </div>
                                 <h4>Web Design</h4>
-                                <p>Le <strong>webdesign</strong> est l'art de concevoir des interfaces web attrayantes et fonctionnelles, 
-                                    alliant <strong>esthétique</strong> et <strong>utilité</strong> pour offrir une expérience utilisateur 
-                                    optimale. La réalisation de ce <strong>PortFolio</strong> m'a permis de m'entrainer dans ce domaine.</p>
+                                <p>Le <strong>webdesign</strong> est l'art de concevoir des 
+                                    interfaces web attrayantes et fonctionnelles, 
+                                    alliant <strong>esthétique</strong> et 
+                                    <strong>utilité</strong> pour offrir une expérience utilisateur 
+                                    optimale. La réalisation de ce <strong>PortFolio</strong>
+                                     m'a permis de m'entrainer dans ce domaine.</p>
                             </div>
                         </div>
                         <div class="competences-item padd-15">
@@ -159,10 +192,15 @@
                                     <em class="fa fa-laptop-code"></em>
                                 </div>
                                 <h4>Web Development</h4>
-                                <p>Le <strong>développement web</strong> englobe la création et la maintenance de sites web, utilisant des 
-                                    langages de programmation comme <strong>HTML</strong>, <strong>CSS</strong> et <strong>JavaScript</strong> 
-                                    pour concevoir des interfaces interactives et des fonctionnalités <strong>dynamiques</strong>. Les cours de 
-                                    web m'ont formés à cette pratique et j'ai continué à en faire après la fin de ce module car c'est un domaine 
+                                <p>Le <strong>développement web</strong> englobe la 
+                                    création et la maintenance de sites web, utilisant des 
+                                    langages de programmation comme <strong>HTML</strong>
+                                    , <strong>CSS</strong> et <strong>JavaScript</strong> 
+                                    pour concevoir des interfaces interactives et 
+                                    des fonctionnalités <strong>dynamiques</strong>. 
+                                    Les cours de 
+                                    web m'ont formés à cette pratique et j'ai continué 
+                                    à en faire après la fin de ce module car c'est un domaine 
                                     qui me <strong>passionne</strong>.</p>
                             </div>
                         </div>
@@ -172,11 +210,16 @@
                                     <em class="fa fa-rocket"></em>
                                 </div>
                                 <h4>Frameworks web</h4>
-                                <p>Les <strong>frameworks web</strong> sont des outils essentiels qui permettent de structurer et de faciliter le 
-                                    développement d'applications web. En utilisant des frameworks tels que <strong>Angular</strong>, 
-                                    <strong>Vue</strong>, <strong>Nuxt</strong> ou <strong>React</strong>. Je peux créer des interfaces 
-                                    utilisateur dynamiques et performantes. Ces frameworks offrent une <strong>liberté</strong> créative 
-                                    immense, permettant de développer rapidement des fonctionnalités complexes à partir de structures solides 
+                                <p>Les <strong>frameworks web</strong> sont des outils 
+                                    essentiels qui permettent de structurer et de faciliter le 
+                                    développement d'applications web. En utilisant 
+                                    des frameworks tels que <strong>Angular</strong>, 
+                                    <strong>Vue</strong>, <strong>Nuxt</strong> ou 
+                                    <strong>React</strong>. Je peux créer des interfaces 
+                                    utilisateur dynamiques et performantes. Ces 
+                                    frameworks offrent une <strong>liberté</strong> créative 
+                                    immense, permettant de développer rapidement des 
+                                    fonctionnalités complexes à partir de structures solides 
                                     et modulaires.</p>
                             </div>
                         </div>
@@ -186,12 +229,18 @@
                                     <em class="fa fa-code"></em>
                                 </div>
                                 <h4>Coding</h4>
-                                <p>Le <strong>coding</strong>, ou <strong>codage</strong>, fait référence à l'acte d'écrire du code informatique 
-                                    dans des langages de programmation <strong>spécifiques</strong>, permettant de créer des applications, 
-                                    des sites web, des logiciels et bien plus encore. C'est une pratique qui me passionne de part la 
-                                    <strong>liberté</strong> que cela procure de pourvoir tout créer à partir de rien. J'ai pour habiotude 
-                                    d'utiliser l'éditeur de code <strong>Visual Studio Code</strong> car celui-ci à un design confortable ainsi 
-                                    que de nombreuses fonctionnalités utiles telles que Git qui permet le <strong>partage</strong> de mon travail 
+                                <p>Le <strong>coding</strong>, ou <strong>codage</strong>, 
+                                    fait référence à l'acte d'écrire du code informatique 
+                                    dans des langages de programmation <strong>spécifiques</strong>
+                                    , permettant de créer des applications, 
+                                    des sites web, des logiciels et bien plus encore. 
+                                    C'est une pratique qui me passionne de part la 
+                                    <strong>liberté</strong> que cela procure de pourvoir 
+                                    tout créer à partir de rien. J'ai pour habiotude 
+                                    d'utiliser l'éditeur de code <strong>Visual Studio Code</strong> 
+                                    car celui-ci à un design confortable ainsi 
+                                    que de nombreuses fonctionnalités utiles telles que Git qui 
+                                    permet le <strong>partage</strong> de mon travail 
                                     avec mes coéquipiers.</p>
                             </div>
                         </div>
@@ -201,11 +250,17 @@
                                     <em class="fa fa-puzzle-piece"></em>
                                 </div>
                                 <h4>Développement Orienté Objet</h4>
-                                <p>Le <strong>développement orienté objet</strong> est une approche de programmation où les concepts du monde 
-                                    réel sont modélisés en objets, chacun ayant des <strong>propriétés</strong> et des comportements 
-                                    <strong>spécifiques</strong>. J'ai découvert à travers le <strong>C++</strong> ce versant du développement, 
-                                    c'est un langage crée à partir du <strong>C</strong> que j'avais étudié précédament. Cela m'a permis de me 
-                                    focaliser sur le côté <strong>objet</strong> du développement plutôt que sur le <strong>langage</strong></p>
+                                <p>Le <strong>développement orienté objet</strong> 
+                                    est une approche de programmation où les concepts 
+                                    du monde 
+                                    réel sont modélisés en objets, chacun ayant des 
+                                    <strong>propriétés</strong> et des comportements 
+                                    <strong>spécifiques</strong>. J'ai découvert à travers 
+                                    le <strong>C++</strong> ce versant du développement, 
+                                    c'est un langage crée à partir du <strong>C</strong> 
+                                    que j'avais étudié précédament. Cela m'a permis de me 
+                                    focaliser sur le côté <strong>objet</strong> du 
+                                    développement plutôt que sur le <strong>langage</strong></p>
                             </div>
                         </div>
                         <div class="competences-item padd-15">
@@ -214,11 +269,18 @@
                                     <em class="fa fa-cogs"></em>
                                 </div>
                                 <h4>Développement Applicatif</h4>
-                                <p>Le <strong>développement applicatif</strong> avec <strong>XAML</strong> et <strong>C#</strong> consiste à 
-                                    créer des applications interactives pour les plateformes Windows en utilisant le langage de <strong>balisage 
-                                        XAML</strong> pour la conception d'interfaces utilisateur et le langage de programmation 
-                                        <strong>C#</strong> pour la <strong>logique</strong> applicative. Cette approche permet de développer 
-                                        des applications riches et performantes pour une <strong>variété</strong> de dispositifs.</p>
+                                <p>Le <strong>développement applicatif</strong> avec 
+                                    <strong>XAML</strong> et <strong>C#</strong> 
+                                    consiste à 
+                                    créer des applications interactives pour les 
+                                    plateformes Windows en utilisant le langage de 
+                                    <strong>balisage 
+                                        XAML</strong> pour la conception d'interfaces 
+                                        utilisateur et le langage de programmation 
+                                        <strong>C#</strong> pour la <strong>logique</strong> 
+                                        applicative. Cette approche permet de développer 
+                                        des applications riches et performantes pour 
+                                        une <strong>variété</strong> de dispositifs.</p>
                             </div>
                         </div>
                     </div>
@@ -238,12 +300,20 @@
                                     <em class="fa fa-paint-brush"></em>
                                 </div>
                                 <h4>Créativité</h4>
-                                <p>La <strong>créativité</strong> est une qualité essentielle dans le domaine du design et du développement, 
-                                    permettant de générer des idées <strong>innovantes</strong>, de résoudre des problèmes de manière 
-                                    <strong>originale</strong> et d'apporter une touche unique à chaque projet. Elle se manifeste par la 
-                                    capacité à <strong>penser différemment</strong>, à explorer de nouvelles voies et à repousser les 
-                                    <strong>limites</strong> de la conception et de la programmation. Le développement de ce PortFolio ainsi 
-                                    que de mes différents projets m'ont permis d'entrainer cette <strong>qualité</strong> et de l'éxercer avec 
+                                <p>La <strong>créativité</strong> est une qualité 
+                                    essentielle dans le domaine du design et du 
+                                    développement, 
+                                    permettant de générer des idées <strong>innovantes</strong>
+                                    , de résoudre des problèmes de manière 
+                                    <strong>originale</strong> et d'apporter une touche 
+                                    unique à chaque projet. Elle se manifeste par la 
+                                    capacité à <strong>penser différemment</strong>, à 
+                                    explorer de nouvelles voies et à repousser les 
+                                    <strong>limites</strong> de la conception et de la 
+                                    programmation. Le développement de ce PortFolio ainsi 
+                                    que de mes différents projets m'ont permis 
+                                    d'entrainer cette <strong>qualité</strong> et 
+                                    de l'éxercer avec 
                                     brio.</p>
                             </div>
                         </div>
@@ -253,12 +323,18 @@
                                     <em class="fa fa-puzzle-piece"></em>
                                 </div>
                                 <h4>Adaptibilité</h4>
-                                <p>L'<strong>adaptabilité</strong> est une qualité clé qui me caractérise. Elle se manifeste par ma capacité à 
-                                    m'ajuster facilement aux <strong>changements</strong>, à m'adapter à de nouvelles situations et à trouver 
-                                    des solutions <strong>créatives</strong> face à des défis imprévus. Cette qualité me permet de rester 
-                                    <strong>efficace</strong> et <strong>productif</strong> dans des environnements dynamiques et en 
-                                    <strong>constante</strong> évolution. Je m'adapte en continu dans le développement car, pour de nombreux 
-                                    projets, il est necessaire de changer de langage et donc de s'adapter <strong>constamment</strong>.</p>
+                                <p>L'<strong>adaptabilité</strong> est une qualité clé 
+                                    qui me caractérise. Elle se manifeste par ma capacité à 
+                                    m'ajuster facilement aux <strong>changements</strong>
+                                    , à m'adapter à de nouvelles situations et à trouver 
+                                    des solutions <strong>créatives</strong> face à des 
+                                    défis imprévus. Cette qualité me permet de rester 
+                                    <strong>efficace</strong> et <strong>productif</strong>
+                                     dans des environnements dynamiques et en 
+                                    <strong>constante</strong> évolution. Je m'adapte en 
+                                    continu dans le développement car, pour de nombreux 
+                                    projets, il est necessaire de changer de langage et 
+                                    donc de s'adapter <strong>constamment</strong>.</p>
                             </div>
                         </div>
                         <div class="qualites-item padd-15">
@@ -267,13 +343,23 @@
                                     <em class="fa fa-ruler"></em>
                                 </div>
                                 <h4>Rigueur</h4>
-                                <p>La <strong>rigueur</strong> est l'une de mes qualités fondamentales. Elle se manifeste dans mon approche 
-                                    méthodique du travail, ma capacité à suivre des processus avec <strong>précision</strong> et à maintenir 
-                                    des normes élevées de qualité dans tout ce que j'entreprends. Cela se traduit également par mon souci du 
-                                    <strong>détail</strong> et ma <strong>persévérance</strong> à atteindre les objectifs fixés, même dans les 
-                                    situations les plus <strong>exigeantes</strong>. Dans le développement, on doit absolument, pour créer un 
-                                    code <strong>fonctionnel</strong> créant une bonne expérience pour l'utilisateur, obtenir un code fonctionnel 
-                                    dans bug, il faut être <strong>rigoureux</strong> pour cela.</p>
+                                <p>La <strong>rigueur</strong> est l'une de mes qualités 
+                                    fondamentales. Elle se manifeste dans mon approche 
+                                    méthodique du travail, ma capacité à suivre des 
+                                    processus avec <strong>précision</strong> et à maintenir 
+                                    des normes élevées de qualité dans tout ce que 
+                                    j'entreprends. Cela se traduit également par 
+                                    mon souci du 
+                                    <strong>détail</strong> et ma <strong>persévérance</strong>
+                                     à atteindre les objectifs fixés, même dans les 
+                                    situations les plus <strong>exigeantes</strong>. 
+                                    Dans le développement, on doit absolument, pour 
+                                    créer un 
+                                    code <strong>fonctionnel</strong> créant une 
+                                    bonne expérience pour l'utilisateur, obtenir un 
+                                    code fonctionnel 
+                                    dans bug, il faut être <strong>rigoureux</strong> 
+                                    pour cela.</p>
                             </div>
                         </div>
                     </div>
@@ -300,26 +386,43 @@
                                 <div class="portfolio-description-img1 pdesc hidden padd-15" id="portfolio-1">
                                     <h3>Service d'envoi massif d'email</h3>
                                     <h4>Contexte :</h4>
-                                    <p>Une entreprise peut avoir besoin d'envoyer nombre d'Emails à ses clients. C'est pour cela que j'ai 
+                                    <p>Une entreprise peut avoir besoin d'envoyer nombre 
+                                        d'Emails à ses clients. C'est pour cela que j'ai 
                                         entrepris la création de ce SAAS</p>
                                     <h4>Objectif :</h4>
-                                    <p>L'objectif est de réaliser avec différents outils tels que React, Tailwind CSS, Node JS ainsi que 
-                                        PostgreSQL. Un service d'envoi massif d'emails marketing.</p>
+                                    <p>L'objectif est de réaliser avec différents outils 
+                                        tels que React, Tailwind CSS, Node JS ainsi que 
+                                        PostgreSQL. Un service d'envoi massif d'emails 
+                                        marketing.</p>
                                     <h4>Travail Réalisé :</h4>
-                                    <p>- J'ai premièrement choisi ma <strong>stack</strong> pour le développement de ce projet, j'ai choisi le 
-                                        framework JavaScript <strong>React JS</strong> pour deux raisons, le fait que c'est le framework que 
-                                        je <strong>maitrise</strong> le plus ainsi que le fait que ce frameword permette un design moderne.</p>
-                                    <p>- J'ai ensuite pensé la <strong>structure</strong> du projet afin d'avoir une vision d'ensemble pour la 
+                                    <p>- J'ai premièrement choisi ma <strong>stack</strong>
+                                         pour le développement de ce projet, j'ai choisi le 
+                                        framework JavaScript <strong>React JS</strong> 
+                                        pour deux raisons, le fait que c'est le framework que 
+                                        je <strong>maitrise</strong> le plus ainsi que
+                                         le fait que ce frameword permette un design moderne.</p>
+                                    <p>- J'ai ensuite pensé la <strong>structure</strong> 
+                                        du projet afin d'avoir une vision d'ensemble pour la 
                                         suite.</p>
-                                    <p>- J'ai développé l'<strong>interface</strong> de la page d'accueil en utilisant l'outil 
+                                    <p>- J'ai développé l'<strong>interface</strong> de 
+                                        la page d'accueil en utilisant l'outil 
                                         <strong>shadcn UI</strong>.</p>
-                                    <p>- J'ai entrepris la création d'un système de compte en utilisant <strong>PostgreSQL</strong>, un langage 
-                                        de base de données que je maitrise grâce à mes <strong>études</strong>. Il faut que chaque utilisateur 
-                                        puisse créer un compte avec une <strong>adresse mail</strong> ou un compte <strong>Google</strong>, et 
-                                        qu'il renseigne un mot de passe qui sera stocké après avoir été <strong>hashé</strong>.</p>
+                                    <p>- J'ai entrepris la création d'un système de 
+                                        compte en utilisant <strong>PostgreSQL</strong>
+                                        , un langage 
+                                        de base de données que je maitrise grâce à 
+                                        mes <strong>études</strong>. Il faut que chaque 
+                                        utilisateur 
+                                        puisse créer un compte avec une <strong>adresse
+                                             mail</strong> ou un compte <strong>Google</strong>
+                                             , et 
+                                        qu'il renseigne un mot de passe qui sera stocké 
+                                        après avoir été <strong>hashé</strong>.</p>
                                     <h4>Resultat :</h4>
-                                    <p>Pour le moment, je possède une <strong>interface</strong> d'accueil moderne ainsi qu'une base de données 
-                                        pouvant stocker des utilisateurs. La prochaine étape est de <strong>lier</strong> la base de données et 
+                                    <p>Pour le moment, je possède une <strong>interface</strong>
+                                         d'accueil moderne ainsi qu'une base de données 
+                                        pouvant stocker des utilisateurs. La prochaine étape
+                                         est de <strong>lier</strong> la base de données et 
                                         le projet.</p>
                                     <a href="https://github.com/hugocrne/marketmailtmp">Cliquez ici pour consulter le code source</a>
                                 </div>
@@ -333,26 +436,44 @@
                                 <div class="portfolio-description-img2 pdesc hidden padd-15" id="portfolio-2">
                                     <h3>Implémentation du jeu PacMan en JavaScript</h3>
                                     <h4>Contexte :</h4>
-                                    <p>Je suis passionné de jeu vidéo et j'ai toujours voulu en créer un, également passionné par le développement 
-                                        web, j'ai eu envie d'apprendre le JavaScript, j'ai donc voulu conjuguer ces deux envies.</p>
+                                    <p>Je suis passionné de jeu vidéo et j'ai 
+                                        toujours voulu en créer un, également 
+                                        passionné par le développement 
+                                        web, j'ai eu envie d'apprendre le JavaScript,
+                                         j'ai donc voulu conjuguer ces deux envies.</p>
                                     <h4>Objectif :</h4>
-                                    <p>L'objectif est de créer une implémentation du jeu PacMan en JavaScript</p>
+                                    <p>L'objectif est de créer une implémentation 
+                                        du jeu PacMan en JavaScript</p>
                                     <h4>Travail Réalisé :</h4>
-                                    <p>- J'ai premièrement choisi la <strong>manière</strong> dont je voulais créer le plateau, pour cela, j'ai 
-                                        crée une <strong>matrice</strong> remplie des chiffres 1 et 2, 1 lorsque c'est un mur et 2 lorsque la voie 
+                                    <p>- J'ai premièrement choisi la <strong>manière</strong>
+                                         dont je voulais créer le plateau, pour cela, j'ai 
+                                        crée une <strong>matrice</strong> remplie des 
+                                        chiffres 1 et 2, 1 lorsque c'est un mur et 2 
+                                        lorsque la voie 
                                         est libre.</p>
-                                    <p>- J'ai ensuite crée le <strong>comportement</strong> du personnage jouable en l'animant avec des 
-                                        <strong>sprites</strong> trouvés sur internet ainsi qu'en codant ses différentes méthodes et en créant 
+                                    <p>- J'ai ensuite crée le <strong>comportement</strong> 
+                                        du personnage jouable en l'animant avec des 
+                                        <strong>sprites</strong> trouvés sur internet
+                                         ainsi qu'en codant ses différentes méthodes et 
+                                         en créant 
                                         les <strong>collisions</strong> avec les murs.</p>
-                                    <p>- Pour les ennemis, les 4 fantomes, je leur ai codé un <strong>comportement</strong> plus ou moins 
-                                        <strong>aléatoire</strong>. En effet, ils cherchent à atteindre PacMan si celui-ci n'est pas 
-                                        <strong>trop loin</strong>, sinon leurs mouvements sont <strong>aléatoires</strong>.</p>
-                                    <p>- Pour finir, j'ai implémenté les intéractions entre PacMan et les fantomes en créant le système de vies, 
-                                        j'ai mis sur le plateau les "Gums" que PacMan doit manger et j'ai implémenté le visuel du jeu.</p>
+                                    <p>- Pour les ennemis, les 4 fantomes, je leur ai codé 
+                                        un <strong>comportement</strong> plus ou moins 
+                                        <strong>aléatoire</strong>. En effet, ils cherchent 
+                                        à atteindre PacMan si celui-ci n'est pas 
+                                        <strong>trop loin</strong>, sinon leurs mouvements 
+                                        sont <strong>aléatoires</strong>.</p>
+                                    <p>- Pour finir, j'ai implémenté les intéractions entre
+                                         PacMan et les fantomes en créant le système de vies, 
+                                        j'ai mis sur le plateau les "Gums" que PacMan doit
+                                         manger et j'ai implémenté le visuel du jeu.</p>
                                     <h4>Resultat :</h4>
-                                    <p>Je possède maintenant un jeu PacMan <strong>fonctionnel</strong> qui se joue avec les flèches 
-                                        directionnelles et j'ai pu apprendre les bases du <strong>JavaScript</strong>.</p>
-                                    <p>Vous pouvez retrouver le jeu en cliquant <a href="https://hugocrne.github.io/PacMan_Game_js/">ici</a> 
+                                    <p>Je possède maintenant un jeu PacMan <strong>fonctionnel</strong>
+                                         qui se joue avec les flèches 
+                                        directionnelles et j'ai pu apprendre les bases
+                                         du <strong>JavaScript</strong>.</p>
+                                    <p>Vous pouvez retrouver le jeu en cliquant
+                                         <a href="https://hugocrne.github.io/PacMan_Game_js/">ici</a> 
                                         ou consulter le code source ci-dessous.</p>
                                     <a href="https://github.com/hugocrne/PacMan_Game_js">Code Source</a>
                                 </div>
@@ -366,22 +487,32 @@
                                 <div class="portfolio-description-img3 pdesc hidden padd-15" id="portfolio-3">
                                     <h3>Mon PortFolio avec ReactJS</h3>
                                     <h4>Contexte :</h4>
-                                    <p>Je suis passionné de développement web et je souhaitais me familiariser avec le framework JavaScript 
-                                        ReactJS, pour cela, je me suis sit que la création d'un PortFolio était la meilleure idée</p>
+                                    <p>Je suis passionné de développement web et je 
+                                        souhaitais me familiariser avec le framework JavaScript 
+                                        ReactJS, pour cela, je me suis sit que la 
+                                        création d'un PortFolio était la meilleure idée</p>
                                     <h4>Objectif :</h4>
                                     <p>Créer un PortFolio en utilisant ReactJS</p>
                                     <h4>Travail Réalisé :</h4>
-                                    <p>- J'ai premièrement crée le <strong>design</strong> de mon PortFolio en m'inspirant de ce qui a déjà 
+                                    <p>- J'ai premièrement crée le <strong>design</strong> 
+                                        de mon PortFolio en m'inspirant de ce qui a déjà 
                                         été fait par d'autres.</p>
-                                    <p>- J'ai ensuite choisi les outils que j'allais utiliser comme par exemple <strong>shadcn.ui</strong> 
-                                        pour certains styles, la police de <strong>Vercel</strong> ou encode les icones de 
+                                    <p>- J'ai ensuite choisi les outils que j'allais 
+                                        utiliser comme par exemple <strong>shadcn.ui</strong> 
+                                        pour certains styles, la police de <strong>Vercel</strong>
+                                         ou encode les icones de 
                                         <strong>Lucide</strong></p>
-                                    <p>- J'ai enfin pu développer mon site web en utilisant activement <strong>Tailwind CSS</strong> afin de 
-                                        créer plus vite et plus rapidement les styles, tout en séparant les différentes parties du site en 
-                                        <strong>composants</strong> que je peux réutiliser plusieurs fois.</p>
+                                    <p>- J'ai enfin pu développer mon site web en utilisant
+                                         activement <strong>Tailwind CSS</strong> afin de 
+                                        créer plus vite et plus rapidement les styles, tout
+                                         en séparant les différentes parties du site en 
+                                        <strong>composants</strong> que je peux réutiliser
+                                         plusieurs fois.</p>
                                     <h4>Resultat :</h4>
-                                    <p>Je possède maintenant un PortFolio développé avec React JS que je pourrais publier à l'instant ou je 
-                                        le voudrais. J'ai également pu me familiariser grandement avec cette technologie.</p>
+                                    <p>Je possède maintenant un PortFolio développé avec
+                                         React JS que je pourrais publier à l'instant ou je 
+                                        le voudrais. J'ai également pu me familiariser 
+                                        grandement avec cette technologie.</p>
                                     <a href="https://github.com/hugocrne/reactportfolio">Code Source</a>
                             </div>
                         </div>
@@ -398,26 +529,42 @@
                                 <div class="portfolio-description-img4 pdesc hidden padd-15" id="portfolio-4">
                                     <h3>Création d'un système réseau</h3>
                                     <h4>Contexte :</h4>
-                                    <p>Ce projet est un projet universitaire réalisé sous la supervision de notre professeur de réseaux.</p>
+                                    <p>Ce projet est un projet universitaire réalisé sous
+                                         la supervision de notre professeur de réseaux.</p>
                                     <h4>Objectif :</h4>
-                                    <p>Je devais, à partir d'une machine virutelle, créer des communications entre plusieurs machines à l'aide du 
+                                    <p>Je devais, à partir d'une machine virutelle, 
+                                        créer des communications entre plusieurs machines 
+                                        à l'aide du 
                                         protocode FTP permettant leur commmunication.</p>
                                     <h4>Travail Réalisé :</h4>
-                                    <p>- J'ai premièrement du configurer les <strong>adresses IP</strong> des différentes machines en configurant 
-                                        les <strong>fichiers</strong> "/etc/hosts" "/etc/hostname" et "/etc/network/interfaces" grace à cela, 
-                                        les machines peuvent se "Ping" c'est à dire s'envoyer des signaux et donc des paquets.</p>
-                                    <p>- J'ai ensuite du configurer un <strong>server web Apache</strong> qui affichait une page 
-                                        <strong>web</strong> par défaut dés qu'il était consulté.</p>
-                                    <p>- Enfin, j'ai configuré une <strong>communication ssh</strong> entre les différentes machines afin 
-                                        qu'elles puissent <strong>récuperer</strong> des fichiers l'une chez l'autre à tavers <strong>différents 
+                                    <p>- J'ai premièrement du configurer les 
+                                        <strong>adresses IP</strong> des différentes machines 
+                                        en configurant 
+                                        les <strong>fichiers</strong> "/etc/hosts" "/etc/hostname"
+                                         et "/etc/network/interfaces" grace à cela, 
+                                        les machines peuvent se "Ping" c'est à dire 
+                                        s'envoyer des signaux et donc des paquets.</p>
+                                    <p>- J'ai ensuite du configurer un <strong>server web Apache</strong>
+                                         qui affichait une page 
+                                        <strong>web</strong> par défaut dés qu'il 
+                                        était consulté.</p>
+                                    <p>- Enfin, j'ai configuré une <strong>communication ssh</strong>
+                                         entre les différentes machines afin 
+                                        qu'elles puissent <strong>récuperer</strong> des fichiers
+                                         l'une chez l'autre à tavers <strong>différents 
                                             utilisateurs</strong>.</p>
-                                    <p>- Afin de sécuriser ce réseau, j'ai utilisé le logiciel <strong>fail2ban</strong> et je l'ai configuré 
-                                        afin de me protéger des attaques DDOS, c'està dire un <strong>envoi massif</strong> de paquets à mon 
-                                        server faisant planter le réseau. J'ai pu configurer un <strong>système de banissement</strong> des 
+                                    <p>- Afin de sécuriser ce réseau, j'ai utilisé le logiciel
+                                         <strong>fail2ban</strong> et je l'ai configuré 
+                                        afin de me protéger des attaques DDOS, c'està dire un
+                                         <strong>envoi massif</strong> de paquets à mon 
+                                        server faisant planter le réseau. J'ai pu configurer un
+                                         <strong>système de banissement</strong> des 
                                         adresses IP ainsi qu'une suspension momentannée de certaines.</p>
                                     <h4>Resultat :</h4>
-                                    <p>J'ai pu réaliser presque toutes les taches qui m'étaient demandées, j'ai pour cela reçu la note de 
-                                        <strong>17/20</strong> pour une moyenne de classe aux alentours de 14.</p>
+                                    <p>J'ai pu réaliser presque toutes les taches qui m'étaient
+                                         demandées, j'ai pour cela reçu la note de 
+                                        <strong>17/20</strong> pour une moyenne de classe 
+                                        aux alentours de 14.</p>
                                 </div>
                             </div>
                         </div>
@@ -429,27 +576,52 @@
                                 <div class="portfolio-description-img5 pdesc hidden padd-15" id="portfolio-5">
                                     <h3>Création de base de données</h3>
                                     <h4>Contexte :</h4>
-                                    <p>Pour ce projet universitaire non supervisé par un professeur, nous devions, en équipe de 4, créer la 
+                                    <p>Pour ce projet universitaire non supervisé 
+                                        par un professeur, nous devions, en équipe de 4, 
+                                        créer la 
                                         base de données d'une entreprise fictive</p>
                                     <h4>Objectif :</h4>
-                                    <p>Nous devions créer la base de donnée de l'entreprise fictive AskehCorp, une entreprise leader de la 
-                                        grande distribution. A l'issue de ce travail, nous devions rendre un Modèle Conceptuel de Données (MCD) 
-                                        qui décrit chacune de nos tables SQL ainsi qu'un script PostgreSQL créant ces différentes tables, nous 
-                                        devions également réaliser un oral afin de présenter notre travail à un professeur.</p>
+                                    <p>Nous devions créer la base de donnée de l'entreprise 
+                                        fictive AskehCorp, une entreprise leader de la 
+                                        grande distribution. A l'issue de ce travail, 
+                                        nous devions rendre un Modèle Conceptuel de 
+                                        Données (MCD) 
+                                        qui décrit chacune de nos tables SQL ainsi 
+                                        qu'un script PostgreSQL créant ces différentes 
+                                        tables, nous 
+                                        devions également réaliser un oral afin de 
+                                        présenter notre travail à un professeur.</p>
                                     <h4>Travail Réalisé :</h4>
-                                    <p>- Premièrement, il a fallu créer le <strong>modèle conceptuel de données</strong> de la base de données, 
-                                        pour cela, je me suis inspiré de celui de l'entreprise Carrefour car notre entreprise s'organisait sous 
+                                    <p>- Premièrement, il a fallu créer le 
+                                        <strong>modèle conceptuel de données</strong> 
+                                        de la base de données, 
+                                        pour cela, je me suis inspiré de celui de 
+                                        l'entreprise Carrefour car notre entreprise 
+                                        s'organisait sous 
                                         la <strong>même forme</strong>.</p>
-                                    <p>- Ensuite, il a fallu ecrire en <strong>PostgreSQL</strong> le code permettant la création des différentes 
-                                        tables. Celles-ci présentent des <strong>particularités</strong> comme par exemple le fait que certaines 
-                                        donnée doit être <strong>impérativement</strong> présente lors de l'ajout de données.</p>
-                                    <p>- Il a ensuite fallu remplir cette base de données, pour cela, j'ai généré avec de l'IA plusieurs 
+                                    <p>- Ensuite, il a fallu ecrire en 
+                                        <strong>PostgreSQL</strong> le code permettant 
+                                        la création des différentes 
+                                        tables. Celles-ci présentent des 
+                                        <strong>particularités</strong> comme par 
+                                        exemple le fait que certaines 
+                                        donnée doit être <strong>impérativement</strong> 
+                                        présente lors de l'ajout de données.</p>
+                                    <p>- Il a ensuite fallu remplir cette base de données,
+                                         pour cela, j'ai généré avec de l'IA plusieurs 
                                         itérations du contenu de chaque table.</p>
-                                    <p>- Enfin, j'ai écrit des requètes SQL demandant à la base de données des informations telles que le 
-                                        pays dans lequel il y à le plus de commandes ou le fournisseur coutant le plus cher.</p>
+                                    <p>- Enfin, j'ai écrit des requètes SQL demandant
+                                         à la base de données des informations telles
+                                          que le 
+                                        pays dans lequel il y à le plus de commandes
+                                         ou le fournisseur coutant le plus cher.</p>
                                     <h4>Resultat :</h4>
-                                    <p>Le professeur était très satisfait de notre travail car nous avions réalisé toutes les taches qui nous 
-                                        étaient demandées, malgré cela, notre code nécessitait quelques optimisations. Nous avons obtenu la 
+                                    <p>Le professeur était très satisfait de notre
+                                         travail car nous avions réalisé toutes 
+                                         les taches qui nous 
+                                        étaient demandées, malgré cela, notre
+                                         code nécessitait quelques optimisations.
+                                          Nous avons obtenu la 
                                         note de 12.5/14 pour une moyenne à 10.</p>
                                 </div>
                             </div>
@@ -462,34 +634,64 @@
                                 <div class="portfolio-description-img6 pdesc hidden padd-15" id="portfolio-6">
                                     <h3>Implémentation d'un jeu de Dames en C# XAML</h3>
                                     <h4>Contexte :</h4>
-                                    <p>Ce projet est un projet universitaire réalisé en groupe de 3 sous la supervision d'un professeur, nous 
-                                        devons créer une implémentation d'un jeu de Dames en utilisant les technologies .NET.</p>
+                                    <p>Ce projet est un projet universitaire réalisé 
+                                        en groupe de 3 sous la supervision d'un professeur, 
+                                        nous 
+                                        devons créer une implémentation d'un jeu de
+                                         Dames en utilisant les technologies .NET.</p>
                                     <h4>Objectif :</h4>
-                                    <p>Nous devons créer de toute pièce un jeu de dame qui s'executera sur windows, pour cela, nous utilisons 
-                                        les langagesXAML pour le front-end et C# pour le back-end.</p>
+                                    <p>Nous devons créer de toute pièce un jeu de 
+                                        dame qui s'executera sur windows, pour cela,
+                                         nous utilisons 
+                                        les langagesXAML pour le front-end et C# pour
+                                         le back-end.</p>
                                     <h4>Travail Réalisé :</h4>
-                                    <p>- Premièrement, il a fallu créer une <strong>documentation</strong> pour ce projet, dans celle ci, nous 
-                                        avons mis sur papier les <strong>règles du jeu</strong>, ce que nous allons faire, des 
-                                        <strong>personnas</strong> et des <strong>user-story</strong>.</p>
-                                    <p>- Il a ensuite fallu penser le <strong>design</strong> de notre application. Pour cela, j'ai utilisé 
-                                        l'outil <strong>Figma</strong> qui me permet de créer facilement des designs <strong>complets</strong>.
+                                    <p>- Premièrement, il a fallu créer une 
+                                        <strong>documentation</strong> pour ce projet, 
+                                        dans celle ci, nous 
+                                        avons mis sur papier les <strong>règles du jeu</strong>
+                                        , ce que nous allons faire, des 
+                                        <strong>personnas</strong> et des 
+                                        <strong>user-story</strong>.</p>
+                                    <p>- Il a ensuite fallu penser le <strong>design</strong>
+                                         de notre application. Pour cela, j'ai utilisé 
+                                        l'outil <strong>Figma</strong> qui me permet de 
+                                        créer facilement des designs <strong>complets</strong>.
                                     </p>
-                                    <p>- A partir de ces maquettes, nous avons crée un <strong>storyboard</strong>, c'est à dire un document 
-                                        expliquant quelles seront les <strong>intéractions</strong> entre les différentes pages par exemple à 
+                                    <p>- A partir de ces maquettes, nous avons crée un 
+                                        <strong>storyboard</strong>, c'est à dire un document 
+                                        expliquant quelles seront les 
+                                        <strong>intéractions</strong> entre les 
+                                        différentes pages par exemple à 
                                         travers des boutons.</p>
-                                    <p>- Nous sommes ensuite passés à la création du <strong>code C# pur</strong> du jeu. Pour nous aider dans 
-                                        ce travail, il a fallu créer des <strong>diagrames de classe</strong> ainsi que des <strong>diagrames 
+                                    <p>- Nous sommes ensuite passés à la création du 
+                                        <strong>code C# pur</strong> du jeu. Pour nous 
+                                        aider dans 
+                                        ce travail, il a fallu créer des 
+                                        <strong>diagrames de classe</strong> ainsi que 
+                                        des <strong>diagrames 
                                             de paquetage</strong>.</p>
-                                    <p>- Après l'implémentation de ce travail en <strong>C#</strong> est venu l'étape de la gestion de la 
-                                        <strong>persistance</strong> de l'application. En effet, nous voulons implémenter un système de 
-                                        <strong>comptes utilisateurs</strong> dans notre application. Pour cela, nous avons utilisé un système 
+                                    <p>- Après l'implémentation de ce travail en 
+                                        <strong>C#</strong> est venu l'étape de la 
+                                        gestion de la 
+                                        <strong>persistance</strong> de l'application.
+                                         En effet, nous voulons implémenter un système de 
+                                        <strong>comptes utilisateurs</strong> dans notre
+                                         application. Pour cela, nous avons utilisé un système 
                                         comprenant des fichier <strong>JSON</strong>.</p>
-                                    <p>- Enfin est venu l'étape du data-binding, c'est à dire la liaison du code C# du back-end avec l'interface 
+                                    <p>- Enfin est venu l'étape du data-binding, c'est
+                                         à dire la liaison du code C# du back-end avec 
+                                         l'interface 
                                         utilisateur.</p>                                    
                                     <h4>Resultat :</h4>
-                                    <p>Nous n'avons pas eu de notation pour le moment sur ce travail. Mais notre professeur nous à fait par de 
-                                        son enthousiasme autour de notre projet. J'ai également pu découvrir le développement en C# ainsi qu'en 
-                                        XAML, les technologies .NET ainsi que l'utilisation de l'outil Visual Studio Community.</p>
+                                    <p>Nous n'avons pas eu de notation pour le moment 
+                                        sur ce travail. Mais notre professeur nous à 
+                                        fait par de 
+                                        son enthousiasme autour de notre projet. J'ai
+                                         également pu découvrir le développement en C# 
+                                         ainsi qu'en 
+                                        XAML, les technologies .NET ainsi que 
+                                        l'utilisation de l'outil Visual Studio Community.</p>
                                 </div>
                             </div>
                         </div>
@@ -523,7 +725,8 @@
                             <a href="https://www.linkedin.com/in/hugo-creneau-53a7402a8/" id="linked">Mon LinkedIn</a>
                         </div>
                     </div>
-                    <h3 class="contact-title padd-15">ENVOYER EMAIL (Par manque de serveur, cette fonctionnalité n'est pas disponible, merci de 
+                    <h3 class="contact-title padd-15">ENVOYER EMAIL (Par manque de serveur,
+                         cette fonctionnalité n'est pas disponible, merci de 
                         me contacter au mail ci dessus)</h3>
                     <h4 class="contact-sub-title padd-15">JE REPONDS AUX MESSAGES</h4>
                     <div class="row">