I'm a DevOps engineer who started as a UI designer, so my portfolio had to show both sides. I designed it, built it in Next.js 16 and React 19, and run it on my own server behind Caddy and nginx. Everything below is on the live site.

The home page spells my name in 178 shipping containers. Hit "Knock it over", swipe across the yard or tap on a phone, and the boxes fall with real physics (Matter.js). Then a crane lifts each loose box back into its slot, the way Kubernetes brings a cluster back to its desired state, and the status line reads like one: drift detected, reconciling, 178/178 Ready. Each letter is a grid 12 rows tall, filled with 10, 20 and 40 ft containers. Hover a box for its ISO 6346 code, with a check digit that really checks out. With reduced motion on, it's simply the finished name, standing still.

The services section is a pipe a crew lays from design to prod: design, build, deploy, monitor, each with the tools I use for it.

Penwave gets its paper and forest green, the F1 RAG chatbot carbon and racing red, Nullify its Orchid theme. The dot after "AS." in the corner follows along. It reads one CSS variable, and a project page swaps it with :root:has([data-theme]) in the server-rendered HTML, so the right colour is there on first paint with no JavaScript. On hover, nav links mix the accent 80% with the ink, which lifts the home page's contrast from 3.28:1 to 4.66:1 and passes WCAG AA.

One page is a wall of my photographs, black-and-white architecture and a few colour shots, that you drag around. The whole site works at 390 pixels from the same components.

Pushing a vX.Y.Z tag makes GitHub Actions build the app, nginx and Caddy images on an arm64 runner (the server is an arm64 Ampere VM, so no emulation) and push them to GitHub's container registry. CI then SSHes in with a key that can run exactly one thing, deploy.sh, with the tag as its only input. The server pulls the images, waits until the containers are healthy, and CI checks that the home page and the CV answer 200. The server never builds, and rolling back is the same script with an older tag.

Caddy handles TLS and HTTP/3 and sets HSTS and a strict content security policy. Behind it, nginx allows 20 requests a second per visitor (burst 100) and answers a flood with 429 before it reaches Node.

Every container drops all Linux capabilities, the app runs as a non-root user on a read-only filesystem, and base images and GitHub Actions are pinned, so a rebuild is the same build.