Méthode
Je conçois et je pilote, Claude Code écrit le code : chaque modification repasse par une boucle de vérification automatique.
Claude Code ne travaille pas à l’aveugle : grâce à Chrome DevTools MCP, il pilote un vrai navigateur Chrome sur mon ordinateur, dans une fenêtre que je vois aussi ; pour les séries de captures, il lance aussi Chrome sans fenêtre. Il ouvre ainsi chaque page, la capture en mobile et en desktop, lit la console et mesure la vitesse, puis corrige ce qu’il a constaté avant de me montrer le résultat.
Le site se vérifie ainsi lui-même pendant sa propre construction : cette page aussi est passée par la boucle.
01
Rendu mobile et desktop
02
Console sans erreur
03
Mouvement réduit et page sans JavaScript
04
Build, Lighthouse mobile et trace de performance
avant de clore une étape
retour au départ
Règle d’arrêt
Après 3 échecs sur un même point : arrêt et rapport, la décision me revient.
Objectifs et mesures
| Critère | Objectif | Mesuré |
|---|---|---|
| Notes Lighthouse, sur mobile | ||
| Performancenote de vitesse, sur 100 | ≥ 95 | […] À FOURNIR après la mise en ligne : mesure sur ludovic-boulay-portfolio.fr |
| Accessibilitéutilisable au clavier, lisible, compatible avec les lecteurs d’écran | = 100 | […] À FOURNIR après la mise en ligne : mesure sur ludovic-boulay-portfolio.fr |
| Bonnes pratiquessécurité et qualité technique de la page | = 100 | […] À FOURNIR après la mise en ligne : mesure sur ludovic-boulay-portfolio.fr |
| SEOpage correctement balisée : titre, description, liens | = 100 | […] À FOURNIR après la mise en ligne : mesure sur ludovic-boulay-portfolio.fr |
| Vitesse et stabilité | ||
| LCPtemps d’affichage du contenu principal | < 1,8 s | […] À FOURNIR après la mise en ligne : mesure sur ludovic-boulay-portfolio.fr |
| CLSstabilité : rien ne bouge pendant le chargement | < 0,05 | […] À FOURNIR après la mise en ligne : mesure sur ludovic-boulay-portfolio.fr |
| INPdélai de réaction à un clic ou à une touche | < 200 ms | […] À FOURNIR après la mise en ligne : mesure sur ludovic-boulay-portfolio.fr |
| Poids de l’accueil | ||
| JavaScriptcode à télécharger pour faire fonctionner la page, relief animé compris (compressé) | ≤ 120 Ko | […] À FOURNIR après la mise en ligne : mesure sur ludovic-boulay-portfolio.fr |
| Poids totaltout ce que le navigateur télécharge à la première visite, hors vidéo | ≤ 1 Mo | […] À FOURNIR après la mise en ligne : mesure sur ludovic-boulay-portfolio.fr |
| Relief animé de l’accueil (shader) | ||
| Chargementil attend que le contenu principal soit affiché | après le LCP | […] À FOURNIR après la mise en ligne : mesure sur ludovic-boulay-portfolio.fr |
| Hors écran ou onglet masquéil s’arrête quand on ne le voit pas | en pause | […] À FOURNIR après la mise en ligne : mesure sur ludovic-boulay-portfolio.fr |
| Sans WebGL ou en mouvement réduitune image fixe le remplace | image fixe (SVG) | […] À FOURNIR après la mise en ligne : mesure sur ludovic-boulay-portfolio.fr |
Mesures relevées sur ludovic-boulay-portfolio.fr après la mise en ligne : Lighthouse en émulation mobile, médiane de 5 passages, sans autre tâche lourde en parallèle. Date et version de l’outil : […] À FOURNIR après la mise en ligne : date du relevé et version de Lighthouse
INP : mesuré en laboratoire sur deux interactions (menu de l’accueil, curseur VY&CO), par une trace de performance en émulation mobile, et non sur de vrais visiteurs.
Les étapes
01
Fondations
couleurs, typographie, accueil sans animation
02
Études de cas
pages des projets et contenus
03
Mouvement
défilement, apparitions, transitions entre pages
04
Relief animé
le champ de lignes de niveau
05
Données structurées
métadonnées, plan du site, aperçus de partage
06
Audit final
vérification complète du site
Plan validé par moi avant chaque étape, version enregistrée dans Git après chaque étape validée.
Outils
Le site
- Astro — pages statiques, presque sans JavaScript
- TypeScript — repère les erreurs de code avant la mise en ligne
- Tailwind CSS — couleurs, typographie et espacements définis une seule fois
- MDX — études de cas écrites comme des textes, avec leurs schémas
- Fontsource — polices hébergées sur le site, sans service tiers
- GSAP — animations : titres révélés ligne par ligne, compteurs, cartes qui défilent
- Lenis — défilement fluide à la molette
- WebGL 2 — reliefs animés de l’accueil, dessinés par la carte graphique, sans bibliothèque
- Hostinger — hébergement
La fabrication
- Claude Code — écrit le code
- Chrome DevTools MCP — relie Claude Code à un vrai navigateur Chrome : captures, console, traces de performance
- Lighthouse — les quatre notes du tableau des objectifs
- satori — images de partage fabriquées au build, dans les polices du site
- Git — une version enregistrée après chaque étape validée
Ce que ça démontre
Piloter une IA comme un projet : des objectifs chiffrés, une vérification à chaque modification, une décision humaine à chaque étape.