Building a Personal Site with Next.js

•Development

When I decided to rebuild my personal website, I wanted to create something that was both minimal and functional. Here's a technical overview of how this site is built.

Technology Stack

  • Next.js 15 - For server-side rendering and static generation
  • React Server Components - For improved performance and reduced client-side JavaScript
  • TailwindCSS - For utility-first styling
  • MDX - For writing content with enhanced Markdown
  • next-themes - For dark mode support

Design Principles

The site follows several key design principles:

  1. Content First - Typography and spacing optimized for reading
  2. Progressive Enhancement - Works without JavaScript, enhanced with it
  3. Dark Mode - Respects system preferences with manual override
  4. Performance - Minimal JavaScript, optimized assets

Implementation Details

Styling System

The color system uses CSS custom properties for theming:

:root {
  --background: #ffffff;
  --foreground: #171717;
  --muted: #737373;
  --accent: #0066FF;
}

This allows for easy theme switching and consistent colors throughout the site.

Content Management

Posts are written in MDX, which allows for:

  • Rich markdown content
  • Embedded React components
  • Code syntax highlighting
  • Custom components

Stay tuned for more posts about the technical details of this site!