From 9a22d6e9950fa8ac2ae026f21208ae712fa29e79 Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Sun, 30 Jun 2024 23:01:57 +0200
Subject: [PATCH] finition de la V1 du portfolio :tada:

---
 index.html | 52 +++++++++++++++++++++++++++++++---------------------
 styles.css |  8 +++++++-
 2 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/index.html b/index.html
index 3bbfb39..89a9ed5 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,7 @@
         <a href="#projects">Projets</a>
         <a href="#contact">Contact</a>
         <div class="container" style="display: flex; justify-content: end; margin-right: 10px;">
+            <a href="pdf/curriculum_vitae.pdf" download="curriculum_vitae.pdf">Curriculum Vitae</a>
             <label class="toggle" for="theme-toggle">
                 <input id="theme-toggle" class="input" type="checkbox">
                 <div class="icon icon--moon">
@@ -52,7 +53,14 @@
 
     <section id="about" class="section">
         <h2 class="mainTitle">À propos de moi</h2>
-        <p>Je suis un développeur web passionné avec de l'expérience en création de sites web et applications modernes. J'aime créer des expériences utilisateur intuitives et attrayantes.</p>
+        <p style="max-width: 70%; text-align: justify;" class="timeline-component timeline-content">Je suis un développeur web passionné avec une grande expérience dans la construction de sites web et d'applications modernes. Ma spécialisation en BUT Informatique m'a permis de travailler sur des projets variés où j'ai acquis des compétences en développement full-stack, en gestion de projet et en travail d'équipe. Mon objectif de carrière est de travailler en tant que développeur full-stack dans une entreprise dynamique et innovante où je pourrai mettre en œuvre mes compétences, avec une promotion rapide vers de plus grandes responsabilités.
+            <br/>
+            <br/>
+            J'aime créer des expériences utilisateur intuitives et engageantes, en utilisant les dernières technologies pour garantir des performances optimales sur toutes les plateformes. Mon portfolio reflète mon souci du détail et ma capacité à mener à bien des projets, tout en mettant en valeur mes compétences techniques et créatives.
+            <br/>
+            <br/>
+            En dehors de mes activités professionnelles, je suis passionné par le sport, en particulier la musculation et le cyclisme, ainsi que par le pixel art, une forme d'expression artistique que j'ai commencé à explorer récemment. Ces centres d'intérêt enrichissent ma vie et m'aident à maintenir un équilibre sain entre le travail et les loisirs.
+        </p>
         <h2 class="text-title">Centres d'intéret</h2>
         <div class="about-deck">
             <div class="about-card-container">
@@ -66,7 +74,7 @@
                         <p>
                             Depuis mon plus jeune âge, je pratique le cyclisme. Non pas en compétition, mais en tant que loisir. 
                             J'aime me balader en montagne et découvrir de nouveaux paysages. 
-                            Ou tout simplement me deplacer en vélo.
+                            Ou tout simplement me déplacer à vélo.
                         </p>
                     </div>
                 </div>
@@ -80,7 +88,7 @@
                     <div class="about-content">
                         <p class="about-heading">Musculation</p>
                         <p>
-                            Cela va faire maintenant 1 ans que je pratique la musculation.
+                            Cela va faire maintenant 1 an que je pratique la musculation.
                             Il s'agit d'un sport qui me permet de me défouler et de me sentir bien dans mon corps. 
                             C'est un sport qui demande de la rigueur et de la discipline, mais qui apporte beaucoup de satisfaction.
                         </p>
@@ -96,10 +104,7 @@
                     <div class="about-content">
                         <p class="about-heading">Pixel-Artist</p>
                         <p>
