From 27d6598881dbf45554aab1083a504bdcc8ea90f2 Mon Sep 17 00:00:00 2001
From: Paul <paul.cancel.etu@univ-lille.fr>
Date: Sun, 2 Mar 2025 00:00:37 +0100
Subject: [PATCH] Modification du portfolio

---
 public/Images/Icones/insy2s.png               | Bin 0 -> 3671 bytes
 public/Images/Projets/meetingplannr.jpg       | Bin 0 -> 9853 bytes
 public/Pages/Projets.html                     |   8 +
 .../{Pizzaland.html => MeetingPlannr.html}    |  51 +++---
 public/Styles/styles.css                      | 121 +++++++++++++++
 public/index.html                             | 145 ++++++++++++++----
 6 files changed, 271 insertions(+), 54 deletions(-)
 create mode 100644 public/Images/Icones/insy2s.png
 create mode 100644 public/Images/Projets/meetingplannr.jpg
 rename public/Pages/Projets/{Pizzaland.html => MeetingPlannr.html} (50%)

diff --git a/public/Images/Icones/insy2s.png b/public/Images/Icones/insy2s.png
new file mode 100644
index 0000000000000000000000000000000000000000..d2b164f330d6423b2902cedc28b8489a74e4656d
GIT binary patch
literal 3671
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
Ofx*+&&t;ucLK6TQ-4S~L

literal 0
HcmV?d00001

diff --git a/public/Images/Projets/meetingplannr.jpg b/public/Images/Projets/meetingplannr.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..80505741dcf815b0304f1f7fdd35d7678b786d73
GIT binary patch
literal 9853
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

literal 0
HcmV?d00001

diff --git a/public/Pages/Projets.html b/public/Pages/Projets.html
index 97d061d..8f89eb0 100644
--- a/public/Pages/Projets.html
+++ b/public/Pages/Projets.html
@@ -73,6 +73,14 @@
                     </div>
                 </a>
             </li>
+            <li>
+                <a href="./Projets/MeetingPlannr.html">
+                    <img src="../Images/Projets/meetingplannr.jpg" alt="MeetingPlannr">
+                    <div class="title">
+                        <p>MeetingPlannr</p>
+                    </div>
+                </a>
+            </li>
         </ul>
 
     </div>
diff --git a/public/Pages/Projets/Pizzaland.html b/public/Pages/Projets/MeetingPlannr.html
similarity index 50%
rename from public/Pages/Projets/Pizzaland.html
rename to public/Pages/Projets/MeetingPlannr.html
index 8161c2c..e6e1077 100644
--- a/public/Pages/Projets/Pizzaland.html
+++ b/public/Pages/Projets/MeetingPlannr.html
@@ -11,24 +11,22 @@
         <a href="../Projets.html">Mes projets</a>
     </div>
     <header>
-        <a href="https://gitlab.univ-lille.fr/sae-pizzaland/pizzaland-cancel-mirey" target="_blank">
+        <a href="https://gitlab.univ-lille.fr/paul.cancel.etu/meetingplannr" target="_blank">
         <h2>
-            Rest API : "Pizzaland"
+            Application de gestion de rendez-vous "MeetingPlannr"
         </h2>
-        </a>
+    </a>
     </header>
     <section id="projets">
-            <img src="../../Images/Projets/Pizzaland.png" alt="Pizzaland">
+            <img src="../../Images/Projets/meetingplannr.jpg" alt="MeetingPlannr">
         <header>
             <h1>Présentation</h1>
         </header>
         <article>
-            <h5> Nous avons créé en duo une API permettant la gestion d'une base de données d'une pizzeria,
-                en incluant la gestion d'ingrédients, des users, de pizzas et de commandes.
-                Cette API est basée sur la méthode REST et tourne à l'intérieur d'un serveur tomcat,
-                elle gère une base de données en Postgresql et elle utilise également uniquement des
-                objets json. Un système d'identification est également inclus permettant de sécuriser
-                les opérations visant à changer la base de données.
+            <h5> Nous avons réalisé en duo, une application de gestion de rendez-vous professionnels nommés "MeetingPlannr".
+                L'application permet de créer des rendez-vous, de les modifier et de les supprimer. Les rendez-vous sont
+                stockés dans une base de données postgresql. L'application est réalisée en Spring Boot et utilise des jsp pour
+                l'affichage. l'application est également sécurisée par un système de login utilisant Spring Security.
             </h5>
         </article>
         <header>
@@ -37,41 +35,46 @@
         <article>
             <ul>
                 <li>
-                    <h4>Java programmation objet</h4>
+                    <h4>Spring Boot</h4>
                 </li>
                 <li>
