Building this site: React, Vite, and zero CSS frameworks
Hand-drawn vibes, statically generated bytes.
Every few years I rebuild my personal site. It's a ritual — part spring cleaning, part excuse to try whatever stack I've been eyeing. This time the rules were simple: static output, markdown-driven, and not a single utility class in sight.
The stack, briefly
- React + Vite — because I enjoy writing components and Vite's dev server is unbeatable.
- A custom Vite plugin that reads
content/blog/, parses frontmatter, and hands the posts to React as a virtual module. - A tiny prerender script that renders every route to plain HTML at build time. No framework, no magic.
- Hand-written CSS — custom properties, soft shadows, big rounded corners. It took longer than Tailwind would have, and it was worth every minute.
// the whole "CMS", more or less
const { data, content } = matter(raw)
posts.push({
slug,
category: data.category ?? folderCategory,
starred: Boolean(data.starred),
html: md.parse(content),
})
Why not Astro / Next / $FRAMEWORK?
Honestly? I wanted to understand every byte that ships. The entire build pipeline here is a hundred lines of code I can hold in my head. When something breaks — and it will — I know exactly where to look.
The best abstraction is the one you can delete without fear.
The design philosophy
Light mode only, because the sun exists. A warm paper background instead of sterile white. Fraunces for headings because serifs have feelings, and a palette that looks like a box of crayons. Squiggles, stars, and stickers — the web used to be fun.
More on the design system in a future post. For now: view-source is a love language.