Comment créer un portfolio avec l’IA

Avant d’ouvrir l’outil de création, notez le périmètre minimum. La plupart des portfolios personnels n’ont pas besoin de beaucoup de pages, mais ils ont besoin d’un contenu clair.

Une structure courante est :

• Page d’accueil avec nom, rôle, courte présentation et quelques projets mis en avant
• Page Projets ou sections de projets avec captures d’écran, résumés, outils utilisés et résultats
• Page À propos avec parcours, compétences et façon de travailler
• Section Contact avec e-mail, liens sociaux et éventuellement un formulaire

Définissez aussi à qui le site s’adresse :

• Des recruteurs qui cherchent une preuve rapide de votre travail
• Des clients qui veulent vérifier si vous correspondez à leur type de projet
• Des collaborateurs qui veulent voir votre démarche et votre goût

Puis listez le contenu dont vous disposez déjà :

• Titres de projets
• 1–3 captures d’écran par projet
• Brèves descriptions
• Liens vers le travail en ligne ou GitHub
• Biographie et photo

Si vous faites cela d’abord, l’IA aura suffisamment de contexte pour construire quelque chose d’utile dès le premier essai, au lieu de vous proposer un modèle générique.

Dans Moremade, vous décrivez le site en langage naturel. L’agent IA écrit le code source, vous donne un aperçu en direct, et vous pouvez continuer à le modifier par chat.

Votre premier prompt devrait couvrir :

• Le type de portfolio
• Les pages ou sections nécessaires
• Le contenu à inclure
• La direction visuelle
• Les détails fonctionnels, comme un formulaire de contact ou des liens

Restez précis. Si vous dites seulement « créez-moi un portfolio », vous passerez plus de temps à corriger le résultat.

Exemple de premier prompt :

Crée un site portfolio personnel pour une product designer freelance nommée Maya Chen. Utilise une mise en page propre et minimaliste avec une typographie forte, des couleurs neutres et de grands espacements. Crée une page d’accueil avec une courte introduction en hero, des projets mis en avant, une section à propos, un espace réservé pour des témoignages et une section contact. Ajoute une page projets avec 4 cartes d’études de cas. Chaque projet doit afficher le titre, un résumé en une ligne, les outils utilisés et un bouton pour plus de détails. Inclue la navigation, le pied de page, une mise en page adaptée au mobile et un formulaire de contact. Utilise les conventions de style React et Tailwind et fais en sorte que le site paraisse professionnel plutôt qu’ostentatoire.

Pour un portfolio simple, demandez d’abord les pages principales et une mise en page de base cohérente. Vous pourrez affiner les détails visuels une fois l’aperçu affiché.

Une fois la première version générée, inspectez attentivement l’aperçu en direct. Vérifiez d’abord la structure du contenu, puis le rendu visuel.

Contrôlez ces points :

• La hiérarchie est-elle claire au premier écran ?
• Les projets sont-ils faciles à parcourir ?
• La section à propos paraît-elle assez personnelle ?
• Les boutons, les espacements et les tailles de texte sont-ils cohérents ?
• Y a-t-il du texte de remplissage à remplacer ?

Moremade vous permet de modifier le site par chat, et il dispose aussi d’un inspecteur visuel pour pointer un élément et le modifier. Utilisez de courts prompts de suivi qui ciblent un seul problème à la fois.

Trois exemples utiles :

• « Réduis la hauteur de la section hero, remonte les projets mis en avant et rends le texte d’introduction plus concis. »
• « Transforme les cartes projets en aperçus d’études de cas avec une miniature en haut, des étiquettes d’outils et une courte ligne sur le résultat sous chaque résumé. »
• « Utilise une palette de couleurs neutres plus chaude, augmente le contraste du texte principal et fais en sorte que le bouton du formulaire de contact occupe toute la largeur sur mobile uniquement. »

Cette étape va généralement plus vite si vous évitez de demander une refonte totale, sauf si la structure de départ est clairement mauvaise.

De nombreux portfolios n’ont pas besoin de base de données, de connexion ni de paiements. Garder la première version simple facilite la finalisation.

Utilisez Supabase uniquement si le portfolio a besoin de fonctionnalités comme :

