✨ add: alternance part

index.html

@@ -39,7 +39,7 @@
             <a href="#about_me" style="--i:1">À propos de moi</a>
             <a href="#skills" style="--i:2">Compétences</a>
             <a href="#projects" style="--i:3">Projets</a>
-            <a href="#" style="--i:4">Alternance</a>
+            <a href="#alternance" style="--i:4">Alternance</a>
         </nav>
     </header>
 
@@ -229,6 +229,7 @@
                         </p>
                         <div class="logos">
                             <img src="assets/symfony.png">
+                            <img src="assets/mysql-color.png">
                             <img src="assets/javascript-color.png">
                         </div>
                         <a href="https://github.com/MaxWinDev/" class="repo-button" target="_blank">Voir le Repository</a>
@@ -307,12 +308,35 @@
           </div>
     </section>
 
+    <section class="container-alternance" id="alternance">
+        <div style="margin-top: 60px;">
+            <h1>Alternance</h1>
+            <hr style="width: 50%; margin: 0 auto; border: 1px solid #000;">
+        </div>
+        <div class="alternance-content">
+            <div class="image-container">
+                <img src="assets/satel.PNG" alt="Description de l'image">
+            </div>
+            <div class="text-container">
+                <p>
+                    Durant cette 3e et dernière année de BUT informatique (2023-2024), j'ai eu la chance d'être en alternance chez <a href="https://www.satel.fr/" target="_blank">Satel</a> en tant que développeur web sur le site de Vichy du <strong>4 septembre 2023</strong> au <strong>30 août 2024</strong>. <br>
+                    J'ai pu travailler sur des projets concrets et collaborer avec des professionnels du métier plus expérimentés que moi. <br>
+                    J'ai également pu découvrir le monde de l'entreprise et ses contraintes. <br>
+                    Ma mission principale était de migrer les données concernant la partie Ressources Humaines de Satel sur le site web déjà exitsant "SatelPlatform". <br>
+                    Cette mission m'a permis de découvrir de nouvelles technologies comme Angular ou encore NestJS et de me perfectionner dans le développement web. <br>
+                    Elle m'a également permis de développer des compétences qui me seront précisieuses pour la suite de ma carrière et notamment dès les 2 prochaines années en Mastère développeur web Full Stack à OpenIT. <br>
+                    Ces compétences sont les suivantes : <strong>réaliser des développement d'applications</strong>, <strong>gérer des données de l'information</strong>, <strong>collaborer au sein d'une équipe informatique</strong>. <br>
+                    Dès septembre 2024, je serais de nouveaux en alternance chez Satel jusqu'en 2026. <br>
+                    Je suis très heureux de continuer l'aventure chez Satel et de pouvoir continuer à apprendre et à me perfectionner dans le développement web. <br>
+                    Je suis également très reconnaissant envers Satel de m'avoir fait confiance et de m'avoir permis de réaliser mon rêve de devenir développeur web. <br>
+                    Je suis impatient de commencer cette nouvelle année et de relever de nouveaux défis. <br>
+                </p>
+            </div>
+        </div>
+    </section>
+
     <footer>
         <div class="footer">
-            <div class="wave wave1"></div>
-            <div class="wave wave2"></div>
-            <div class="wave wave3"></div>
-            <div class="wave wave4"></div>
             <div class="footer-text">
                 <p>Created with ♥ by Théo DUPIN © 2024</p>
             </div>

styles.css

@@ -212,61 +212,6 @@ section {
     position: relative;
 }
 
