Halftone portrait of JR Smith with a butterfly

About this site

Before

I registered jr.dev for a stupid amount of money 7 years ago. Since then, it’s just been a hand-wave emoji:

The old jr.dev: a waving hand in the middle of a blank white page
Hi.

I kept starting and stopping different redesigns. A version used Truchet tiles to draw out my name and bio. Another rewrote my profile copy every 10 minutes in a different author style, in the early days of AI. Lots of ideas, but there was no pressure to finish any, since I wasn’t advertising myself for anything. It always felt like more of a playground than a portfolio.

The 2026 version

On a trip to Lake Tahoe in 2024, I took this photo in a butterfly tent:

Me in sunglasses, with a monarch butterfly on my cheek
Another example of a stay very still activity.

I’ve been using it as a profile pic since. I rarely take decent photos, so I seized on this one.

While I was watching a video of a man disassembling and servicing a 40 year old mechanical watch, I had an idea: what if the butterfly messed the site all up? Like in the hit Ashton Kutcher film Butterfly Effect, an element of consequential chaos added to a relatively short and boring personal site might be cool.

The first attempt was more ambitious than what has launched.

Goals

I haven’t had a personal site in so long. I wanted to use it as an opportunity to play with newer stuff I haven’t had a chance to use in my day job.

New and shiny

  • View Transitions
  • Variable fonts
  • Pure TypeScript web components
  • WebGPU w/ webgl fallback
  • Newer CSS stuff like cascade layers and light-dark()
  • New CSP restrictions

And, of course, I was about to start a job hunt. I’m sure most employers don’t look at personal sites, but I always did when I was about to interview someone. I didn’t feel comfortable applying anywhere without a new site.

So, here’s what I made:

2026.jr.dev

The old version

What it did

View Transitions Moving between pages played a wipe: a bar with an accent edge crossed the screen in 850 ms, with the old page drifting under it. Forward links wiped one way, back links the other. A script registered every custom element before the first paint, so the browser's snapshot held the real page, not an empty shell.

The 2026 version mid-wipe: an orange bar crosses the home page as it slides away

Chaos Click the butterfly five times in a second and a meter starts to charge, a little less with each click. Stop, and it lets go one wave at that multiplier. Past x2 the letters change fonts, past x5 the background dots, past x10 the face, past x15 the paint. At x20 the page blows away and leaves a reset button.

A charged wave crosses the 2026 home page: the face breaks into dots and the letters change fonts

Preloader On a fast or cached load you never saw it. If the page was not ready after 200 ms, a camera flashed and a Polaroid slid out, and the photo developed with the real download progress, never ahead of it. Then the paper fell away and the portrait slid into the page: the same element, with the same WebGL contexts, the whole way. After 6 s it gave up and showed a printed portrait.

What the preloader shows.

Debug A DEBUG switch turned the home page into a fake dev tool, open to anyone: eight columns of live numbers, ASCII gauges, and 12 s sparklines for the frame loop, the input, the waves, the charge, the text, the colors, the assets, and the page.

What the debug panel shows.

Sweep Each wave started by turning the page's last settled look into pixels and blowing them away from the butterfly like dust, to show the new page under it. A Web Worker drew the snapshot off the main thread, and up to 180 thousand particles on the GPU did the rest.

The x20 sweep: the 2026 home page blows away from the butterfly as dust

Why it stopped

I painted myself into a corner with the layout and effect layers on the homepage. There were few options to make it all work on mobile gracefully. I also thought the whole thing had become a bit heavy from easter egg feature creep. I was spending too much time making compromises. I needed to start fresh.

A friend and I were talking about old ASCII art and it eventually led me to ASCIIxGPT. I was inspired by their shaders, broke down my existing site into hunks I could remix, and began sculpting.

The remix

The portrait remains, creepily peering down while you scroll. There’s a view transition in place, much more subtle than the original. The butterfly effect, now with less chaos, pairs well with the ASCII shader.

Combining home and about into a single landing page, shifting all the boring technical talk to a separate page, keeps the content focused. The nerdy stuff is here for those who want it.

I also made the choice to ship with source maps on. Normally I would link to a public repo, but I’ve moved all of my hosting to a private home network. I miss the days when you could view source and know how something worked. Shipping source maps is a step toward bringing that back.