How this site stays fast without trying hard

Most slow sites aren't slow because of one big mistake. They're slow because of a hundred reasonable-looking defaults. This site makes the opposite bet: the fastest work is work that never happens in the visitor's browser.

Every page is built ahead of time#

There is no database behind these pages. Projects and posts live in the repository as Markdoc files, and every route is generated when the site is built. A visitor gets a finished HTML file from the CDN, the cheapest possible request.

// app/(site)/blog/[slug]/page.tsx
export const dynamicParams = false;

export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

dynamicParams = false means an unknown slug returns a 404 straight away instead of attempting a render.

Publishing without a server#

Content is edited through Keystatic, a CMS that writes to git instead of a database. In production, saving a post commits it to GitHub, which triggers a rebuild. It feels like WordPress to use, but visitors never touch the CMS.

Code highlighting costs zero JavaScript#

The code blocks on this page are highlighted by Shiki at build time. The browser receives pre-coloured HTML, with no highlighter bundle and no flash of unstyled code.

Client JavaScript only where it earns its place#

Everything is a React Server Component by default. Only a few small pieces run in the browser:

• the contact form, for pending and error states
• the project filter on /projects
• one effects script for scroll reveals and the spotlight hover on cards

The mobile menu is a native <details> element, so it works before any JavaScript loads.

Measuring instead of claiming#

The footer of every page shows that page's real Largest Contentful Paint, layout shift and JavaScript weight, measured in your browser with the PerformanceObserver API. If this site were slow, it would say so.