The Workbench Build Log

Building the Hyperwoven Frontend with React and Vite

A walkthrough of the decisions behind the public-facing site — why React 19, how Cloudflare Workers SPA deployment works, and what accessibility-first actually means in practice.

Why Astro

When it came to choosing a framework for the Hyperwoven public site, the answer was almost obvious once I framed the question correctly: this is a content site, not an application. Most pages are static. The blog needs Markdown. The performance bar is high.

Astro ships zero JavaScript by default. Components only hydrate if they need to. For a site where the primary goal is to communicate clearly and load fast, that constraint is a feature.

The React integration lets me drop in interactive islands — a mobile menu, an animated counter — without committing the entire site to a client-side rendering model.

The Tailwind Setup

The design uses a custom brand colour scale (a red palette built around #e52020) and a carefully chosen dark palette. Tailwind’s extend block made this straightforward to codify, and the JIT engine means only the utilities actually used end up in production CSS.

Custom component classes — the glass nav, the gradient text — are defined in a global CSS file using @layer components and @layer utilities, keeping them tree-shakeable in principle while being easy to maintain in practice.

Accessibility From Day One

Every heading follows a logical hierarchy. Every interactive element is keyboard-accessible. Colour contrast has been verified at WCAG 2.2 AA across both light and dark sections.

The nav uses aria-current="page" to indicate the active route. Focus styles are explicit — not the default browser outline, but a custom ring that works against both the dark nav and light page backgrounds.

The goal is that the site passes an axe audit before it’s considered done, not after.

What’s Next

Content collections are in place for Workbench posts. The next step is a proper article template and a listing page that surfaces posts by category. After that: the Services and Pricing pages, and a contact form that doesn’t collect anything it doesn’t need.

More from The Workbench

Build logs, accessibility notes, and thinking out loud.

View all articles