Je code depuis 2021, et cette semaine j’ai voulu essayer le vibe coding pour de bon. J’en avais envie depuis que Theo s’en sert pour construire des applis auxquelles il n’avait pas le temps, et que Peter Steinberger a commencé à enchaîner les projets et même fondé Open Claw.
Pour cette expérience, j’ai décidé de reconstruire mon portfolio en n’utilisant que l’IA, sans toucher au code. L’ancien site tournait sous Next.js avec Next-Intl pour l’internationalisation. Je voulais migrer entièrement vers Astro, car je n’utilisais aucune des fonctionnalités lourdes de Next.js.
Il faut préciser que tout mon contenu de profil était dans des fichiers .json par locale pour la traduction. Les outils utilisés : Cursor, Open Code et Claude Code.
Démarrer
J’ai créé une nouvelle branche, lancé la commande /init pour Open Code et Claude Code, et ajouté la skill frontend design de Claude au projet.
J’ai ouvert Claude Code, lancé la skill /frontend-design, et demandé à l’IA de reconstruire et redesigner le projet avec Astro et les traductions, en gardant un design professionnel et élégant (avec la pensée activée).
Quelques minutes plus tard, j’ai vérifié le site. Il fonctionnait, mais dans certaines sections l’alignement du texte était incorrect au lieu d’être centré comme les titres, et quelques sections manquaient alors qu’elles existaient dans les fichiers de traduction. J’ai créé cinq branches différentes et testé le même prompt avec de petites variantes pour comparer :
- « un style esthétique développeur »
- « attrayant pour les recruteurs et les opportunités business »
- « afficher d’abord mes compétences, puis mon expérience »
J’ai aussi essayé l’IA par défaut d’Open Code. Au global, Claude Code s’en est très bien sorti. En demandant un profil style développeur, il a produit une hero façon terminal avec un curseur clignotant. D’autres branches avaient une fenêtre style Mac affichant le contenu, ou mon profil en globe avec des emojis développeur (laptop, code) en orbite. Chaque run utilisait des couleurs principales différentes : bleu, vert, orange, rouge, or.
Corriger les problèmes et peaufiner
Les problèmes récurrents : traductions incomplètes et texte non centré dans certaines sections.
J’ai choisi la version qui me convenait le mieux, celle que vous voyez. Ensuite j’ai lancé un audit Lighthouse depuis DevTools. Les scores tournaient surtout dans le haut des 90, avec des 100 (ex. SEO). Les principaux points faibles concernaient l’accessibilité, à cause d’un contraste de couleurs insuffisant sur certains textes (couleur principale or sur fond blanc). J’ai signalé ces points à l’IA et les corrections ont été faites rapidement.
Ensuite, la partie sympa : vibe coder la section blog. Elle a été gérée en une fois avec une mise en page propre. J’ai demandé des fonctionnalités comme temps de lecture, tags et auteurs, en précisant : « …et demandez-moi avant d’en ajouter. » L’IA a proposé boutons de partage, articles liés, regroupement par catégorie ou série, etc. J’ai tout ajouté sauf le regroupement, que je n’ai pas besoin pour l’instant mais que je pourrai ajouter plus tard en une phrase.
Construire la section blog
Puis le test final : builder le projet. Le build a échoué avec deux erreurs (lecture d’un répertoire invalide et chemin introuvable). Cursor est venu à la rescousse et a aidé à les corriger.
Enfin, merge sur main et déploiement sur Cloudflare Pages, le tout en environ trois heures.
Je suis très content du résultat du portfolio, et j’ai le sentiment de ne faire que commencer avec l’IA.