Colophon

J'ai designé et codé ce site avec Claude Code d'Anthropic. Un site perso reste pour moi le projet le plus casse-gueule qui soit : page blanche totale, ego et syndrome de l'imposteur, et un gouffre entre l'idée et l'exécution qui m'avait fait caler la plupart des tentatives. Claude Code a réduit ce gouffre comme rien ne l'avait fait avant. Je suis resté sur mes décisions créatives au lieu de perdre du temps et de m'enliser dans l'implémentation.

J'arrivais avec mes propres partis pris : le concept, la palette, les typographies, la hiérarchie et l'expérience globale. Je les passais à Claude Code, et en retour il poussait certaines idées plus loin que je ne l'aurais fait seul, avec des solutions techniques que je n'aurais pas trouvées car ce n'est pas mon métier. Ça avait le goût des jours assis à côté d'un Dev qui donnait vie à mes idées et apportait les siennes.

J'ai parfois mis la main dans le code moi-même, mais faut bien avouer que je ne joue pas dans la même cour que Claude là-dessus. Je n'ai jamais ouvert Figma pour la mise en page : j'ai designé directement dans le navigateur. C'est le bon medium pour ce type de projet. Avec le recul, faire « l'image » d'un site avant de le construire m'a toujours paru un peu bancal, ça me liait les mains. Je ne crois pas que je reviendrai en arrière.

Le langage visuel du site est issu de pas mal d'endroits. Je suis un grand fan de l'univers Star Wars, et des planètes comme la géante gazeuse Endor dont la lune forestière abrite les Ewoks m'ont beaucoup inspiré. Crème, noir profond, orange du coucher de soleil sur la canopée.

Au-delà des couleurs, c'est une façon de penser l'expérience qui m'a guidé : l'Imagineering de Disney (voir mes articles Médium), où chaque parcours est une histoire avec son arc émotionnel, et où les détails invisibles sont précisément ceux qui créent la magie. J'ai essayé de l'appliquer ici avec des moments marquants dans chacune de mes expériences et des détails (comme ce Colophon) qui ne se dévoilent qu'à qui prend le temps de regarder.

Les courbes en arrière-plan viennent d'ailleurs. Avant le design, j'ai fait un doctorat, et j'ai toujours aimé les données climatiques qui nous informent sur la santé de la Terre. Les graphiques que l'on retrouve au fond du site rejouent ça avec des données publiques de la NOAA (National Oceanic and Atmospheric Administration), dont certaines archives remontent à 1850. On y retrouvera, en fonction des pages :

• Accueil : la hauteur de marée de Roscoff, qui monte et redescend en direct sur le relief sous-marin de l'île de Batz (relief ETOPO).
• Science & Consulting : l'AMO, les anomalies de températures de surface de l'Atlantique Nord sur des cycles longs.
• Sup3r8 : la NAO, ce qui décide de nos hivers européens (différence de pression atmosphérique entre les Açores et l'Islande).
• Ubigreen : l'AO, la force du vortex polaire et donc les vagues de froid.
• Pictarine : la PDO, les anomalies de températures de surface du Pacifique Nord sur des cycles longs, qui déterminent les sécheresses californiennes et les moussons asiatiques.
• Design Leadership : à nouveau la NAO, l'oscillation Nord-Atlantique.
• L'IA comme système : le MEI, l'oscillation El Niño / La Niña dans le Pacifique tropical.
• Lectures : le relief ETOPO du fond marin autour de La Réunion : l'île surgit de la fosse dans les lignes de crête.
• Colophon : à nouveau l'AO, celle sous tes yeux en ce moment.

Deux typographies, choisies pour leur rôle, leur lisibilité, et ce qu'elles disent.

En display, j'ai choisi Space Grotesk, dessinée par Florian Karsten en 2018 à partir du Space Mono de la fonderie Colophon. Géométrique, contemporaine, avec assez de caractère pour porter les titres de chapitre. C'est elle qui donne le ton. Petit clin d'œil que je savoure : sa parente Space Mono est née à la fonderie Colophon, qui porte le nom même de cette page.

En body, j'utilise Atkinson Hyperlegible, créée par le Braille Institute pour améliorer la lisibilité pour les lecteurs avec déficience visuelle. Un choix qui me tient, il fait écho au cadre neurodiversité que j'ai porté dans ma dernière expérience professionnelle.

Space Grotesk - Display (Yoda)

Atkinson Hyperlegible - Body (Maarva Andor)

Le site vise la conformité WCAG 2.1 Level AA, avec un audit sur la structure, la navigation clavier et la gestion du focus. Concrètement : landmarks sémantiques et hiérarchie de titres propre, skip link en tête de chaque page, focus visibles partout et piégé dans le menu puis restitué au burger, prefers-reduced-motion respecté sur toutes les animations, contrastes AAA sur le texte principal et alt text sur chaque image. La font body, Atkinson Hyperlegible, a d'ailleurs été créée pour étendre la lisibilité.

HTML, CSS et JavaScript. Pas de framework, pas de build.

• Polices : Google Fonts (Space Grotesk + Atkinson Hyperlegible).
• Backgrounds : un seul fichier seismic-bg.js qui génère le SVG depuis les datasets climatiques embarqués.
• Sticky header morph : animation scroll-driven custom, sans librairie (scroll-header.js).
• Animations d'entrée : CSS keyframes avec easing M3 emphasized, staggered par étape.
• Animations canvas : l'Étoile de la Mort filaire et le terminal des typographies, dessinés en canvas 2D.
• Zéro tracker : aucune analytics, rien à accepter.
• Hébergement : Netlify.