The source code of my personal website and blog, built with modern web technologies.
- Framework: Next.js 15 with React Server Components and App Router
- Content: MDX with mdx-bundler
- Styling: Tailwind CSS with custom design system
- Typography: Inter and Fraunces fonts via Next.js fonts
- Data Validation: Zod for type-safe content schemas
- Analytics: Plausible (self-hosted) for privacy-friendly analytics
- Image Processing: Sharp for optimized images
- Code Highlighting: Rehype Prism Plus
├── app/ # Next.js App Router pages and layouts
│ ├── layout.tsx # Root layout with fonts and metadata
│ ├── page.tsx # Homepage
│ ├── about/ # About page
│ ├── lab/ # Blog posts and projects showcase
│ ├── photography/ # Photography portfolio
│ ├── feed.xml/ # RSS feed generation
│ └── sitemap.ts # Dynamic sitemap generation
├── cms/ # Content Management System
│ ├── mdx-parser.ts # MDX file parsing and processing
│ └── schema.ts # Zod schemas for content validation
├── components/ # Reusable React components
│ ├── content/ # Content-specific components (MDX, articles)
│ ├── forms/ # Form components
│ ├── layout/ # Layout components (Container, etc.)
│ ├── theme/ # Theme and dark mode components
│ └── ui/ # UI primitives (buttons, links, etc.)
├── content/ # MDX blog posts and articles
│ ├── *.mdx # Individual blog posts with frontmatter
├── lib/ # Utility functions
│ ├── clsx.ts # Tailwind class merging utility
│ ├── sluggify.ts # URL slug generation
│ └── formatters.ts # Date and text formatting
├── public/ # Static assets
└── styles/ # Global CSS styles
- Content Discovery: MDX files are read from the
/contentdirectory - Frontmatter Parsing: gray-matter extracts metadata
- Schema Validation: Zod ensures content structure integrity with type safety
- MDX Compilation: mdx-bundler processes MDX with custom components
- Enhancement: Rehype plugins add code highlighting, auto-linking headings, and more
Each blog post includes structured frontmatter:
---
title: 'Post Title'
publishedAt: '2024-01-01'
summary: 'Brief description for SEO and previews'
tags: ['article', 'technology']
image:
src: '/static/images/post.jpg'
alt: 'Image description'
width: 1200
height: 630
showAsHeader: true
---- Images: Optimized Next.js images with automatic sizing
- Links: Enhanced links with external link indicators
- Code Blocks: Syntax highlighted with copy functionality
- Interactive Elements: Custo 7D58 m React components for demos
- Static Site Generation: Pre-rendered pages for optimal performance
- RSS Feed: Automatically generated from blog posts
- Sitemap: Dynamic sitemap including all content
- Photography Portfolio: Image gallery with EXIF data
- Dark Mode: System-preference aware theme switching
- Reading Time: Calculated for each blog post
- Tag System: Categorized content with slug-based URLs
- SEO Optimized: Meta tags, Open Graph, and structured data
Create a .env file similar to .env.example).
$ git clone https://github.com/vnglst/koenvangilst.nl.git
$ cd koenvangilst.nl
$ npm install
$ npm run devVisit http://localhost:3000 to see the site in development mode.
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLintnpm run type-check- TypeScript type checking