<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design Steampunk Pro - Geekbrain.io</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Georgia', serif;
background: #2C2C2C;
color: #e0d0b0;
min-height: 100vh;
padding: 20px;
}
h1, h2, h3 {
font-family: 'Times New Roman', serif;
color: #D4AF37;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.section {
background: #1a1a1a;
border: 2px solid #D4AF37;
border-radius: 8px;
padding: 25px;
margin: 25px 0;
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
}
.color-palette {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
margin: 20px 0;
}
.color-swatch {
height: 80px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-weight: bold;
font-size: 0.9em;
border: 2px solid #444;
}
.wireframe {
background: #f5f5f5;
color: #333;
padding: 20px;
border-radius: 8px;
margin: 15px 0;
border: 1px dashed #999;
}
.wireframe h3 {
color: #666;
margin-bottom: 10px;
font-size: 1em;
}
.placeholder {
background: #ddd;
border: 1px solid #bbb;
margin: 5px 0;
padding: 10px;
border-radius: 4px;
text-align: center;
color: #666;
font-size: 0.9em;
}
.nav-placeholder {
display: flex;
justify-content: space-between;
align-items: center;
background: #333;
color: #fff;
padding: 10px 20px;
margin-bottom: 20px;
border-radius: 4px;
}
.nav-links {
display: flex;
gap: 20px;
}
.nav-links span {
background: #555;
padding: 5px 10px;
border-radius: 3px;
}
.hero {
background: linear-gradient(135deg, #D4AF37 0%, #B87333 100%);
color: #1a1a1a;
padding: 40px;
border-radius: 8px;
margin-bottom: 20px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.card {
background: #fff;
border: 2px solid #D4AF37;
border-radius: 8px;
padding: 15px;
min-height: 200px;
}
.card h4 {
background: #D4AF37;
color: #1a1a1a;
padding: 5px 10px;
margin: -15px -15px 10px -15px;
border-radius: 6px 6px 0 0;
font-size: 0.9em;
}
.form-group {
margin: 15px 0;
}
.form-group input, .form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #999;
border-radius: 4px;
background: #fff;
}
.btn {
background: #D4AF37;
color: #1a1a1a;
padding: 10px 20px;
border: none;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
}
footer {
background: #0d0d0d;
padding: 20px;
text-align: center;
margin-top: 30px;
border-top: 2px solid #D4AF37;
}
.recommended {
border-color: #00ff00;
box-shadow: 0 0 10px rgba(0,255,0,0.3);
}
.badge {
background: #D4AF37;
color: #1a1a1a;
padding: 3px 8px;
border-radius: 3px;
font-size: 0.8em;
font-weight: bold;
}
a {
color: #D4AF37;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>Design Steampunk Professionnel Moderne</h1>
<p style="margin-bottom: 25px; font-size: 1.1em;">Palette de couleurs et wireframes pour Geekbrain.io</p>
<div class="section">
<h2>Palette de couleurs recommandée (Laiton doré)</h2>
<div class="color-palette">
<div class="color-swatch" style="background: #D4AF37;">Laiton Doré<br><small>#D4AF37</small></div>
<div class="color-swatch" style="background: #4a4a4a; color: #fff;">Gris Acier<br><small>#4a4a4a</small></div>
<div class="color-swatch" style="background: #F5F5DC; color: #333;">Blanc Cassé<br><small>#F5F5DC</small></div>
<div class="color-swatch" style="background: #1a1a1a; color: #fff;">Noir Charbon<br><small>#1a1a1a</small></div>
<div class="color-swatch" style="background: #B87333; color: #fff;">Cuivre<br><small>#B87333</small></div>
</div>
<p><strong>Cette palette donne:</strong> Élégant, professionnel, avec une touche steampunk discrète via le laiton doré. Le fond sombre (#1a1a1a) contraste bien avec le texte clair.</p>
</div>
<div class="section">
<h2>Wireframe - Page d'Accueil</h2>
<div class="wireframe">
<div class="nav-placeholder">
<div class="logo">[LOGO Geekbrain]</div>
<div class="nav-links">
<span>Accueil</span>
<span>À propos</span>
<span>Projets</span>
<span>Contact</span>
</div>
</div>
<div class="hero">
<h1>Bienvenue chez Geekbrain.io</h1>
<p>Développeur Python / Agentique - Freelance</p>
<button class="btn">Voir mes projets</button>
</div>
<div class="grid">
<div class="card">[Section: Services/Prestations]</div>
<div class="card">[Section: Compétences Python/Agentique]</div>
<div class="card">[Section: Call-to-Action Contact]</div>
</div>
<div class="nav-placeholder" style="margin-top: 20px;">
Footer: © Geekbrain.io - Liens réseaux sociaux
</div>
</div>
</div>
<div class="section">
<h2>Wireframe - Page Projets</h2>
<div class="wireframe">
<div class="nav-placeholder">
<div class="logo">[LOGO Geekbrain]</div>
<div class="nav-links">
<span>Accueil</span>
<span>À propos</span>
<span>Projets</span>
<span>Contact</span>
</div>
</div>
<h2 style="margin: 20px 0;">Mes Projets</h2>
<div class="grid">
<div class="card">
<h4 class="badge">Nom du repo</h4>
<p>Description extraite du README...</p>
<a href="#">Voir sur GitBucket</a>
</div>
<div class="card">
<h4 class="badge">Nom du repo</h4>
<p>Description extraite du README...</p>
<a href="#">Voir sur GitBucket</a>
</div>
<div class="card">
<h4 class="badge">Nom du repo</h4>
<p>Description extraite du README...</p>
<a href="#">Voir sur GitBucket</a>
</div>
</div>
<footer style="margin-top: 20px;">
© Geekbrain.io
</footer>
</div>
</div>
<div class="section">
<h2>Wireframe - Page Contact</h2>
<div class="wireframe">
<div class="nav-placeholder">
<div class="logo">[LOGO Geekbrain]</div>
<div class="nav-links">
<span>Accueil</span>
<span>À propos</span>
<span>Projets</span>
<span>Contact</span>
</div>
</div>
<h2 style="margin: 20px 0;">Contactez-moi</h2>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px;">
<div>
<form class="form-group">
<label>Nom</label>
<input type="text" placeholder="Votre nom">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" placeholder="[email protected]">
</div>
<div class="form-group">
<label>Sujet</label>
<input type="text" placeholder="Sujet du message">
</div>
<div class="form-group">
<label>Message</label>
<textarea rows="5" placeholder="Votre message..."></textarea>
</div>
<div class="form-group">
<input type="checkbox" id="recaptcha"> <label for="recaptcha">reCAPTCHA (simulé)</label>
</div>
<button class="btn">Envoyer</button>
</div>
<div style="background: #eee; padding: 20px; border-radius: 8px;">
[Informations de contact: email, téléphone, etc.]
</div>
</div>
<footer style="margin-top: 20px;">
© Geekbrain.io
</footer>
</div>
</div>
<div class="section">
<h2>Design - Page À propos</h2>
<div class="wireframe">
<div class="nav-placeholder">
<div class="logo">[LOGO Geekbrain]</div>
<div class="nav-links">
<span>Accueil</span>
<span>À propos</span>
<span>Projets</span>
<span>Contact</span>
</div>
</div>
<h2 style="margin: 20px 0;">À propos</h2>
<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 30px;">
<div style="background: #eee; border-radius: 50%; width: 150px; height: 150px; margin: auto;"></div>
<div>
<h3>Geekbrain.io</h3>
<p>Développeur Python / Agentique freelance</p>
<p>[Parcours, compétences, expérience]</p>
</div>
</div>
<h3 style="margin-top: 30px;">Compétences</h3>
<div class="grid">
<div class="card">Python</div>
<div class="card">Agentique/AI</div>
<div class="card">FastAPI</div>
<div class="card">Docker</div>
</div>
<footer style="margin-top: 20px;">
© Geekbrain.io
</footer>
</div>
</div>
<div class="section recommended">
<h2>✅ Design recommandé</h2>
<p><strong>Palette:</strong> Laiton doré (#D4AF37) + Gris acier (#4a4a4a) + Blanc cassé (#F5F5DC) + Noir charbon (#1a1a1a)</p>
<p><strong>Style:</strong> En-tête sombre avec logo, navigation claire, hero section dorée, cartes projets avec bordure laiton, footer sombre.</p>
<p><strong>Responsive:</strong> Oui, flexbox/grid adapté mobile.</p>
<p><strong>Logo:</strong> À placer dans `public/assets/` - je l'utiliserai dans le header.</p>
<hr style="margin: 20px 0; border-color: #D4AF37;">
<p><strong>Prochaines étapes:</strong> Si ce design te convient, on passera à l'architecture détaillée et au plan d'implémentation.</p>
<p><strong>Questions en suspens:</strong></p>
<ul style="margin-left: 20px;">
<li>Nom de domaine final: <code>geekbrain.io</code> ou <code>portfolio.geekbrain.io</code>?</li>
<li>Header: logo gauche, nav droite? (wireframe montre cela)</li>
<li>Footer: quels liens réseaux sociaux as-tu? (LinkedIn, GitHub, etc.)</li>
</ul>
</div>
</div>
</body>
</html>
