writingdevlog

Building this site: React, Vite, and zero CSS frameworks

Reez Patel1 min read★ starred
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.