Tous les skills

Style·SHOWCASE · BOLD

Style Portfolio

Typo massive, image-first, chrome minimal, scroll narratif. Pour les portfolios de créatifs, studios, agences.

Télécharger SKILL.md~/.claude/skills/style-portfolio/SKILL.md

Installation en 30 secondes

mkdir -p ~/.claude/skills/style-portfolio
curl -o ~/.claude/skills/style-portfolio/SKILL.md \
  https://xavierguiter.com/claude-skills/style-portfolio/SKILL.md
# relance Claude Code, le skill est prêt

Style Portfolio

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

Palette

BG: noir profond #0a0a0a ou blanc éclatant #ffffff - jamais entre les deux.
FG: contraste maximum (#ffffff sur noir, #000000 sur blanc).
Un seul accent chromatique (souvent la couleur du projet en cours).

Typographie

Display: XL (10-15vw), display bold ou black (Neue Machina, PP Neue Montreal, Suisse Int'l, Outfit Black), letter-spacing serré à -0.04em.
Body: sans neutre 17-19 px, line-height 1.5.
Kicker: mono ou uppercase small letter-spacing 0.2em.

Layout

Sections plein écran (100vh), une par projet.
Grid éditorial cassée : image 8-col, texte 4-col alternés.
Marges 4-8%, respiration verticale forte (8-12rem entre sections).
Navigation cachée après scroll, réapparaît au scroll-up.

Motion

Reveal au scroll (blur+fade+up), stagger 60-120ms entre éléments.
Curseur custom qui grossit sur les liens (mix-blend-mode: difference).
Media autoplay + loop sur les covers projet.
Transitions inter-pages avec Framer Motion ou Next router events.

Rules

Une seule police display sur tout le site.
Zéro card avec ombre - les images se suffisent.
Chaque projet a sa propre couleur signature, tokens override localement.

Skill suivant

Style Tech