dilshan.dev
The source code of this personal digital garden and portfolio.
Lighthouse Score100 / 100
First Contentful Paint78ms
Total CSS Size< 14KB gzip
Zero Janky JS100%
System Overview & Motivation
dilshan.dev is an open-source personal digital garden crafted with deliberate restraint and content-first minimalism. Inspired by the legendary handcrafted web aesthetic, it features custom theme switching, harmonic palettes, server-rendered routes, and zero heavy UI framework bloat.
Key Architectural Highlights
- Next.js App Router architecture with instant static generation and minimal bundle size
- Harmonic dynamic palette switcher with synchronized light/dark mode tokens
- Vanilla CSS architecture with custom CSS variables and no utility framework dependencies
- Full mobile responsiveness and accessible keyboard navigation
- Integrated RSS feeds, code snippets, and dynamic project showcase
Technical Architecture & Data Pipeline
Built with Next.js 15, React 19, and TypeScript. All pages are statically generated with incremental revalidation where necessary. Styling is powered entirely by a bespoke CSS token design system.
Production Challenges & Edge Cases Solved
Achieving an authentic, non-glossy matte design while supporting dynamic multi-tone theme adjustments. Solved through HSL-calculated complementary harmonies and CSS custom properties.