A way in that respects readers
The timer counts only while the tab is visible, so the flyby reaches people who are actually reading. Hovering pauses my avatar; a click opens the game. Later pages keep a small chip in the corner.
My own site · Growth loop · 2026
A portfolio you play, built as a growth engine.
Portfolios ask to be read. Mine also asks to be played: my career as a vertical flight game, from Shanghai in 2012 to Barcelona today. Each part of it is one stage of a growth loop: get found, get played, get replayed, get shared, and bring in the next player.
RoleConcept, game design and growth loop. Code written with Claude
TimelineOctober 2026
StackCanvas, JavaScript, Web Audio, Vercel
ScopeGame, avatar, music, score card, challenge links, ways in
6 erasFrom Shanghai in 2012 to Barcelona in 2026
15 sOf reading before my avatar flies by, once per visit
1 linkBrings the next player to a score to beat
Context
A portfolio that runs what it sells.
I build growth engines for B2B companies. My site showed them as case studies, like every portfolio does. I wanted the site to run one too.
So my career became a game, and every step of the game became a stage of a loop that brings in the next visitor.
The challenge
Found by most, without bothering anyone.
A hidden game delights the few who find it. Here, most visitors had to find it, start it in one tap, want to replay it and want to show their score.
And the people who came to read, recruiters and clients, could never be interrupted twice.
The system
One loop, four stages.
Each stage has its own mechanism, and the last one feeds the first.
Found
Once per visit, after 15 seconds of reading or a deep scroll, my avatar flies across the page: Tired of classic websites? Catch me if you can.
Played, then replayed
One tap and the page melts into the game. Shanghai is easy, then every era gets faster, and points reward combos, close calls and clean eras.
Shared
At the end, or after a game over, the player gets a score card, with an optional selfie, and a link that opens the game on the score to beat.
Found
The flybyOnce per visit
A corner chipOn later pages
For the curiousMore ways in
Never twice in a visit
Played
One tapThe page melts into the game
Shanghai, 2012A first level anyone passes
Six erasFaster every time
About 2 minutes a run
Replayed
Combos, close callsUp to ×5
Four bossesFire back to win
A personal bestKept on the device
A passive player falls in era two
Shared
A score cardReady for a feed or a story
My reactionOptional selfie, never uploaded
A challenge linkOpens on the score to beat
Then four quests, and LinkedIn
6 erasFrom 2012 to 2026
25Skills to collect
4Bosses in the finale
15 sOf reading before the flyby
ClaudeCanvasWeb AudioVercel
What I built
Four pieces that make the loop.
The page melts into the game
Letters swell until they merge, a void opens from the click, I appear, GAME ON. Visitors who prefer less motion go straight to the game.
A curve built for replays
Each era is faster than the last, up to more than twice the speed of Shanghai, with moving walls, pairs and gates. A passive player falls in the second era. Continuing costs points, so a real best score takes practice.
A card that brings the next player
Points, rank, my avatar and the site's address, ready for a feed, a story or a message. The selfie is taken and composed on the phone and never uploaded. The link carries the score, so a friend lands on a challenge.
Results
Live in October 2026. The numbers come next.
The loop is in place. Next, I measure how many visitors start a run, how many share a card, and how many new players each challenge link brings.
6 erasFrom a first job in Shanghai to building in Barcelona
1 tapFrom any page of the site to the game
0 uploadsThe selfie never leaves the player's phone
Stack
Tools and how I used them
GameHTML canvas and plain JavaScript: no library, no image file
AvatarDrawn in code from a photo, in the flat style of my design system
MusicA dark minimal electro loop generated live with Web Audio, one layer per era
SharingNative share sheet on phones, front camera for the selfie, all in the browser
Ways inA once-per-visit flyby, a corner chip, a cinematic transition, a reduced-motion fallback
Built withClaude, GitHub, Vercel
The engine
What the site now runs on
↻A referral loopScore card, selfie, challenge link
▤A Play layer in my design systemAvatar, colours, motion, sound, and where it never appears
✓A way in that respects readersOnce per visit, after 15 seconds of reading
→A path to a conversationFour quests, then LinkedIn
Next case study
Read the case study