-                    <h4>REST</h4>
-                </li>
-                <li>
-                    <h4>Tomcat</h4>
-                </li>
-                <li>
-                    <h4>JEE</h4>
+                    <h4>jsp/css</h4>
                 </li>
                 <li>
                     <h4>Git</h4>
                 </li>
+            </ul>
+            
+        </article>
+        <header>
+            <h1>Savoirs-faire</h1>
+        </header>
+        <article>
+            <ul class="savoirsfaire">
                 <li>
-                    <h4>Bruno</h4>
+                    <h4>Utilisation de frameworks.</h4>
                 </li>
                 <li>
-                    <h4>PostgreSQL</h4>
+                    <h4>Apprentissage de l'ergonomie pour les fonctionnalités.</h4>
                 </li>
             </ul>
-            
         </article>
         <header>
-            <h1>Savoirs-faire</h1>
+            <h1>Savoir être</h1>
         </header>
         <article>
             <ul class="savoirsfaire">
                 <li>
-                    <h4>Créer et utiliser une API</h4>
+                    <h4>Travailler en équipe (Leader)</h4>
+                </li>
+                <li>
+                    <h4>Travailler sous pression (Temps)</h4>
                 </li>
                 <li>
-                    <h4>Gérer une base de données via un serveur web</h4>
+                    <h4>Comprendre les attendus nécessaires pour la soutenance</h4>
                 </li>
             </ul>
+            
         </article>
     </section>
 
diff --git a/public/Styles/styles.css b/public/Styles/styles.css
index e336e0e..8f83ae0 100644
--- a/public/Styles/styles.css
+++ b/public/Styles/styles.css
@@ -335,3 +335,124 @@ article h3{
     display: list-item;
     margin-left: 6em;
 }
+
+.popup {
+    display: none;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgb(26, 26, 26);
+    padding: 20px;
+    border: 2px solid white;
+    z-index: 1000;
+    min-width: 200px;
+    text-align: center;
+}
+
+.popup-title {
+    font-size: 1.5em;
+    margin-bottom: 10px;
+    letter-spacing: 0.2em;
+}
+
+.popup-close {
+    position: absolute;
+    right: 10px;
+    top: 5px;
+    cursor: pointer;
+    font-size: 1.2em;
+    color: white;
+}
+
+.popup-close:hover {
+    color: #ddd;
+}
+
+.overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 999;
+}
+
+.popup-content {
+    margin-top: 10px;
+    font-size: 1em;
+    line-height: 1.4;
+    color: #ddd;
+}
+
+.stage-container {
+    background-color: #242424;
+    width: 60%;
+    margin-left: 9em;
+    padding: 2em;
+}
+
+.stage-title {
+    font-size: 1.5em;
+    margin-bottom: 1em;
+    border-bottom: 1px solid #666;
+    padding-bottom: 0.5em;
+}
+
+.stage-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1em;
+}
+
+.company-info {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1em;
+}
+
+.company-logo {
+    width: 60px;
+    height: auto;
+    margin-right: 1em;
+}
+
+.company-details {
+    line-height: 1.4;
+}
+
+.stage-section {
+    margin-bottom: 1.5em;
+}
+
+.stage-section h4 {
+    color: #aaa;
+    margin-bottom: 0.5em;
+    font-size: 1.1em;
+}
+
+.stage-section ul {
+    list-style-type: none;
+    padding-left: 1em;
+}
+
+.stage-section li {
+    margin-bottom: 0.5em;
+    line-height: 1.4;
+}
+
+.tech-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5em;
+    margin-top: 1em;
+}
+
+.tech-tag {
+    background-color: #333;
+    padding: 0.3em 0.8em;
+    border-radius: 15px;
+    font-size: 0.9em;
+}
diff --git a/public/index.html b/public/index.html
index 1ce6270..a1bc0be 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,39 @@
 <meta charset="UTF-8" />
 <title>Page</title>
 <link rel="stylesheet" href="./Styles/styles.css" />
