thdupin2
1 year ago
parent
b5c56b3756
commit
d492279165
|
After Width: | Height: | Size: 151 KiB |
|
After Width: | Height: | Size: 459 KiB |
|
After Width: | Height: | Size: 288 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 560 KiB |
|
After Width: | Height: | Size: 94 KiB |
@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
||||
<title>Portfolio</title>
|
||||
<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'>
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
|
||||
|
||||
<input type="checkbox" id="check">
|
||||
<label for="check" class="icons">
|
||||
<i class='bx bx-menu' id="menu-icon"></i>
|
||||
<i class='bx bx-x' id="close-icon"></i>
|
||||
</label>
|
||||
|
||||
<nav class="header-nav">
|
||||
<a href="#" class="logo">Accueil</a>
|
||||
<a href="#about-me" style="--i:0">A propos de moi</a>
|
||||
<a href="#" style="--i:1">Compétences</a>
|
||||
<a href="#" style="--i:2">Alternance</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section class="container-home">
|
||||
<div class="home">
|
||||
<div class="line">
|
||||
<img src="./assets/IMG_0126.JPG" class="photo-profil">
|
||||
</div>
|
||||
<div class="line">
|
||||
Bonjour
|
||||
<img src="./assets/bonjour.gif" class="emoji" alt="Bonjour emoji">
|
||||
</div>
|
||||
<div class="line">je suis Théo DUPIN</div>
|
||||
<div class="line cursor">apprenti développeur web</div>
|
||||
<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>
|
||||
</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>
|
||||
</a>
|
||||
<div id="notification" class="notification">
|
||||
Copié !
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container-about-me" id="about-me">
|
||||
<h1>A propos de moi</h1>
|
||||
<!-- Ajoutez ici des informations supplémentaires sur vous -->
|
||||
</section>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,30 @@
|
||||
// EMAIL
|
||||
document.getElementById('copyEmail').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');
|
||||
});
|
||||
});
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var aboutMeLink = document.querySelector('.header-nav a[href="#about-me"]');
|
||||
aboutMeLink.addEventListener('click', function(event) {
|
||||
event.preventDefault(); // Empêche le comportement par défaut du lien
|
||||
var aboutMeSection = document.getElementById('about-me');
|
||||
aboutMeSection.scrollIntoView({ behavior: 'smooth' }); // Fait défiler la page jusqu'à la section "À propos de moi" en douceur
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,285 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Poppins", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 150px;
|
||||
min-height: 100vh;
|
||||
background-image: url('./assets/nature-3082832_1920.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
section {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
section.container-about-me {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 1.3rem 10%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(2px);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.header:hover::after {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
/* ACCUEIL */
|
||||
.logo {
|
||||
font-size: 2rem;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.photo-profil {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#check {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icons {
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
font-size: 2.8rem;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-nav a {
|
||||
position: relative;
|
||||
font-size: 1.15rem;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.header-nav a::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: #fff;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.header-nav a:hover::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container-home {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
top: 50%;
|
||||
margin-left: 5%;
|
||||
width: 1000px;
|
||||
color: white;
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
.home {
|
||||
margin: 10px 0;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
margin: 20px 0;
|
||||
text-align: start;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.line {
|
||||
margin: 2px 0; /* Ajoute un espace entre les lignes */
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.row {
|
||||
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 {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
@keyframes blink {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes highlight {
|
||||
0% { transform: translateX(-50%) scale(1); }
|
||||
50% { transform: translateX(-50%) scale(1.1); }
|
||||
100% { transform: translateX(-50%) scale(1); }
|
||||
}
|
||||
|
||||
/* BREAKPOINTS */
|
||||
@media (max-width: 992px) {
|
||||
.header {
|
||||
padding: 1.3rem 5%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px){
|
||||
.icons {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
#check:checked~.icons #menu-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icons #close-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#check:checked~.icons #close-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(50px);
|
||||
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
transition: .3s ease;
|
||||
}
|
||||
|
||||
#check:checked~.header-nav {
|
||||
height: 15rem;
|
||||
}
|
||||
|
||||
.header-nav a {
|
||||
position: relative;
|
||||
display: block;
|
||||
font-size: 1.1rem;
|
||||
margin: 1.5rem 0;
|
||||
text-align: center;
|
||||
transform: translateY(-50px);
|
||||
opacity: 0;
|
||||
transition: .3s ease;
|
||||
}
|
||||
|
||||
#check:checked~.header-nav a {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
transition-delay: calc(.15s * var(--i));
|
||||
}
|
||||
|
||||
.header-nav a:hover::before {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue