Style Portfolio

Style Portfolio

Le travail parle, l'interface disparaît. La navigation est un cadre, pas un sujet.

Quand l'utiliser

• Portfolios de designers, photographes, directeurs artistiques, développeurs créatifs, studios, agences, architectes.
• Évite-le sans visuels forts, ou pour un produit qui doit expliquer beaucoup de fonctionnalités.

Palette

• --bg : noir profond #0a0a0a ou blanc éclatant #ffffff, jamais entre les deux.
• --text : contraste maximum, #ffffff sur noir, #000000 sur blanc.
• --muted : la couleur de texte à 60 % d'opacité (environ 7:1), pour métadonnées et légendes.
• --accent : un seul accent chromatique, souvent la couleur du projet en cours, redéfini localement sur chaque section projet ([data-project] { --accent: ... }).
• États : liens soulignés au survol, focus outline: 2px solid currentColor offset 4px. Vérifie le contraste de chaque accent projet s'il porte du texte.

Typographie

• Display : une seule police sur tout le site. Neue Machina, PP Neue Montreal ou Suisse Int'l si licence, sinon Outfit Black ou Inter Tight (Google Fonts). Fallback system-ui, sans-serif.
• Body : Inter, sans neutre. Kicker : JetBrains Mono ou IBM Plex Mono.
• Display XL : clamp(3.5rem, 12vw, 14rem) (10 à 15vw en desktop), weight 800 à 900, letter-spacing -0.04em, line-height 0.9.
• Titre de projet : 48 à 64 px, letter-spacing -0.03em, line-height 1.
• H3 : 24 px, weight 600.
• Body : 17 à 19 px, line-height 1.5, max-width: 58ch.
• Kicker et métadonnées : mono 12 px uppercase, letter-spacing 0.2em.

Layout & grille

• Grille 12 colonnes, marges de 4 à 8 % (padding-inline: clamp(16px, 6vw, 96px)).
• Sections plein écran (min-height: 100vh), une par projet.
• Grille éditoriale cassée : image sur 8 colonnes, texte sur 4, en alternance gauche et droite.
• Respiration verticale forte : 8 à 12rem entre sections.
• Breakpoints 768 et 1280 px. Sur mobile, images pleine largeur, texte dessous, display à 16vw.

Composants signature

• Nav : logo texte à gauche, 3 liens à droite (Work, About, Contact) en mono 13 px, 64 px de haut, mix-blend-mode: difference. Cachée au scroll vers le bas, réapparaît au scroll vers le haut.
• Hero : nom ou manifeste en display XL sur une ou deux lignes, rien d'autre.
• Tuile projet : image ou vidéo plein cadre 16:9 ou 4:5, titre, année et rôle en mono dessous. Survol : image en scale 1.03 et curseur "Voir".
• Page étude de cas : cover plein écran, grille de métadonnées sur 4 colonnes (client, année, rôle, stack), sections alternées, projet suivant en plein écran à la fin.
• Curseur custom : point de 12 px qui grossit à 64 px sur les liens, mix-blend-mode: difference.
• Contact : adresse email en display géant, lien mailto: direct.

Motion

• Reveal au scroll : blur 8 px, fade et translateY de 24 px, 600 à 800 ms, cubic-bezier(0.22, 1, 0.36, 1), stagger de 60 à 120 ms.
• Media en autoplay, muted loop playsinline, sur les covers projet.
• Transitions entre pages de 400 à 600 ms (Framer Motion, events du router Next ou View Transitions API).
• Interdit : scroll-jacking, son en autoplay, intro de plus d'une seconde avant de voir le travail. Sous prefers-reduced-motion, pas de blur, vidéos en pause sur leur poster.

Tokens CSS

:root {
  --bg: #0a0a0a;
  --text: #ffffff;
  --muted: rgb(255 255 255 / 0.6);
  --accent: #ff4d00;
  --font-display: "Outfit", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --display-xl: clamp(3.5rem, 12vw, 14rem);
  --gutter-x: clamp(16px, 6vw, 96px);
  --section-gap: 10rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

Checklist avant livraison

• Une seule police display sur tout le site.
• Chaque projet a sa couleur signature via un override local de --accent.
• Images en AVIF ou WebP, vidéos compressées avec poster.
• Le premier projet est visible en moins de 2 secondes.
• Navigation au clavier possible malgré le curseur custom.

À éviter

• Cards avec ombre : les images se suffisent.
• Fond gris ou beige "pour adoucir" : noir ou blanc, point.
• Loader d'intro qui retient le travail en otage.

Prompts de démarrage

• "Crée mon portfolio de designer en style portfolio : display géant, un projet par écran, nav qui se cache au scroll."
• "Fais une page étude de cas avec cover plein écran, métadonnées en mono et projet suivant en bas."
• "Ajoute un curseur custom en mix-blend-mode: difference et des reveals au scroll staggerés."