AutomatedPanda

Why I rebuilt it

The old site was about automation, because that's where I started, with Make.com scenarios, Airtable bases and the glue between tools. Then the work changed. The more I built, the more of it was software (applications, APIs, data models, interfaces), and the site was still describing the person I used to be.

So I rebuilt it with a different brief to myself. It should say software development, and it should show what I can build, not just claim it. Anyone can list "attention to detail" as a value. I think a site you can scroll, poke and break says a lot more than that.

The hero

The homepage opens on the AutomatedPanda logo drawn as a particle field. It's about 2,900 particles on a desktop screen, rendered in raw WebGL in two passes (the dots, then their glow). The panda is sampled from the real logo and dithered by brightness, so the face is dense and the black patches stay empty, the way a printed halftone would look.

Scrolling blows it apart in 3D and re-forms it as BUILT TO LAST, with the last word cycling through WORK and SCALE. None of that is a pre-recorded animation. The progress is read from the scroll position every frame, so scrolling back up puts the panda back together at whatever speed you scroll. The text lands flat while the panda stays three-dimensional, and I did that on purpose, because letters you have to read shouldn't tilt away from you.

Move the pointer over it, or press and hold on a phone, and a lens opens onto the "source", which is the particles as green, falling data. It only opens where there's something to show, never over empty page.

It also knows when to stop. A frame-rate guard measures how the device is actually coping and thins the field step by step if it struggles. If even that isn't enough, it settles into the same still panda that visitors with reduced motion see. So the homepage never stutters, and people with reduced motion still get the whole page.

Everything around it

The menu opens as a ring from the button you pressed, and on a desktop it previews every section before you click, with the pricing tiers cycling, the newest work as a before and an after, and a project brief typing itself out.

Page changes grow the next page out of the point you clicked, with the same ring on its edge, and a link inside the menu opens a hole from the word itself.

The brief builder on the contact page turns a rough enquiry into a structured project brief as you type. The same source produces the PDF you can download and the email I receive, so the three can never disagree.

The business card is a 3D card you can drag, flick and spin, with the contact details on the back and a real vCard download.

The hidden parts

These are my favourite bits, and you're meant to find them yourself, so I'll only give a few clues.

Press the backtick key anywhere for a terminal. It answers real commands about the site, and a few it doesn't list. The Konami code turns the page into its own engineering drawing, dimensions and all. And if you land on a page that doesn't exist, the panda falls apart into a 404, and pressing space starts an arcade game with five bosses, ending, at wave 100, with the Bugged-Out Panda.

Nothing invented

One rule runs through all of it. Nothing on this site is invented. Every figure on a case study comes from the work itself, every testimonial is quoted word for word, and the rule goes further than the copy, into what the particles spell and what the terminal prints. It's a lot of work to keep to, and it's the thing I'd most like a client to notice.

The site is built on Next.js, TypeScript and Tailwind, with Supabase and Resend behind the contact form. There's no animation library, so every piece of motion here is the site's own code, with hundreds of tests behind it.