M-binary
Si tu es passionné par le design futuriste, les interfaces sombres et l’univers technologique de SpaceX, ce portfolio est fait pour toi. Conçu pour impressionner, il allie minimalisme, style cinématographique et navigation fluide. Ce modèle est idéal pour présenter ton profil professionnel, ton CV ou même ton projet personnel autour de la tech.
Dans cet article, tu vas pouvoir télécharger et copier le code complet pour construire ce portfolio interactif depuis zéro. Compatible sur mobile et bureau, ce design s’adapte parfaitement aux développeurs web, créatifs, ou étudiants souhaitant sortir du lot.
Code HTML (structure de base)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portfolio Elon Musk</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>
<body>
<div class="container">
<div class="profile-card">
<div class="left">
<div class="logo">SPAC<span class="x">E</span>X</div>
<img src="elon.jpg" alt="Elon Musk" class="profile-img">
</div>
<div class="right">
<h1>Elon Musk</h1>
<h3>CEO / Lead Design</h3>
<p class="bio">
Musk founded Space Exploration Technologies, or SpaceX, in May 2002. He is the chief executive officer (CEO) and chief technology officer (CTO) of the Hawthorne, California-based company. SpaceX develops and manufactures space launch vehicles with a focus on advancing the state of rocket technology.
</p>
<div class="signature">Elon M</div>
<div class="socials">
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
<div class="nav-buttons">
<button class="nav-btn" onclick="prevProfile()"><i class="fas fa-arrow-left"></i></button>
<button class="nav-btn" onclick="nextProfile()"><i class="fas fa-arrow-right"></i></button>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Code CSS (design & responsive)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #0a0a0a;
color: #fff;
}
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
background-image: url('background.jpg');
background-size: cover;
background-position: center;
}
.profile-card {
display: flex;
flex-wrap: wrap;
background: rgba(10,10,10,0.95);
border-radius: 10px;
overflow: hidden;
max-width: 960px;
width: 100%;
box-shadow: 0 0 30px rgba(0,0,0,0.6);
}
.left, .right {
flex: 1 1 300px;
padding: 30px;
}
.logo {
font-size: 28px;
font-weight: bold;
margin-bottom: 20px;
letter-spacing: 2px;
}
.x {
color: #f5ba31;
}
.profile-img {
width: 100%;
border-radius: 8px;
object-fit: cover;
}
h1 {
font-size: 32px;
font-weight: 700;
margin-bottom: 10px;
}
h3 {
color: #888;
font-weight: 400;
margin-bottom: 20px;
}
.bio {
font-size: 16px;
line-height: 1.6;
margin-bottom: 30px;
color: #ccc;
}
.signature {
font-family: 'Brush Script MT', cursive;
font-size: 28px;
color: #fff;
margin-bottom: 20px;
}
.socials a {
margin-right: 15px;
font-size: 18px;
color: #f5ba31;
text-decoration: none;
transition: color 0.3s ease;
}
.socials a:hover {
color: #fff;
}
.nav-buttons {
margin-top: 20px;
}
.nav-btn {
background-color: #f5ba31;
border: none;
color: #000;
padding: 10px 15px;
margin-right: 10px;
cursor: pointer;
border-radius: 5px;
transition: background 0.3s ease;
}
.nav-btn:hover {
background-color: #fff;
color: #000;
}
Responsive
@media screen and (max-width: 768px) {
.profile-card {
flex-direction: column;
}
.left, .right {
padding: 20px;
}
}
Code JavaScript (interactions)
function prevProfile() {
alert("Profil précédent (non implémenté)");
}
function nextProfile() {
alert("Profil suivant (non implémenté)");
}
🎁 Bonus : Pourquoi ce modèle cartonne
• Design élégant et sombre
• Image de profil en split avec effet signature
• Responsive et fluide sur tous les écrans
• Intégration des icônes de réseaux sociaux
• Navigation stylisée avec effet slide
📦 Téléchargement gratuit : Ce modèle est 100% gratuit à modifier et à réutiliser. Clique sur le bouton ci-dessous pour le télécharger ou commence à copier/coller les codes ci-dessus dans ton éditeur préféré.
💡 Astuce : remplace la photo, le texte, la signature et les couleurs par tes propres données pour obtenir un rendu unique.
Tu veux d’autres interfaces aussi élégantes ? Laisse un commentaire ou partage ton résultat !