Modèle HTML de portfolio personnel

1240 kmahamadou009

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

25 August 2024

Effet de survol de navigation en CSS pur

7 January 2026

Modèle de formulaire de connexion HTML avec connexion via les réseaux sociaux

15 September 2025

Exemple d'animation de grille CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="style.css">
    
     <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <title>Portfolio</title>
</head>
<body>
<header class="header">
<a href="#home" class="logo">Mikey
    <span>kun</span>
    <i class='bx bx-menu' id="menu-icon"></i>
</a>

</div>

<nav class="navbar">
    <a href="#home" class="active">Home</a>
    <a href="#education">Education</a>
    <a href="#services">Services</a>
    <a href="#testimonials">Testimonials</a>
    <a href="#contact">Contact</a>
</nav>
</header>
<section class="home" id="home">
    <div class="home-content">
        <h1>Hi, It's <span>MIKEY</span></h1>
        <h3 class="text-animation">I'm a <span></span></h3>
<div class="social-icons">
    <a href="https://wa.me/+221761602964" <i class='bx bxl-whatsapp'></i></a>
    <a href="" <i class='bx bxl-github'></i></a>
    <a href="https://www.instagram.com/swordmikeykun?igsh=ZDJncHZwcWQ2eWpk&utm_source=qr" <i class='bx bxl-instagram-alt'></i></a>
    <a href="" <i class='bx bxl-twitter'></i></a>
</div>
<div class="btn-group">
    <a href="#" class="btn" >Hire me</a>
    <a href="#contact" class="btn">Contact</a>
    <a href="#"></a>
</div>
</div>

</section>
    <script src="script.js"></script>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
    outline: none;
    font-family: 'Poppins' , sans-serif;
}

:root {
    --bg-color:#080808;
    --second-bg-color:#131313;
    --text-color:white;
    --main-color:#00ffee;
}
html{
    font-size: 60%;
    overflow-x: hidden;
}
body{
    background-color: var(--bg-color);
    color: var(--text-color);
}
.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 4rem 12% 4rem;
    background: rgba(0, 0, 0, 0.3) ;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
    margin-left: 110px;
    text-decoration: none;

}
.logo{
    font-size: 6rem;
    color: white;
    font-weight: 800;
    cursor: pointer;
    transition: 0.3s ease;
    margin-left: -240px
}

.logo:hover{
    transform: scale(1.1);
}
.logo span{
    text-shadow:  0 0 25px red;}

.profile{
    display: flex;
    height: 300px;
    width: 300px;
   margin-left:-380px ;
    margin-bottom:-500px ;
}

.profile img{
    width: 400px;
    height: 500px;
    display: flex;
    border-radius: 1550px
}
.navbar a{
font-size: 2.8rem;
color: white;
margin-left: 4rem;
font-weight:500;
transition: 0.3s ease;
border-bottom: 3px  solid transparent;
text-decoration: none;

}
.navbar  a:hover,
.navbar a.active{
    color: red;
    border-bottom: 3px red;
}
#menu-icon{
    font-size: 3.6rem;
    color: var(--main-color);
    display: none;
}

section{
    min-height: 100vh;
    padding: 10rem 12% 10rem;
}
.home{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15rem;
   
}
.home-content{
display: flex;
flex-direction: column;
align-items: baseline;
text-align: left;
justify-content: center;
margin-top: 3rem;
margin-left:700px;
margin-top:-120px;
}
span{
    color: red;
}
.logo span{
    color: red;
}
.home-content h3{
        margin-bottom: 2rem;
        margin-top: 1rem;
    font-size: 3.5rem;
}
.home-content h1{
    font-size: 7rem;
    font-weight: 700;
    margin-top: 1.5rem;
    line-height: 1;
}
.home-img{
    border-radius: 50%;
}
.home-img img{
    position: relative;
    top: 3rem;
    width: 32vw;
    border-radius: 50%;
    box-shadow:  0  0 25px var(--main-color);
    cursor: pointer;
    transition: 0.4s ease-in-out;

}
.home-img img:hover{
    box-shadow: 0 0 25px var(--main-color),
     0 0 50px var(--main-color),
     0 0 100px var(--main-color);
}
.home-content p{
    font-size:1.5rem ;
    font-weight: 500;
    line-height: 1.8;
    max-width: 1000px;

}
.social-icons a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 4.5rem;
    height: 4.5rem;
    background: transparent;
    border: 2px solid gray;
    font-size: 2.5rem;
    border-radius: 50%;
    color: red;
    margin:1.2rem;
    transition: 0.3s  ease-in-out;
    text-decoration: none;
    margin-top: 50px;
}
.social-icons a:hover{
    color: brown;
    transform: scale(1.3) translateY(-5px) ;
    box-shadow: 0 0 25px red;
    background-color:red;

}
.btn{
    display: inline-block;
    padding: 1rem 2.8rem;
    background: red;
     box-shadow: 0 0 25px red;
     border-radius: 4rem;
     font-size: 1.6rem;
     color: black;
     border: 2px solid transparent;
     letter-spacing: 0.1rem;
     font-weight: 600;
     transition: 0.3s  ease-in-out;
     cursor: pointer;
     text-decoration: none;
     margin: .2rem;

}

.btn:hover{
    transform: scale(1.05);
    box-shadow: 0 0 50px red;
}
.btn-group{
    display: flex;
    align-items: center;
   margin: 1.5rem;
}
.btn-group a:nth-of-type(2){
    background-color: red;
    color: black;
    border: 2px solid red;
    box-shadow: 0 0 25px red;
    text-decoration: none;

}

.btn-group a:nth-of-type(2):hover{
    box-shadow: 0 0 25px red;
    background-color: red;
    color: black;
}

.text-animation{
    font-size: 34px ;
    font-weight: 600;
    min-width: 280px;
}

.text-animation span{
    position: relative;
}
.text-animation span::before{
    content: 'Web Developer';
    color: red;
    animation: words 20s infinite;
}
.text-animation span::after{
    content: "";
    background-color: var(--bg-color);
    position: absolute;
    width: calc(100% + 80px);
    height: 100%;
    border-left: 3px solid red;
    right: -8px;
    animation: cursor 0.6s infinite, typing 20s steps(14) infinite;
}

@keyframes cursor{
    to{
        border-left: 2px solid var(--main-color);
    }
}
@keyframes words{
    0%,
    20%{
        content: 'Frontend Web Developer';
    }
    21%,
    40%{
        content: 'App Developer';
    }
    41%,
    60%{
        content: 'UI / Ux Designer';
    }
    61%,
    80%{
        content: 'Flutter Developer';
    }
    81%,
    100%{
        content: '';
    }
}
@keyframes typing{
    10%,
    15%,
    30%,
    35%,
    50%,
    55%,
    70%,
    75%,
    90%,
    95%{
        width: 0;
    }
    5%,
    20%,
    25%,
    40%,
    45%,
    60%,
    65%,
    80%,
    85%{
        width: calc(100% + 8px);
    }
}

Recommandé

Effet de survol de navigation en CSS pur

Modèle de formulaire de connexion HTML avec connexion via les réseaux sociaux

Exemple d'animation de grille CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS