Compétence Portfolio Site
Génère un site web de portfolio professionnel : section héros, grille de projets, section à propos et formulaire de contact. Design propre, typographique et minimal.
Métadonnées
Nom : portfolio-site Description : Générer un site web de portfolio professionnel avec les sections héros, projets, à propos et contact. Mots-clés déclencheurs : "portfolio", "site web personnel", "portfolio développeur", "portfolio créatif", "site CV"
Entrées & Paramètres
| Paramètre | Type | Requis | Défaut |
|---|---|---|---|
name | string | ✓ | — |
tagline | string | ✓ | — |
projects | array | ✓ | — |
github_url | string | — | — |
linkedin_url | string | — | — |
email | string | — | — |
years_experience | number | — | 3 |
skills | array | — | [] |
Élément du tableau Projects :
{ title: string; description: string; tags: string[]; url?: string; image?: string }
Sections requises (dans l'ordre)
- Navigation — Nom comme logo, liens : Projets / À propos / Contact
- Héros — Nom, tagline, proposition de valeur en une ligne, liens sociaux (GitHub, LinkedIn, email)
- Grille de Projets — Grille responsive à 3 colonnes, chaque carte : titre + description + tags + lien
- À propos — 2 colonnes : bio texte à gauche, compétences/statistiques à droite
- Contact — Formulaire simple : nom, email, message, bouton d'envoi
- Pied de page — Copyright + liens sociaux
Règles de conception
- Page unique, entièrement responsive
- Mode sombre par défaut (utiliser les tokens mode sombre de DESIGN.md)
- Tous les liens s'ouvrent dans un nouvel onglet
- Aucune bibliothèque JS externe
- Tout le CSS dans un bloc
<style> - HTML5 sémantique (
<header>,<nav>,<main>,<section>,<footer>)
Résultat
Fichier unique : index.html (autonome)
Auto-vérification
- Le titre du héros est le nom, pas "Bienvenue"
- Au moins 4 projets affichés
- Les liens sociaux utilisent des icônes SVG (pas d'emoji)
- Mobile : grille à une seule colonne
- Le formulaire de contact n'a pas d'attribut
actioncassé