Ce site existait dans ma tête depuis deux ans.

Le concept était clair : une surface qui semble plate, presque austère, et qui révèle une profondeur en trois dimensions dès qu’on interagit. Des formes simples, un cercle, un carré, des proportions au nombre d’or. Le calme comme état normal, le mouvement comme récompense.

L’idée ne manquait pas. Le temps, si.

Le problème n’a jamais été l’idée

Je fais du motion depuis longtemps. Assez longtemps pour avoir animé avec TweenMax sous Flash, il y a vingt ans : l’ancêtre de GSAP, avant que GSAP porte ce nom. Le mouvement, les courbes, le timing, c’est un terrain que je connais.

Mais une chose n’a pas changé en vingt ans : la 3D sur le web, c’est chronophage. Three.js est puissant et ingrat. Entre l’idée d’une scène et sa version qui tourne à soixante images par seconde sur un téléphone, il y a des jours de travail. Des semaines si on compte les allers-retours, les fuites de mémoire, les histoires de synchronisation entre le défilement et le rendu.

Quand on est freelance, ce temps-là, on ne l’a pas. Il part chez les clients. Le projet perso attend son tour, et son tour ne vient jamais. Deux ans que le concept dormait dans un coin, complet mais infaisable dans le budget-temps d’un indépendant.

Puis les moyens de production ont changé

Pas l’idée. Les moyens. C’est une distinction que je trouve importante : l’IA n’a rien inventé à ma place. Le concept était là depuis deux ans, entier. Ce qui a changé, c’est que le coût de production a chuté au point de rendre faisable ce qui ne l’était pas.

Voici comment ça s’est passé, étape par étape.

01 · Poser le discours avant de dessiner

Refaire un portfolio, c’est d’abord refaire son positionnement. Mon ancien site disait « je fais des sites ». Le métier avait changé sous mes pieds sans que la phrase suive.

J’ai passé la première phase entièrement en texte. Pas de maquette, pas un pixel : juste formuler ce que je fais réellement aujourd’hui, maintenant que l’IA a pris l’exécution répétitive et que mon travail s’est déplacé vers la décision.

Le résultat tient en trois verbes : imaginer, décider, orchestrer. L’IA exécute.

Cette étape n’a rien coûté en temps de production, mais elle a tout conditionné. Un site dont le discours est flou reste flou, quelle que soit la qualité du code.

02 · Storyboarder le mouvement, pas les écrans

Mon concept est temporel. Le fond bouge, se révèle, revient au calme. Une maquette figée ne peut pas décrire ça : elle montre un instant, pas une séquence.

J’ai donc travaillé en storyboards plutôt qu’en maquettes. Chaque interaction découpée en quatre images : l’état de repos, le déclencheur, la révélation, le retour. En basse fidélité totale : des boîtes grises, aucune couleur.

C’est là que Claude Design est entré en jeu, pour produire ces séquences vite et en tester plusieurs. Trois structures de page d’accueil, deux de liste de projets. J’en ai gardé une. Le reste est parti à la corbeille sans regret, parce qu’une boîte grise, on ne s’y attache pas.

Vingt ans plus tôt, ce travail d’exploration aurait pris des jours. Là, quelques heures.

03 · Répondre à la seule question qui comptait

Tout le concept reposait sur un pari technique : faire cohabiter des blocs HTML lisibles et une scène 3D en fond, synchronisés, sans tuer les performances ni l’accessibilité.

Si ce pari ne tenait pas, rien ne servait d’aller plus loin.

Alors avant de dessiner quoi que ce soit, j’ai fait construire un prototype minimal. Un canvas WebGL en fond, quelques blocs par-dessus, chaque bloc doublé d’une forme dans la scène, le tout synchronisé au défilement. Moche, nu, sans intérêt visuel. Juste une réponse : est-ce que ça tient.

Ça tenait. Et c’est exactement le genre de test que je repoussais depuis deux ans parce qu’il représentait, seul, plusieurs jours de mise en place. Là, le prototype a été debout en une fraction de ce temps. Le déblocage, littéralement, s’est joué là.

04 · Itérer depuis le terminal

Le prototype validé, il fallait le transformer en vrai site. Cette phase s’est faite en itérations rapides, dans le terminal, avec l’IA en pilote de l’exécution.

C’est la phase où l’assistance est la plus spectaculaire : beaucoup de code, des structures répétitives, des ajustements en boucle. Et c’est aussi la plus traîtresse. Le modèle produit du code qui marche, mais qui reproduit ce qu’il a le plus vu : le responsive d’il y a dix ans. Des breakpoints partout, des pixels figés. Chaque passe demandait de corriger le cap.

C’est là que vingt ans de métier servent. Non pas à écrire le code, mais à voir immédiatement quand il part dans la mauvaise direction.

05 · Reconstruire proprement en Astro et EVA CSS

Un prototype n’est pas un site. Une fois le concept prouvé, j’ai tout repris sous Astro : génération statique, zéro JavaScript superflu, collections de contenu typées pour les projets et les notes. La 3D et les animations chargées à la demande, jamais imposées.

Toute la mise en forme s’appuie sur EVA CSS, mon design system. Ce n’est pas de la fierté mal placée, c’est le bon outil pour ce cas précis. Un système contraint (échelles fluides, tokens en OKLCH) produit des sorties prévisibles. Et quand l’IA génère un composant en s’appuyant sur un vocabulaire fermé, elle se trompe beaucoup moins que sur du CSS libre.

99% de breakpoints en moins. L’échelle respire entre deux bornes au lieu de sauter par paliers.

Le design system, que je peaufine depuis des années, a trouvé là son meilleur allié : il rend fiable la production assistée.

06 · Un back-office sans serveur

Un portfolio vit, il se met à jour. Je voulais pouvoir écrire une note ou ajouter un projet sans ouvrir de code, et pouvoir reproduire ce dispositif chez mes clients.

J’ai retenu Sveltia CMS. Léger, pas de base de données, pas de serveur. L’interface écrit directement dans le dépôt, le commit relance la construction, le site est à jour en une minute. Toute la configuration tient dans un fichier.

07 · Déployer et oublier

Netlify. Dépôt connecté, reconstruction automatique. Cette partie ne doit jamais devenir un sujet, et elle ne l’a pas été.

Ce que je retiens

Le concept de ce site n’a pas bougé en deux ans. Ni les compétences : je faisais déjà du motion, du CSS, de la direction artistique. Le nombre d’or, je l’utilisais déjà dans un framework client il y a des années.

Ce qui a changé, c’est le coût de production. Ce qui demandait des semaines d’exécution ingrate en demande désormais une fraction. Et ce déplacement change une chose de fond dans le métier : la valeur ne se loge plus dans la capacité à produire, mais dans la capacité à décider quoi produire, et à juger si c’est bon.

Les idées que j’avais depuis deux ans étaient les mêmes. J’ai simplement enfin pu les sortir du tiroir.

Reste une évidence qu’on oublie vite : savoir juger en dix secondes si une scène est juste, si un rythme d’animation tient, si une intégration est propre, ça ne s’improvise pas. Ça vient de vingt ans à l’avoir fait à la main. L’outil qui remplace l’exécution rend l’expérience de l’exécution plus précieuse, pas moins.

Le tiroir est vide, maintenant. Il était temps.

Ce site, vous y êtes. EVA CSS, lui, est open source : eva-css.xyz.