A Portrait That Listens to My Spotify and Judges Your Browser
Written September 27, 2026, about 8 minutes to read.
If you open the home page now, the portrait doesn’t just sit there anymore. It says hi, dresses up for whatever I’m listening to, takes a good look at you and tells you what it thinks, then does the Omarchy bit it always did. Every couple of seconds, by itself.
A made-up visit: someone in Germany, on Windows, at 2 am, while I play arabesk.
I built all of it with Claude Code over one long Sunday, mostly from my phone. It started with the Spotify widget in my footer breaking.
Two songs at the same time
Since March the footer shows what I’m playing on Spotify, through a small Cloudflare Worker (the site itself is static, Hugo on GitHub Pages). One morning my laptop showed one song, my phone another, and neither was what I was playing.
Two things had broken at once. Spotify now kills refresh tokens six months after you approve an app, and mine was from March. And the worker kept the last track in Cloudflare’s cache, which lives per data centre, so each one kept showing whatever it had seen last.
A Durable Object fixed the second one: one small object with its own storage that every data centre asks, on the free plan. The first one has no fix, only a reminder. Every Monday the worker checks the sign-in, and two weeks before it runs out it emails me a one-time link. One tap on my phone and it’s good for another six months.
Making the portrait react
The portrait is a painting of me in front of a blue and white mosaic. You used to tap it for “btw I use Omarchy”, and then “deal with it” dropped 8-bit sunglasses and a cigarette onto my face, my favourite thing on the whole site. So what if it reacted to the music, and to you?
The rules I gave Claude: the original painting first, then the music, then you, then the Omarchy bit. It plays by itself and a tap skips ahead. The about page stays calm. No video, all code, and the thinking happens on the server. Funny, passive aggressive, a bit dark.
What kind of music is this?
Spotify doesn’t tell small apps the genre anymore, not since February. So the worker asks MusicBrainz (tags like “anatolian rock” or “uzun hava”) and Deezer instead, remembers the answers, and a few rules turn them into one of about thirty moods. Best bug of the day: Deezer calls one album “Indie Rock/Rock Pop”, and the K-pop rule found “k pop” hiding in “rock pop”. For a few minutes I was dressed for K-pop.
More pictures of me
The portrait needed more than one face, so I dropped 25 photos of me into a folder: selfies, one at 3 am in bed, a Knicks jersey, an Ottoman sultan costume (don’t ask). Each one got its face found, scaled and turned so the eyes land exactly where the painting’s eyes are, and cut out. Eighteen made it. The first round painted them like the original:
Not very artsy, and some of the source photos are so bad it’s unbearable. A painting can’t hide a blurry phone photo, pixel art can. So everything but the original became pixel art: 80 pixels across (72 now, more on that below), 18 colours, skin matched to the painting, my own eyes sharpened, never drawn.
The first batch came out grey (my review: “Ewww”), so the colours get their punch back at the end now. Each picture is about 8 KB. The sultan is for Turkish classical, the Knicks jersey for hip hop, and me looking down from under the Space Needle is for Windows users.
The props, three times
The first props were pixel art drawn by hand. My feedback: “Wig looks stupid.”
Round two sculpted them. Each prop is a small 3D model written in code, lit from the upper left like every painting on this site, then pixelated. More than 70 of them, each pinned to the right spot on each picture: a hat band to the outline of my head, glasses to the pupils, a moustache to the corners of the mouth.
Then I saw them on my phone. A cowboy hat the size of a mushroom, a beret like a black pancake, a trumpet sticking out of my mouth like a gold arrow. “Omg how are any of those acceptable to you.” And: “be a bit more minimalistic.”
Round three: one prop per genre, baked flat like the deal-with-it shades. A moustache for arabesk, a cowboy hat for country, a cap for hip hop. Tears, a rain cloud and a beanie shaped like an onion didn’t make it. Instruments went into the mosaic instead of on top of me: jazz lays a saxophone into the tiles in small gold pieces, folk gets a guitar.
The bubble learned some manners too. After it covered half my face once (“how is this passing your quality check”), every line knows where my head is on that picture and stops before it.
The mosaic is a screen
The mosaic is about 900 tiles, and each one can change colour. They become the album cover, then the genre’s colours, then a radar sweep while the portrait looks at you, your flag (there are 187) and a clock with your time. They can also be the sea, smoke, or a green portal.
That’s the first real one, and it got something wrong. The catalogues call Deniz Tekin “folk”, so my rules gave her a moustache and a joke about songs always being about a mountain. She’s a singer-songwriter, not türkü.
Two favourites
Fixing that made it personal. Deniz Tekin and Duman are my two favourite Turkish acts, so they get their own bits. Deniz means sea: the tiles turn into the footer’s sea, day or night, and a paper boat floats by. Duman means smoke: the cigarette comes out early and the tiles fill with smoke like a bar at 2 am. “duman means smoke. so the cigarette stays. sorry mom”
Say my name
The first lines read like fortune cookies. My feedback: “it’s too obvious that it’s written by AI. Be more human biatch.” So now it talks the way I text, lowercase, a bit of Turkish, a bit rude. “müslüm baba is on, pass me a cigarette and a tissue.” And for any song from 1986: “same as me. we both still work, mostly.”
After the Omarchy bit someone else takes over. Breaking Bad: “say my name.” in a pixel pork pie hat. Rick and Morty: drawing me as them was awful, so Rick himself stands next to me on a green portal, followed by Morty, Pickle Rick, Mr. Poopybutthole or a Meeseeks. “i’m mr meeseeks, look at me! someone asked me to center a div. existence is pain”
And philosophers, each with my answer. “schopenhauer: life swings between pain and boredom. i built a website that covers both.”
Now, you
It only knows what every website gets anyway: roughly where you are, your time, your browser. Nothing is stored, and it tells you so: “i forget you the second you leave. like everyone else does”. Some of what you might get:
- Windows: the tiles turn PowerShell blue and spin, and somewhere an AI agent is on its 38th PowerShell attempt. For you.
- LinkedIn: a green #OpenToWork ring. “the ring is a joke. mostly”
- France: “no, i’m not wearing a beret for you”. Next line: “…ok fine”.
- 2 am: a nightcap, and “go to sleep. seriously. i’m a website, i have to be here, you don’t”
- Around Sosnowiec, where I live: “you’re like 10 min from me. don’t come over”
The next night
The next night I asked Claude to look at what people had been building with Opus 5.5 in its first week and come back with ideas. Five made it in.
The eyes stopped following you. They used to follow the cursor, and it was a little creepy. Turns out that’s a known thing: crisp moving irises inside a painted face is exactly the mismatch that makes faces eerie. A portrait that looks straight ahead already looks at whoever is there, so now it just does that. Tap it and it glances at you, then looks away, like a person would.
A light follows you instead. Sunlight by day, lamplight at night, falling on the painting from wherever your cursor is. It’s five glazes, baked once from a depth map of the painting and faded in and out. On a phone it rests where the sun is in Poland right now.
The tiles were never glued down. Now and then a few dozen of them lift out of the mosaic, fly over my head as a V of gulls and click back into their gaps. The idea is stolen from a mosaic film someone made with Opus 5.5. “turkish tiles, polish grout. of course they don’t stay put”
Sharper pixels. 72 across instead of 80, so each one is exactly four screen pixels on a laptop, and they don’t breathe any more. The smooth breathing was quietly blurring every one of them.
The sea at the bottom has a real sky now: the weather over Sosnowiec and the moon’s actual phase. That one got its own short post.
What it’s made of
Claude Code wrote the code and most of the lines; I pointed and complained until it looked right. Cloudflare Workers with one Durable Object on the free plan, Spotify plus MusicBrainz and Deezer for the genres, MediaPipe, rembg and OpenCV for the pictures, Depth Anything for the light, a tiny numpy 3D renderer for the props, Open-Meteo for the sky, Hugo for the site, and Playwright for hundreds of test screenshots with Spotify stubbed out.
Come back later
The reel is written fresh for every visit and follows whatever I’m playing, so tomorrow’s portrait probably isn’t today’s. If you catch me in a cowboy hat, I’m not going to explain.