This personal website serves as my portfolio and digital home, showcasing my projects, blog posts, learnings, and recent coding activity through a GitHub-style commits tracking system.
Tech Stack
Core Architecture
- Framework: Next.js 15 with App Router
- Styling: Tailwind CSS v4 with shadcn/ui components
- Content: MDX with next-mdx-remote for blog posts and project documentation
- Typography: Inter (sans) and Playfair Display (serif) fonts
- Theming: next-themes for dark/light mode
- Package Manager: pnpm
Features
- Commits Tracking: GitHub-style contributions grid showing coding activity across projects
- MDX Content: Blog posts, learnings, and project documentation with frontmatter
- Email Integration: Resend for contact forms and newsletter subscriptions
- Form Validation: Zod schemas for type-safe form handling
- Code Highlighting: sugar-high for syntax highlighting
- Responsive Design: Mobile-first approach with Tailwind CSS
Key Features
Commits System
- GitHub-style contributions grid displaying commit activity
- Automated daily data backfill via GitHub Actions
- Interactive commit statistics and analytics
- Real-time data refresh every hour
- Project-specific commit breakdowns and streaks
Content Management
- Posts: Blog posts stored as
.mdx files with frontmatter metadata
- Projects: Project showcases with detailed documentation
- Learnings: Development notes and documentation
- Changelog: Project updates and feature releases
User Experience
- Clean, minimalist design with focus on content
- Dark/light mode support
- Fast loading with Next.js static generation
- SEO optimized with proper meta tags
- Contact form with email notifications
Architecture Highlights
The site follows Next.js App Router conventions with a clear separation of concerns:
/app - Route components following App Router patterns/components - Reusable UI components including shadcn/ui/content - MDX content files organized by type/lib - Business logic, data fetching, and utility functions/public - Static assets including images and commit data
Server actions handle email functionality, while the commits system leverages GitHub's public API for real-time coding activity tracking across featured repositories.