Méthode · transparence
Comment j’ai construit ce site — avec l’IA, mais pas à sa place.
Pour chaque étape : l’outil utilisé, ce qu’il a proposé, et ce que j’ai vérifié, corrigé ou réécrit moi-même.
Le journal de bord, étape par étape
- 01
Lire et découper le brief
L’IA a proposéUne synthèse de l’offre en trois axes.
Ce que j’ai faitRelu l’offre moi-même, décidé l’angle — me présenter comme quelqu’un qui vient du backend plutôt que comme un développeur front, et assumer ce que je ne sais pas encore faire.
- 02
Concevoir
L’IA a proposéDes maquettes de pages et une structure de contenus.
Ce que j’ai faitRejeté une version entière parce qu’elle faisait trop IA. Refusé les soulignements qui se tracent à l’apparition, devenus un tic des sites générés. Demandé que la boucle du cycle DevOps passe en grand plutôt qu’en petit logo dans la navigation, puis décidé de la retirer : la page tenait sans elle.
- 03
Développer
Ce qui a coincéLa barre de progression restait pleine dès le haut de page alors que le code source était correct. C’est au build que le minifieur avait fusionné deux déclarations CSS en une forme que le navigateur rejette en silence, sans erreur dans la console. Le problème n’était visible qu’en lisant le style réellement appliqué dans le navigateur. Corrigé en écrivant les propriétés une par une.
La transition entre les pages a demandé de la ralentir dix fois pour voir trois défauts invisibles à vitesse normale : le nom qui se dédoublait, l’accroche aussi, et un glissement saccadé causé par une différence d’interligne entre les deux pages.
- 04
Vérifier
Ce que j’ai testéLighthouse, navigation au clavier, affichage mobile, liens.
Ce que ça a donnéUne capture « mobile » à 390 px montrait du texte coupé — en réalité Edge en mode headless impose une largeur minimale de 504 px et rogne l’image. Le défaut venait de l’outil de test, pas du site. En relisant les règles de marque des logos, j’ai constaté que trois d’entre eux (Docker, GitHub Actions, PostgreSQL) étaient affichés en gris, ce que leurs règles interdisent : je les ai tous retirés. Et le vert du drapeau sénégalais (#00853F), prévu comme couleur d’accent, atteint 4,45:1 sur le fond — sous le seuil de 4,5:1 exigé pour du texte. J’ai retenu un vert plus profond, #0A5C36, à 7,59:1.
- 05
Déployer
Ce qui a coincéAprès neuf commits poussés, le site en ligne montrait toujours l’ancienne version. Cloudflare surveillait la branche master alors que je poussais sur main. Rien dans les journaux ne le disait : il fallait aller lire le réglage « Branch control » dans la configuration du Worker.
git pushbuild Cloudflare Workersousmane-diop.ousmanesarrd.workers.dev
Ce que j’en retiens
Mon travail a surtout consisté à décider ce qu’on gardait, puis à contrôler ce que le navigateur affichait vraiment, pas ce que le code promettait. L’IA produit vite du code qui a l’air juste, et c’est justement ce qui oblige à vérifier.