Colophon
Comment ce site est fait
Voici comment ce site est construit : sa police, ses couleurs, ce que j'ai tracé à la main et sa technique.
Le principe
Sur l'accueil, la liste des projets et chaque dossier, six versions de la même page sont empilées : le résultat, puis ce que retiennent la stratégie, le design, le code, l'IA et la transmission. Le cadre découpe la version choisie. Vous pouvez la déployer sur toute la page, ou afficher les cinq métiers à la fois avec le prisme. Au téléphone, le cadre devient une bande fixe au milieu de l'écran.
Une police, sept voix
Le site utilise une police, Recursive, d'Arrow Type, sous licence libre (SIL Open Font License). C'est une police variable : je règle ses axes de chasse fixe (MONO), de décontraction (CASL), de graisse (wght), d'inclinaison (slnt) et de cursive (CRSV) pour donner une voix à chaque métier.
| Voix | Réglage | Usage |
|---|---|---|
| Thomas | MONO 0 · CASL 0 · wght 860 | Le nom, les titres, les chiffres. |
| Stratégie | MONO 0 · CASL 0 · wght 1000 | Les choix, en gras. |
| Design | MONO 0 · CASL 0 · wght 310 | Les mesures, en trait fin. |
| Code | MONO 1 · CASL 0 · wght 520 | La source, en chasse fixe. |
| IA | MONO 1 · CASL 1 · wght 640 | Ce que lit une machine. |
| Transmettre | MONO 0 · CASL 1 · wght 720 · slnt −9 · CRSV 1 | La leçon, en cursive penchée. |
| Pourquoi | MONO 0 · CASL 0,6 · wght 900 · slnt −4 | Le sixième regard : les cinq ensemble. |
La main
J'ai tracé à la main les coins du cadre et le nom en pied de page.
Papier et ardoise
Le jour, le site imite le papier et les feutres : les encres se superposent comme sur une feuille. La nuit, il imite l'ardoise et la craie : les couleurs s'additionnent. Chaque métier a sa couleur, et son nom est toujours écrit à côté, pour ne pas dépendre de la couleur.
- Encre
- Stratégie
- Design
- Code
- IA
- Transmettre
La technique
- Next.js 16 et React 19, en TypeScript strict ; toutes les pages sont générées à l'avance.
- Une boucle d'animation, à l'arrêt quand rien ne bouge. Le cadre découpe les calques en CSS, sans 3D et sans détourner le défilement.
- Une partie des regards Design et IA est calculée : les mesures sont prises sur la page affichée, les données structurées viennent de la page.
- Aucun cookie, aucune mesure d'audience, aucun pisteur.
Vos réglages
Vos réglages restent dans ce navigateur. Le mouvement suit le réglage de votre système : s'il demande moins de mouvement, le cadre se déploie sans animation et l'intro ne se joue pas.