Le cas Clara : un portfolio refait pour la servir.
Clara Cahours de Virgile est game designer, avec un intérêt pour le level design et le narrative design. Elle cherche un stage en game design du 20 juin au 31 août 2027. Elle a donné son accord pour que son portfolio soit montré.
Voir le nouveau portfolio de Clara (s’ouvre dans un nouvel onglet)
Avant : ce que le site demandait.
Son ancien portfolio était fait avec un outil de création de sites. Ce n’était pas un mauvais site : c’était le sien, avec ses moyens. Mais ses projets étaient peu mis en valeur.
Sur téléphone, voici ce que voit un visiteur : le nom de Clara, « Bienvenue dans mon univers ! », puis deux consignes : « À consulter de préférence sur ordinateur » et « Ctrl + Molette pour zoomer ».
Le reste du site : tout sur une seule page, très longue ; des vidéos qui restent cachées tant que les cookies ne sont pas acceptés ; 160 images, aux noms illisibles, avec des doublons et sans ordre.
Voir l’ancien portfolio de Clara (s’ouvre dans un nouvel onglet)
Cinq décisions. Pourquoi, et ce que ça change.
-
Le CV, le contact et LinkedIn, dans le site
Ce que j’ai décidé. Mettre le CV, un moyen de contact et le lien vers son LinkedIn directement dans le portfolio.
Pourquoi. Un recruteur qui reçoit un e-mail ouvre souvent le portfolio directement, sans passer par LinkedIn ni par le CV. S’il doit aller chercher le CV ailleurs, il peut ne pas revenir. Au début, je n’avais pas intégré le CV : c’est en y pensant que j’ai corrigé.
Ce que ça change. Un visiteur trouve le CV en 4 secondes et un contact en 7 (un test, voir les mesures), contre une recherche sans résultat après 3 minutes sur l’ancien site.
-
Les projets en jaquettes, dès l’accueil
Ce que j’ai décidé. Présenter les projets sous forme de jaquettes de jeux, visibles dès l’ouverture du site.
Pourquoi. Clara est game designer : la jaquette fait le lien entre son métier et son site. Elle donne accès aux projets tout de suite, et elle invite à descendre dans la page.
Ce que ça change. On peut ouvrir un projet dès le premier écran.
-
Des cartes ni trop pleines, ni trop vides
Ce que j’ai décidé. Faire de chaque jaquette une carte qui dit ce qu’est le projet (son type), le rôle de Clara et, quand il y en a, des chiffres. Le détail est sur la page du projet. Partout où un projet est nommé (cartes, titres, frise de son parcours), toucher le nom ouvre sa page.
Pourquoi. Avec les jaquettes seules, les recruteurs voyaient les projets sans voir ce qu’ils devaient voir : c’était trop, ou trop peu. Mon choix est un compromis : assez pour savoir si on veut en voir plus, pas assez pour encombrer l’accueil.
Ce que ça change. Un visiteur sait en un regard ce qu’a fait Clara sur chaque projet, et peut entrer dans celui qui l’intéresse, d’où qu’il vienne dans la page.
-
Les autres travaux rangés à part
Ce que j’ai décidé. Ranger les travaux additionnels (par exemple des analyses de jeux vidéo) dans des catégories : un titre, une icône, un court descriptif, et un bouton du type « Découvrir… ».
Pourquoi. Clara voulait aussi montrer ces travaux. Or, d’après un message qu’elle m’a transmis, des recruteurs ne voyaient pas bien ce qu’elle présentait par rapport au poste visé et se perdaient dans son profil. Nous avons compris que ces travaux pouvaient faire concurrence aux projets. Les ranger à part garde les projets au premier plan, sans cacher le reste.
Ce que ça change. Les projets restent ce qu’on voit d’abord ; les autres travaux restent accessibles à qui les cherche.
-
Des images triées et adaptées à chaque écran
Ce que j’ai décidé. Trier 160 images (retirer les doublons, renommer, mettre dans l’ordre), puis préparer chaque image en plusieurs tailles : téléphone, tablette, ordinateur.
Pourquoi. Charger une image d’ordinateur sur un téléphone était un des problèmes de départ : la page est plus lente et plus lourde pour rien.
Ce que ça change. Un téléphone ne charge que l’image faite pour lui.
Et aussi
Le site existe en français et en anglais. Le thème clair ou sombre suit celui du navigateur. Les polices sont hébergées avec le site, et les icônes sont en SVG (nettes à toutes les tailles, légères). Un lien partagé affiche une illustration et un descriptif. Les moteurs de recherche reçoivent des données structurées et une adresse de référence (canonical).
Je n’écris aucun effet chiffré pour cette liste : tant qu’il n’est pas mesuré, c’est un choix, pas une preuve.
Après : le même téléphone.
On voit en un regard qui elle est (game designer), ce qui l’intéresse (level design, narrative design) et ce qu’elle cherche (un stage, avec les dates). Les projets, le CV et le contact sont à portée de pouce.
Le site existe aussi en anglais, et son thème clair ou sombre suit celui du navigateur.
Voir le nouveau portfolio de Clara (s’ouvre dans un nouvel onglet)
Ce que j’ai mesuré.
Les scores. Rapports PageSpeed Insights du 16 octobre 2026 (nouveau site : 21 h 56 ; ancien site : 22 h 06), sur la page d’accueil de chaque site. En mobile, l’outil simule un téléphone Moto G Power sur une connexion 4G lente.
| Sur mobile | Ancien site | Nouveau site |
|---|---|---|
| Performance (score) | 53 * | 98 |
| Accessibilité (score) | 96 | 100 |
| Bonnes pratiques (score) | 100 | 100 |
| Référencement (score) | 92 | 100 |
| Temps avant l’affichage du contenu principal | 9,3 s | 1,7 s |
| Temps avant le premier affichage | 7,1 s | 0,9 s |
| Vitesse d’affichage (Speed Index) | 7,1 s | 4,1 s |
* 53 sur le rapport joint ; l’ancien site a donné entre 53 et 66 selon les passages (la fenêtre de cookies, détectée ou non par l’outil, change le résultat). Le nouveau site a donné 98 à chaque passage.
| Sur ordinateur | Ancien site | Nouveau site |
|---|---|---|
| Performance (score) | 93 | 100 |
| Accessibilité (score) | 96 | 100 |
| Bonnes pratiques (score) | 100 | 100 |
| Référencement (score) | 92 | 100 |
L’ancien site était déjà correct sur l’accessibilité, les bonnes pratiques et le référencement. Là où l’écart est net, c’est la vitesse sur mobile. Un score d’accessibilité de 100 ne veut pas dire que le site est accessible à tous : l’outil ne vérifie qu’une partie des critères.
Trouver le CV et un moyen de contact
Le 16 octobre 2026, à 10 h 15, une personne a testé les deux sites sur tablette, l’ancien en premier. Sur l’ancien, elle a arrêté d’elle-même après 3 minutes de recherche, sans avoir trouvé ni le CV ni un moyen de contacter Clara. Sur le nouveau, elle a trouvé le CV en 4 secondes et un moyen de contact en 7, en comptant depuis l’apparition de la page.
C’est un seul test, avec une seule personne. Une observation, pas une statistique. Comme elle avait déjà vu l’ancien site, elle savait ce qu’elle cherchait en arrivant sur le nouveau : cela joue en faveur du nouveau. Je le refais avec d’autres personnes, en tirant l’ordre au sort, et je mettrai cette partie à jour.
Ce qui reste à améliorer sur le nouveau site, en mobile
La vitesse d’affichage (Speed Index, 4,1 s), des ressources qui bloquent l’affichage (environ 730 ms), des images qui pourraient être plus légères (environ 92 Ko) et des images sans largeur ni hauteur déclarées.
Les rapports, à télécharger
Je ne les affiche pas en entier : le tableau ci-dessus donne les chiffres, et les images sont à télécharger.
La ligne « Navigation agentique »
PageSpeed affiche aussi une ligne « Navigation agentique » (ancien site : 1 sur 2, nouveau : 2 sur 2). C’est une catégorie expérimentale de l’outil, qui compte des vérifications réussies et pas un score sur 100 ; je ne la mets pas dans les tableaux.
Ce que Clara en dit.
« J’ai eu la chance de travailler avec FGAMER768 pour la création de mon portfolio, et je suis vraiment contente du résultat !
« À la base, j’avais créé mon portfolio sur un outil de création de sites. Le site était fonctionnel et accessible, mais il ne mettait pas forcément mon travail suffisamment en valeur. L’objectif était donc de repenser mon portfolio pour mieux présenter mes projets, mes compétences et surtout attirer l’attention des recruteurs. FGAMER768 s’est vraiment démené pour trouver la meilleure manière de valoriser mon travail et rendre mon portfolio plus professionnel et convaincant.
« FGAMER768 est quelqu’un de très disponible, à l’écoute et investi dans ce qu’il fait. Tout au long du projet, il m’a régulièrement tenue au courant de son avancée et des modifications apportées, ce que j’ai beaucoup apprécié.
« Il prend le temps d’écouter les retours et les critiques constructives, tout en sachant défendre ses idées et expliquer ses choix. On sent qu’il a vraiment envie de bien faire les choses et de trouver les meilleures solutions.
« Ce que j’ai aussi beaucoup apprécié, c’est que son travail ne se limite pas à rendre un site joli. Il réfléchit à son efficacité, à son optimisation, à l’expérience utilisateur et à la pertinence du contenu, notamment pour les recruteurs. Il apporte également des conseils sur la rédaction et la présentation des projets. C’est un vrai travail de fond, pas simplement une belle façade !
« Au-delà de ses compétences, FGAMER768 est quelqu’un de très gentil, sérieux et agréable avec qui travailler. J’ai vraiment apprécié notre collaboration et je le recommande avec plaisir ! »
Ce projet allait plus loin que l’offre standard.
Je suis allé de la refonte jusqu’à la recréation du site, avec des éléments sur mesure. Les textes viennent de Clara : je ne rédige pas à la place de la personne. Je me suis occupé des titres, et nous avons relu et ajusté le tout ensemble.
Pour un cas comparable (de 121 à 200 images à trier), l’offre standard donne : Essentiel 189 €, Recommandé 229 €, Complet 269 €, sans la rédaction ni les éléments sur mesure.