Mon workflow agentique pour construire ce portfolio

À l’heure du vibe coding, construire un portfolio devient une commodité. Je vous explique ici mon workflow de développement pour construire ce site, en mettant en lumière quelques outillages que j’apprécie particulièrement.

Le choix du framework : Astro

Par le passé, j’ai pu expérimenter un certain nombre de générateurs de sites statiques, dont Hugo (s'ouvre dans un nouvel onglet) et Gatsby (s'ouvre dans un nouvel onglet), avec des succès variés. Hugo est rapidement limité pour créer des designs évolués, Gatsby semble en fin de vie depuis son rachat par Netlify en 2023 …

Désormais, mon choix se tourne par défaut vers Astro (s'ouvre dans un nouvel onglet), que l’on ne présente plus. Je l’ai déjà mis en place avec succès sur quelques sites grand public dans mes expériences passées, avec des atouts indéniables :

• Zéro JavaScript par défaut : le HTML est pré-rendu, le JS n’est chargé que là où c’est strictement nécessaire, ce qui assure une performance optimale.
• Content Collections : gestion du contenu en Markdown avec validation de schéma via Zod.
• DX agréable : routing basé sur les fichiers, intégration Tailwind sans friction, live reload performant.
• Extensibilité : intégration fine avec des bibliothèques plus riches comme React ou Vue pour des cas d’usage plus avancés, catalogue de plugins relativement riche, etc.
• Static first : un déploiement facile à mettre en place, une surface d’attaque réduite au maximum.

L’environnement de travail : le terminal !

Je travaille sur un MacBook Pro avec une utilisation intensive et quasi exclusive du terminal depuis de nombreuses années maintenant.

Assez naturellement, Neovim (s'ouvre dans un nouvel onglet) est progressivement devenu mon éditeur principal, en remplacement de VSCode et IntelliJ. Même si la courbe d’apprentissage est assez rude, c’est un investissement que je ne regrette en rien aujourd’hui. Plus précisément, une bonne maîtrise des VIM motions (s'ouvre dans un nouvel onglet) offre un gain de productivité significatif. L’utilisation exclusive du clavier permet également de limiter les sources de friction dans mon workflow, ce qui limite la fatigue.

Certains disposent d’une configuration Neovim très avancée ; je préfère garder une approche assez minimaliste. Les curieux pourront le vérifier en consultant mes dotfiles (s'ouvre dans un nouvel onglet). Plutôt que de complexifier ma configuration Neovim, je préfère m’appuyer sur Tmux (s'ouvre dans un nouvel onglet) pour gérer plusieurs fenêtres dans une même session : serveur en mode développement, éditeur de texte, terminal libre pour les commandes ponctuelles, fenêtre dédiée pour Claude Code, etc. La navigation au clavier entre les panneaux et les fenêtres est particulièrement rapide et agréable, une fois la gymnastique mentale bien assimilée.

Tmuxinator (s'ouvre dans un nouvel onglet) complète le tout en me permettant de définir mes sessions de travail dans un fichier de configuration YAML. L’outil me permet de switcher rapidement entre mes différentes sessions de travail et de retrouver une configuration adaptée pour chacun des projets. Voici un exemple minimaliste ci-dessous adapté à mes besoins pour la construction de ce portfolio, avec une session qui ouvre quatre fenêtres :

• Neovim ouvert sur le répertoire du portfolio
• une session Claude Code
• le serveur Astro en mode développement
• Lazygit pour le suivi du code source

name: portfolio
root: ~/git/github/smonfort/portfolio/

windows:
  - neovim: vi
  - claude: claude
  - term: pnpm run dev
  - lazygit: lazygit

Un popup me permet de switcher très rapidement entre mes différentes sessions Tmux, à l’aide du fuzzy finder fzf (s'ouvre dans un nouvel onglet).

Le suivi du code source : Lazygit

Pendant longtemps, j’ai utilisé Git exclusivement en ligne de commande. Puis j’ai découvert Lazygit (s'ouvre dans un nouvel onglet), et je n’en suis jamais revenu.

Me sentant à l’aise dans des interfaces de type TUI, Lazygit me permet beaucoup plus facilement d’avoir une bonne hygiène sur mon historique Git. Bon nombre de commandes avancées sont rendues très accessibles, à condition d’avoir une bonne maîtrise des fondamentaux de Git. Je garde donc en permanence une fenêtre ouverte avec Lazygit pour contrôler finement mes stagings, commits et pushes.

La construction de l’interface graphique : Claude Code

N’ayant que des talents limités de designer, Claude Code m’a accompagné dans la construction des différentes pages. De manière progressive, à l’aide d’une série de prompts relativement simples et de demandes de corrections ciblées, je suis parvenu à un rendu visuel qui me convenait tout à fait. Par exemple, ci-dessous, j’indique vouloir une image de mise en avant pour chacun des articles. Rien de plus simple, Claude s’en charge pour moi.

Pour s’assurer que Claude prenne bien en compte les dernières versions des API Astro, je le configure avec le serveur MCP (s'ouvre dans un nouvel onglet) fourni par Astro.

J’utilise aussi les skills suivants pour vérifier la qualité des développements :

• Seo-audit (s'ouvre dans un nouvel onglet) pour réaliser un audit SEO flash du site déployé pour m’assurer que l’ensemble des bonnes pratiques est respecté.
• Web-accessibility (s'ouvre dans un nouvel onglet) pour contrôler l’accessibilité numérique
• Core-web-vitals (s'ouvre dans un nouvel onglet) pour l’analyse des performances du site avec Lighthouse

Un hook se charge également de vérifier que la transpilation Typescript ne génère pas d’erreur.

Le contenu éditorial : Markdown dans Neovim

Chaque article est un fichier Markdown stocké dans le repository Git. Une légère configuration Neovim permet d’avoir une coloration syntaxique adaptée à mes besoins. En complément, le plugin zen-mode (s'ouvre dans un nouvel onglet) permet d’avoir une interface épurée pour être pleinement concentré sur le contenu, sans distraction.

J’ai aussi ajouté des skills custom (s'ouvre dans un nouvel onglet) Claude pour :

• vérifier l’orthographe et la grammaire pour un article donné
• garantir que les versions anglaise et française des articles sont bien synchronisées

Le déploiement : Vercel

Le build se fait avec un simple pnpm build, qui génère un site statique dans dist/. Le déploiement est ensuite géré automatiquement à chaque push sur la branche principale avec Vercel (s'ouvre dans un nouvel onglet).

Et voilà !