What started as practice

I offered to build Nathaniel a website to get better at design and web development. He hadn't asked. He runs Phiri Media, a marketing and creative agency in Malawi, and I'd worked under his direction once before, on the brand identity for Ascend Spatial Labs, before either of us had formalised anything. I told myself it was low stakes, somewhere to practise things I wasn't comfortable building yet. By the second week I'd stopped calling it practice.

Phiri Media's brand sheet had orange, blue, cream and a bold monogram. The layout I reached for first was the one I'd been defaulting to for a while: an eyebrow label over a big headline, a three-column services grid, a testimonial carousel. Phiri Media's tagline is "Clarity before creativity," and a site that looked like every other agency's would have contradicted it on the first screen. So every line, layout and component had to earn its place. I cut an eyebrow label from the hero three times, on three different pages, before it stopped coming back. "Innovation that defines brands" sat on the Services page for about a day until I replaced it with "Clarity, made visible." "Let's build something" stayed on the Contact page until I noticed it was the one headline on the site that could belong to any company. It became "Start a project."

Nathaniel wanted a way to qualify a lead before they reached the contact form: organisation type, what they need, budget tier, timeline. I built it, it worked, and every time something broke I patched the symptom. Hydration flash on load? Add a mounted check. Wizard popping up on every page reload? Add a localStorage flag. Flag causing a different bug two messages later? Swap it for a session flag. Each patch held until the next bug. The wizard was managing its own open state and deciding for itself when to appear, when it needed to be a controlled component that opened only when someone clicked "Work With Us." I moved that decision into a URL query parameter, ?intent=start, and let the wizard render open or closed from that. None of the earlier bugs came back, because the state causing them was gone.

Nathaniel wanted case studies to feel like an "organised mess," with the sketches, mockups and process left visible. I built a fragment schema in Sanity with six small content types (a note, an image, an image pair, a rough sketch, a process beat, a pulled quote), each with a size, rendered into a CSS grid with grid-auto-flow: dense. The plan was that setting the order and sizes in the CMS would be enough, and the grid would lay itself out. The first real case studies came out with gaps here and there and fragments out of alignment, and the order on the page wasn't the order I'd entered. dense fills an earlier gap with whichever later fragment fits, so a quote I'd placed after an image could end up above it. The idea still holds up. The code doesn't yet, and I want to try a different approach to it.

Then I tried it on a phone. My first move was to shrink the same grid, and it looked terrible: cards too narrow for their content, text cut off, images cropped into nonsense. Next I tried a pinch-and-zoom canvas, the full desktop layout at full scale inside a fixed window you could pan and zoom around like a Miro board. It looked striking in a screenshot. It also needed a label at the bottom of the card, "pinch & drag to explore," and no other part of the site had to explain how to use it.

I still think the canvas was clever. I don't think clever was the job.

Someone reading a case study one-handed on their phone, walking somewhere, shouldn't have to learn a gesture to see the work. Stacking the fragments vertically on mobile, full width with normal scrolling, would fix that. As I write this, the canvas is still live. Some days I open it on my phone and think it earns its place. Other days I think I'm holding on to it because I built it.

The site went live at phirimediagroup.org on September 3rd, and Nathaniel and I both posted it on LinkedIn, WhatsApp and a few other platforms. A fellow developer complimented the site. Most of the questions were about services, and one person asked about motion graphics. Motion graphics are on the services list, but the question came from the movement on the site itself, the word rotating in the hero and the tagline typing itself into the nav.