Colophon

How this site is built.

The Garden is where essays, guides, and experiments will grow. While the first posts take root, here is the site itself, explained — the stack, the artwork, and the pipe that serves it.

Framework
Next.js 16 · App Router · static export
output: "export" — every page is prerendered to plain HTML at build time. There is no server anywhere in this site.
UI
React 19 · TypeScript 5
Client-side JavaScript is limited to what needs it: the hero parallax, the star field, and live GitHub star counts on Projects.
Styling
Tailwind CSS v4
CSS-first configuration — design tokens live in an @theme block, reusable pieces in @layer components. No tailwind.config file.
Type
Satoshi · JetBrains Mono
Both self-hosted through next/font, so rendering the page makes zero external font requests.
Images
sharp
A small build script converts source art to WebP. The hero went from a 2.0 MB PNG to a 243 KB WebP.
The hero artwork: a Van Gogh-styled night landscape with swirling sky, mountains, and a winding gravel path through grass

The landscape is a Midjourney generation — prompted toward a Van Gogh night-sky treatment of a zen garden, iterated across variant grids until one composition held up at full width.

On the home page it is never shown as a rectangle: CSS mask-image fades both edges so it emerges from behind the nav and dissolves into the page, a directional scrim protects only the text side, and a scroll-linked parallax moves it a few pixels. All motion respects prefers-reduced-motion.

Every color is sampled from the artwork, so the interface and the image read as one object. The accent is the hue of the grass, lifted in lightness until it clears WCAG AAA contrast on the page surface (10.8:1).

browser
Route 53 · DNS
CloudFront · CDN + TLS
S3 · static files

All AWS, no platform-as-a-service: DNS on Route 53, TLS and caching on CloudFront, and the exported HTML sitting in an S3 bucket. Deploying is one command — build, sync the output to S3, invalidate the CDN cache.

The source is public at github.com/KyleSkudlarek/kyleskudlarek.com.

An MDX pipeline — posts written in markdown that can embed live React components, so a guide can carry runnable code and a progress log can carry an interactive chart. Essays, guides, reviews, and experiments will all land here as they are written.