01 — Manifesto
Ingénierie pédagogique et code. Le sens avant l’outil.
Je conçois des expériences d’apprentissage et je les construis. Les deux métiers se répondent : pas de pédagogie sans compréhension du système, pas d’interface sans intention.
Chaque pixel, chaque mot, chaque interaction est là pour une raison. Pas d’ornement gratuit. Pas de complexité pour impressionner.
Direct. Sans récit forcé. L’expertise se lit dans les choix, pas dans les histoires qu’on raconte.
02 — Palette
Huit jetons, une intention par usage.
La palette est volontairement restreinte. L’accent indigo porte l’action, les neutres zinc portent la lecture, l’electric nuance les gradients. Cliquez un swatch pour copier sa valeur.
03 — Typographie
Sora pour frapper. Inter pour lire.
Deux familles variables, deux rôles complémentaires. Sora structure l’impact ; Inter porte la lecture.
Sora · Display, headlines
Pierre Touzet
Regular 400 / Semibold 600 / Bold 700
font-display
Inter · Corps, UI
Je conçois des expériences d’apprentissage et je les construis. Les deux métiers se répondent.
Regular 400 / Medium 500
font-sans
Type scale fluide
Display
--text-display
Intention
.text-display
Heading
--text-heading
Une section, une idée.
.text-heading
Subheading
--text-subheading
Cadre le propos sans voler la vedette.
.text-subheading
Caption
--text-caption
MONO-LABEL — 11PX UPPERCASE
.text-caption
04 — Voix & ton
Trois règles, une posture.
Montrer le travail, sauter l’histoire.
01
Direct
Sujet + verbe + preuve. Pas d’enrobage.
02
Sans récit forcé
Pas de « je me suis réveillé un matin… », pas de cliffhanger, pas de vulnérabilité performative.
03
Expertise implicite
Je montre ce que je sais en faisant, pas en m’auto-proclamant expert.
✓ On écrit
- « On a livré X en 6 semaines. Voici la démo. »
- « La feature ne marchait pas. On a refait l’auth. »
- « Voici le code. Voici le résultat. Voici ce qui reste. »
- « Ce choix technique coûte X heures. Il vaut Y. »
✗ On n’écrit pas
- « C’était une aventure incroyable avec une équipe de héros… »
- « Face à l’adversité, j’ai appris à pivoter… »
- « Laissez-moi vous raconter l’histoire d’un développeur qui… »
- « Ce projet a changé ma vision du développement. »
05 — Motion & motifs
Le contenu arrive, il ne gesticule pas.
Trois principes, chacun incarné par la section elle-même.
01
Reveal au scroll
Apparition douce en 0.6s, easing cubic-bezier(0.22, 1, 0.36, 1). Neutralisé si prefers-reduced-motion.
animate-reveal / scroll-reveal
02
Glow au survol
Halo radial subtil qui suit le curseur. Feedback discret, jamais criard.
glow-hover
03
Grain en dark mode
Texture SVG statique à 3 % d’opacité, appliquée via body::before uniquement en dark.
body::before (dark)
Motifs live
Survolez pour voir →
TILE
glow-hover
grain