beneficialmedia.com

A portfolio is a product with one job: to make the right person want to talk to you. So this one gets what a product gets. I designed it and built it, and I measure it and fix what I find.

In May 2026 I replaced my 2020 site, built on Gatsby 2 and React 16, both past end of life, with a new one in Next.js 16, React 19, TypeScript, Tailwind CSS 4 and MDX on Vercel. I design it in Figma and build it with an agent in the editor, and it deploys on every merge: about 700 commits and 251 merges to main since the rebuild.

The problem

The old site carried a brand I liked and couldn't maintain. Its body face was Futura PT, a paid font. Its orange failed contrast as text. Its page transition was a plugin. The goal was to keep the character, rebuild the foundations, and make the brand impossible to drift from.

The brand, engineered into a system

The Beneficialmedia mark sets the palette, and the palette didn't pass. The brand orange, #d7733c, has 3.1:1 contrast on the light background, which fails WCAG AA for text. I kept it for marks and large shapes, and added a text-safe orange, #b65825, at 4.56:1.

Type keeps the old voice without the license: Jost, a free geometric face in the spirit of Futura, for body text, and Source Sans 3 for display.

Every color, contrast pair, type step, radius and motion value lives in one token file. It isn't documentation. Before every build, a contract test checks that the CSS uses exactly those tokens in both themes, and that every listed text and background pair still meets AA. Drift fails the build. The same file is published as JSON and CSS on the design language page, and an MCP server serves it to AI agents, so an agent building with this system reads the same tokens the site runs on.

Motion that costs nothing

The home page's vine grows from the brand's sprouting-vine motif. A script generates it once as two static SVG files, which the page uses as CSS masks filled with theme tokens, so it follows light and dark without a second asset. There's no canvas and no animation loop. It sways with transforms only, on the compositor, with no layout or repaint.

The rest follows the same rule. The menu opens with a clip-path reveal from its button. Pages settle into place with a short CSS animation. Gallery images warm up in idle time at low priority, and not at all when the visitor has Data Saver on. Videos only stream once they're opened. Under reduced motion, every animation is instant.

Measured, then fixed

On November 12, 2026 I audited the live site with Lighthouse. On desktop, the home page scored 100 for performance, accessibility, best practices and SEO. On a throttled phone profile it scored 93, and the largest paint arrived at 3.3 seconds.

The cause was the page transition. The animation library rendered every page's server HTML at zero opacity and only revealed it once the JavaScript had loaded and run. The content was in the HTML early, invisible. On a slow phone, that meant seconds of blank screen.

I moved the entrances to CSS, which starts with the first paint. Text that can be the largest paint now settles into place without ever being transparent. On the home page, the vine was then the largest paint, because a CSS mask is only found after the stylesheet, so its two small files are now preloaded.

Measured the same way before and after, on a local production build with Lighthouse's devtools throttling, median of three runs:

• Home page: largest paint from 4.7 seconds to 1.7 seconds, now arriving with the first paint.
• A case study page: from 4.3 seconds to 1.7 seconds. One of the three runs before the fix recorded no largest paint at all, because the content never painted while visible.
• Lighthouse mobile performance score (its default, simulated throttling): from 88 to 94 on the home page, and from 87 to 91 on the case study.

Accessible by default

AA contrast is enforced by the build, not checked by hand. A skip link leads every page. Focus rings take each section's accent color. The image viewer is a native dialog with arrow keys, swipe, and focus returned on close. Every image has alt text that describes it, separate from its caption. Case studies and essays have an Immersive Reader button.

The same audit flagged two issues. Case study bodies jumped from the page title straight to third-level headings, so I added the missing level for screen readers, and the case study I tested went from 98 to 100 for accessibility. Lighthouse also reported low contrast for the home page's introduction over the vine. I measured the rendered pixels instead: the worst case is 5.6:1, above AA, because the vine fades out behind the text through a mask the audit can't see.

Two sites, one codebase

The same repository builds vibr.art. One build flag turns it into Vibr's site, with its own name, icon, routing and security headers, including a per-request content security policy for the app. The portfolio build never runs that code.

Content as data

Case studies are MDX with typed front matter. My résumé is generated from the same data and prints to one Letter page as a PDF. The build fails when a page asks for a fact that doesn't exist, such as a skill that isn't in the skills list or a case study that isn't there.

Outcome

• The largest paint on a throttled phone fell from 4.7 to 1.7 seconds on the home page, with no visual change.
• The brand's tokens and AA contrast are checked on every build, in both themes.
• One design system serves the site, its published guide, and AI agents through MCP.

Each of those is a decision I made as a designer and shipped as an engineer.