Site portfolio : que montrer, comment l’organiser et ce que prouve un cas réel

Ce qu’un site portfolio fait et qu’un profil social ne fait pas

Avant d’engager un graphiste, un photographe ou un petit studio, un client cherche d’abord la personne. Un site portfolio répond à cette recherche : vos travaux, votre rôle et un moyen de vous joindre, à une adresse qui vous appartient. Un profil social montre des images semblables, mais dans l’ordre et le format choisis par la plateforme. Un PDF en pièce jointe n’a pas d’adresse publique et vieillit dès le lendemain.

Le guide de démarrage SEO de Google indique que le moteur trouve les pages surtout grâce aux liens depuis des pages déjà explorées, et qu’aucun site n’a la garantie d’entrer dans son index. Le site seul n’amène donc pas de clients. Il donne à chaque lien partagé, de la signature d’e-mail à un profil sur une place de marché, un endroit où arriver. Et ces pages, vous les maîtrisez.

Ce que contient une page de projet crédible dans un portfolio

L’unité d’un portfolio est la page de projet, pas l’image. Une bonne page répond à quatre questions : quelle était la mission, qu’avez-vous fait vous-même, qu’en est-il sorti et comment le vérifier. En équipe, nommez clairement votre part : direction artistique, mise en page, retouche ou code.

Un résultat sans période ni source passe, aux yeux d’un acheteur expérimenté, pour de la décoration. Le guide de Google sur le contenu utile, fiable et axé sur l’humain propose un test valable hors de la recherche. Il demande si la page présente l’information d’une manière qui donne envie de lui faire confiance, par exemple avec des sources claires, et s’il est évident qui a créé le contenu et comment.

Étiquetez chaque projet pour ce qu’il est. Une commande client, un produit maison et un concept créé pour montrer une compétence sont légitimes, mais ne prouvent pas la même chose, et les confondre coûte la confiance. Demandez par écrit à chaque client si vous pouvez montrer le travail et ses chiffres, et gardez la réponse. Quelques projets étiquetés et bien expliqués en disent plus qu’un mur de vignettes.

Les pages et les versions linguistiques d’un portfolio en ligne

Presque tout site portfolio repose sur les mêmes pages : un accueil qui dit en un écran qui vous êtes et ce que vous faites, un index des projets avec filtres, une page par projet, une page à propos, vos prestations et un contact. Les filtres comptent : qui cherche du packaging ne veut pas de photos de mariage. Donnez à chaque projet une adresse faite de mots, que le guide de Google préfère aux URL composées d’identifiants aléatoires.

Si vos clients lisent plusieurs langues, il faut une version de chaque page par langue, pas un bouton de traduction. Le guide de Google sur les versions localisées demande des annotations hreflang où chaque version se cite elle-même ainsi que toutes les autres ; sans liens réciproques, les balises sont ignorées. La valeur x-default désigne la page de repli quand aucune langue ne correspond. L’aide aux webmasters de Yandex décrit les mêmes éléments link et indique que Yandex n’accepte plus le fichier Sitemap pour les versions linguistiques ; le balisage dans le head sert donc les deux moteurs.

Les bases techniques qu’un modèle de portfolio peut vous cacher

Un portfolio est lourd : grandes images, vidéo, animation. Le guide de web.dev définit le Largest Contentful Paint comme le temps de rendu du plus grand élément visible dans la fenêtre : image, bloc de texte ou vidéo. L’objectif est de 2,5 secondes ou moins au 75e centile des chargements, séparément sur mobile et ordinateur. Les deux autres Core Web Vitals sont l’Interaction to Next Paint, 200 millisecondes ou moins, et le Cumulative Layout Shift, 0,1 ou moins.

Le texte doit se lire sans scripts. Les bases du SEO JavaScript de Google jugent le rendu côté serveur ou le pré-rendu toujours une excellente idée : le site est plus rapide pour les utilisateurs et les robots, et tous les bots n’exécutent pas JavaScript. Google indexe la version mobile d’un site, explorée par un agent pour smartphone : la mise en page du téléphone passe donc en premier. Les tutoriels d’accessibilité du W3C demandent une alternative textuelle pour les images informatives et un alt vide pour les décoratives.

Un lien canonique indique à Google quelle adresse afficher quand des pages se ressemblent ; sa documentation qualifie rel=canonical de signal fort, mais le moteur décide lui-même ce qui est un doublon. Un sitemap liste les pages qui comptent, mais selon la documentation de Google sur les sitemaps, il ne garantit ni leur exploration ni leur indexation. Pour l’animation, MDN décrit prefers-reduced-motion, qui détecte un réglage de l’appareil visant à réduire les mouvements non essentiels : ces animations peuvent gêner les personnes atteintes de troubles vestibulaires.

