diff --git a/assets/CV_Théo_Dupin.pdf b/assets/CV_Théo_Dupin.pdf new file mode 100644 index 0000000..b8cff29 Binary files /dev/null and b/assets/CV_Théo_Dupin.pdf differ diff --git a/index.html b/index.html index b41b69f..1645e21 100644 --- a/index.html +++ b/index.html @@ -33,7 +33,8 @@ À propos de moi Compétences - Alternance + Projets + Alternance @@ -68,17 +69,61 @@ -
-
-
-
-

À propos de moi

- +
+

À propos de moi

+
+
+
+

+ Étudiant en 3e et dernière année de BUT informatique à l'IUT Clermont Auvergne, + je suis actuellement en alternance chez Satel + 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. +

+

+ 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. +

+

+ 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. +

+

+ N'hésitez pas à me contacter si vous avez des questions ou si vous souhaitez collaborer avec moi. +

+

+ Bonne visite ! +

+
+
+ + +
+ + \ No newline at end of file diff --git a/main.js b/main.js index 5b35aff..1873de6 100644 --- 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) { diff --git a/styles.css b/styles.css index f1b51d8..6b29200 100644 --- 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; + } + + .line { + font-size: 6vw; + } -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; + .about-me-content { + font-size: 11px; + } } -@keyframes animate { - 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; } -} -@keyframes animate2 { - 0% { - background-position-x: 0; + + .line { + font-size: 6vw; } - 100% { - background-position-x: -1000px; + + .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; } } + +