🚧 wip: in progress

1 year ago · af0047381b
parent d492279165
commit af0047381b
8 changed files with 102 additions and 80 deletions
--- a/assets/avenue-815297_1280.jpg
+++ b/assets/avenue-815297_1280.jpg
--- a/assets/gmail.png
+++ b/assets/gmail.png
--- a/assets/nature-3082832_1920.jpg
+++ b/assets/nature-3082832_1920.jpg
--- a/assets/sky-2479213_1280.jpg
+++ b/assets/sky-2479213_1280.jpg
--- a/assets/wave.png
+++ b/assets/wave.png
--- a/index.html
+++ b/index.html
@ -8,14 +8,21 @@
    <link rel="icon" href="./assets/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="styles.css">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <!-- --------- -->
    <!-- AOS (Animate on Scroll) -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <!-- ---------------------- -->
 </head>
 <body>
    <header class="header">
        <input type="checkbox" id="check">
        <label for="check" class="icons">
            <i class='bx bx-menu' id="menu-icon"></i>
@ -24,7 +31,7 @@
        <nav class="header-nav">
            <a href="#" class="logo">Accueil</a>
-            <a href="#about-me" style="--i:0">A propos de moi</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>
        </nav>
@ -44,23 +51,31 @@
            <div class="sub-text">
                <div class="row align-items-center">
                    <div class="col-auto">
-                        <a class="btn btn-dark btn-round" href="https://github.com/thdupin2" target="_blank" role="button"><i class="bi bi-github btn-icon"> Github </i></a>
+                        <a class="btn btn-primary btn-round" href="https://www.linkedin.com/in/th%C3%A9o-dupin-a81a34257/" target="_blank" role="button">
                            <i class="bi bi-linkedin btn-icon"> Linkedin</i>
                        </a>
                    </div>
-                    <div class="col">
+                    <div class="col-auto">
-                        <a class="btn btn-light btn-round" href="#" role="button" id="copyEmail">
+                        <a class="btn btn-dark btn-round" href="https://github.com/thdupin2" target="_blank" role="button">
-                            <i class="bi bi-envelope-at btn-icon"> Copier l'email</i>
+                            <i class="bi bi-github btn-icon"> Github </i>
                        </a>
                    </div>
                    <div class="col-auto">
                        <a class="btn btn-light btn-round" style="display: flex; align-items: center; gap: 5px; font-size: 20px;" href="#" role="button" id="openGmail">
                            <img src="assets/gmail.png" style="width: 20px; height: 20px;"> Gmail
                        </a>
                        <div id="notification" class="notification">
                            Copié !
                        </div>
                    </div>
                </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>A propos de moi</h1>
+        <h1 data-aos="zoom-in">A propos de moi</h1>
        <!-- Ajoutez ici des informations supplémentaires sur vous -->
    </section>
--- a/script.js
+++ b/script.js
@ -1,24 +1,11 @@
 // EMAIL
-document.getElementById('copyEmail').addEventListener('click', function() {
+document.getElementById('openGmail').addEventListener('click', function() {
    var email = 'theo.dupin03300.pro@gmail.com';
-    navigator.clipboard.writeText(email).then(function() {
+    var gmailLink = 'https://mail.google.com/mail/?view=cm&fs=1&to=' + email;
        showNotification();
        $('.alert').alert('Impossible de copier l\'adresse e-mail');
    }, function() {
        $('.alert').alert('Impossible de copier l\'adresse e-mail');
    });
 });
-function showNotification() {
+    // Essayer d'ouvrir le lien Gmail
-    var notification = document.getElementById('notification');
+    window.open(gmailLink, '_blank');
-    notification.classList.add('show');
+});
    setTimeout(function() {
        notification.classList.add('hide');
        setTimeout(function() {
            notification.classList.remove('show', 'hide');
        }, 500); // Corresponds to the hide transition duration
    }, 2500); // Change the duration as needed
 }
 document.addEventListener('DOMContentLoaded', function() {
    var aboutMeLink = document.querySelector('.header-nav a[href="#about-me"]');
@ -27,4 +14,7 @@ document.addEventListener('DOMContentLoaded', function() {
        var aboutMeSection = document.getElementById('about-me');
        aboutMeSection.scrollIntoView({ behavior: 'smooth' }); // Fait défiler la page jusqu'à la section "À propos de moi" en douceur
    });
-});
+});
 // AOS
 AOS.init();
--- a/styles.css
+++ b/styles.css
@ -8,12 +8,7 @@
 }
 body {
-    padding-top: 150px;
+    height: 100vh;
    min-height: 100vh;
    background-image: url('./assets/nature-3082832_1920.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
 }
 section {
@ -74,8 +69,8 @@ section.container-about-me {
 }
 .photo-profil {
-    width: 140px;
+    width: 200px;
-    height: 140px;
+    height: 200px;
    border-radius: 50%;
    object-fit: cover;
 }
@ -122,15 +117,17 @@ section.container-about-me {
    flex-direction: column;
    align-items: center;
    top: 50%;
-    margin-left: 5%;
+    background: linear-gradient(to bottom, #3498DB , #34495E);
    width: 1000px;
    color: white;
    font-size: 50px;
 }
 .home {
-    margin: 10px 0;
+    display: flex;
-    text-align: start;
+    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: inherit;
 }
 .sub-text {
@ -146,20 +143,13 @@ section.container-about-me {
 }
 .line {
-    margin: 2px 0; /* Ajoute un espace entre les lignes */
+    margin: 2px 0;
 }
 .cursor::after {
    content: '|';
    animation: blink 1s step-end infinite;
-    margin-left: 1px; /* Espace entre le texte et le curseur */
+    margin-left: 1px;
 }
 .btn-round {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
 }
 .btn-icon {
@ -170,34 +160,6 @@ section.container-about-me {
    position: relative;
 }
 .notification {
    visibility: hidden;
    min-width: 100px;
    background-color: #2569EB;
    color: white;
    text-align: center;
    border-radius: 30px;
    padding: 8px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(0);
    z-index: 1;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
 }
 .notification.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(-50%) translateX(10px); /* Slide in */
 }
 .notification.hide {
    opacity: 0;
    transform: translateY(-50%) translateX(0); /* Slide out */
 }
 /* ************ */
 /* ME */
 .container-about-me {
@ -282,4 +244,59 @@ section.container-about-me {
    .header-nav a:hover::before {
        width: 0;
    }
-}
+}
 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;
    }
 }