Exploring the Key Features and Architecture
A deep dive into the core features that power this application. From the minimalist design philosophy to the performance optimizations under the hood.
🏗️ Architecture Overview
This site is built on top of Next.js App Router, leveraging the latest React Server Components model. The architecture separates concerns cleanly — server-rendered pages for content, client components only where interactivity is needed.
🎨 Design Philosophy
The design follows a dark-first, minimalist approach. The color palette is anchored around zinc tones with selective accent colors per section — orange for Docs, purple for Writing, blue for Tools.
Docs
#f97316
Writing
#a855f7
Tools
#3b82f6
⚡ Performance Features
Static Generation (SSG)
Content pages are pre-rendered at build time, served as static HTML for maximum speed.
Server Components by default
No JavaScript is shipped to the client unless explicitly needed, reducing bundle size.
Geist Font (variable)
Self-hosted variable font from Vercel — single font file covers all weights without extra HTTP requests.
Image Optimization
Next.js <Image> component automatically converts to WebP and applies lazy loading.
Automatic Sitemap
sitemap.ts generates sitemap.xml dynamically so search engines can index all pages.
🚀 Deployment Pipeline
The site is deployed on Vercel with automatic deployments triggered on every push to the main branch. The workflow is enforced via a custom PowerShell script:
# 1. Run lint & type check
npm run lint
# 2. Commit with Conventional Commits format
git commit -m "feat(docs): add key features doc"
# 3. Push → triggers Vercel deployment
git push origin main🛠️ Tech Stack Summary
| Layer | Technology | Purpose |
|---|---|---|
| Framework | Next.js 16 | App Router, SSG, RSC |
| Language | TypeScript | Type safety |
| Styling | Tailwind CSS v4 | Utility-first CSS |
| Font | Geist (Vercel) | Variable font |
| Deployment | Vercel | Edge CDN, CI/CD |
| Git Hooks | Husky | Pre-commit lint |