📱 add: home and about me

1 year ago · d4279470c7
parent f0469f0d00
commit d4279470c7
4 changed files with 166 additions and 60 deletions
--- a/assets/CV_Théo_Dupin.pdf
+++ b/assets/CV_Théo_Dupin.pdf
--- a/index.html
+++ b/index.html
@ -33,7 +33,8 @@
            <a href="#" class="logo">Accueil</a>
            <a href="#about-me" style="--i:0">À propos de moi</a>
            <a href="#" style="--i:1">Compétences</a>
-            <a href="#" style="--i:2">Alternance</a>
+            <a href="#" style="--i:2">Projets</a>
+            <a href="#" style="--i:3">Alternance</a>
        </nav>
    </header>

@ -68,17 +69,61 @@
                </div>
            </div>
        </div>
-        <div class="wave wave1"></div>
-        <div class="wave wave2"></div>
-        <div class="wave wave3"></div>
-        <div class="wave wave4"></div>
    </section>

    <section class="container-about-me" id="about-me">
-        <h1 data-aos="zoom-in">À propos de moi</h1>
-        <!-- Ajoutez ici des informations supplémentaires sur vous -->
+        <div>
+            <h1>À propos de moi</h1>
+            <hr style="width: 50%; margin: 0 auto; border: 1px solid #000;">
+        </div>
+        <div class="about-me-content">
+            <p>
+                Étudiant en 3e et dernière année de BUT informatique à l'IUT Clermont Auvergne, 
+                je suis actuellement en alternance chez <a href="https://www.satel.fr/" target="_blank">Satel</a> 
+                en tant que développeur web sur le site de Vichy. Cette année d'alternance a été pour moi une
+                opportunité de mettre en pratique les compétences acquises durant mes deux premières années
+                d'études. J'ai pu travailler sur des projets concrets et collaborer avec des professionnels
+                du métier plus expérimentés que moi. J'ai également pu découvrir le monde de l'entreprise et ses contraintes.
+            </p>
+            <p>
+                Je me suis orienté vers le développement web car j'aime le côté créatif et le fait de pouvoir voir le résultat
+                de son travail en direct. Je souhaite continuer dans cette voie et me spécialiser dans le développement web
+                en intégrant un Mastère développeur web Full Stack en alternance (2 ans) conférant le titre RCNP de niveau 7 équivalent
+                à Bac+5. Ce parcours me permettra d'acquérir de nouvelles compétences et de me perfectionner dans le développement
+                web, tout en continuant à travailler en entreprise. J'aurais la possibilité de passer deux certifications par an reconnues par l'État. Ces certifications sont un gage
+                de qualité et de sérieux pour les entreprises. Ces certifications me permettront de me spécialiser dans des domaines
+                très intéressants comme l'IA ou la cyber-sécurité par exemple qui font partie des domaines les plus recherchés
+                par les entreprises et qui constituent l'avenir du numérique.
+            </p>
+            <p>
+                Comme vous l'aurez compris, je suis passionné par le développement web et je suis toujours à la recherche de nouvelles technologies et de nouveaux
+                langages de programmation à apprendre. C'est pourquoi j'ai conçu ce portfolio pour vous présenter mes compétences et mes projets.
+            </p>
+            <p>
+                N'hésitez pas à me contacter si vous avez des questions ou si vous souhaitez collaborer avec moi.
+            </p>
+            <p>
+                Bonne visite !
+            </p>
+        </div>
+        <div style="width: 80%;">
+            <a id="downloadCV" href="assets/CV_Théo_Dupin.pdf" download="CV_Théo_Dupin.pdf" style="display:none;"></a>
+            <button type="button" class="btn btn-dark" style="padding: 12px;" id="downloadButton">Téléchargez mon CV</button>
+        </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>
+        </div>
+    </footer>
+
    <script src="main.js"></script>
 </body>
 </html> 
--- a/main.js
+++ b/main.js
@ -7,6 +7,11 @@ document.getElementById('openGmail').addEventListener('click', function() {
    window.open(gmailLink, '_blank');
 });

+// CV
+document.getElementById('downloadButton').addEventListener('click', function() {
+    document.getElementById('downloadCV').click();
+});
+
 document.addEventListener('DOMContentLoaded', function() {
    var aboutMeLink = document.querySelector('.header-nav a[href="#about-me"]');
    aboutMeLink.addEventListener('click', function(event) {
--- a/styles.css
+++ b/styles.css
@ -15,12 +15,6 @@ section {
    height: 100vh;
 }

-section.container-about-me {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
 .header {
    position: fixed;
    top: 0;
@ -160,11 +154,79 @@ section.container-about-me {
    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 {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
    background-color: white;
    color: black;
+    width: 100%;
+    height: inherit;
+    gap: 30px;
+}
+
+.about-me-content {
+    width: 80%; 
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 
+    text-align: justify;
 }


@ -246,57 +308,51 @@ section.container-about-me {
    }
 }

-section .wave {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 100px;
-    background: url('./assets/wave.png');
-    background-size: 1000px 100px;
-}
+@media only screen and (max-width: 768px) {
+    .emoji {
+        width: 50px;
+        height: 50px;
+    }
  
-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;
+    .line {
+        font-size: 6vw;
    }
-    100% {
-        background-position-x: 1000px;
+
+    .about-me-content {
+        font-size: 11px;
    }
 }
-@keyframes animate2 {
-    0% {
-        background-position-x: 0;
+
+@media only screen and (max-width: 480px) {
+    .photo-profil {
+        width: 150px;
+        height: 150px;
    }
-    100% {
-        background-position-x: -1000px;
+
+    .emoji {
+        width: 30px;
+        height: 30px;
+    }
+  
+    .line {
+        font-size: 6vw;
+    }
+
+    .btn-round {
+        font-size: 15px !important;
+    }
+
+    .btn-icon {
+        font-size: 15px !important;
+    }
+
+    /* .container-about-me p {
+        font-size: 1.2rem;
+    } */
+
+    .about-me-content {
+        font-size: 10px;
    }
 }
+
+