-                        Lorem ipsum dolor sit amet, consectetur adipii
-                        voluptas ten mollitia pariatur odit, ab
-                        minus ratione adipisci accusamus vel est excepturi laboriosam magnam
-                        necessitatibus dignissimos molestias.
+                            Le pixel art est une passion que j'ai développée après avoir découvert le logiciel Aseprite. Grâce à cet outil, j'ai pu m'épanouir en réalisant quelques créations personnelles. Bien que je sois encore débutant dans ce domaine, j'apprécie énormément le processus créatif et l'expression artistique qu'il offre.
                         </p>
                     </div>
                 </div>
@@ -133,11 +138,11 @@
                 </div>
                 <div class=" timeline-component timeline-content">
                     <h3>Premier Stage : Conseil Départemental</h3>
-                    <p>Mon premier stage, qui a joué un rôle essentiel dans ma formation, s'est déroulé au sein du Conseil Départemental du Puy-de-Dôme. Cette expérience au sein d'une grande structure regroupant près de 3000 employés m'a offert un aperçu précieux du fonctionnement d'une entreprise à grande échelle. J'ai été chargé d'un projet individuel impliquant une technologie avec laquelle je n'avais pas encore travaillé. Cette situation m'a aidé à renforcer mon sens des responsabilités, ma capacité à apprendre de manière autonome et mon adaptabilité, des compétences essentielles dans le monde professionnel.</p>
+                    <p>Mon premier stage, qui a joué un rôle essentiel dans ma formation, s'est déroulé au sein du Conseil Départemental du Puy-de-Dôme. Cette expérience au sein d'une grande structure regroupant près de 3000 employés m'a offert un aperçu précieux du fonctionnement d'une entreprise à grande échelle. J'ai été chargé d'un projet individuel impliquant une technologie avec laquelle je n'avais pas encore travaillé, me permettant l'utilisation des acquis de la compétence 1 en BUT. Cette situation m'a aidé à renforcer mon sens des responsabilités, ma capacité à apprendre de manière autonome et mon adaptabilité, des compétences essentielles dans le monde professionnel.</p>
                 </div>
                 <div class="timeline-component timeline-content">
                     <h3>Second Stage : SOeMan</h3>
