réparation des thèmes, et ajout du cv telechargeable 💥

index.html

@@ -116,27 +116,34 @@
                     <div class="timeline-circle"></div>
                 </div>
                 <div class="timeline-component timeline-content">
-                    <h3>Collège</h3>
-                    <p>Lorem Ipsum</p>
+                    <h3>Lycée</h3>
+                    <p>Au lycée, j'ai décidé d'explorer le monde de l'informatique en optant pour la filière NSI (Numérique et Sciences Informatiques). Fasciné par le fonctionnement des technologies qui nous entourent au quotidien, ce domaine m'a permis d'acquérir une compréhension solide des concepts informatiques. J'ai développé un réel intérêt pour cette discipline en me plongeant dans les bases de la programmation et de la gestion des systèmes d'information.</p>
                 </div>
                 <div class="timeline-component timeline-content">
-                    <h3>Lycée</h3>
-                    <p>Lorem Ipsum</p>
+                    <h3>BUT informatique</h3>
+                    <p>Après le lycée, il m'a semblé naturel de continuer dans cette voie en poursuivant un BUT en Informatique. Au cours de ces trois années, j'ai acquis une large gamme de compétences couvrant différents aspects de l'informatique, tels que la programmation, les bases de données, les réseaux et le développement web. Ce programme m'a permis de renforcer mes connaissances théoriques et pratiques, me préparant ainsi efficacement à entrer dans le monde professionnel.</p>
                 </div>
                 <div class="timeline-middle">
                     <div class="timeline-circle"></div>
                 </div>
-
                 <div class="timeline-empty"></div>
                 <div class="timeline-empty"></div>
-
                 <div class="timeline-middle">
                     <div class="timeline-circle"></div>
                 </div>
                 <div class=" timeline-component timeline-content">
-                    <h3>BUT informatique</h3>
-                    <p>Lorem Ipsum</p>
+                    <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>
+                </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>
                 </div>
+                <div class="timeline-middle">
+                    <div class="timeline-circle"></div>
+                </div>
+
+                <div class="timeline-empty"></div>
                 <div class="timeline-empty"></div>
                 <div class="timeline-middle">
                     <!-- "Cercle" final -->
@@ -152,7 +159,7 @@
         <div class="projects-grid">
             <div class="project-card">
                 <h3 class="text-title">Art e-Show</h3>
-                <p class="text-body"> Il s'agit d'un projet de deuxième année de l'IUT informatique de Clermont-Ferrand. Il s'agit d'un site-web permettant à des joueurs d'en apprendre un peu plus sur l'art en s'amusant. Il sera composé de plusieurs modes de jeu :
+                <p class="text-body"> Il s'agit d'un projet de deuxième année de l'IUT informatique de Clermont-Ferrand. Il s'agit d'un site-web permettant à des joueurs d'en apprendre un peu plus sur l'art en s'amusant. Il sera composé de plusieurs modes de jeu : Moz'ART, Leon'ART de Vinci, N'oubliez p'ART les paroles, Emile Zol'ART et iART.</p>
                 <a href="https://github.com/PiR194/Art-eShow.git" class="project-card-button">Plus d'infos</a>
             </div>
             <div class="project-card offset">
@@ -205,6 +212,16 @@
                     </span>
                     <span class="BG"></span>
                 </button>
+
+                <!-- CV -->
+                <a href="pdf/curriculum_vitae.pdf" download="curriculum_vitae.pdf">
+                    <button class="Btn">
+                        <span class="imgContainer">
+                            <img src="logo/cv.png" alt="CV" class="imgIcon">
+                        </span>
+                        <span class="BG"></span>
+                    </button>
+                </a>
             </div>
 
             <form class="form">

styles.css

@@ -19,6 +19,19 @@ html {
 
     --BackgroundDark: #1e1e1e;
     --TextDark: #f4f4f4;
+
+    /* Project card colors */
+    --CardLightBg: #f5f5f5;
+    --CardDarkBg: #333;
+
+    --CardLightText: #000;
+    --CardDarkText: #fff;
+
+    --CardShadowIn: #bebebe;
+    --CardShadowOut: #ffffff;    
+
+    --CardDarkShadowIn: #555;
+    --CardDarkShadowOut: #111;
 }
 
 body {
@@ -309,7 +322,7 @@ opacity: 0;
 .timeline {
     width: 80%;
     height: auto;
-    max-width: 800px;
+    max-width: 1000px;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
@@ -326,6 +339,11 @@ opacity: 0;
     overflow: visible;
 }
 
+body.dark-mode .timeline-content
+{
+    background: linear-gradient(#2a2a2a, var(--BackgroundDark)) padding-box,
+                linear-gradient(var(--Tertiary), var(--Secondary)) border-box;
+}
 .timeline-component {
     margin: 0px 20px 20px 20px;
 }
@@ -370,13 +388,12 @@ opacity: 0;
     height: 254px;
 
     border-radius: 50px;
-    background: #e0e0e0;
-    box-shadow:  18px 18px 0px #bebebe,
-            -18px -18px 0px #ffffff;
+    background: var(--CardLightBg);
+    box-shadow:  18px 18px 0px var(--CardShadowIn),
+            -18px -18px 0px var(--CardShadowOut);
 
     border-radius: 20px;
-    background: #f5f5f5;
-    border: 2px solid #c3c6ce;
+    border: 2px solid var(--CardShadowIn);
     position: relative;
     padding: 1.8rem;
     transition: 0.5s ease-out;
@@ -388,6 +405,14 @@ opacity: 0;
     margin-bottom: 1em;
 }
 
+body.dark-mode .project-card {
+    background: var(--CardDarkBg);
+    color: var(--CardDarkText);
+    box-shadow:  18px 18px 0px var(--CardDarkShadowIn),
+                -18px -18px 0px var(--CardDarkShadowOut);
+    border: 2px solid var(--CardDarkShadowIn);
+}
+
 .text-title {
     margin-top: 1em;
     color: var(--Secondary);
@@ -411,13 +436,16 @@ opacity: 0;
     transition: 0.3s ease-out;
 }
 .project-card-details {
-    color: black;
+    color: var(--CardLightText);
     height: 100%;
     gap: .5em;
     display: grid;
     place-content: center;
 }
 
+body.dark-mode .project-card-details {
+    color: var(--CardDarkText);
+}
 
 /*Hover*/
 .project-card:hover {
@@ -425,6 +453,11 @@ opacity: 0;
     box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
 }
 
+body.dark-mode .project-card:hover {
+    border-color: var(--Secondary);
+    box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
+}
+
 .project-card:hover .project-card-button {
     transform: translate(-50%, 50%);
     opacity: 1;