🚧 wip: in progress

master
thdupin2 5 months ago
parent d492279165
commit af0047381b

Binary file not shown.

Before

Width:  |  Height:  |  Size: 459 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 560 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

@ -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">
<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">
<a class="btn btn-light btn-round" href="#" role="button" id="copyEmail">
<i class="bi bi-envelope-at btn-icon"> Copier l'email</i>
<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>
</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>

@ -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() {
showNotification();
$('.alert').alert('Impossible de copier l\'adresse e-mail');
}, function() {
$('.alert').alert('Impossible de copier l\'adresse e-mail');
});
});
var gmailLink = 'https://mail.google.com/mail/?view=cm&fs=1&to=' + email;
function showNotification() {
var notification = document.getElementById('notification');
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
}
// Essayer d'ouvrir le lien Gmail
window.open(gmailLink, '_blank');
});
document.addEventListener('DOMContentLoaded', function() {
var aboutMeLink = document.querySelector('.header-nav a[href="#about-me"]');
@ -28,3 +15,6 @@ document.addEventListener('DOMContentLoaded', function() {
aboutMeSection.scrollIntoView({ behavior: 'smooth' }); // Fait défiler la page jusqu'à la section "À propos de moi" en douceur
});
});
// AOS
AOS.init();

@ -8,12 +8,7 @@
}
body {
padding-top: 150px;
min-height: 100vh;
background-image: url('./assets/nature-3082832_1920.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
height: 100vh;
}
section {
@ -74,8 +69,8 @@ section.container-about-me {
}
.photo-profil {
width: 140px;
height: 140px;
width: 200px;
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%;
width: 1000px;
background: linear-gradient(to bottom, #3498DB , #34495E);
color: white;
font-size: 50px;
}
.home {
margin: 10px 0;
text-align: start;
display: flex;
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 */
}
.btn-round {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-left: 1px;
}
.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 {
@ -283,3 +245,58 @@ section.container-about-me {
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;
}
}

Loading…
Cancel
Save