-                    <p>Pour mon second stage, j'ai intégré une PME nommée SOeMan, où j'ai travaillé en open space sur un projet collaboratif. Ce changement de cadre m'a permis de découvrir l'importance de l'esprit d'équipe et de la collaboration en milieu professionnel. J'ai appris à coordonner mes efforts avec ceux de mes collègues, à utiliser des outils de gestion de projet et à communiquer efficacement au sein d'une équipe. Cette expérience a enrichi ma compréhension des dynamiques de travail en équipe et m'a préparé à assumer de nouvelles responsabilités et obligations professionnelles.</p>
+                    <p>Pour mon second stage, j'ai intégré une PME nommée SOeMan, où j'ai travaillé en open space sur un projet collaboratif. Ce changement de cadre m'a permis de découvrir l'importance de l'esprit d'équipe et de la collaboration en milieu professionnel. J'ai appris à coordonner mes efforts avec ceux de mes collègues, à utiliser des outils de gestion de projet et à communiquer efficacement au sein d'une équipe (que l'on retrouve dans la C6 de ma formation). Cette expérience a enrichi ma compréhension des dynamiques de travail en équipe et m'a préparé à assumer de nouvelles responsabilités et obligations professionnelles.</p>
                 </div>
                 <div class="timeline-middle">
                     <div class="timeline-circle"></div>
@@ -164,16 +169,28 @@
             </div>
             <div class="project-card offset">
                 <h3 class="text-title">Spelltastic</h3>
-                <p class="text-body">Spelltastic est une application de type "compagnons de jeu" pour le jeu de roles Pathfinder. Durant ma troisième année de BUT Informatique, j'ai pu faire parti des développeusr de ce gestionnaire de liste de sorts avec un logique bien particulière.</p>
+                <p class="text-body">Spelltastic est une application de type "compagnons de jeu" pour le jeu de rôles Pathfinder. Durant ma troisième année de BUT Informatique, j'ai pu faire partie des développeurs de ce gestionnaire de liste de sorts avec une logique bien particulière.</p>
                 <a href="https://github.com/PiR194/SpellTastic.git" class="project-card-button">Plus d'infos</a>
             </div>
             <div class="project-card">
                 <h3 class="text-title">SocialGraph</h3>
-                <p class="text-body">Adaptation numérique de jeu de société d'enquêteurs, inspiré de du jeu Cryptid. Êtes-vous prêt à relever le défi et à démasquer le tueur caché dans un graphe de suspects ? Que l'enquête commence !</p>
+                <p class="text-body">Adaptation numérique de jeu de société d'enquêteurs, inspiré du jeu Cryptid. Êtes-vous prêt à relever le défi et à démasquer le tueur caché dans un graphe de suspects ? Que l'enquête commence !</p>
                 <a href="https://github.com/PiR194/Cryptid.git" class="project-card-button">Plus d'infos</a>
             </div>
         </div>
     </section>
+
+    <section id="projects" class="section">
+        <h2 class="mainTitle">Projet personnel</h2>
+        <div style="display: flex; justify-content: center;">
+            <div class="project-card" style="height: auto;">
+                <h3 class="text-title">LinkName</h3>
+                <p class="text-body">Découvrez LinkName, une application mobile innovante en cours de développement, conçue pour simplifier la gestion des listes de prénoms et pseudonymes grâce à des tags personnalisés. Vous êtes en quête d'un nom parfait pour un projet, un personnage, ou toute autre création, mais vous manquez toujours d'inspiration au moment crucial ? LinkName est là pour vous aider à trouver l'inspiration facilement et rapidement. Essayez LinkName et ne laissez plus jamais l'absence d'idées vous freiner !</p>
+                <a href="https://github.com/PiR194/LinkName.githubLogoW" class="project-card-button">Plus d'infos</a>
+            </div>
+        </div>
+    </section>
+    
     
     <section id="contact" class="section">
         <h2 class="mainTitle">Contact</h2>
@@ -198,13 +215,6 @@
                     <span class="BG"></span>
                 </button>
 
-                <button class="Btn">
-                    <span class="imgContainer">
-                        <img src="logo/BSLogoW.png" alt="BS" class="imgIcon">
-                    </span>
-                    <span class="BG"></span>
-                </button>
-
                 <!-- Teams -->
                 <button class="Btn">
                     <span class="imgContainer">
@@ -224,6 +234,7 @@
                 </a>
             </div>
 
+
             <form class="form">
                 <div class="form__group field">
                     <input type="input" class="form__field" placeholder="Name" required="">
@@ -232,7 +243,7 @@
 
                 <div class="form__group field">
                     <input type="input" class="form__field" placeholder="Name" required="">
-                    <label for="name" class="form__label">Prenom</label>
+                    <label for="name" class="form__label">Prénom</label>
                 </div>
 
                 <div class="form__group field">
@@ -272,8 +283,7 @@
             document.querySelector('.loader-container').classList.add('hidden');
         });
         
-        //Simulation d'un chargement de 3 secondes
-        
+        //* Simulation d'un chargement de 3 secondes pour le loader
         /*window.addEventListener('load', function() {
             setTimeout(function() {
                 const loaderContainer = document.querySelector('.loader-container');
diff --git a/styles.css b/styles.css
index 0fee05e..6d286f3 100644
--- a/styles.css
+++ b/styles.css
@@ -208,7 +208,6 @@ background-color:#f8f8f8;
     align-items: center;
     padding: 60px 20px;
     text-align: center;
-
 }
 
 /** Text */
@@ -572,6 +571,13 @@ body.dark-mode .project-card:hover {
 
 }
 
+body.dark-mode .form-container{
+    background: linear-gradient(#2a2a2a, var(--BackgroundDark)) padding-box,
+                linear-gradient(var(--Tertiary), var(--Secondary)) border-box;
+    color: white;
+
+}
+
 
 .form-container .form {
     display: flex;