-section .wave {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 100px;
-    background: url('./assets/wave.png');
-    background-size: 1000px 100px;
-}
-
-section .wave.wave1 {
-    animation: animate 30s linear infinite;
-    z-index: 1000;
-    opacity: 1;
-    animation-delay: 0s;
-    bottom: 0;
-}
-section .wave.wave2 {
-    animation: animate2 15s linear infinite;
-    z-index: 999;
-    opacity: 0.5;
-    animation-delay: -5s;
-    bottom: 10px;
-}
-section .wave.wave3 {
-    animation: animate 30s linear infinite;
-    z-index: 998;
-    opacity: 0.2;
-    animation-delay: -2s;
-    bottom: 15;
-}
-section .wave.wave4 {
-    animation: animate2 5s linear infinite;
-    z-index: 997;
-    opacity: 0.7;
-    animation-delay: -2s;
-    bottom: 20px;
-}
-@keyframes animate {
-    0% {
-        background-position-x: 0;
-    }
-    100% {
-        background-position-x: 1000px;
-    }
-}
-@keyframes animate2 {
-    0% {
-        background-position-x: 0;
-    }
-    100% {
-        background-position-x: -1000px;
-    }
-}
-
 /* ************ */
 /* ME */
 .container-about-me {
@@ -423,7 +368,7 @@ section .wave.wave4 {
 
 /* Custom scrollbar styles */
 .grid-container::-webkit-scrollbar {
-    width: 12px;
+    width: 8px;
 }
 
 .grid-container::-webkit-scrollbar-track {
@@ -441,6 +386,74 @@ section .wave.wave4 {
 }
 /* ************ */
 
+/* ALTERNANCE */
+.container-alternance {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: white;
+    color: black;
+    padding: 40px 0;
+}
+
+.alternance-header {
+    text-align: center; /* Centre le contenu */
+}
+
+.alternance-header h1 {
+    margin-bottom: 10px; /* Espacement sous le titre */
+}
+
+.alternance-content {
+    display: flex;
+    flex-wrap: wrap; /* Permet le retour à la ligne si l'espace est insuffisant */
+    justify-content: center; /* Centre les éléments horizontalement */
+    align-items: center; /* Centre les éléments verticalement */
+    margin-top: 20px; /* Espacement en haut de la section */
+    padding: 16px;
+}
+
+.image-container {
+    width: 50%;
+    height: 100%; /* Fait en sorte que l'image occupe toute la hauteur du conteneur */
+}
+
+.image-container img {
+    width: 100%;
+    border-radius: 20px;
+    height: auto; /* Pour conserver les proportions de l'image */
+    display: block; /* Pour éviter les espaces vides en dessous de l'image */
+}
+
+.text-container {
+    width: 50%;
+    padding: 0 20px; /* Espacement intérieur pour le texte */
+}
+
+.text-container p {
+    text-align: justify; /* Justifie le texte */
+}
+
+.text-container::-webkit-scrollbar {
+    width: 8px;
+}
+
+.text-container::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
+}
+
+.text-container::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 10px;
+}
+
+.text-container::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+
+/* ************ */
 @keyframes blink {
     0%, 100% {
         opacity: 1;
@@ -491,6 +504,32 @@ section .wave.wave4 {
     .repo-button {
         font-size: 0.9em;
     }
+
+    .image-container {
+        width: 100%;
+        height: 500px;
+        overflow: hidden;
+    }
+    
+    .image-container img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .alternance-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+    }
+
+    .text-container {
+        overflow-y: auto;
+        max-height: 300px;
+        width: 100%;
+    }
 }
 
 @media (max-width: 992px) {
@@ -572,6 +611,26 @@ section .wave.wave4 {
     .about-me-content {
         font-size: 11px;
     }
+
+    .image-container {
+        width: 100%;
+        height: auto;
+    }
+
+    .alternance-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center; /* Centre les éléments horizontalement */
+        align-items: center; /* Centre les éléments verticalement */
+        margin-top: 20px; /* Espacement en haut de la section */
+        padding: 16px;
+    }
+
+    .text-container {
+        overflow-y: auto;
+        max-height: 300px;
+        width: 100%;
+    }
 }
 
 @media only screen and (max-width: 480px) {
@@ -597,18 +656,9 @@ section .wave.wave4 {
         font-size: 15px !important;
     }
 
-    /* .container-about-me p {
-        font-size: 1.2rem;
-    } */
-
     .about-me-content {
         font-size: 10px;
-    }
+        margin-bottom: 20px;
-
-    .grid-container {
-        grid-template-columns: 1fr;
-        overflow-y: auto;
-        max-height: 300px;
     }
 
     .content-container h2 {
@@ -627,6 +677,27 @@ section .wave.wave4 {
     .repo-button {
         font-size: 0.7em;
     }
+
+    .image-container {
+        width: 100%;
+        height: auto;
+    }
+
+    .alternance-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center; /* Centre les éléments horizontalement */
+        align-items: center; /* Centre les éléments verticalement */
+        gap: 10px;
+        margin-top: 20px; /* Espacement en haut de la section */
+        padding: 16px;
+    }
+
+    .text-container {
+        overflow-y: auto;
+        max-height: 300px;
+        width: 100%;
+    }
 }