Gordon Tu How a picture became me

5:00 left 01 / 25

How a picture became me

How I animated my own portfolio picture. My personal website, and the little picture at the top of it.

1 You

2 Need

3 Go

4 Search

5 Find

6 Take

7 Return

8 Change

How I animated my own portfolio picture.

My personal website, and the little picture at the top of it.

It took multiple phases to get there.

Each one learned from other people’s minimalist portfolios.

But this is everyone else’s website. I want more fun.

And I had a message that isn’t about my work. So it got a gray bar.

So I looked at myself again.

This is me: 134 pixels, and a pair of round glasses.

But it isn’t me. I move.

And what makes me different is the round glasses.

I tried ChatGPT, in 3D and 2D.

I put in pictures I like, and had it describe their style.

I stayed 2D.

To stay in character, fit the site’s vibe, and be subtle.

Wait a minute. What do these glasses do?

They came off. What could I do with them?

Then I saw the gray bar.

It became a scrambled line, and my glasses decipher it.

What if I move my glasses somewhere else?

I gamified my own portfolio.

ChatGPT drew the keyframes.

Different expressions, again and again.

Three made it.

Looking up, looking down, and wondering.

Then I passed them to Seedance.

To see how they might move.

On TapNow, five ways to generate.

  1. 1 Text to image
  2. 2 Image to image
  3. 3 Text to video
  4. 4 Image to video
  5. 5 Video to video

I burned $20.

And I got the idea of what I wanted to show.

Then I went back to Opus.

Which is what I should have done in the first place.

After several hours, I got this.

The picture bends from one drawing to the next, and follows your pointer.

Now it’s me.

Hold my glasses above me, and I sweat. Under my chin, I panic.

Then I added an intro.

Something to watch while the page loads.

One pen. One line at a time.

Then a brush, and a blink. Seven seconds, once a day.

It took me ten days.

Every version: what stayed, what I threw away, and why.

Back to the page.

One in four took my glasses off.

Almost four times each. 35 of them found the hidden line.

GSAP picked it as Site of the Day.

Go see the other great portfolios on the GSAP Showcase.

Here’s my website. Go take my glasses off.

gordontu.com · Open to full-time roles and projects

I’m Gordon.

I’m a design engineer based in the Bay Area. I’ve worked on design systems and AI workflows at VISA and turned complex research into visualization tools for Yale and UC Berkeley.

I use d3.js, three.js+GLSL/TSL, React&Svelte, QGIS, Blender etc.. Claude Code & Codex across my toolkit to design and build interactive 2D&3D experiences.

Alright, you really wanna know ha: I practice Chen- and Yang-style tai chi, play acoustic guitar, and I’m learning tango with my retired neighbor. Ajridof, knh tkkjlk wknhk khum hk: I grkkrikk Chko- kod Yknd-srkjk tki kuj, blkk kkhusrik phlfkr, khp I’w jkktniuq tkoqh mlfu wk fkritkp okjpoghf. Ajridof, knh tkkjlk wknhk khum hk: I grkkrikk Chko- kod Yknd-srkjk tki kuj, blkk kkhusrik phlfkr, khp I’w jkktniuq tkoqh mlfu wk fkritkp okjpoghf.

Phase 1
Phase 1
Phase 2
Phase 2
Phase 3
Phase 3
Almost ready to go
Almost ready to go
The gray bar
The gray bar
3D
3D
2D
2D
The style, in words
The style, in words
From the GSAP team
From the GSAP team

214 visited gordontu.com

56 took my glasses off

35 read the hidden line

PostHog · Sep 26 to Oct 6 · my own visits left out

avatar.png · 134 px