From 4d9a64ee65e986e9d142acee75a4e58e8919bbc3 Mon Sep 17 00:00:00 2001
From: "hugo.pradier2" <hugo.pradier2@etu.uca.fr>
Date: Sun, 2 Jun 2024 18:33:57 +0200
Subject: [PATCH] =?UTF-8?q?ajout=20des=20d=C3=A9tails=20des=20exp=C3=A9rie?=
 =?UTF-8?q?nces=20sous=20cat=C3=A9gories?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 411 ++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 262 insertions(+), 149 deletions(-)

diff --git a/index.html b/index.html
index 10fdda4..f89c1a1 100644
--- a/index.html
+++ b/index.html
@@ -152,7 +152,7 @@
                 src="./assets/images/photoIdentite.jpg"
                 alt="Photo de Hugo PRADIER"
                 width="95%"
-                class="rounded-3 shadow"
+                class="rounded-5 shadow"
               />
             </div>
           </div>
@@ -168,7 +168,7 @@
             </div>
             <div class="col">
               <p></p>
-              <h2 class="py-3">Bonjour, je m'appelle Hugo Pradier</h2>
+              <h3 class="py-3">Bonjour, je m'appelle Hugo Pradier</h3>
               <p>
                 Étudiant en troisième année de BUT Production Informatique à
                 l'IUT de Clermont-Ferrand. Passionné par l’informatique, je suis
@@ -234,113 +234,23 @@
                     href="#"
                     class="btn btn-secondary"
                     data-bs-toggle="modal"
-                    data-bs-target="#modalSylink"
-                    >En savoir plus</a
+                    data-bs-target="#modalSylinkDev"
+                    >Développement</a
+                  >
+                  <a
+                    href="#"
+                    class="btn btn-secondary"
+                    data-bs-toggle="modal"
+                    data-bs-target="#modalSylinkDoc"
+                    >Documentation</a
+                  >
+                  <a
+                    href="#"
+                    class="btn btn-secondary"
+                    data-bs-toggle="modal"
+                    data-bs-target="#modalSylinkCollab"
+                    >Collaboration</a
                   >
-                </div>
-              </div>
-            </div>
-
-            <!-- Modal -->
-            <div
-              class="modal fade"
-              id="modalSylink"
-              tabindex="-1"
-              aria-labelledby="labelModalSylink"
-              aria-hidden="true"
-            >
-              <div
-                class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
-              >
-                <div class="modal-content">
-                  <div class="modal-header">
-                    <h5 class="modal-title">Alternance Sylink Technologie</h5>
-                    <button
-                      type="button"
-                      class="btn-close"
-                      data-bs-dismiss="modal"
-                      aria-label="Close"
-                    ></button>
-                  </div>
-                  <div class="modal-body">
-                    <p>
-                      Pendant ma troisième année de BUT Informatique, j'ai eu la
-                      chance d’effectuer une alternance d'un an chez Sylink
-                      Technologie. Cette entreprise française est spécialisée
-                      dans la conception et l'édition de solutions de
-                      cybersécurité innovantes.
-                    </p>
-                    <p>
-                      Je travaillais sur deux projets distincts qui visaient à
-                      renforcer les capacités de sécurité des entreprises. Le
-                      premier consistait à développer une API en ASP .NET Core
-                      pour faciliter la récupération d'informations sur les
-                      appareils au sein du réseau d’une organisation à partir de
-                      bases de données sous PostgreSQL ou QuestDB. Cette API
-                      permettait le traitement des données au format JSON pour
-                      la visualisation, la détection et l'analyse de menaces
-                      potentielles. Durant ce projet, j’ai été amené à
-                      communiquer avec une entreprise prestataire qui s’occupait
-                      de la visualisation en 3D, cela m’a permis de mettre en
-                      pratique et d’améliorer mes connaissances en
-                      communication.
-                    </p>
-                    <p>
-                      Simultanément, je travaillais sur un projet console en C#
-                      qui utilisait Dehashed, un moteur de recherche de bases de
-                      données piratées. Ce projet impliquait la création d'un
-                      système permettant à l'utilisateur de sélectionner une
-                      organisation pour générer des rapports sur les fuites de
-                      données piratées, contribuant ainsi à renforcer la
-                      sécurité des comptes et à détecter les violations. Les
-                      résultats et les journaux étaient enregistrés dans une
-                      base de données.
-                    </p>
-                    <p>
-                      J'ai ensuite déployé ces deux projets pour tester avec de
-                      vraies données et partager à mes collaborateurs mes
-                      avancées. Grâce à l’utilisation du serveur WEB Microsoft
-                      IIS, j’ai pu déployer et servir les applications web
-                      développées dans le cadre du projet, en offrant un
-                      environnement robuste et sécurisé pour leur exécution.
-                      Mais, avant cela, j’ai dû configurer une machine sur
-                      Proxmox qui est une plateforme de virtualisation
-                      open-source combinant la virtualisation de serveurs et la
-                      gestion de conteneurs. Je m’occupais de versionner mes
-                      projets pour communiquer plus facilement dessus.
-                    </p>
-                    <p>
-                      J'ai travaillé de manière autonome sur ces projets, tout
-                      en recevant des retours réguliers de mon maître
-                      d'alternance et de l'entreprise prestataire. Je réalisais
-                      des comptes rendus quotidiens pour suivre mes progrès,
-                      envisager des améliorations futures et recueillir des
-                      suggestions. J'ai également communiqué avec d'autres
-                      collègues spécialisés dans des technologies spécifiques.
-                    </p>
-                    <p>
-                      Les diagrammes UML et les graphiques établis en amont ont
-                      été précieux pour concevoir des applications structurées
-                      et efficaces, favorisant une meilleure optimisation du
-                      développement.
-                    </p>
-                    <p>
-                      Parallèlement, j'ai utilisé des méthodes telles que Merise
-                      pour établir des liens cohérents entre les bases de
-                      données, assurant ainsi une gestion efficace des données
-                      et une intégration harmonieuse avec l'application. Ma
-                      maîtrise avancée du langage SQL m'a permis de créer des
-                      requêtes complexes et optimisées.
-                    </p>
-                    <p>
-                      Enfin, j'ai proposé d'intégrer une documentation Swagger
-                      dans mon projet d'API, comme je l'avais appris lors de mon
-                      stage précédent chez Cegi Alfa. Cette documentation était
-                      essentielle pour faciliter la communication avec les
-                      parties prenantes et assurer la pérennité du projet, même
-                      en cas de reprise par un autre développeur.
-                    </p>
-                  </div>
                 </div>
               </div>
             </div>
