roger.
← Projects
#nextjs#typescript#mdx

Personal Portfolio

This site. A blog, projects showcase, shelf, and static pages built with Next.js 16, Velite MDX, and an Ember Orange design system.

A personal corner of the internet to write, document projects, and collect things.

Stack

  • Framework: Next.js 16 with App Router
  • Content: Velite + Zod (type-safe MDX at build time)
  • Styling: Tailwind CSS v4 + shadcn/ui
  • Syntax highlighting: Shiki (build-time, zero runtime JS)
  • Fonts: Inter (UI), JetBrains Mono (code), Fraunces (titles)

Design

Ember Orange — a warm dark-default palette built around #F97316. Cards use a glass effect in dark mode and solid white in light mode.

Why

Every developer should have a place to write. This is mine.

Build Log

  1. Scaffolded Next.js 16 with TypeScript, Tailwind CSS v4, and a multi-stage Dockerfile for portability.

    Added shadcn/ui (New York style), Ember Orange design tokens (light + dark), Inter/JetBrains Mono/Fraunces fonts, and a dark-default theme toggle.

    Wired the Velite MDX pipeline with Shiki dual-theme syntax highlighting and next-intl scaffolding (English-only, locale prefix hidden).

    Built the blog: list, detail, tag filter pages, RSS feed, and build-time draft/scheduled filtering.