+<script>
+    const skillDescriptions = {
+        'Java': 'Langage principal utilisé en POO. Apprentissage de JavaFX, JEE, Spring Boot et Android.',
+        'Python': 'Utilisé pour le développement de scripts et l\'analyse de données. Expérience avec les bibliothèques pandas, numpy mais également la représentation graphique avec .',
+        'SQL': 'Conception et gestion de bases de données relationnelles. Maîtrise des requêtes complexes et de l\'optimisation.',
+        'HTML': 'Création de structures web sémantiques et accessibles.',
+        'CSS': 'Stylisation avancée et responsive design.',
+        'GIT': 'Gestion de version et collaboration. Maîtrise des workflows Git et des bonnes pratiques.',
+        'Jakartaa EE': 'Développement d\'applications d\'entreprise avec Java EE/Jakarta EE.',
+        'JavaScript': 'Développement front-end et manipulation du DOM. Utilisation des fonctionnalités modernes ES6+.',
+        'Docker': 'Conteneurisation d\'applications et gestion des environnements de développement.',
+        'React': 'Création d\'interfaces utilisateur dynamiques et réutilisables. Utilisation pour des projets tels que l\'application de gestion de formation pour Insy2s.',
+        'Redux': 'Gestion d\'état pour applications React complexes.',
+        'Spring Boot': 'Développement d\'applications Java avec Spring Boot et Spring Framework. Utilisation sur le projet MeetingPlannr',
+        'Kotlin': 'Développement backend avancé.',
+        'MongoDb': 'Gestion de bases de données NoSQL et requêtes agrégées.',
+        'Jira': 'Gestion de projet agile et suivi des tâches. Utilisation lors du stage chez Insy2s.',
+        'Bash': 'Scripts shell et automatisation sous Linux. Utilisation régulière pour automatiser des tâches sessions.',
+        'Gitlab Pages': 'Déploiement de sites statiques avec Gitlab Pages. Utilisé notamment pour ce portfolio :).'
+    };
+
+    function showPopup(skillName) {
+        document.getElementById('popup-title').textContent = skillName;
+        document.getElementById('popup-content').textContent = skillDescriptions[skillName] || 'Description à venir';
+        document.getElementById('popup').style.display = 'block';
+        document.getElementById('overlay').style.display = 'block';
+    }
+
+    function closePopup() {
+        document.getElementById('popup').style.display = 'none';
+        document.getElementById('overlay').style.display = 'none';
+    }
+</script>
 </head>
 <body>
     <div class="topnav">
@@ -54,108 +87,103 @@
                     <article>
                         <ul>
                             <li>
-                                <script>
-                                    function showPopup() {
-                                        alert("Compétence: Java");
-                                    }
-                                </script>
-                                <img src="./Images/Icones/Java.png" alt="java" onclick="showPopup()">
+                                <img src="./Images/Icones/Java.png" alt="java" onclick="showPopup('Java')">
                                 <div class="title">
                                     <p>Java</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/Python.png" alt="Python">
+                                <img src="./Images/Icones/Python.png" alt="Python" onclick="showPopup('Python')">
                                 <div class="title">
                                     <p>Python</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/SQL.png" alt="SQL">
+                                <img src="./Images/Icones/SQL.png" alt="SQL" onclick="showPopup('SQL')">
                                 <div class="title">
                                     <p>SQL</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/html.png" alt="HTML">
+                                <img src="./Images/Icones/html.png" alt="HTML" onclick="showPopup('HTML')">
                                 <div class="title">
                                     <p>HTML</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/css.png" alt="CSS">
+                                <img src="./Images/Icones/css.png" alt="CSS" onclick="showPopup('CSS')">
                                 <div class="title">
                                     <p>CSS</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/git.png" alt="GIT">
+                                <img src="./Images/Icones/git.png" alt="GIT" onclick="showPopup('GIT')">
                                 <div class="title">
                                     <p>GIT</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/JakartaEE.png" alt="JEE">
+                                <img src="./Images/Icones/JakartaEE.png" alt="JEE" onclick="showPopup('Jakartaa EE')">
                                 <div class="title">
                                     <p>JEE</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/JavaScript.png" alt="JS">
+                                <img src="./Images/Icones/JavaScript.png" alt="JS" onclick="showPopup('JavaScript')">
                                 <div class="title">
                                     <p>JS</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/Docker.png" alt="DOCKER">
+                                <img src="./Images/Icones/Docker.png" alt="DOCKER" onclick="showPopup('Docker')">
                                 <div class="title">
                                     <p>Docker</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/React.png" alt="REACT">
+                                <img src="./Images/Icones/React.png" alt="REACT" onclick="showPopup('React')">
                                 <div class="title">
                                     <p>React</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/Redux.png" alt="REDUX">
+                                <img src="./Images/Icones/Redux.png" alt="REDUX" onclick="showPopup('Redux')">
                                 <div class="title">
                                     <p>Redux</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/SpringBoot.png" alt="SPRINGBOOT">
+                                <img src="./Images/Icones/SpringBoot.png" alt="SPRINGBOOT" onclick="showPopup('Spring Boot')">
                                 <div class="title">
                                     <p>Spring</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/Kotlin.png" alt="KOTLIN">
