Skip to content
Ashish.
All posts
2 min read#nextjs#mdx#tailwind

Building this site

A short walkthrough of the stack: Next.js 15 App Router, MDX content pipeline, Tailwind v4, and a motion-driven minimal design.

I rebuilt this site to be fast, easy to maintain, and pleasant to write in. Here's the short version of how it's wired together.

Stack

  • Next.js 15 with the App Router and React Server Components
  • MDX via @next/mdx and next-mdx-remote/rsc for runtime compilation
  • Tailwind v4 with CSS-first theming (no tailwind.config.js)
  • Framer Motion for restrained scroll-in animation, gated by prefers-reduced-motion
  • rehype-pretty-code + Shiki for syntax highlighting at build time

Content pipeline

Every post is a single MDX file under content/blog/. Frontmatter drives the list page, sitemap, RSS, and OG image.

content/blog/example.mdx
---
title: "Post title"
description: "One-sentence summary."
date: "2026-05-04"
tags: ["nextjs"]
---
 
Your content here.

Design system

TokenValue
Primary#18181B
Accent#2563EB
Background#FAFAFA
DisplayArchivo
BodySpace Grotesk

Dark mode flips the surface tokens, not the accent. The page stays monochrome with one strong blue for emphasis — links, focus rings, eyebrow labels.

What's next

  • Drafts directory
  • Search across posts
  • Comment thread powered by GitHub Discussions