Portfolio freelance créé avec Claude (HTML + Vercel)

Un portfolio freelance, c'est une vitrine de trois pages qui doit charger en moins d'une seconde, refléter ton style, et ne pas te coûter 15 € par mois pour rien. Avec Claude, tu peux le générer en HTML/CSS vanilla, le déployer gratuitement sur Vercel, et le mettre à jour en cinq minutes quand un nouveau projet arrive. Ce guide te montre le workflow exact, prompt par prompt. Si tu débutes avec l'outil, commence par le guide complet pour apprendre Claude avant de revenir ici.

L'idée n'est pas de te transformer en développeur. C'est de te donner un brief assez précis pour que Claude fasse 90 % du travail, et que tu gardes la main sur les 10 % qui comptent : tes textes, tes visuels, ton URL.

Ce qu'on construit (et pourquoi ce stack)

Résultat final : un site mono-page ou trois pages (accueil, projets, contact), écrit en HTML5 sémantique, un seul fichier CSS, un peu de JS pour les transitions. Hébergé sur Vercel. Domaine custom optionnel. Coût total à l'année : zéro si tu restes en .vercel.app, environ 12 € si tu prends un .fr chez OVH.

Pourquoi ce stack plutôt que Wordpress, Wix ou Framer ?

Ce que ce stack n'est pas : un CMS. Si tu prévois de publier deux articles par semaine avec catégories, tags et formulaires d'inscription, lis plutôt le pilier sur la création de blog SEO avec Claude. Pour un portfolio qui change deux ou trois fois par an, le statique gagne sur tout.

Préparer le brief avant d'ouvrir Claude

La règle qui fait gagner trois heures : ne pas ouvrir Claude tant que tu n'as pas ces six éléments rassemblés dans un fichier markdown.

• Trois à cinq projets avec titre, client, année, une description en 40 mots, et une image (URL ou screenshot dans un dossier /assets)
• Une bio de 80 mots maximum, écrite à la première personne
• Deux ou trois services proposés, formulés en bénéfice pour le client
• TJM ou fourchette de prix si tu l'affiches (beaucoup de freelances le cachent, à toi de voir)
• Un ou deux témoignages clients (prénom, poste, entreprise, 30 mots)
• Contact : email pro, Calendly, LinkedIn, éventuellement GitHub ou Dribbble

Template à coller dans Claude :

# Brief portfolio

## Identité
Nom : [Prénom Nom]
Métier : [ex: designer UX freelance]
Ville : [Lyon]

## Bio (80 mots)
[texte]

## Services
1. [service A] : [bénéfice]
2. [service B] : [bénéfice]

## Projets
### Projet 1
- Client : 
- Année : 
- Description (40 mots) : 
- Image : /assets/projet1.webp

[répéter]

## Témoignages
[texte]

## Contact
Email : 
Calendly : 
LinkedIn : 

Un brief vide donne un site Lorem Ipsum générique que tu vas devoir réécrire entièrement. Un brief plein donne un site personnalisé dès le premier jet.

Le prompt qui génère le portfolio complet

Voici le prompt que tu colles dans Claude.ai, juste après ton brief. Demande tout le site d'un coup : Claude tient le contexte sur 200 000 tokens minimum (1M sur Opus 4.7), donc il garde la cohérence visuelle d'un fichier à l'autre. Page par page, tu obtiens trois designs qui ne se parlent pas.

Tu es développeur front-end senior. À partir du brief ci-dessus, 
génère un portfolio freelance complet avec les contraintes suivantes :

Technique :
- HTML5 sémantique (header, main, section, article, footer)
- Un seul fichier style.css, mobile-first, breakpoint à 900px
- Pas de framework CSS (ni Tailwind, ni Bootstrap)
- Un fichier script.js minimal pour animations au scroll
- Polices via Google Fonts (max 2 familles)

Structure :
- Hero : nom, titre métier, accroche en 12 mots, bouton contact
- Section services (3 cartes)
- Grille projets (2 colonnes desktop, 1 mobile)
- Section à propos avec bio + photo ronde
- Témoignages en slider ou grille
- Footer avec contact et réseaux

Style :
- Inspiration : minimal, beaucoup d'espace blanc, 
  typo serif pour titres, sans-serif pour texte
- Palette : noir/blanc + une couleur d'accent (propose-en une)
- Hover discrets, transitions 200ms

Livrable : trois fichiers (index.html, style.css, script.js) 
plus l'arborescence /assets attendue. Code complet, pas de "...".

Claude renvoie typiquement 400 à 600 lignes de code propres, indentées, commentées aux endroits utiles. Tu copies chaque fichier dans un dossier portfolio/ sur ton bureau. Tu double-cliques sur index.html. Ton navigateur ouvre la première version.

Itérer sur le design sans casser le code

Première règle d'itération : un changement à la fois, et tu recolles le fichier complet à Claude à chaque fois. Pas de "change juste la couleur du bouton" sans contexte, Claude va te renvoyer un snippet hors-sol qui ne s'intègre pas.

Deuxième règle : retours précis, mesurables. "C'est moche" ne mène nulle part. "La grille projets passe à une colonne dès 1200px alors que je veux qu'elle reste à deux jusqu'à 900px, et le padding du hero est trop serré sur mobile, passe-le de 40px à 80px en haut" donne un patch utilisable.

