VHBranding

Palette & identité visuelle.

Cinq thèmes, une identité. Chaque couleur est pensée pour le contraste WCAG AA en dark et light mode.

Thèmes

Lime

Défaut · Énergie

#c8ff00

Accent principal du portfolio. Dynamique, tech, lisible sur fond sombre.

Cyan

Frost · Clarté

#00e5ff

Évoque la précision et la clarté technique. Idéal pour les interfaces data.

Rose

Bold · Impact

#ff3c82

Vibrant et expressif. Apporte de la chaleur humaine au design technique.

Orange

Warm · Créatif

#ff8a00

Chaleureux et accessible. Équilibre entre professionnalisme et créativité.

Violet

Soft · Élégant

#a78bfa

Sophistiqué et apaisant. Pour les contextes premium et réflexifs.

Typographies

Titres, branding

Instrument Serif

var(--font-serif)

Corps de texte

DM Sans

var(--font-sans)

Aa Bb Cc

Code, labels

JetBrains Mono

var(--font-mono)

01 {}

Tokens

ink

#0a0a0b

ink-soft

#111114

elevated

#16161a

bone

#f0efe9

bone-muted

#a8a79f

bone-dim

#8a8980

VHBranding

Palette & identité visuelle.

Cinq thèmes, une identité. Chaque couleur est pensée pour le contraste WCAG AA en dark et light mode.

Thèmes

Lime

Défaut · Énergie

#c8ff00

Accent principal du portfolio. Dynamique, tech, lisible sur fond sombre.

Cyan

Frost · Clarté

#00e5ff

Évoque la précision et la clarté technique. Idéal pour les interfaces data.

Rose

Bold · Impact

#ff3c82

Vibrant et expressif. Apporte de la chaleur humaine au design technique.

Orange

Warm · Créatif

#ff8a00

Chaleureux et accessible. Équilibre entre professionnalisme et créativité.

Violet

Soft · Élégant

#a78bfa

Sophistiqué et apaisant. Pour les contextes premium et réflexifs.

Typographies

Titres, branding

Instrument Serif

var(--font-serif)

Corps de texte

DM Sans

var(--font-sans)

Aa Bb Cc

Code, labels

JetBrains Mono

var(--font-mono)

01 {}

Tokens

ink

#0a0a0b

ink-soft

#111114

elevated

#16161a

bone

#f0efe9

bone-muted

#a8a79f

bone-dim

#8a8980

Composants · Storybook

Les briques d'interaction phares du site, isolées et jouables. Chaque composant gère lui-même l'accessibilité et respecte prefers-reduced-motion.

MagneticButton

Bouton attiré par le curseur. Coefficient d’amplitude configurable.

TiltCard

Inclinaison 3D suivant le curseur, avec un spotlight d’accent.

3D Tilt

Survolez-moi.

Rotation 3D avec spotlight d’accent.

AnimatedText

Apparition mot par mot avec flou et stagger, via IntersectionObserver.

Design, code, émotion.

Counter

Compteur avec easing easeOutExpo, déclenché à la visibilité.

0+0%

Marquee

Bande défilante infinie, CSS pur, contenu dupliqué pour un loop invisible.

Next.js

React 19

Tailwind v4

MDX

TypeScript

A11y

ThemeToggle · AccentPicker

Contrôles du dock, synchronisés avec localStorage et CSS custom properties.

Theme

Accents