Atelier — Le CV interactif

Tu viens d'apprendre à parler à Claude. Tu as tes outils, tes réflexes, ton CLAUDE.md. Maintenant le chef de chantier te remet les plans et te dit : "À toi." Pas une démonstration — un vrai chantier. À la fin de cet atelier, tu auras construit quelque chose que tu peux envoyer à quelqu'un, mettre sur LinkedIn, ou garder pour toi. Un CV en HTML interactif — une vraie page web, avec ton nom, tes compétences, ton parcours. Fait avec tes mains. Enfin, avec ta tête.

Tu vas construire ton CV en HTML interactif avec Claude Code. Compte 45 à 60 minutes. À la fin, tu ouvres le fichier dans ton navigateur et tu vois ta page.

Le défi

↑ Haut

Tu construis ton CV professionnel en HTML, avec :

Ton nom, ta photo ou un avatar, ta ligne de présentation
Tes expériences professionnelles ou formations
Tes compétences (en badges ou en barres visuelles)
Une section "projets" ou "réalisations" si tu en as
Un design réel — pas du texte sur fond blanc

Le résultat doit être ouvrable dans un navigateur et assez pro pour que tu n'aies pas honte de l'envoyer.

Ce que tu ne choisis pas : le fait que ce soit en HTML, le fait de passer par Claude Code, le fait d'itérer au moins 3 fois sur le design. Temps estimé : 45-60 minutes

Les étapes

↑ Haut

Étape 1 — Préparer le terrain (5 min)

Crée un nouveau dossier pour cet atelier. Appelle-le cv-interactif. Ouvre-le dans Cursor.

Mets à jour ton CLAUDE.md avec tes vraies informations :

# CV interactif — Atelier Phase 1

## Qui je suis
Je m'appelle [ton prénom et nom].
[Ta ligne de présentation — ce que tu fais ou ce que tu cherches]

## Mon parcours
[2-3 lignes sur ton parcours pro ou ta formation]

## Mes compétences principales
[Liste tes compétences — même non-techniques]

## Projets ou réalisations
[Une ou deux choses dont tu es fier — même petites]

## Pour le CV
- Langue : français
- Ton : professionnel mais humain
- Design : moderne, pas classique

Ce que ça change

Claude va lire ce fichier avant de générer ton CV. Tu n'auras pas à tout lui réexpliquer à chaque itération.

Étape 2 — Le plan avant le marteau (5 min)

Lance Claude Code (claude dans le terminal). Active le plan mode.

Tape :

Je veux créer mon CV en HTML interactif. Lis mon CLAUDE.md et propose-moi une structure de CV adaptée à mon profil avant de commencer à coder. Je veux voir les sections que tu vas créer et le principe de design.

Claude va te proposer une structure. Lis-la. Modifie ce qui ne te correspond pas. Quand tu es d'accord, dis-lui de commencer.

Étape 3 — Premier coup de marteau (15 min)

Valide le plan, puis dis à Claude :

Génère le CV complet en HTML dans un fichier cv.html. Design moderne, pas minimaliste blanc — utilise des couleurs, des ombres, quelque chose qui en jette.

Laisse Claude travailler. Ne l'interromps pas pendant qu'il génère.

Quand il a terminé, ouvre le fichier :

Dans Cursor, double-clique sur cv.html dans le panneau gauche
Clic droit → Reveal in File Explorer (Windows) ou Reveal in Finder (Mac)
Double-clique sur le fichier pour l'ouvrir dans ton navigateur

Première impression ? C'est toi qui decides ce qui reste et ce qui change.

Étape 4 — Itérer jusqu'à ce que tu sois fier (20-30 min)

C'est là que le vrai travail commence. Trois cycles minimum. Voici des idées d'instructions à donner à Claude :

Sur le design :