Exemple d'itération typique sur un portfolio de designer :

1. Premier jet : tout est gris, manque de personnalité. Retour : "Ajoute une couleur d'accent orange #FF5722 sur les liens, le bouton CTA et le hover des cartes projet."
2. Deuxième jet : couleur OK, mais le hero fait trop "agence corporate". Retour : "Remplace le hero centré par un hero asymétrique, texte à gauche sur 60%, photo de moi à droite sur 40%, sur desktop seulement."
3. Troisième jet : presque parfait, sauf que les images projets sont écrasées. Retour : "Mets object-fit: cover et un ratio fixe 4/3 sur les images dans .projet-card."

Si tu veux pousser plus loin et travailler en local avec un agent qui édite directement tes fichiers, regarde Claude Code pour itérer sur ton projet. Tu lances l'agent dans le dossier, tu décris ce que tu veux, il modifie le HTML et le CSS sans copier-coller.

Remplir avec ton contenu réel

L'étape que tout le monde bâcle. Tu as un beau site avec du Lorem Ipsum, tu le mets en ligne "pour voir", et six mois plus tard il est toujours rempli de faux textes. Bloque deux heures pour cette étape, c'est ce qui transforme un template en portfolio.

Trois choses à faire :

• Remplacer tous les textes par tes vrais contenus (bio, descriptifs projets, services, témoignages)
• Optimiser les images : convertis en WebP avec Squoosh ou un outil équivalent, vise 150 à 250 ko par image, dimensions max 1600px de large
• Vérifier tous les liens : mailto, Calendly, LinkedIn, ancres internes

Pour les textes, un mini-prompt utile quand tu sèches sur ta bio :

Réécris ma bio en 80 mots, première personne, ton freelance 
qui parle à un futur client (pas à un recruteur). Garde ces 3 
éléments : [élément 1], [élément 2], [élément 3]. Pas de 
buzzwords ("passionné", "experience", "accompagner"). Phrase 
d'ouverture qui dit ce que je fais, pas qui je suis.

Le ton de tes textes doit matcher ton positionnement visuel. Si ce travail t'intéresse, le pilier identité visuelle et design avec Claude détaille comment aligner les deux.

Déployer sur Vercel en 5 minutes

Tu as ton dossier portfolio/ propre, contenu réel, images optimisées. Voici la séquence de déploiement.

1. Crée un compte sur github.com (gratuit, 2 minutes)
2. Crée un nouveau repo nommé portfolio, en public ou privé selon ta préférence
3. Dans l'interface GitHub, clique "uploading an existing file" et glisse tous tes fichiers (index.html, style.css, script.js, dossier /assets)
4. Commit directement sur la branche main
5. Va sur vercel.com, crée un compte avec ton GitHub
6. Clique "Add New Project", sélectionne ton repo portfolio, laisse les paramètres par défaut (framework : Other), clique Deploy
7. Trente secondes plus tard, tu as une URL portfolio-tonpseudo.vercel.app accessible publiquement

Pour un domaine custom (genre tonnom.fr) : achète-le chez OVH ou Namecheap (environ 10 à 15 € par an pour un .fr), dans Vercel va dans Settings > Domains, ajoute ton domaine, copie les enregistrements DNS proposés par Vercel, colle-les chez ton registrar. Délai de propagation : 10 minutes à 2 heures.

Tout est gratuit tant que tu restes sous 100 Go de bande passante par mois, ce qui correspond à plusieurs dizaines de milliers de visites pour un portfolio léger.

Maintenir et faire évoluer

Six mois plus tard, tu as un nouveau projet à ajouter. Workflow :

1. Ouvre ton repo GitHub, télécharge index.html et style.css
2. Colle les deux fichiers complets dans Claude avec ce prompt : "Ajoute une carte projet dans la grille avec ces infos [titre, client, année, description, image]. Respecte exactement la structure HTML et les classes CSS existantes. Renvoie le fichier index.html complet."
3. Upload le nouveau fichier dans ton repo, ajoute l'image dans /assets
4. Vercel détecte le push et redéploie automatiquement en 30 secondes

Limites de l'approche statique : si tu veux ajouter un vrai blog avec articles, catégories, recherche, ou un back-office pour gérer tes projets sans toucher au code, le HTML vanilla devient pénible. Le pas suivant est passer à Next.js sur Vercel : même hébergeur, même workflow Git, mais tu gagnes les routes dynamiques et le markdown pour les articles. Claude génère du Next.js aussi bien que du HTML.

Pour une vision plus large du workflow site web avec Claude, du choix de stack au SEO, le pilier créer un site web avec Claude couvre les autres cas (landing, e-commerce léger, app interactive).

Passer à la pratique cette semaine

Bloque une après-midi. Trois heures suffisent si ton brief est prêt. Une heure pour préparer le contenu, une heure pour générer et itérer, une heure pour optimiser les images et déployer. Le lendemain, tu envoies l'URL à un prospect au lieu de lui dire "mon site arrive bientôt".

Si tu veux apprendre à structurer ce genre de workflow pour d'autres usages (landing pages, prospection, automatisations, contenu), la formation Maîtriser Claude au quotidien couvre les neuf modules qui transforment Claude en outil de production, pas en gadget de démo. Tu repars avec huit livrables exploitables, dont un site fonctionnel que tu mets en ligne avant la fin du parcours.