11 août 2025·8 min
Comment créer un site portfolio en 30 minutes (sans code)
Créez un site portfolio épuré en ~30 minutes — sans coder. Suivez une checklist simple : choisissez un modèle, ajoutez vos travaux, connectez un domaine et publiez.
Créez un site portfolio épuré en ~30 minutes — sans coder. Suivez une checklist simple : choisissez un modèle, ajoutez vos travaux, connectez un domaine et publiez.
À la fin de ce montage rapide, vous aurez un portfolio propre d'une page qui remplit trois fonctions : montrer votre travail, expliquer qui vous êtes et faciliter la prise de contact.
Une page simple avec :
Ceci est volontairement minimal. Un portfolio d'une page se construit plus vite, se met à jour plus facilement et convertit souvent mieux qu'un site multi‑pages quand quelqu'un parcourt votre travail.
Cette méthode convient aux freelances, étudiants, créatifs et chercheurs d'emploi qui ont besoin de quelque chose de professionnel rapidement — surtout si vous postulez à des postes, prospectez des clients ou partagez votre travail sur des réseaux sociaux.
Pour tenir les 30 minutes, rassemblez d'abord :
Un montage de 30 minutes ne marche que si vous passez 3–5 minutes à définir ce que « terminé » signifie. Sinon vous perdrez du temps à modifier les polices, réarranger les sections et hésiter sur ce qui doit rester.
Choisissez le résultat principal pour votre portfolio :
Cet objectif détermine ce que vous mettez en avant : votre rôle et les résultats pour l'embauche, votre offre et votre processus pour les clients, ou votre travail de niche pour une spécialité.
Décidez si vous créez :
Si vous êtes pressé, commencez par une page unique maintenant — vous pourrez la découper plus tard.
Choisissez un CTA principal et (optionnellement) un CTA secondaire. Exemples :
Tout sur la page doit soutenir ces actions.
Avant de toucher au modèle, rédigez une ligne simple :
J’aide [qui] avec [quoi], pour qu’ils puissent [résultat].
Exemple : « J’aide les startups SaaS à concevoir des parcours d’onboarding qui réduisent le churn et améliorent l’activation. »
Gardez cette phrase visible pendant la construction — c’est votre filtre pour ce qu’il faut garder ou couper.
Votre builder détermine la rapidité de ce projet « 30 minutes ». Choisissez quelque chose qui vous permet de publier sans lutter contre des menus compliqués.
Si vous voulez un résultat plus personnalisé sans passer par un cycle de dev traditionnel, Koder.ai est une autre option : c’est une plateforme de « vibe‑coding » où vous décrivez votre portfolio en chat et générez une vraie app React (avec Go + PostgreSQL disponibles si vous ajoutez plus tard des fonctionnalités backend). Vous pouvez exporter le code source, déployer/héberger, connecter un domaine personnalisé et utiliser des snapshots/rollback — pratique si vous voulez quelque chose de flexible mais rapide.
Commencez par ces indispensables :
Beaucoup d’outils semblent bon marché jusqu’à ce que vous tombiez sur un palier payant. Cherchez :
Si le prix compte, comparez les offres sur /pricing et choisissez le plan minimum qui supporte un domaine personnalisé et les fonctionnalités ci‑dessous. Vous pourrez monter en gamme plus tard quand votre portfolio grandira.
Un bon modèle doit ressembler à un point de départ utile — pas à un puzzle à résoudre avant de pouvoir publier. Quand vous visez 30 minutes, le mauvais modèle est la façon la plus rapide de perdre du temps.
Choisissez un modèle conçu pour mettre en valeur des travaux : une section hero claire, une grille de projets, une courte zone À propos et une section Contact évidente. Si vous partez d’un template pour business ou événement, vous passerez votre temps à supprimer et réarranger au lieu de publier.
Privilégiez une typographie claire, un espacement fort et du blanc. Les animations sophistiquées, une navigation inhabituelle et les effets de défilement « créatifs » peuvent être impressionnants en démo — mais ils rendent souvent le contenu plus difficile à scanner et à éditer.
Votre portfolio est le produit. Le template doit se faire discret.
Avant de valider, assurez‑vous que le modèle gère ces éléments sans bidouille :
Si le modèle n’inclut pas naturellement ces éléments, vous finirez par les forcer — et c’est là que les builders deviennent frustrants.
Ouvrez l’aperçu mobile et regardez trois choses :
Si la vue mobile est déjà problématique, elle ne se corrigera pas toute seule. Choisissez un modèle plus simple et avancez — vous pourrez toujours améliorer le look après la mise en ligne.
Votre portfolio n’a pas besoin d’un guide de marque complet pour paraître professionnel. Il suffit de quelques choix cohérents pour que chaque élément semble appartenir au même ensemble.
Si vous avez déjà un logo, téléversez‑le et utilisez‑le seulement dans l’en‑tête et le pied de page. Sinon, un wordmark propre (votre nom dans une bonne police) fonctionne très bien — surtout pour freelances et créatifs.
Choisissez une couleur d’accent pour les liens, boutons et petits éléments (évitez de l’utiliser pour de larges blocs de texte). Un moyen simple : prélevez une couleur depuis votre meilleure image de projet.
Limitez‑vous à une police pour les titres et une pour le corps de texte. Beaucoup de modèles paraissent « désordonnés » car ils mélangent trop de styles typographiques.
Gardez‑la lisible :
Si vous hésitez, conservez les valeurs par défaut du template et ne changez que la couleur d’accent.
La cohérence est ce qui rend un site no‑code personnalisé.
Paramètres rapides à standardiser :
Cela compte plus que les effets sophistiqués et donne au template un aspect soigné plutôt que « trop générique ».
Faites un scan de 10 secondes : le texte est‑il lisible sur tous les arrière‑plans ?
Un portfolio mobile‑friendly révèle souvent d’abord les problèmes de contraste, donc prévisualisez sur mobile avant d’avancer.
Vous n’avez pas besoin d’un sitemap compliqué pour livrer un bon portfolio no‑code. Une page claire suffit souvent — surtout quand l’objectif est de construire en 30 minutes.
Utilisez un flux simple haut → bas. Ces sections couvrent ce que la plupart des visiteurs cherchent en moins d'une minute :
Si votre template commence avec des blocs supplémentaires (blog, newsletter, tarification, longues grilles), supprimez‑les pour l'instant. Vous pouvez toujours les ajouter plus tard.
Le hero est la section « pourquoi je devrais m'intéresser ? ». Checklist rapide :
Restez scannable : phrases courtes, titres clairs et respirations.
Ajoutez une barre de navigation seulement si la page est longue. Si la page tient en quelques scrolls, évitez la nav et laissez la mise en page guider naturellement.
Appliquez le même schéma à chaque section : un titre, une courte ligne d’introduction, puis le contenu. La cohérence donne une impression d’intention — même montée vite.
Les projets sont l'essence du portfolio. Visez 3–6 pièces fortes qui prouvent ce que vous savez faire, plutôt que d'entasser tout ce que vous avez créé.
Sélectionnez des travaux qui correspondent aux missions que vous visez. Si vous êtes designer, montrez du design ; si vous êtes photographe, menez avec votre meilleure série ; si vous êtes généraliste, choisissez un mix cohérent.
Filtre rapide : retirez ce que vous ne pouvez pas expliquer avec assurance en entretien. Si un projet nécessite trop de disclaimers (« je n'ai pas vraiment fait grand‑chose »), il affaiblit le site.
Pour chaque projet, incluez les mêmes éléments de base pour faciliter la lecture :
Restez concis — 2–5 phrases courtes suffisent généralement.
Utilisez 3–6 images par projet, ou une courte vidéo si le motion fait partie du travail. Mettez l'image la plus forte en premier : c'est ce qui incite au clic.
Si possible, ajoutez une image « process » (wireframe, croquis, avant/après, contact sheet) pour montrer votre réflexion — sans transformer la page en roman de cas d’étude.
Utilisez des titres et labels clairs (ex. « Identité de marque », « Refonte web », « Shooting éditorial »). Si le projet inclut un lien, indiquez‑le clairement : « Voir le site en ligne » ou « Regarder la version finale ».
L’À propos a pour objectif d’aider quelqu’un à décider rapidement si vous êtes la bonne personne à contacter.
Utilisez un portrait amical ou une illustration propre. Préférez un arrière‑plan neutre et un éclairage naturel. Les scènes chargées, photos de fête et filtres lourds rendent la lecture plus difficile.
Visez 4–6 lignes au total :
Exemple :
Je suis designer UI freelance, spécialisé dans les landing pages conversion‑friendly pour startups SaaS. J’ai aidé une fintech à livrer un nouvel onboarding et augmenté l’activation de 18 %. Je cherche 1–2 nouveaux projets client ce mois‑ci.
Mentionnez les outils que vous utilisez réellement (Figma, Webflow, Notion), les secteurs que vous connaissez (santé, fintech, éducation) et les récompenses/certifs seulement si elles sont pertinentes et exactes.
Si cela a du sens pour votre domaine, ajoutez une courte ligne avec un PDF clairement libellé :
"Télécharger le CV (PDF)"
Placez‑le près du bouton de contact pour que quelqu’un puisse lire votre histoire, vous faire confiance et agir en un seul scroll.
Un portfolio joli ne sert que si quelqu’un peut vous joindre rapidement. La section contact doit être évidente, courte et sans friction — rien à chercher, rien à deviner.
Visez deux options, trois au maximum :
Plus d’options poussent à l’hésitation. Restez simple et (si vous avez une nav) libellez‑la « Contact ».
Une phrase peut réduire les allers‑retours et attirer de meilleures demandes. Par exemple :
"Je suis disponible pour des projets freelance de branding à partir du mois prochain. Délai de réponse habituel : 1–2 jours ouvrés."
Ne le dites que si c'est vrai. Si vous n’acceptez pas de missions, précisez ce que vous êtes ouvert à faire (collabs, CDI, conférences, etc.).
Un lien de réservation peut être excellent pour du service, mais ajoutez‑le seulement si vous le maintenez et acceptez que des gens prennent des créneaux sans contact préalable. Si votre planning change souvent, privilégiez email + formulaire.
Si vous travaillez avec des clients, ajoutez une mention rapide comme « Basé·e à Berlin (CET) » ou « Travaille globalement (UTC‑5) ». Cela aide à proposer des horaires et montre du professionnalisme — surtout pour le travail à distance.
Répétez le lien de contact dans le pied de page : les gens scrollent, décident et cliquent depuis là.
Vous pouvez avoir un portfolio beau et perdre des visiteurs si le site est pénible sur téléphone ou met une éternité à charger. Passez quelques minutes ici et votre site semblera soigné — sans ajouter de pages.
La plupart des visiteurs verront votre portfolio sur un téléphone. Ouvrez l’aperçu mobile du builder et faites un rapide scroll du haut vers le bas.
Prévisualisez sur plusieurs tailles (mobile, tablette, bureau) et repérez :
Les corrections sont souvent simples : réduire les paddings, uniformiser les espacements ou passer les blocs multi‑colonnes en une seule colonne sur mobile.
Les sites rapides paraissent plus professionnels. Les principaux responsables de lenteur sont les images surdimensionnées et les médias de fond.
Compressez les grandes images (les captures de projets n’ont généralement pas besoin de dépasser ~2000px de large). Si votre builder a un toggle « optimiser », activez‑le.
Évitez les grandes vidéos de fond. Si vous voulez vraiment du mouvement, une boucle légère ou un petit clip intégré suffit — le travail doit rester au centre, pas l’en‑tête.
Cliquez sur chaque bouton et lien — icônes sociales, cartes de projet et bouton email compris.
Assurez‑vous que :
Avant de publier, faites une passe rapide :
Quand votre portfolio est mobile‑friendly, rapide et sans petites erreurs, il paraît immédiatement plus crédible — même construit en moins de 30 minutes.
Un domaine personnalisé rend votre portfolio achevé — et plus simple à partager sur un CV, une signature email ou un profil social. Publier se fait souvent en un clic. La connexion d’un domaine prend quelques minutes de plus, mais reste simple.
Restez simple et professionnel :
Si votre nom exact est pris, essayez de petites variantes lisibles (initiale du milieu, « studio », votre métier). Évitez les tirets et les phrases longues — on les retape mal.
La plupart des builders vous guident avec une checklist.
Connectez le domaine dans les paramètres de votre builder et suivez les instructions DNS.
En général, vous copiez une ou deux entrées DNS (souvent un A record et/ou un CNAME) chez votre registrar (là où vous avez acheté le domaine). Vérifiez l’orthographe, la ponctuation et si l’entrée vise le domaine racine (votrenom.com) ou le sous‑domaine “www”.
Après les changements DNS, laissez le temps à la propagation. Certains domaines se connectent en quelques minutes ; d'autres prennent quelques heures. Une fois résolu, ouvrez votre site sur votrenom.com et www.votrenom.com (si vous utilisez les deux) et vérifiez l'absence d'avertissements de sécurité.
Enfin, définissez la version préférée (souvent sans www ou avec www) comme domaine principal pour ne partager qu'une URL propre.
Le SEO paraît technique, mais les bases pour un portfolio no‑code sont surtout des champs simples et un wording clair. Passez quelques minutes ici et votre site sera plus compréhensible pour les humains et les moteurs.
Dans les réglages SEO du builder, trouvez les champs Page Title et Meta Description (souvent sous « SEO », « Paramètres de la page » ou « Aperçu recherche »).
Gardez le titre lisible et spécifique. Un bon format :
Votre Nom — Rôle | Portfolio
Exemple : Jordan Lee — Product Designer | Portfolio
Pour la meta description, écrivez une phrase courte expliquant ce que vous faites et ce que trouve le visiteur.
Exemple : « Designer produit spécialisé dans les applis mobiles et les design systems. Voir des projets sélectionnés, le process et les infos contact. »
Votre page d'accueil doit avoir un H1 clair — généralement votre nom et rôle. Cela aide aussi les visiteurs à comprendre instantanément ce que vous faites.
Exemples d’H1 :
Puis utilisez des titres descriptifs pour les sections : « Travaux sélectionnés », « À propos », « Contact ». Évitez les labels vagues comme « Bienvenue » ou « Mes trucs ». Les titres clairs facilitent la lecture et l'indexation.
Les sites portfolio sont riches en images ; ajoutez de l’alt text sur les éléments importants : vignettes de projets, image hero et toute image porteuse d’information.
L’alt text doit décrire ce que l’on doit savoir, pas chaque détail. Exemples :
Cela améliore l’accessibilité et donne plus de contexte aux outils d’indexation.
Certains builders permettent de connecter des outils de recherche ou de générer un sitemap automatiquement. Si le vôtre le permet, soumettez‑le.
Sinon, ne bloquez pas votre lancement : publiez, puis partagez le lien là où vous avez déjà de l’audience — LinkedIn, bio Instagram, annuaires ou communautés actives.
Avant de partager, faites une dernière passe pour vérifier que tout fonctionne et paraît professionnel. Un site propre et fonctionnel vaut mieux qu’un design tape‑à‑l’œil avec des éléments cassés.
Utilisez des analytics basiques pour mesurer vues, clics sur les projets et soumissions de contact. Après une semaine, repérez le projet le plus cliqué et réécrivez les titres des projets ignorés.
Oui. Un portfolio d'une seule page est souvent meilleur pour les décisions rapides car il est facile à parcourir.
Visez un flux clair : Hero → Travaux → À propos → Contact. Vous pouvez toujours scinder les projets en pages de cas d'étude séparées plus tard une fois le site en ligne.
Restez minimal pour pouvoir finir :
Si vous n'avez pas 3 projets, publiez avec 1–2 pièces fortes et ajoutez-en d'autres plus tard.
Choisissez un objectif principal et laissez‑le guider vos choix :
Quand vous hésitez sur ce qu'il faut inclure, ne gardez que ce qui soutient cet objectif.
Choisissez l'outil qui réduit les frictions :
Avant de vous engager, vérifiez les paywalls autour des (souvent indiqués sur /pricing).
Choisissez un modèle qui dispose déjà des sections dont vous avez besoin (hero, grille de projets, à propos, contact). Faites un aperçu mobile avant de personnaliser.
Évitez les modèles qui reposent sur de lourdes animations, une navigation originale ou des mises en page complexes — vous perdrez du temps à corriger la réactivité et la lisibilité.
Limitez votre « marque » à quelques choix cohérents :
La cohérence donne l'impression d'un rendu sur‑mesure, même avec un modèle.
Utilisez un format répétable pour que l'on puisse parcourir rapidement :
Restez concis (2–5 phrases courtes) et commencez par votre visuel le plus fort.
Utilisez une structure simple qui répond rapidement à la question « dois‑je vous contacter ? » :
Gardez‑la lisible en moins d'une minute et placez une action claire à proximité (bouton email/contact, optionnellement « Télécharger CV (PDF) »).
Proposez 2 options (3 max) :
Ajoutez une courte phrase d'attente (délai de réponse, disponibilité) et indiquez votre localisation/fuseau horaire si vous travaillez à distance. Répétez le lien de contact dans le pied de page pour qu'il soit facile à trouver après le scroll.
Faites ces vérifications rapides :
Après la publication, partagez le lien sur LinkedIn, votre signature email et vos bios sociales, puis observez quels projets génèrent des clics et ajustez votre page d'accueil en conséquence.