Créez votre portfolio de photographe en vibe coding

01En quoi c’est différent d’un sélecteur de modèles

Les galeries de modèles vous montrent un design fini et vous demandent s’il vous plaît ou non. Cet outil va une couche plus loin : chacune des six directions ci-dessous s’appuie sur un vrai portfolio de photographe en ligne, réellement examiné (captures d’écran, mise en page réelle, couleurs calculées, polices calculées), et non sur une palette inventée pour faire joli dans un nuancier. La direction Éditorial, par exemple, utilise EB Garamond parce que c’est littéralement la police du site d’un vrai photographe de mode, retrouvée en inspectant directement la page.

Deux constantes sont apparues presque partout sur les vrais sites qui ont servi de base, et elles sont intégrées à chaque direction ici : une navigation cachée derrière une seule icône hamburger, sans liste de liens visible, même sur ordinateur, et une seule grande image à la fois plutôt qu’une grille. La couleur de l’interface reste proche de zéro partout : c’est la photographie qui apporte la couleur, pas l’interface.

02Ce que vous obtenez à la fin

Un prompt unique et structuré qui couvre la direction générale, les couleurs hexadécimales exactes, les noms de polices et leur association, la liste des pages, le comportement de la navigation, la disposition de la galerie et le cadrage des images, les fonctionnalités à inclure, une recommandation d’hébergement avec de vrais compromis de coût, et un ensemble fixe d’exigences de qualité (textes alternatifs accessibles, points de rupture adaptatifs, aucun secret codé en dur, images en chargement différé). Collez-le dans l’application de codage IA de votre choix : elle a tout ce qu’il lui faut pour commencer.

03Du prompt au site en ligne : le parcours complet

Le prompt est le cahier des charges du design, pas la ligne d’arrivée. Voici toutes les étapes entre sa copie et une vraie adresse que vous pouvez mettre sur une carte de visite, gratuitement ou presque.

Copiez le prompt et ouvrez une application de codage IA

Claude, Cursor, Claude Code, Windsurf ou l’agent IA de Replit conviennent tous, tout ce qui peut écrire et enregistrer des fichiers pour vous, pas seulement discuter. Si vous n’en avez jamais utilisé, une solution dans le navigateur comme claude.ai ou Replit ne demande aucune installation : collez le prompt comme premier message.

Laissez-le construire, puis regardez vraiment ce qu’il a produit

Demandez-lui de construire le site en HTML/CSS/JS statique (ou ce que la section hébergement du prompt a indiqué) et de vous montrer un aperçu. Vérifiez les six points demandés par le prompt (couleurs, polices, comportement de la galerie, navigation, cadrage, pages) avant de continuer. Il est bien moins coûteux de corriger une mauvaise couleur d’accent maintenant qu’après avoir intégré les photos.

Remplacez par vos vraies photos, votre biographie et vos coordonnées

Remplacez chaque image d’exemple et chaque ligne de faux texte. Demandez à votre application IA de rédiger au fur et à mesure un vrai attribut alt précis pour chaque photo, pas « image1.jpg » mais une description réelle, car c’est à la fois une exigence d’accessibilité et un petit gain de référencement. C’est aussi le moment de vérifier que le formulaire de contact renvoie bien vers une adresse e-mail que vous consultez.

Déployez-le sur un hébergeur gratuit

Si vous avez choisi l’offre « Statique & gratuit », demandez à votre application IA de vous guider pour connecter le dossier du projet ou le dépôt GitHub à l’un des hébergeurs de la page Hébergement du menu ci-dessus. Les quatre construisent et déploient automatiquement à chaque modification poussée ; plus aucun envoi manuel une fois la connexion faite.

Connectez un domaine personnalisé (facultatif, mais utile)

Un sous-domaine gratuit (comme yourname.netlify.app) suffit très bien pour commencer. Quand vous voudrez yourname.com, il suffit d’acheter un domaine et de faire un changement DNS, expliqués en détail plus bas.

04Quel hébergeur gratuit choisir ?

N’importe lequel de ceux-ci mettra un site statique en ligne sans frais, avec HTTPS gratuit et une offre gratuite qui couvre largement le trafic d’un portfolio personnel. Les limites des offres gratuites changent assez souvent : considérez donc les chiffres de la page Hébergement comme un ordre de grandeur plutôt que comme des chiffres exacts et actuels, et consultez la page tarifaire de chaque fournisseur avant de vous décider.

Demandez à votre application de codage IA de faire avec vous les étapes de déploiement : « connecte ce projet à Netlify » est une demande tout à fait normale, et elle peut généralement vous guider dans la création du compte et le premier déploiement en quelques minutes.

05Connecter un domaine personnalisé

Un domaine coûte une petite redevance annuelle (généralement de 10 à 20 $ par an selon l’extension), distincte de l’hébergement, qui reste gratuit. Trois étapes :

1. Acheter le domaine. Namecheap, Cloudflare Registrar ou le successeur de Google Domains (Squarespace Domains).
2. Ajouter un enregistrement DNS. Un CNAME (ou un enregistrement A) qui pointe votre domaine vers votre hébergeur, ajouté dans le tableau de bord du registraire. Ce sont deux lignes dans le tableau du registraire : un CNAME pour www pointant vers l’adresse que fournit votre hébergeur, par exemple your-portfolio.netlify.app, et un enregistrement A pour le domaine nu pointant vers l’IP de l’hébergeur.
3. L’ajouter chez votre hébergeur. Collez le même domaine dans les réglages « domaine personnalisé » de votre hébergeur ; le HTTPS se configure tout seul.

Chaque hébergeur de la page Hébergement a un onglet « Domaine personnalisé » ou « Domaines » qui vous donne l’enregistrement exact à ajouter : copiez-le, ajoutez-le chez votre registraire et attendez. Les changements DNS prennent en général de quelques minutes à quelques heures, parfois jusqu’à 24 à 48 heures. Votre application de codage IA peut vous guider dans le tableau de bord de votre registraire si vous êtes bloqué ; faites une capture d’écran de la page de réglages et demandez-lui sur quoi cliquer. Cadenas affiché, pas d’avertissement « non sécurisé » : c’est la ligne d’arrivée.

06Liste de contrôle avant la mise en ligne

Cinq minutes avec cette liste suffisent à repérer l’essentiel de ce qui donne l’impression qu’un portfolio n’est pas terminé. Les vérifications se trouvent dans la page Avant la mise en ligne du menu ci-dessus ; cochez-les au fur et à mesure.

07Questions fréquentes