Overview
Axxellance is the studio’s own website — the place where we demonstrate everything we sell to clients. Portfolio case studies, service detail pages with deep technical copy, a long-form journal, career listings, legal pages, and a multi-field contact form — all served through a single Astro codebase that builds to a fully static site in under three seconds.
A studio site has a unique constraint: it must practice what it preaches. Every decision — from framework choice to page weight to asset loading — is visible to the exact audience we’re trying to impress. There’s no room for the “the agency’s site is broken” irony.
The best advertisement for a web studio is its own website. It has to be fast, honest, and built with the same care we sell to clients.
The Problem
Most agency websites fall into one of two traps: they either use a heavy page builder that contradicts their performance pitch, or they spend so long perfecting the site that it never ships. We needed a third path — a site that is genuinely fast, genuinely content-rich, and genuinely shipped.
The content structure was also complex: five content collections (services, projects, journal, careers, legal), each with its own layout, navigation, and visual language. Service pages needed sidebar tables of contents with scrollspy. Project case studies needed results sections, testimonial blocks, and tech stack pills. The journal needed a reading-optimised layout with author bios.
Architecture
Content-first with Astro
The site is built on Astro’s content collections — a typed, file-based CMS that removes the need for a database or headless CMS. Each content type has a defined schema, and pages are generated automatically from the files in each collection. This makes adding a new service, project, or journal article as simple as creating a new markdown file.
Layout system
Each content type has a dedicated layout with its own CSS scope. Service pages use a two-column layout with a sticky sidebar table of contents and scrollspy tracking. Project case studies use a single-column narrative layout with callout blocks, stack pills, and results grids. Journal articles use a reading-optimised single column with author bios.
Shared components
The PageHero component is used across all page types — a consistent entry point with breadcrumb, eyebrow, title, and lead paragraph. The CTA banner, project cards, and journal cards are all shared components that maintain visual consistency without duplicating markup.
Contact form with serverless worker
The contact form collects name, email, company, budget, services, and message — sending the data to a Cloudflare Worker that handles both the admin alert email and the user auto-reply. No server, no database, no third-party form service.
Tech Stack
The framework is Astro — chosen for its zero-JS-by-default output, content collection system, and flexible component model. TypeScript provides type safety across the codebase. Styling uses vanilla CSS with modern features like @layer, custom properties, and container queries. The contact form is powered by a Cloudflare Worker handling email dispatch.
Results
The site builds to a fully static output in under three seconds, delivering 33+ pages with zero runtime JavaScript on most pages. The contact form is serverless and cost-free at low volume. Content management requires no CMS login — just a markdown editor and a git push.
Client Word
We built the site we'd want to be hired to build. It's fast, honest, and it ships — which is exactly what we tell our clients to aim for.