@@ -374,19 +284,37 @@
                     href="#"
                     class="btn btn-secondary"
                     data-bs-toggle="modal"
-                    data-bs-target="#modalSylink"
-                    >En savoir plus</a
+                    data-bs-target="#modalCegiDev"
+                    >Développement</a
+                  >
+                  <a
+                    href="#"
+                    class="btn btn-secondary"
+                    data-bs-toggle="modal"
+                    data-bs-target="#modalCegiDoc"
+                    >Documentation</a
+                  >
+                  <a
+                    href="#"
+                    class="btn btn-secondary"
+                    data-bs-toggle="modal"
+                    data-bs-target="#modalCegiConduite"
+                    >Conduire un projet</a
                   >
                 </div>
               </div>
             </div>
 
-            <!-- Modal -->
+            <!-- Modal (Détails de mex expériences) -->
+
+            <!-- Cegi Alfa -->
+
+            <!-- Développement -->
             <div
               class="modal fade"
-              id="modalSylink"
+              id="modalCegiDev"
               tabindex="-1"
-              aria-labelledby="labelModalSylink"
+              aria-labelledby="labelModalCegi"
               aria-hidden="true"
             >
               <div
@@ -394,7 +322,7 @@
               >
                 <div class="modal-content">
                   <div class="modal-header">
-                    <h5 class="modal-title">Stage Cegi Alfa</h5>
+                    <h5 class="modal-title">Développer chez Cegi Alfa</h5>
                     <button
                       type="button"
                       class="btn-close"
@@ -406,44 +334,54 @@
                     <p>
                       Lors de ma deuxième année de BUT Production Informatique,
                       j’ai réalisé un stage de dix semaines au sein de
-                      l’entreprise CEGI Alfa. Cette société est spécialisée dans
-                      le développement de logiciels de gestion dans les domaines
-                      du médico-social, du social et du sanitaire.
+                      l’entreprise CEGI Alfa qui portait sur le développement
+                      d'une API (Application Programming Interface) en Java
+                      Spring pour permettre l'interfaçage entre deux
+                      applications du groupe.
                     </p>
                     <p>
