Tu as trois heures devant toi et pas de portfolio en ligne. Pas de dev à payer, pas envie d'apprendre Framer, et tu veux que ça soit en ligne ce soir. Bonne nouvelle : avec Claude, un fichier index.html, Tailwind en CDN et un compte Vercel gratuit, c'est faisable. Pas en théorie, en pratique. Cet article te donne le prompt exact, la structure de fichiers, les cinq sections qui convertissent, et la procédure de déploiement.
On s'adresse à un freelance qui a deux ou trois études de cas à mettre en avant, pas à quelqu'un qui monte un média. Si tu veux voir où ce guide s'inscrit dans un parcours plus large, la méthode apprendre Claude côté opérationnel couvre les automatismes de prompting qu'on va utiliser ici sans les redémontrer. On reste focalisé : un site, en ligne, aujourd'hui.
Pourquoi un portfolio statique HTML plutôt que Framer ou Webflow
Framer et Webflow sont de très bons outils. Mais pour un freelance avec deux ou trois études de cas, ils ajoutent une couche d'abonnement et de verrouillage qui ne se justifie pas. Voilà la comparaison concrète sur quatre critères qui comptent quand tu es seul à décider :
| Critère | Framer | Webflow | HTML + Claude + Vercel |
|---|---|---|---|
| Coût mensuel | à partir de 10 € | à partir de 14 € | 0 € |
| Temps jusqu'en ligne | 4 à 8 h (prise en main) | 8 à 15 h (prise en main) | 2 à 4 h |
| Contrôle du code | limité (export payant) | limité (export payant) | total, c'est ton fichier |
| SEO technique | bon | bon | parfait (HTML brut, 100 Lighthouse par défaut) |
Le point qui tranche : avec Claude et un seul index.html, tu possèdes le fichier. Tu peux le dupliquer, le versionner, le migrer n'importe où en dix secondes. Le jour où tu veux un vrai CMS, tu reprendras le contenu et basta. Si tu veux lire la logique inverse (quand un no-code est le bon choix), le guide site web avec Claude détaille les cas où partir sur une stack plus riche est justifié.
Les 5 sections qui doivent figurer sur le portfolio d'un freelance
Un portfolio freelance qui convertit tient en cinq blocs. Pas quatre, pas sept. Chaque section répond à une question précise que ton prospect se pose dans l'ordre où il la pose.
1. Hero avec promesse claire. Pas « freelance passionné basé à Lyon ». Un hero utile dit pour qui, quel problème, quel résultat. Exemple : « J'aide les SaaS B2B early-stage à passer de 0 à 50 clients payants grâce à des funnels copywritings mesurables. » On sait tout de suite si on continue à lire.
2. Études de cas (2 à 3). Format : contexte client, problème, ce que tu as fait, résultat chiffré. Pas de storytelling de 400 mots. Trois paragraphes courts et un chiffre. Si tu n'as pas de chiffre, tu n'as pas une étude de cas, tu as une description de mission.
3. Méthode de travail en 3-4 étapes. Appel découverte, cadrage, exécution, livraison. Ça rassure sur le fait que tu as un process, pas sur le fait que tu es créatif.
4. Preuves sociales. Deux ou trois témoignages courts avec nom + fonction + entreprise. Logos clients en noir et blanc si tu en as. Pas de 5 étoiles génériques.
5. CTA de prise de contact. Un bouton, une action : réserver un appel, envoyer un email. Pas trois choix. Un formulaire minimal ou un lien Cal.com, c'est tout.
Le contre-exemple classique : la section « À propos » qui raconte ton parcours scolaire. Personne ne lit ça. Si tu tiens à l'inclure, mets-la en pied de page.
Le prompt de génération complet à donner à Claude
Voilà le prompt qui marche. Il est structuré en trois blocs : contexte métier, specs techniques, contraintes de rendu. L'ordre compte. Claude a besoin de savoir pour qui tu bosses avant de choisir une typo.
Tu es un développeur front-end senior. Génère un fichier index.html unique
pour mon portfolio freelance.
--- CONTEXTE MÉTIER ---
Qui je suis : [prénom, nom, 1 ligne de positionnement]
Mon offre : [service principal en 1 phrase]
Mes clients types : [persona en 1 phrase]
Mes 3 études de cas (titre + 1 phrase chacune) :
1. [...]
2. [...]
3. [...]
Mes 2 témoignages (nom, fonction, 1 phrase) :
1. [...]
2. [...]
--- SPECS TECHNIQUES ---
- HTML + CSS + JS vanilla, aucun framework
- Tailwind CSS via CDN (balise script dans le head)
- Une seule page : index.html
- Responsive mobile-first, breakpoints sm/md/lg
- Lazy-loading sur les images
- Balises meta OpenGraph et Twitter Card complètes
- Pas de dépendances npm, pas de build step
--- CONTRAINTES DE RENDU ---
- Palette : [2 couleurs max, ex. noir #0A0A0A et accent #FF6B35]
- Typographie : Inter via Google Fonts
- Ton : professionnel, direct, zéro superlatif
- Sections dans cet ordre : Hero, Études de cas, Méthode, Témoignages, CTA
- CTA final : bouton vers mailto:[email] et lien Cal.com
Sors uniquement le fichier index.html complet, prêt à déployer.Pourquoi forcer du vanilla plutôt que du React ? Parce que React implique un build step, Node, un bundler. Avec du HTML brut + Tailwind CDN, tu glisses le fichier sur Vercel et c'est en ligne. Zéro étape intermédiaire. Pour les choix de palette et de typo si tu bloques, définir sa charte graphique avec Claude donne un process rapide.
Itérer sur le design sans tout casser
Première erreur quand on reçoit le fichier : demander « peux-tu refaire tout en bleu ? ». Claude réécrit tout, change des choses que tu n'avais pas demandées, et tu perds 20 minutes à comparer deux versions. La bonne approche : lui donner uniquement la section à modifier.
Exemple pour changer la palette : « Voici la section hero actuelle (colle le bloc HTML). Remplace l'accent orange par du vert émeraude #10B981, en gardant tout le reste identique. Sors uniquement la section modifiée. »
Trois itérations fréquentes et leur formulation :
- Ajouter une étude de cas : « Voici une étude de cas existante (colle le bloc). Génère une étude équivalente pour ce nouveau projet : [brief en 3 lignes]. Même structure HTML, même classes Tailwind. »
- Retravailler le CTA : « Voici mon CTA actuel. Propose trois variantes avec des accroches différentes, même structure HTML. »
- Nettoyer la typo mobile : « Sur mobile (max-width 640px), les titres h2 sont trop grands. Donne-moi uniquement les classes Tailwind à ajuster. »
Pour une boucle d'édition plus fluide quand tu commences à faire beaucoup d'allers-retours, Claude Code permet de travailler directement sur le fichier local sans copier-coller à chaque fois. C'est le moment de basculer dessus quand tu dépasses cinq modifications dans la journée.
Déployer sur Vercel en 4 étapes
À partir d'ici, tout se joue en moins de dix minutes.
Étape 1. Crée un dossier sur ton disque, place le index.html dedans. Sur ton terminal :
cd mon-portfolio
git init
git add .
git commit -m "Initial commit"Étape 2. Crée un repo sur GitHub (nom au choix, public ou privé), puis pousse :
git remote add origin git@github.com:ton-user/mon-portfolio.git
git branch -M main
git push -u origin mainÉtape 3. Va sur vercel.com, connecte-toi avec GitHub, clique « Add New Project », sélectionne le repo. Vercel détecte un site statique, pas de config à toucher. Clique « Deploy ». 30 secondes plus tard, tu as une URL en .vercel.app.
Étape 4. Dans les settings du projet Vercel, section « Domains », ajoute ton nom de domaine (acheté chez OVH, Gandi ou autre). Vercel te donne deux enregistrements DNS à copier chez ton registrar. HTTPS s'active automatiquement sous une heure.
Si tu as besoin de redirections (ancienne URL vers nouvelle, slash final, etc.), tu ajoutes un fichier vercel.json à la racine avec les règles. Le guide Vercel détaillé couvre les cas limites : domaine apex vs sous-domaine, configuration des headers de sécurité, variables d'environnement si tu rajoutes plus tard un formulaire.
Maintenir et faire évoluer le portfolio
Le piège : tomber dans l'itération infinie et ne jamais mettre une nouvelle étude de cas en ligne. Le bon rythme est de deux ou trois mises à jour par an, quand une mission se termine proprement.
Workflow pour ajouter une étude de cas :
- Écris le contenu dans un Google Doc ou un fichier texte : contexte, problème, action, résultat. 150 mots max.
- Donne à Claude ton texte brut + une étude existante du site, demande de reformater en bloc HTML cohérent.
- Colle le bloc dans
index.html, commit sur GitHub. - Vercel redéploie automatiquement en 20 secondes.
Même workflow pour mettre à jour un témoignage ou retoucher un titre. Pas de panel admin à gérer, pas de mot de passe à retrouver, pas de mise à jour de plugin.
La limite : passé 10 à 15 études de cas, un fichier unique devient inconfortable à maintenir. C'est le signal pour passer à une vraie stack avec CMS (Ghost headless + Next.js, par exemple). Mais tu auras alors un vrai historique de missions, un trafic SEO qui commence à mesurer, et le temps de faire les choses proprement. En attendant, tu as un site en ligne qui tient la route et qui convertit. Pour pousser le même type d'approche sur le contenu long format (blog SEO), le pipeline éditorial Claude suit la même logique : simple, versionnable, déployable.
Tu as maintenant la méthode complète : cinq sections qui convertissent, un prompt structuré, du vanilla HTML qui se déploie sur Vercel en dix minutes, et un process d'itération qui ne casse rien. Reste à bloquer trois heures ce soir et à le faire. Si tu veux systématiser ce type de workflow (portfolio aujourd'hui, landing page la semaine prochaine, blog le mois d'après), Maîtriser Claude au quotidien couvre les cinq modules qui transforment ces exécutions ponctuelles en vrai réflexe de travail.