Personal Website

A modern, performant personal website to showcase my work, write technical blogs, and share resources.

🧠 Overview

This project is the first version of my personal website, designed to serve as a central hub for my technical portfolio, blog posts, and curated resources. The site is clean, responsive, and optimized for performance — and it's built to scale as I grow.

🚀 Goals & Challenges

I aimed to build a site that:

Communicates my personal brand clearly
Enables me to share technical insights through blog posts
Showcases detailed project case studies with code and demos
Offers a smooth and modern user experience
Uses a scalable, component-driven architecture
Includes a reliable, accessible contact system

🛠️ Tech Stack & Tools

Built using a modern frontend stack:

Next.js 15 (App Router) – React-based framework with file-based routing and layouts
TypeScript – For type safety and scalable code
Tailwind CSS – Utility-first styling with complete design flexibility
shadcn/ui – Accessible and composable component library
Framer Motion – For subtle yet smooth animations
MDX – Write content with JSX and Markdown
react-hook-form + Zod – Flexible form handling with robust validation
EmailJS – Serverless email handling for contact form submissions
Sonner – Lightweight toast notifications
pnpm – Efficient package manager

🔍 Key Features

📝 MDX Blog

MDX-powered blog with support for JSX in Markdown
Syntax highlighting for code blocks (coming soon)
Fully responsive, readable design
Easy content editing from local MDX files

💼 Project Case Studies

Detailed breakdowns of selected projects
Live demos and GitHub links
Optimized image previews
Reusable project card components

📚 Resources Section

Curated tools, libraries, and references I use
Categorized for easy navigation
Periodically updated

📬 Contact Form

Validated using Zod + react-hook-form
EmailJS integration for seamless delivery
Loading states and toast notifications (Sonner)
Accessibility features and keyboard navigation

🧩 Implementation Highlights

Dark/Light Mode with system preference via next-themes
App Router layouts for flexible page structures
View Transitions API for smooth route changes
Image optimization, lazy loading, and code splitting
A11y-focused: Semantic HTML, keyboard support, and ARIA labels
Component-driven: Reusable design patterns using shadcn/ui

🔮 Future Improvements

Planned upgrades and ideas:

Syntax highlighting in blog (Shiki or rehype-prism)
Tag-based blog and project filtering
Auto-generated OG images for SEO
Dynamic sitemap and RSS feed
Better analytics integration

📎 References & Inspiration

Thanks for reading — this is just the beginning. I’m excited to keep evolving the site and sharing more along the way.