Le cas tarasovvitalii.com : le portfolio d’un fondateur en quatre langues

tarasovvitalii.com est le site personnel de Vitalii Tarasov, fondateur de VITON13, conçu et réalisé par le studio VITON13 pour son propre compte : un produit maison du studio, pas une commande client. En ligne depuis le 23 septembre 2026, il existe en anglais, russe, espagnol et chinois. Ses 21 projets portent chacun une étiquette : un site client, dix produits maison du studio et dix concepts. Chaque page de cas présente ses chiffres sourcés et un bloc sur ce que le cas ne prouve pas.

Chaque édition compte huit types de pages : accueil, index des projets, une page par projet, à propos, prestations, actualités, contact et messages, plus une 404. Cela fait 116 fichiers HTML ; les 108 pages destinées à la recherche figurent dans le sitemap, tandis que les messages et la 404 en sont exclus. On écrit depuis la page après connexion avec VITON ID, ou l’on laisse son e-mail dans un formulaire pour invités, sans compte.

Comment le portfolio du fondateur a été construit et mesuré

Le site est en HTML, CSS et JavaScript simples, produits par un générateur statique en Node. Chaque page est rendue à l’avance dans chaque langue, si bien qu’un robot lit tout le texte sans scripts. L’animation s’arrête quand le système du visiteur demande moins de mouvement. Le 24 septembre 2026, Lighthouse 13 a donné à l’accueil 99 en performance et 100 en accessibilité, bonnes pratiques et SEO, sur mobile comme sur ordinateur. Sur mobile, il s’est chargé en 25 requêtes et 1,6 Mo, LCP à 2,0 secondes, sans blocage ni décalage de mise en page.

Le même jour, les 108 pages du sitemap ont été rendues dans Chrome à 390 px de large. Chacune avait un seul H1, une URL canonique pointant vers elle-même, hreflang vers les quatre éditions et x-default, Open Graph et JSON-LD. Les 872 images portaient un alt, vide sur les vignettes placées près de leur titre ; aucune page ne défilait de côté, et les 182 cibles de liens internes ont répondu sans erreur. Tout n’est pas réglé : 107 titres sur 108 sont uniques, et un titre chinois qui répète l’anglais reste à corriger.

Ce que le cas tarasovvitalii.com ne prouve pas

La page du cas annonce elle-même ses limites. C’est le site du fondateur, réalisé par le studio pour son propre compte : il ne montre pas le travail sur le brief d’un client. Lancé le 23 septembre 2026, le site n’a encore aucune donnée de trafic, de positions ou de demandes, et le cas n’en revendique aucune. Les chiffres de recherche du showreel appartiennent à un autre cas, SB Excursions.

Les scores Lighthouse viennent de tests de laboratoire de l’accueil, un seul jour ; refait quelques minutes plus tard, le test sur ordinateur a donné 95 en performance. La documentation de Chrome sur la notation des performances dans Lighthouse explique qu’une grande partie de ces variations ne vient pas de l’outil, mais de conditions changeantes : routage du trafic, extensions du navigateur, antivirus. web.dev ajoute que le laboratoire ne remplace pas le terrain, et que son objectif de LCP vise des chargements réels.

Une page dans le sitemap est une invitation à l’exploration, pas une preuve d’indexation. Le guide de Google renvoie à l’outil d’inspection d’URL de la Search Console pour voir une page comme Google la voit, et prévient que certains changements prennent quelques heures et d’autres plusieurs mois. L’accès depuis la Chine continentale n’a pas été testé, et la messagerie dépend des services Firebase de Google. Votre portfolio mérite la même honnêteté.

Préparer un site portfolio : modèle ou développement sur mesure

Commencez par la matière, pas par le design. Choisissez de 8 à 20 projets que vous avez le droit de montrer, notez votre rôle dans chacun et obtenez si possible l’accord écrit du client. Rassemblez fichiers d’origine, photos et vidéo en pleine qualité, et chaque chiffre avec période et source. Un site portfolio en deux langues, ce sont deux jeux de textes, pas un seul et un bouton.

Un modèle de créateur de sites suffit pour une douzaine de projets en une langue, si ses mises en page leur vont et si vous vérifiez vous-même vitesse, textes alternatifs et version mobile. Un développement sur mesure se justifie quand le travail demande sa propre présentation, quand plusieurs langues exigent un hreflang correct ou quand le site a besoin d’une messagerie ou de comptes. Le studio VITON13 conçoit et réalise ce type de site. Le guide en lien compare les plateformes.