Une entrée qui respecte les lecteurs
Le minuteur ne compte que quand l'onglet est visible : le passage touche les gens qui lisent vraiment. Le survol fige mon avatar, un clic ouvre le jeu. Les pages suivantes gardent un petit bouton dans le coin.
Mon site · Boucle de croissance · 2026
Un portfolio qui se joue, conçu comme un moteur de croissance.
Les portfolios se lisent. Le mien se joue aussi : ma carrière en jeu de vol vertical, de Shanghai en 2012 à Barcelone aujourd'hui. Chaque élément est une étape d'une boucle de croissance : être trouvé, être joué, être rejoué, être partagé, et faire venir le joueur suivant.
RôleConcept, game design et boucle de croissance. Code écrit avec Claude
CalendrierOctobre 2026
OutilsCanvas, JavaScript, Web Audio, Vercel
PérimètreJeu, avatar, musique, carte de score, liens de défi, entrées
6 époquesDe Shanghai en 2012 à Barcelone en 2026
15 sDe lecture avant que mon avatar passe, une fois par visite
1 lienAmène le joueur suivant sur un score à battre
Contexte
Un portfolio qui fait tourner ce qu'il vend.
Je construis des moteurs de croissance pour des entreprises B2B. Mon site les montrait en études de cas, comme tous les portfolios. Je voulais qu'il en fasse aussi tourner un.
Alors ma carrière est devenue un jeu, et chaque étape du jeu, une étape d'une boucle qui fait venir le visiteur suivant.
L'enjeu
Trouvé par le plus grand nombre, sans déranger personne.
Un jeu caché ravit les rares qui le trouvent. Ici, la plupart des visiteurs devaient le trouver, le lancer en un geste, vouloir rejouer et vouloir montrer leur score.
Et les gens venus lire, recruteurs et clients, ne devaient jamais être interrompus deux fois.
Le système
Une boucle, quatre étapes.
Chaque étape a son mécanisme, et la dernière nourrit la première.
Trouvé
Une fois par visite, après 15 secondes de lecture ou un défilement franc, mon avatar traverse la page : Lassé des sites classiques ? Attrapez-moi si vous pouvez.
Joué, puis rejoué
Un geste et la page se fond dans le jeu. Shanghai est facile, puis chaque époque accélère, et les points récompensent les combos, les passages de justesse et les époques sans faute.
Partagé
À la fin, ou après un game over, le joueur reçoit une carte de score, avec un selfie en option, et un lien qui ouvre le jeu sur le score à battre.
Trouvé
Le passageUne fois par visite
Un bouton discretSur les pages suivantes
Pour les curieuxD'autres entrées
Jamais deux fois par visite
Joué
Un gesteLa page se fond dans le jeu
Shanghai, 2012Un premier niveau à la portée de tous
Six époquesToujours plus vite
Environ 2 minutes par partie
Rejoué
Combos, passages de justesseJusqu'à ×5
Quatre bossRiposter pour gagner
Un record persoGardé sur l'appareil
Un joueur passif tombe à la 2e époque
Partagé
Une carte de scorePrête pour un fil ou une story
Ma réactionSelfie en option, jamais envoyé
Un lien de défiS'ouvre sur le score à battre
Puis quatre quêtes, et LinkedIn
6 époquesDe 2012 à 2026
25Skills à attraper
4Boss dans la finale
15 sDe lecture avant le passage
ClaudeCanvasWeb AudioVercel
Ce que j'ai construit
Quatre pièces qui font la boucle.
La page se fond dans le jeu
Les lettres grossissent jusqu'à se fondre, un vide s'ouvre depuis le clic, j'apparais, GAME ON. Les visiteurs qui préfèrent moins d'animation arrivent directement dans le jeu.
Une courbe pensée pour rejouer
Chaque époque va plus vite que la précédente, jusqu'à plus de deux fois la vitesse de Shanghai, avec des murs mobiles, des paires et des portes. Un joueur passif tombe à la deuxième époque. Continuer coûte des points : un vrai record demande de l'entraînement.
Une carte qui amène le joueur suivant
Points, rang, mon avatar et l'adresse du site, prêts pour un fil, une story ou un message. Le selfie est pris et assemblé sur le téléphone, jamais envoyé. Le lien porte le score : un ami arrive sur un défi.
Résultats
En ligne en octobre 2026. Les chiffres arrivent.
La boucle est en place. Prochaine étape : mesurer combien de visiteurs lancent une partie, combien partagent une carte, et combien de nouveaux joueurs amène chaque lien de défi.
6 époquesD'un premier job à Shanghai à Barcelone
1 gesteDe n'importe quelle page du site au jeu
0 envoiLe selfie ne quitte jamais le téléphone du joueur
Outils
Les outils, et comment je les ai utilisés
JeuCanvas HTML et JavaScript : aucune bibliothèque, aucun fichier image
AvatarDessiné en code d'après une photo, dans le style plat de mon design system
MusiqueUne boucle electro minimale et sombre générée en direct avec Web Audio, une couche par époque
PartageMenu de partage natif sur téléphone, caméra frontale pour le selfie, tout dans le navigateur
EntréesUn passage par visite, un bouton discret, une transition cinématique, une version sans animation
Construit avecClaude, GitHub, Vercel
Le moteur
Ce sur quoi le site tourne désormais
↻Une boucle de recommandationCarte de score, selfie, lien de défi
▤Une couche Play dans mon design systemAvatar, couleurs, mouvement, son, et où il n'apparaît jamais
✓Une entrée qui respecte les lecteursUne fois par visite, après 15 secondes de lecture
→Un chemin vers une conversationQuatre quêtes, puis LinkedIn
Étude de cas suivante
Lire l'étude de cas