diff --git a/public/Images/Icones/insy2s.png b/public/Images/Icones/insy2s.png new file mode 100644 index 0000000000000000000000000000000000000000..d2b164f330d6423b2902cedc28b8489a74e4656d Binary files /dev/null and b/public/Images/Icones/insy2s.png differ diff --git a/public/Images/Projets/meetingplannr.jpg b/public/Images/Projets/meetingplannr.jpg new file mode 100644 index 0000000000000000000000000000000000000000..80505741dcf815b0304f1f7fdd35d7678b786d73 Binary files /dev/null and b/public/Images/Projets/meetingplannr.jpg differ diff --git a/public/Pages/Projets.html b/public/Pages/Projets.html index 97d061df223b185592bd27a620031c4d6043e002..8f89eb024ab64894e158cc80d8c7570c7df8aaac 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 8161c2cf23d6ea1d5365e056b857a86964a44141..e6e10770f21abcac03814d039d976a770b6ebd15 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 e336e0e5170d73946ecef23d59e7b716806ef208..8f83ae060fe0926d5323f539210317fc776b9f1e 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 1ce62701b3c0d6ea089882c49a410b2a46929d93..a1bc0bee83ff556fffbba27cb836c719faadb054 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()">×</span> + <div id="popup-title" class="popup-title"></div> + <div id="popup-content" class="popup-content"></div> + </div> </body> </html>