-                      Mon sujet de stage portait sur le développement d'une API
-                      (Application Programming Interface) en Java Spring pour
-                      permettre l'interfaçage entre deux applications du groupe.
-                    </p>
-                    <p>
-                      D'un côté, le logiciel AgileS permet à des structures la
-                      gestion de dossiers dans le domaine du social. Il est
-                      destiné à gérer des personnes au sein d’organismes
-                      d’accueil et d’accompagnement. De l’autre, VivaLity
-                      constitue un dossier de l’usager sécurisé facilitant
-                      l’échange d’informations avec « Mon Espace Santé ».
-                    </p>
-                    <p>
-                      Cette première expérience professionnelle dans le
-                      développement a été véritablement enrichissante, me
-                      permettant d'appliquer les compétences acquises lors de
-                      mon parcours scolaire.
+                      J'ai consolidé mes compétences techniques dans plusieurs
+                      domaines clés. En premier lieu, j'ai approfondi ma
+                      maîtrise de Java, en particulier en l'associant à Spring
+                      Boot, une combinaison souvent utilisée pour le
+                      développement d'applications robustes et efficaces.
                     </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Conception et documentation -->
+            <div
+              class="modal fade"
+              id="modalCegiDoc"
+              tabindex="-1"
+              aria-labelledby="labelModalCegi"
+              aria-hidden="true"
+            >
+              <div
+                class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
+              >
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <h5 class="modal-title">
+                      Concevoir et documenter chez Cegi Alfa
+                    </h5>
+                    <button
+                      type="button"
+                      class="btn-close"
+                      data-bs-dismiss="modal"
+                      aria-label="Close"
+                    ></button>
+                  </div>
+                  <div class="modal-body">
                     <p>
-                      En intégrant une équipe, j’ai ainsi eu l'occasion de
-                      mettre en avant ma capacité à travailler en groupe, à
-                      partager des connaissances et à coordonner mes actions
-                      avec celles des autres membres. J'ai aussi consolidé mes
-                      compétences techniques dans plusieurs domaines clés. En
-                      premier lieu, j'ai approfondi ma maîtrise de Java, en
-                      particulier en l'associant à Spring Boot, une combinaison
-                      souvent utilisée pour le développement d'applications
-                      robustes et efficaces. J'ai également appliqué le patron
-                      d'architecture MVC, qui offre une structure organisée et
-                      modulaire pour une conception évolutive. Les diagrammes
-                      UML et graphiques établis en amont m'ont été précieux pour
-                      concevoir une application structurée et efficace,
-                      favorisant une meilleure optimisation du développement.
+                      J'ai également appliqué le patron d'architecture MVC, qui
+                      offre une structure organisée et modulaire pour une
+                      conception évolutive. Les diagrammes UML et graphiques
+                      établis en amont m'ont été précieux pour concevoir une
+                      application structurée et efficace, favorisant une
+                      meilleure optimisation du développement.
                     </p>
                     <p>
                       Parallèlement, j'ai bénéficié de l'utilisation de méthodes
@@ -463,6 +401,35 @@
                       facilitant ainsi son utilisation et sa maintenance pour
                       les développeurs ultérieurs.
                     </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Conception et documentation -->
+            <div
+              class="modal fade"
+              id="modalCegiConduite"
+              tabindex="-1"
+              aria-labelledby="labelModalCegi"
+              aria-hidden="true"
+            >
+              <div
+                class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
+              >
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <h5 class="modal-title">
+                      Conduire un projet chez Cegi Alfa
+                    </h5>
+                    <button
+                      type="button"
+                      class="btn-close"
+                      data-bs-dismiss="modal"
+                      aria-label="Close"
+                    ></button>
+                  </div>
+                  <div class="modal-body">
                     <p>
                       Bien qu’ayant rencontré quelques défis initiaux, notamment
                       liés à l'exploration approfondie des technologies et à des
@@ -487,6 +454,152 @@
                 </div>
               </div>
             </div>