+                                <img src="./Images/Icones/Kotlin.png" alt="KOTLIN" onclick="showPopup('Kotlin')">
                                 <div class="title">
                                     <p>Kotlin</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/MongoDb.svg" alt="MONGODB">
+                                <img src="./Images/Icones/MongoDb.svg" alt="MONGODB" onclick="showPopup('MongoDb')">
                                 <div class="title">
                                     <p>MongoDb</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/Jora.svg" alt="JIRA">
+                                <img src="./Images/Icones/Jora.svg" alt="JIRA" onclick="showPopup('Jira')">
                                 <div class="title">
                                     <p>Jira</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/Bash.png" alt="BASH">
+                                <img src="./Images/Icones/Bash.png" alt="BASH" onclick="showPopup('Bash')">
                                 <div class="title">
                                     <p>Bash</p>
                                 </div>
                             </li>
                             <li>
-                                <img src="./Images/Icones/Pages.png" alt="PAGES">
+                                <img src="./Images/Icones/Pages.png" alt="PAGES" onclick="showPopup('Gitlab Pages')">
                                 <div class="title">
                                     <p>Pages</p>
                                 </div>
@@ -180,14 +208,65 @@
                             Expériences
                         </h1>
                     </header>
-                    <article>
-                        <h3>Stage - Développement Full stack : "Application pour Insy2s"</h3>
-                        <h5>
-                            Création d'une application web complète de gestion de formation
-                            lors d'un stage pour l'entreprise Insy2s
-                            <br>
-                            Durée : 8 semaines
-                        </h5>
+                    <article class="stage-container">
+                        <div class="stage-header">
+                            <div class="company-info">
+                                <img src="./Images/Icones/insy2s.png" alt="Insy2s Logo" class="company-logo">
+                                <div class="company-details">
+                                    <h3 class="stage-title">Stage - Développement Full stack</h3>
+                                    <p>Insy2s - Villeneuve d'Ascq</p>
+                                    <p>Durée : 8 semaines (Juin - Août 2024)</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="stage-section">
+                            <h4>Missions principales</h4>
+                            <ul>
+                                <li>• Conception et développement d'une application web de gestion de formation</li>
+                                <li>• Mise en place d'une architecture REST API</li>
+                                <li>• Création d'une interface utilisateur responsive avec React et Tailwind</li>
+                                <li>• Implémentation de la gestion d'état avec Redux</li>
+                                <li>• Documentation de l'API avec Swagger</li>
+                                <li>• Gestion de projet avec la méthode Agile/Scrum</li>
+                            </ul>
+                        </div>
+
+                        <div class="stage-section">
+                            <h4>Compétences techniques acquises</h4>
+                            <ul>
+                                <li>• Maîtrise du développement Full Stack Java/React</li>
+                                <li>• Expertise en développement d'API REST</li>
+                                <li>• Gestion avancée de bases de données SQL</li>
+                                <li>• Pratique des méthodologies Agiles</li>
+                            </ul>
+                        </div>
+
+                        <div class="stage-section">
+                            <h4>Savoir-être et environnement de travail</h4>
+                            <ul>
+                                <li>• Travail en télétravail complet nécessitant une forte autonomie</li>
+                                <li>• Participation active aux daily meetings et réunions d'organisation</li>
+                                <li>• Communication proactive avec l'équipe en cas de difficultés</li>
+                                <li>• Capacité d'adaptation aux outils de travail à distance</li>
+                                <li>• Gestion efficace du temps et respect des deadlines</li>
+                            </ul>
+                        </div>
+
+                        <div class="stage-section">
+                            <h4>Technologies utilisées</h4>
+                            <div class="tech-tags">
+                                <span class="tech-tag">Java</span>
+                                <span class="tech-tag">Spring Boot</span>
+                                <span class="tech-tag">PostgreSQL</span>
+                                <span class="tech-tag">React</span>
+                                <span class="tech-tag">Redux</span>
+                                <span class="tech-tag">Material UI</span>
+                                <span class="tech-tag">Docker</span>
+                                <span class="tech-tag">Git</span>
+                                <span class="tech-tag">Jira</span>
+                            </div>
+                        </div>
                     </article>
             </section>
             <div class="end">
@@ -199,5 +278,11 @@
         <a href="./Pages/Contact.html">Me contacter</a>
         <a href="./pdf/cv.pdf" target="_blank">Mon CV</a>
     </div>
+    <div id="overlay" class="overlay" onclick="closePopup()"></div>
+    <div id="popup" class="popup">
+        <span class="popup-close" onclick="closePopup()">&times;</span>
+        <div id="popup-title" class="popup-title"></div>
+        <div id="popup-content" class="popup-content"></div>
+    </div>
 </body>
 </html>
-- 
GitLab