• Un formulaire de contact qui enregistre les envois
• Du contenu protégé par connexion
• Une petite configuration type CMS pour mettre à jour les entrées de projets depuis des données

Utilisez Stripe uniquement si le portfolio vend aussi quelque chose, par exemple :

• Des modèles de design payants
• Des séances de consultation
• Des téléchargements numériques

Moremade propose des connecteurs intégrés pour Supabase et Stripe, ainsi que des fournisseurs d’e-mail comme Resend et SendGrid. Si vous en ajoutez un, formulez clairement l’exigence.

Par exemple :

• « Connecte le formulaire de contact à Supabase afin que les envois soient enregistrés avec le nom, l’e-mail et le message. »
• « Ajoute une page de paiement Stripe pour une session de 60 minutes de revue de portfolio au prix que j’ai défini. »

Si votre objectif est de mettre rapidement en ligne un site personnel professionnel, passez ces intégrations si elles ne répondent pas à un besoin réel.

Un portfolio est souvent consulté d’abord sur téléphone, surtout via un lien dans un e-mail ou sur les réseaux sociaux. Les problèmes mobiles sont l’un des moyens les plus rapides de donner une impression négligée à un bon travail.

Dans l’aperçu, vérifiez :

• Le comportement du menu de navigation
• Le retour à la ligne du texte du hero
• L’espacement des cartes projets
• Le cadrage des images
• La taille des boutons et les zones tactiles
• L’espacement des champs du formulaire de contact
• La lisibilité des liens du pied de page

Demandez des corrections précises au lieu de dire « améliore le mobile ».

Exemples :

• « Sur les écrans en dessous de la largeur mobile, empile le contenu du hero verticalement et réduis la taille du titre d’un niveau. »
• « Fais en sorte que toutes les miniatures de projets aient le même ratio et que les légendes ne passent pas sur trois lignes sur téléphone. »
• « Augmente les marges latérales de la section contact et rends le bouton d’envoi plus facile à toucher sur les petits écrans. »

Moremade propose aussi une vue du code, utile si vous voulez examiner exactement ce qui a changé dans le code React et Tailwind.

Quand le site est satisfaisant, publiez-le. Moremade peut publier en un clic sur un sous-domaine gratuit yourname.moremade.ai. Sur les forfaits payants, vous pouvez connecter un domaine personnalisé. Les domaines peuvent aussi être achetés directement dans Moremade.

Un ordre de lancement pratique est :

• Publier d’abord sur le sous-domaine gratuit
• Ouvrir le site en ligne sur ordinateur et téléphone
• Corriger les derniers problèmes de contenu ou d’espacement
• Connecter votre domaine personnalisé si vous êtes sur un forfait payant

Moremade génère du vrai code React + Tailwind pour les sites web. Vous pouvez exporter le code source complet en ZIP à tout moment ou le pousser vers GitHub. C’est important pour un portfolio, car vous souhaiterez peut-être l’héberger ailleurs plus tard, le confier à un développeur ou continuer à l’améliorer hors de la plateforme.

Si vous pensez modifier souvent le site, l’historique des versions des forfaits payants est utile pour comparer et annuler des modifications.

Le principal échec n’est pas technique. C’est de publier un portfolio qui semble terminé mais qui en dit très peu.

Surveillez ces problèmes courants :

• Trop de sections sur la page d’accueil, sans priorité claire
• Des résumés de projets vagues qui n’expliquent jamais ce que vous avez fait
• Des prompts visuels génériques qui donnent un rendu de type modèle
• Ajouter des fonctionnalités Stripe, connexion ou base de données sans cas d’usage réel
• Sauter la vérification mobile
• Publier du texte de remplacement, des images de stock ou des pages d’études de cas vides

Un bon portfolio fait généralement quelques choses simples, mais bien :

• Il dit qui vous êtes et quel type de travail vous faites
• Il montre des projets sélectionnés, pas tout
• Il donne assez de détails pour évaluer votre réflexion
• Il facilite la prise de contact

Utilisez l’IA pour obtenir rapidement une bonne base, puis consacrez votre temps à améliorer la qualité du contenu.