Prompts · Créer un site

Ton portfolio, projet par projet

Un portfolio qui raconte chaque projet (le problème, ta démarche, le résultat), avec un seul élément qui marque, rapide et lisible au téléphone. Rien n'est inventé à ta place.

Le prompt, en français

Tu vas créer mon portfolio : un site court qui montre mes projets et donne envie de me contacter. Qui je suis : [Ton nom et ton métier] Ce qui me rend différent : [Ce qui te rend différent, en une phrase] Qui doit être convaincu : [Qui doit être convaincu] Mes projets : [Tes projets à montrer (3 à 6) et où sont leurs images] Pour me contacter : [Comment te contacter] Contenu attendu : - Une page d'accueil qui dit en une phrase ce que je fais et pour qui, puis qui montre les projets. - Une page (ou une section) par projet : le problème de départ, ma démarche (étapes, essais, choix), le résultat, et ce qu'il a changé pour le client si je l'ai écrit. N'invente aucun client, aucun chiffre, aucune citation : s'il manque une information, laisse un emplacement marqué « À COMPLÉTER ». - Une courte page « À propos » et un contact simple. Direction : - Le travail est le héros : les images de mes projets prennent la place, l'interface se fait discrète. - Un seul élément mémorable, qui vient de ma façon de travailler, pas une collection d'effets. - Propose une palette (codes hexadécimaux) et deux polices au plus, hébergées avec le site. Évite Inter, Roboto et les polices système par défaut. - Des numéros 01, 02, 03 seulement si l'ordre des projets veut dire quelque chose. Technique : - Si le dossier contient déjà un projet, garde sa pile technique. Sinon : HTML, CSS et JavaScript, sans framework. - Images optimisées : WebP ou AVIF, plusieurs tailles avec `srcset`, largeur et hauteur indiquées, chargement différé pour celles qu'on ne voit pas tout de suite, et un texte alternatif en français qui décrit vraiment l'image. - Contraste du texte d'au moins 4,5:1, focus clavier visible, on passe d'un projet à l'autre au clavier. - Animations avec `transform` et `opacity` seulement, coupées par `prefers-reduced-motion: reduce`. - Aucun traceur. Tout le texte visible est en français, avec la typographie française : espace insécable avant « : », espace fine insécable avant « ; », « ! » et « ? », guillemets « ». Tu me parles en français. Méthode : 1. Regarde mes images et mes notes, puis reformule le brief en cinq lignes et pose-moi tes questions. 2. Propose ton plan (palette, polices, croquis en texte de l'accueil et d'une page de projet) et attends mon accord. Si le skill frontend-design est installé, utilise-le. 3. Construis, puis, si tu as un outil de navigateur, fais des captures à 390 px et à 1440 px de large, regarde-les et corrige ce qui ne va pas. C'est fini quand chaque projet a sa page, que rien n'est inventé, que tu m'as donné la liste des « À COMPLÉTER », qu'il n'y a aucun défilement horizontal à 390 px, et que tu m'as indiqué le poids total de la page d'accueil.

5 cases sont vides : elles partiront entre crochets, et Claude te posera la question.

Voir la version anglaise, celle qui est copiée

You are going to build my portfolio: a short site that shows my projects and makes people want to contact me.

Who I am: [Ton nom et ton métier]
What makes me different: [Ce qui te rend différent, en une phrase]
Who needs to be convinced: [Qui doit être convaincu]
My projects: [Tes projets à montrer (3 à 6) et où sont leurs images]
How to contact me: [Comment te contacter]

Expected content:
- A home page that says in one sentence what I do and for whom, then shows the projects.
- One page (or section) per project: the starting problem, my process (steps, attempts, choices), the result, and what it changed for the client if I wrote it down. Do not invent any client, figure or quote: if a piece of information is missing, leave a placeholder marked "À COMPLÉTER".
- A short "À propos" page and a simple contact.

Direction:
- The work is the hero: my project images take the space, the interface stays quiet.
- One memorable element that comes from the way I work, not a collection of effects.
- Propose a palette (hex codes) and at most two typefaces, self-hosted with the site. Avoid Inter, Roboto and default system fonts.
- Numbers like 01, 02, 03 only if the order of the projects means something.

Technical:
- If the folder already contains a project, keep its stack. Otherwise: plain HTML, CSS and JavaScript, no framework.
- Optimized images: WebP or AVIF, several sizes with `srcset`, width and height set, lazy loading for the ones not visible right away, and French alt text that really describes the image.
- Text contrast of at least 4.5:1, visible keyboard focus, keyboard navigation from one project to the next.
- Animations using only `transform` and `opacity`, turned off by `prefers-reduced-motion: reduce`.
- No trackers. All visible text is in French, with French typography: a non-breaking space before ":", a narrow non-breaking space before ";", "!" and "?", « » quotes. Talk to me in French.

Process:
1. Look at my images and notes, then restate the brief in five lines and ask me your questions.
2. Propose your plan (palette, typefaces, text sketch of the home page and of a project page) and wait for my approval. If the frontend-design skill is installed, use it.
3. Build, then, if you have a browser tool, take screenshots at 390 px and 1440 px wide, look at them and fix what is wrong.

Done when each project has its page, nothing is invented, you have given me the list of "À COMPLÉTER" placeholders, there is no horizontal scroll at 390 px, and you have told me the total weight of the home page.

Comment t’en servir

Prépare un dossier par projet avec ses images et quelques notes (le problème de départ, ce que tu as fait, le résultat). Ouvre le dossier du site dans ton terminal, lance claude et colle le prompt.

Claude regarde tes images, te pose ses questions puis propose un plan avant de coder. Il n'invente ni client ni chiffre : ce qui manque est marqué « À COMPLÉTER ». C'est à toi de remplir ces trous avec du vrai, c'est ce qui convaincra.

Vérifie ensuite le poids de la page d'accueil (Claude te le donne) et ouvre-la au téléphone, sur une connexion mobile. La formation « Un site sur mesure, pas un site d'IA » explique comment donner à un site sa propre identité.

Pour comprendre tout ce que fait ce prompt, et l’adapter : la formation Un site sur mesure, pas un site d'IA.