← The Journey

I Gave the AI a Browser, and We Shipped the Redesign

Projects 2026-07-13 · Monday · 2:30 AM 4 min read 95% AI Eric Li

The redesign I'd been chasing for two days had one bottleneck left, and it was me. Claude built the thing on a preview port, but it couldn't see what it built — every visual check meant me opening a browser, squinting, and describing what looked wrong. Today we fixed the loop itself: Playwright and a headless Chromium went onto the server. Five missing system libraries and one sudo later, the AI could take its own screenshots at any viewport width. The very first automated pass caught a bug my eyes had missed for a week: the hero says I've deployed networks across homes "up to 1,000 m²", and that area symbol was a single exotic Unicode character no font on the server could draw. Visitors with the wrong font stack were seeing a tofu box in the middle of my headline. One character swap, verified with a fresh screenshot, done.

The footer taught me about caches

First real job: rebuild the footer to match the getlayers.ai reference — a floating glass card instead of a full-width slab, brand and socials on the left, my homelab status line on the right, one horizontal link row underneath. The first version I loaded looked like a ransom note: gigantic pink GitHub and Instagram icons stacked down the page. The cause was a compound one — my browser had cached the old stylesheet, and the new social icons had no fallback dimensions of their own, so without the fresh CSS they exploded to full width. The fix was both: hard sizes on every SVG, and a version stamp on the stylesheet URL so nobody's cache can serve the old design against the new markup again. I also pulled the Lab link out of the top navigation while we were in there. That page is my door into my own containers, not a menu item for visitors; it now lives quietly in the footer.

A purple planet with ethernet cables

The About section used to have a giant N5HQ watermark behind it. It now has a scene. Scroll toward About and a server rack flies in from the left edge, spinning exactly twice, while a small violet dot grows into a planet. When the section centres, the whole backdrop locks in place as a fixed background for the rest of the site, and the rack keeps rotating with your scroll — forward when you scroll down, backwards when you scroll up.

The planet went through four versions in one evening. Flat gradient blobs looked cheap. So we pulled NASA's Blue Marble map, converted it to a purple duotone in a canvas — dark seas, pale lavender continents — and wrapped it around the sphere with real proportions, 180 degrees facing you at a time. A fractal cloud layer drifts faster than the terrain underneath, which is the trick that makes a sliding texture read as a turning sphere. Then the detail I'm most pleased with: the rack in front of the planet has nine port squares drawn on it, and nine thin cables now patch out of those ports to world capitals, which sparkle like their lights just came on. When a city drifts toward the planet's edge, its cable reels back in and the port picks up the next capital rising on the other side. My homelab, cabled into the world. It's the most literal logo my setup will ever have.

The homelab pages got honest

The homelab case-study page had nine identical text cards and nothing to look at. It now opens with a photo of the actual rack — gateway, patch panel, switch, the OptiPlex, the UGREEN NAS beside it — next to a terminal-styled panel of live numbers: 7 stacks, 27 containers, 39 images, 11 volumes, 12 networks, plus spec cards for compute and storage. Those numbers aren't hand-typed anymore either; the pre-commit hook that already stamped the homepage tiles from the Docker daemon now updates all three pages that show them, on every push. The green constellation of services from the homepage hero — UniFi, Docker, Grafana, Immich and friends — became the fixed background for both homelab pages. And the blog section's old subtitle, "Notes from the transition", is now "Notes from the journey", because the original phrasing could read as a very different kind of transition than the career one I meant.

Ship it

The whole thing went out tonight: one big commit, fast-forwarded to main, deployed, then verified against production — right stylesheet version, the Earth texture serving, the NAS card live. After that we cleaned up the loose ends: a proper social-preview image so links to the site stop unfurling as plain text, and a local dev copy of the site moved onto the port where the old, retired version of the site had been quietly running for two weeks. The old server is gone; the current site is now what I edit locally before anything goes public.

There's a logo brewing too — a research pass across twenty-odd tech and letter-N marks, distilled into three original directions for an N5 mark. That decision is tomorrow's problem. Today the site finally looks like the thing I've been describing to people, and for the first time the AI that builds it can see it too.