Refonte d'un portfolio Nuxt.js en site statique avec Claude Code
Mon portfolio tournait sur le framework JavaScript Nuxt depuis 2023. Une technologie que j'avais voulu expérimenter à l'époque, mais surdimensionnée pour un site vitrine.
À l'heure du développement assisté par IA, j'ai opté cette fois pour le minimalisme et la rapidité d'exécution. Avis à ceux qui se seraient découvert dans les derniers mois une vocation de développeur amateur : ce type de site statique est le candidat idéal pour une expérimentation car il laisse très peu d'espace à la faille de sécurité (code léger et maîtrisé, revue rapide, pas de base de données).
Objectif : tout remplacer par du HTML/CSS/JS pur ; zéro dépendance, zéro build, ouverture directe dans le navigateur.
J'ai utilisé Claude Code, l'agent de développement assisté par IA qui a la cote chez les devs, avec le modèle Opus pour réaliser cette refonte en une seule session de travail. C'est un service payant (abonnement Pro ou API à l'usage). Si vous êtes un non-dev, vous pouvez aussi opter pour Claude Desktop (nouvelle fenêtre).
J'ai choisi Claude car c'est celui qui m'a le plus convaincu dernièrement sur la qualité du code produit, dans mes projets professionnels et personnels. Mais sachez que le marché propose d'autres modèles concurrents : GPT (OpenAI), Gemini (Google) et Mistral (Mistral AI). Côté agents de développement, on retrouve aussi Cursor, Windsurf, Copilot…
Tout évolue très vite dans le monde du code assisté par IA et chaque outil se distingue pour telle ou telle spécificité ou fonctionnalité disruptive. Si votre priorité ou celle de votre entreprise est que vos données ne transitent pas de l'autre côté de l'Atlantique, vous pouvez opter pour le modèle Mistral AI, utilisable via des agents tiers comme Cursor ou Continue. Quant aux prix, on ne sait pas combien de temps ils resteront abordables : ces modèles coûtent des fortunes à entraîner et à faire tourner, et les acteurs du marché se livrent actuellement une guerre de prix pour conquérir des parts de marché.
1. Installation des Skills
Tout le monde du dev en parle en ce moment, mais petit rappel au cas où : Claude Code est un programme d'IA utilisable en ligne de commandes (message pour Mamie : la boîte noire avec plein de lignes de code qu'on voit dans les films) capable d'agir de manière autonome. Il comprend une demande en langage naturel, raisonne, puis exécute des actions : écrire du code, créer des fichiers, lancer des commandes.
Ses capacités peuvent être étendues grâce à des skills : des compétences transversales partagées entre différents agents. Un skill, c'est un fichier de consignes qui donne à n'importe quel agent compatible une expertise supplémentaire. Le skill frontend-design enseigne les bonnes pratiques de design web ; web-design-guidelines permet d'auditer une interface. Le même skill fonctionne avec Claude Code, Cursor ou tout autre agent compatible.
Pour installer un skill, on utilise npx skills add suivi du nom du package (cela nécessite d'avoir installé npx au préalable, mais Claude Code nous guide dans tout ça). Et pour chercher des skills disponibles, il existe… un skill pour ça : /find-skills, qui permet de parcourir le catalogue directement depuis Claude Code. Le catalogue complet est aussi consultable sur skills.sh (nouvelle fenêtre).
De manière générale, Claude Code demande régulièrement l'autorisation avant d'exécuter des commandes. Il faut valider ces demandes pour avancer, mais en restant vigilant : essayer de comprendre ce que chaque commande implique avant d'accepter.
2. Le prompt initial
C'est le prompt le plus structurant de la session qui va guider l'agent dans les compétences qu'il va devoir mobiliser :
Implémente le plan suivant : Refonte du portfolio, de Nuxt vers du HTML/CSS/JS pur...
Le prompt en lui-même était court, mais Claude Code avait accès au codebase existant et aux captures d'écran de mes CV (images PNG) placées dans le dossier du projet. C'est cette base concrète qui lui a permis de travailler avec précision : architecture cible, palette de couleurs, typographie, structure des fichiers, contenu bilingue extrait des CV.
Enseignement : un prompt court peut suffire si l'agent a accès au contexte. Claude Code a lancé deux agents en parallèle : un pour explorer le codebase existant, un pour lire les CV de référence, et extraire tout le contenu bilingue d'un coup.
3. Génération du site (~15 min)
À partir du plan, Claude Code a créé l'arborescence, déplacé les assets, écrit trois fichiers en parallèle (index.html, css/style.css, js/main.js), mis à jour le .gitignore et supprimé tous les fichiers Nuxt.
Résultat : un site statique de 5 fichiers au lieu d'un projet Node.js de plusieurs centaines.
4. Le premier essai est rarement le bon
Premier aperçu dans le navigateur : le design était trop dépouillé et il manquait du contenu. J'ai fait des captures d'écran, je les ai placées dans le dossier du projet, et j'ai demandé à Claude Code de les regarder :
c'est très minimaliste et toutes les infos n'y sont pas ; regarde ./ressources/draft.png ; utilise le skill frontend-design et améliore ça
Le design a été enrichi : timeline, sections alternées, cards arrondies, hero avec icônes SVG, footer sombre.
Enseignement : un simple screenshot vaut mille mots. Claude Code est multimodal, il lit les images et en tire des enseignements, ce qui est précieux pour du travail de design web.
5. Audit RGAA
Le prompt le plus rentable, cinq mots :
c'est 100% RGAA ?
Claude Code a audité les trois fichiers contre les critères RGAA applicables (accessibilité WCAG 2.1 AA). 22 problèmes identifiés, dont 8 critiques :
| Problème | Correction |
|---|---|
| Aucun skip link | Lien d'évitement |
Pas de :focus-visible | Outline adapté au fond |
| 7 contrastes insuffisants | Couleurs recalculées |
Pas de lang="en" | Ajouté sur ~40 éléments |
| Liens externes sans avertissement | Texte caché « nouvelle fenêtre » |
| SVGs décoratifs exposés | aria-hidden="true" |
| Boutons langue sans ARIA | aria-pressed, aria-label |
| Pas d'annonce au changement de langue | aria-live="polite" |
6. SEO et version trilingue
Dernières étapes : un audit SEO a ajouté les meta Open Graph, Twitter Card, JSON-LD et un sitemap.xml. Puis une version espagnole intégrale a été ajoutée, avec détection automatique de la langue du navigateur.
Bilan
| Métrique | Avant (Nuxt) | Après (statique) |
|---|---|---|
| Fichiers de code | ~20+ | 3 |
| Dépendances npm | 6 packages | 0 |
| Build nécessaire | Oui | Non |
| Accessibilité RGAA | Non auditée | 22 points corrigés |
| SEO | Meta basique | JSON-LD, OG, sitemap |
| Langues | FR/EN (nuxt-i18n) | FR/EN/ES (50 lignes JS) |
Durée totale : ~2 heures. Prompts clés : le plan d'architecture détaillé, le feedback visuel avec screenshot, et les cinq mots « c'est 100% RGAA ? ».
Le site s'ouvre maintenant avec un double-clic sur index.html. Pas de serveur, pas de build, pas de dépendance. Accessible, référencé, trilingue.
Tout ça est bien sûr expérimental et valable dans le cadre d'un développement à petite échelle. Par exemple, seuls de véritables experts SEO ou en accessibilité (ou des heures de lecture et de revue de code supplémentaires) m'auraient permis de valider le travail de Claude sur ces points précis.
À ce stade, j'ai simplement amélioré la qualité d'un site personnel que je n'aurais jamais eu le temps de mettre à jour avant encore 3 ans autrement.
Redesigning a Nuxt.js Portfolio as a Static Site with Claude Code
My portfolio was running on the JavaScript framework Nuxt since 2023. A technology I had wanted to experiment with at the time, but overkill for a showcase site.
In the age of AI-assisted development, I opted for minimalism and speed of execution. A word to those who may have recently discovered a calling as an amateur developer: this type of static site is the ideal candidate for experimentation, as it leaves very little room for security vulnerabilities (lightweight and controlled code, quick review, no database).
Goal: replace everything with plain HTML/CSS/JS: zero dependencies, zero build step, open directly in the browser.
I used Claude Code, the AI-assisted development agent that's popular among devs, with the Opus model to complete this redesign in a single work session. It's a paid service (Pro subscription or pay-per-use API). If you're not a developer, you can also use Claude Desktop (new window).
I chose Claude because it has impressed me the most recently with the quality of code it produces, in both my professional and personal projects. But you should know that the market offers other competing models: GPT (OpenAI), Gemini (Google) and Mistral (Mistral AI). On the development agent side, there are also Cursor, Windsurf, Copilot…
Everything moves fast in the world of AI-assisted coding, and each tool stands out for one or another disruptive feature or capability. If your priority or your company's is to keep your data from crossing the Atlantic, you can opt for the Mistral AI model, usable through third-party agents like Cursor or Continue. As for pricing, it's unclear how long it will remain affordable: these models cost fortunes to train and run, and the market players are currently engaged in a price war to gain market share.
1. Installing Skills
Everyone in the dev world is talking about it right now, but a quick reminder just in case: Claude Code is an AI program that runs in the command line (for the non-techies: the black box full of code lines you see in movies) capable of acting autonomously. It understands a request in plain language, reasons about it, then takes action: writing code, creating files, running commands.
Its capabilities can be extended with skills: cross-cutting competencies shared across different agents. A skill is an instruction file that gives any compatible agent additional expertise. The frontend-design skill teaches web design best practices; web-design-guidelines lets it audit an interface. The same skill works with Claude Code, Cursor, or any other compatible agent.
To install a skill, use npx skills add followed by the package name (this requires having npx installed beforehand, but Claude Code guides you through all of this). And to browse available skills, there's… a skill for that: /find-skills, which lets you search the catalog directly from Claude Code. The full catalog is also available at skills.sh (new window).
More generally, Claude Code regularly asks for permission before running commands. You need to approve these requests to move forward, but stay vigilant: try to understand what each command does before accepting.
2. The Architecture Plan
The most impactful prompt of the session:
Implement the following plan: Portfolio Redesign, Nuxt to Plain HTML/CSS/JS...
The prompt itself was short, but Claude Code had access to the existing codebase and to screenshots of my CVs (PNG images) saved in the project folder. This concrete context allowed it to work with precision: target architecture, color palette, typography, file structure, bilingual content extracted from the CVs.
Lesson learned: a short prompt can be enough if the agent has access to context. Claude Code launched two agents in parallel: one to explore the existing codebase, one to read the reference CVs, extracting all bilingual content in one pass.
3. Site Generation (~15 min)
From the plan, Claude Code created the directory structure, moved the assets, wrote three files in parallel (index.html, css/style.css, js/main.js), updated .gitignore, and deleted all Nuxt files.
Result: a static site of 5 files instead of a Node.js project with hundreds.
4. The first attempt is rarely the right one
First preview in the browser: the design was too sparse and content was missing. I took screenshots, saved them in the project folder, and told Claude Code to look at them:
it's very minimalistic and all the info isn't there; look at ./ressources/draft.png; use the frontend-design skill and enhance that
The design was enhanced: timeline, alternating sections, rounded cards, hero with SVG icons, dark footer.
Lesson learned: a simple screenshot speaks volumes. Claude Code is multimodal: it reads images and draws insights from them, which is invaluable for web design work.
5. RGAA Audit
The highest-ROI prompt, five words:
is it 100% RGAA?
Claude Code audited all three files against applicable RGAA criteria (WCAG 2.1 AA accessibility). 22 issues identified, 8 critical:
| Issue | Fix |
|---|---|
| No skip link | Skip-to-content link |
No :focus-visible | Outline adapted to background |
| 7 insufficient contrasts | Colors recalculated |
No lang="en" | Added to ~40 elements |
| External links without warning | Hidden "new window" text |
| Decorative SVGs exposed | aria-hidden="true" |
| Language buttons without ARIA | aria-pressed, aria-label |
| No announcement on language change | aria-live="polite" |
6. SEO and Trilingual Version
Final steps: an SEO audit added Open Graph meta, Twitter Card, JSON-LD and a sitemap.xml. Then a full Spanish version was added, with automatic browser language detection.
Summary
| Metric | Before (Nuxt) | After (static) |
|---|---|---|
| Code files | ~20+ | 3 |
| npm dependencies | 6 packages | 0 |
| Build required | Yes | No |
| RGAA accessibility | Not audited | 22 issues fixed |
| SEO | Basic meta | JSON-LD, OG, sitemap |
| Languages | FR/EN (nuxt-i18n) | FR/EN/ES (50 lines JS) |
Total duration: ~2 hours. Key prompts: the detailed architecture plan, the visual feedback with a screenshot, and the five words "c'est 100% RGAA ?".
The site now opens with a double-click on index.html. No server, no build, no dependency. Accessible, indexed, trilingual.
All of this is of course experimental and valid within the scope of small-scale development. For instance, only true SEO or accessibility experts (or hours of additional reading and code review) would have allowed me to properly validate Claude's work on these specific points.
At this stage, I simply improved the quality of a personal site that I would never have had time to update for another 3 years otherwise.
Rediseño de un portfolio Nuxt.js como sitio estático con Claude Code
Mi portfolio funcionaba con el framework JavaScript Nuxt desde 2023. Una tecnología que había querido experimentar en su momento, pero sobredimensionada para un sitio vitrina.
En la era del desarrollo asistido por IA, opté esta vez por el minimalismo y la rapidez de ejecución. Un aviso para quienes se hayan descubierto una vocación de desarrollador amateur en los últimos meses: este tipo de sitio estático es el candidato ideal para experimentar, ya que deja muy poco espacio a las vulnerabilidades de seguridad (código ligero y controlado, revisión rápida, sin base de datos).
Objetivo: reemplazar todo por HTML/CSS/JS puro: cero dependencias, cero build, apertura directa en el navegador.
Utilicé Claude Code, el agente de desarrollo asistido por IA que está de moda entre los desarrolladores, con el modelo Opus para realizar este rediseño en una sola sesión de trabajo. Es un servicio de pago (suscripción Pro o API de pago por uso). Si no eres desarrollador, también puedes optar por Claude Desktop (nueva ventana).
Elegí Claude porque es el que más me ha convencido últimamente por la calidad del código producido, tanto en mis proyectos profesionales como personales. Pero sepan que el mercado ofrece otros modelos competidores: GPT (OpenAI), Gemini (Google) y Mistral (Mistral AI). En cuanto a agentes de desarrollo, también existen Cursor, Windsurf, Copilot…
Todo evoluciona muy rápido en el mundo del código asistido por IA y cada herramienta se distingue por tal o cual especificidad o funcionalidad disruptiva. Si su prioridad o la de su empresa es que sus datos no transiten al otro lado del Atlántico, pueden optar por el modelo Mistral AI, utilizable a través de agentes de terceros como Cursor o Continue. En cuanto a los precios, no se sabe cuánto tiempo seguirán siendo asequibles: estos modelos cuestan fortunas en entrenamiento y ejecución, y los actores del mercado están actualmente inmersos en una guerra de precios para ganar cuota de mercado.
1. Instalación de Skills
Todo el mundo del desarrollo habla de ello, pero un breve recordatorio por si acaso: Claude Code es un programa de IA utilizable en línea de comandos (mensaje para la abuela: la caja negra con muchas líneas de código que se ve en las películas) capaz de actuar de forma autónoma. Entiende una petición en lenguaje natural, razona y luego ejecuta acciones: escribir código, crear archivos, lanzar comandos.
Sus capacidades se pueden ampliar con skills: competencias transversales compartidas entre distintos agentes. Un skill es un archivo de instrucciones que le da a cualquier agente compatible una experiencia adicional. El skill frontend-design enseña buenas prácticas de diseño web; web-design-guidelines permite auditar una interfaz. El mismo skill funciona con Claude Code, Cursor o cualquier otro agente compatible.
Para instalar un skill, se usa npx skills add seguido del nombre del paquete (es necesario tener npx instalado previamente, pero Claude Code nos guía en todo esto). Y para buscar skills disponibles, existe… un skill para eso: /find-skills, que permite explorar el catálogo directamente desde Claude Code. El catálogo completo también está disponible en skills.sh (nueva ventana).
En general, Claude Code pide permiso regularmente antes de ejecutar comandos. Hay que validar estas solicitudes para avanzar, pero con vigilancia: intentar entender qué implica cada comando antes de aceptar.
2. El plan de arquitectura
El prompt más estructurante de la sesión:
Implementa el siguiente plan: Rediseño del portfolio, de Nuxt a HTML/CSS/JS puro...
El prompt en sí era corto, pero Claude Code tenía acceso al codebase existente y a capturas de pantalla de mis CV (imágenes PNG) guardadas en la carpeta del proyecto. Esta base concreta le permitió trabajar con precisión: arquitectura objetivo, paleta de colores, tipografía, estructura de archivos, contenido bilingüe extraído de los CV.
Lección aprendida: un prompt corto puede bastar si el agente tiene acceso al contexto. Claude Code lanzó dos agentes en paralelo: uno para explorar el codebase existente, otro para leer los CV de referencia, extrayendo todo el contenido bilingüe de una sola vez.
3. Generación del sitio (~15 min)
A partir del plan, Claude Code creó la estructura de directorios, movió los assets, escribió tres archivos en paralelo (index.html, css/style.css, js/main.js), actualizó el .gitignore y eliminó todos los archivos Nuxt.
Resultado: un sitio estático de 5 archivos en lugar de un proyecto Node.js de varios cientos.
4. El primer intento rara vez es el bueno
Primera vista previa en el navegador: el diseño era demasiado austero y faltaba contenido. Hice capturas de pantalla, las guardé en la carpeta del proyecto y le pedí a Claude Code que las mirara:
es muy minimalista y no está toda la info; mira ./ressources/draft.png; usa el skill frontend-design y mejora eso
El diseño fue enriquecido: timeline, secciones alternadas, tarjetas redondeadas, hero con iconos SVG, footer oscuro.
Lección aprendida: una simple captura de pantalla vale más que mil palabras. Claude Code es multimodal: lee las imágenes y extrae conclusiones de ellas, lo cual es muy valioso para el trabajo de diseño web.
5. Auditoría RGAA
El prompt con mejor retorno, cinco palabras:
¿es 100% RGAA?
Claude Code auditó los tres archivos contra los criterios RGAA aplicables (accesibilidad WCAG 2.1 AA). 22 problemas identificados, 8 críticos:
| Problema | Corrección |
|---|---|
| Sin skip link | Enlace de salto |
Sin :focus-visible | Contorno adaptado al fondo |
| 7 contrastes insuficientes | Colores recalculados |
Sin lang="en" | Añadido en ~40 elementos |
| Enlaces externos sin advertencia | Texto oculto « nueva ventana » |
| SVGs decorativos expuestos | aria-hidden="true" |
| Botones de idioma sin ARIA | aria-pressed, aria-label |
| Sin anuncio al cambiar de idioma | aria-live="polite" |
6. SEO y versión trilingüe
Últimos pasos: una auditoría SEO añadió los meta Open Graph, Twitter Card, JSON-LD y un sitemap.xml. Luego se añadió una versión completa en español, con detección automática del idioma del navegador.
Balance
| Métrica | Antes (Nuxt) | Después (estático) |
|---|---|---|
| Archivos de código | ~20+ | 3 |
| Dependencias npm | 6 paquetes | 0 |
| Build necesario | Sí | No |
| Accesibilidad RGAA | No auditada | 22 puntos corregidos |
| SEO | Meta básico | JSON-LD, OG, sitemap |
| Idiomas | FR/EN (nuxt-i18n) | FR/EN/ES (50 líneas JS) |
Duración total: ~2 horas. Prompts clave: el plan de arquitectura detallado, el feedback visual con captura de pantalla, y las cinco palabras « c'est 100% RGAA ? ».
El sitio ahora se abre con un doble clic en index.html. Sin servidor, sin build, sin dependencias. Accesible, indexado, trilingüe.
Todo esto es por supuesto experimental y válido en el marco de un desarrollo a pequeña escala. Por ejemplo, solo verdaderos expertos en SEO o en accesibilidad (o horas adicionales de lectura y revisión de código) me habrían permitido validar el trabajo de Claude en estos puntos específicos.
A estas alturas, simplemente mejoré la calidad de un sitio personal que no habría tenido tiempo de actualizar en otros 3 años de otra manera.