Les couleurs sont trop fades. Utilise un fond sombre (#1a1a2e) avec un accent violet (#7c3aed). Les titres de section en blanc, le texte de base en gris clair.

Rends les compétences plus visuelles. Des badges arrondis avec une couleur par catégorie.

Ajoute une barre de navigation en haut avec les ancres vers chaque section. Sticky — elle reste visible quand on scroll.

Sur l'interactivité :

Quand on passe la souris sur une carte d'expérience, elle se soulève légèrement (animation CSS). Pas de JavaScript nécessaire.

Ajoute un bouton "Télécharger" en haut à droite (il peut juste déclencher l'impression — window.print()).

Les compétences arrivent en animation au scroll — elles apparaissent progressivement de la gauche.

Sur la structure :

Ajoute une section "Ce que je cherche" juste après la présentation. Court, une à deux phrases.

Réorganise : mets les compétences AVANT les expériences. C'est plus impactant pour mon profil.

Si Claude casse quelque chose

Tape /rewind pour annuler la dernière action. Si tu avais fait un commit entre-temps, tu peux aussi revenir à l'état du commit.

Pense à faire un commit entre les grandes étapes :

git add .
git commit -m "CV — version design initial"

git add .
git commit -m "CV — ajout interactivité et animations"

Étape 5 — Le test final (5 min)

Avant de considérer le CV terminé :

Ouvre-le dans ton navigateur
Scroll de haut en bas — tout est lisible ?
Passe ta souris sur les éléments — les animations fonctionnent ?
Rétrécis la fenêtre du navigateur — est-ce que ça reste propre sur petit écran ?

Si quelque chose te choque, demande à Claude de le corriger.

Vérifie ton travail

↑ Haut

Un fichier cv.html existe dans ton dossier cv-interactif
Tu l'ouvres dans le navigateur et tu vois une vraie page, pas du texte brut
Le CV contient ton vrai nom, ton vrai parcours, tes vraies compétences
Tu as fait au moins 3 itérations (pas juste le premier jet)
Il y a au moins un élément interactif (animation, navigation, hover)
Tu as fait au moins un commit Git pendant l'atelier

Tu viens de coder quelque chose. Avec tes mains. Ça compte.

Si ça ne marche pas

↑ Haut

Symptôme	Cause probable	Solution
Le fichier HTML s'ouvre dans Cursor au lieu du navigateur	Clic dans le mauvais endroit	Clic droit sur le fichier → Reveal in Explorer/Finder → double-clique depuis là
Le design est différent de ce que tu as demandé	Claude a mal interprété	Sois plus précis : "fond sombre #1a1a2e" plutôt que "fond sombre"
Claude modifie autre chose que ce que tu as demandé	Contexte trop chargé	/clear, puis ouvre le fichier avec @cv.html et reformule ta demande
Les animations ne fonctionnent pas	CSS mal généré	Demande à Claude : "Les animations ne fonctionnent pas. Relis @cv.html et corrige les CSS d'animation"
Le CV est trop basique malgré tes demandes	Instructions trop vagues	Donne des exemples concrets : "Je veux quelque chose comme une page de portfolio de designer, avec des blocs colorés et du mouvement"
Claude dit que c'est trop complexe à générer	Scope trop large d'un coup	Décompose : d'abord la structure, puis le design, puis les animations

Ce que tu viens d'apprendre

↑ Haut

CLAUDE.md comme source de vérité — Claude retrouve ton contexte même après un /clear parce que tu l'as documenté
Plan mode avant de coder — une structure validée évite les gros retours en arrière
L'itération est la compétence — le premier jet est un point de départ, pas le résultat
/rewind comme filet de sécurité — quand Claude casse quelque chose, tu reviens en arrière sans paniquer
Git pour les jalons — chaque étape importante mérite une photo de chantier

Compétence débloquée : tu sais utiliser Claude Code pour construire quelque chose de concret.

Et ensuite ?

↑ Haut

Tu as ton CV. Tu sais itérer, tu sais te reprendre quand ça déraille, tu sais garder Claude sur les rails. La Phase 1 est terminée.

Dans la Phase 2, tu vas appliquer la même logique — mais pour quelque chose de beaucoup plus ambitieux : ton projet personnel. Celui que tu veux vraiment construire.

-> Phase 2 : Planifier — Clarifier ta vision

Références

↑ Haut

[[ref:glossaire]] — HTML, CSS et termes techniques
[[ref:troubleshooting]] — Si rien de ce qui précède ne règle ton problème