+
+            <!-- Sylink Technologie -->
+            <!-- Développement -->
+            <div
+              class="modal fade"
+              id="modalSylinkDev"
+              tabindex="-1"
+              aria-labelledby="labelModalSylink"
+              aria-hidden="true"
+            >
+              <div
+                class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
+              >
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <h5 class="modal-title">Développer chez Sylink</h5>
+                    <button
+                      type="button"
+                      class="btn-close"
+                      data-bs-dismiss="modal"
+                      aria-label="Close"
+                    ></button>
+                  </div>
+                  <div class="modal-body">
+                    <p>
+                      En troisième année de BUT Informatique, au cours de mon
+                      alternance d'un an chez Sylink Technologie, j’ai travaillé
+                      sur deux projets distincts visant à renforcer les
+                      capacités de sécurité des entreprises. Le premier
+                      consistait à développer une API en ASP .NET Core pour
+                      faciliter la récupération d'informations sur les appareils
+                      au sein du réseau d’une organisation à partir de bases de
+                      données sous PostgreSQL ou QuestDB. Cette API permettait
+                      le traitement des données au format JSON pour la
+                      visualisation, la détection et l'analyse de menaces
+                      potentielles.
+                    </p>
+                    <p>
+                      Simultanément, j’ai conduit un projet console en C# qui
+                      utilisait Dehashed, un moteur de recherche de bases de
+                      données piratées. Ce projet impliquait la création d'un
+                      système permettant à l'utilisateur de sélectionner une
+                      organisation pour générer des rapports sur les fuites de
+                      données piratées
+                    </p>
+                    <p>
+                      J'ai ensuite déployé ces deux projets pour tester avec de
+                      vraies données et partager à mes collaborateurs mes
+                      avancées grâce à l’utilisation du serveur WEB Microsoft
+                      IIS. Mais, avant cela, j’ai dû configurer une machine sur
+                      Proxmox. Je m’occupais de versionner mes projets pour
+                      communiquer plus facilement dessus.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Conception et documentation -->
+            <div
+              class="modal fade"
+              id="modalSylinkDoc"
+              tabindex="-1"
+              aria-labelledby="labelModalSylink"
+              aria-hidden="true"
+            >
+              <div
+                class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
+              >
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <h5 class="modal-title">
+                      Concevoir et documenter chez Sylink
+                    </h5>
+                    <button
+                      type="button"
+                      class="btn-close"
+                      data-bs-dismiss="modal"
+                      aria-label="Close"
+                    ></button>
+                  </div>
+                  <div class="modal-body">
+                    <p>
+                      Les diagrammes UML et les graphiques établis en amont ont
+                      été précieux pour concevoir des applications structurées
+                      et efficaces, favorisant une meilleure optimisation du
+                      développement.
+                    </p>
+                    <p>
+                      Parallèlement, j'ai utilisé des méthodes telles que Merise
+                      pour établir des liens cohérents entre les bases de
+                      données, assurant ainsi une gestion efficace des données
+                      et une intégration harmonieuse avec l'application. Ma
+                      maîtrise avancée du langage SQL m'a permis de créer des
+                      requêtes complexes et optimisées.
+                    </p>
+                    <p>
+                      Enfin, j'ai proposé d'intégrer une documentation Swagger
+                      dans mon projet d'API, comme je l'avais appris lors de mon
+                      stage précédent chez Cegi Alfa. Cette documentation était
+                      essentielle pour faciliter la communication avec les
+                      parties prenantes et assurer la pérennité du projet, même
+                      en cas de reprise par un autre développeur.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Collaboration -->
+            <div
+              class="modal fade"
+              id="modalSylinkCollab"
+              tabindex="-1"
+              aria-labelledby="labelModalSylink"
+              aria-hidden="true"
+            >
+              <div
+                class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
+              >
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <h5 class="modal-title">Collaborer chez Sylink</h5>
+                    <button
+                      type="button"
+                      class="btn-close"
+                      data-bs-dismiss="modal"
+                      aria-label="Close"
+                    ></button>
+                  </div>
+                  <div class="modal-body">
+                    <p>
+                      J'ai travaillé de manière autonome sur ces projets, tout
+                      en recevant des retours réguliers de mon maître
+                      d'alternance. J’ai également été amené à communiquer avec
+                      une entreprise prestataire s’occupant de la visualisation
+                      3D. J’ai ainsi pu mettre en pratique et améliorer mes
+                      connaissances en communication. et de l'entreprise
+                      prestataire. J'ai aussi eu l’occasion de communiquer avec
+                      d'autres collègues spécialisés dans des technologies
+                      spécifiques.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </section>
@@ -584,7 +697,7 @@
       <!-- Compétences -->
       <section id="competences" class="py-5">
         <div class="container">
-          <h2>Compétences</h2>
+          <h2 class="text-center">Compétences</h2>
 
           <!-- Developpement -->
           <h3 class="mt-4">Développement</h3>