Back to Projects

Personal Website & Blog

A modern personal website built with Next.js, featuring a blog, portfolio, and work experience showcase.

Next.jsTypeScriptTailwind CSSMDX

Personal Website & Blog

This website you're currently viewing! A modern, performant personal website built with the latest web technologies.

Features

Blog System

  • MDX-powered blog posts with syntax highlighting
  • Reading time estimates
  • Tag-based categorization
  • SEO optimization with structured data

Portfolio Showcase

  • Project listings with detailed descriptions
  • Technology tags and filtering
  • Links to live demos and source code

Work Experience

  • Timeline-based work history
  • Skills categorization
  • Downloadable resume

Technical Implementation

Stack

  • Framework: Next.js 14+ with App Router
  • Language: TypeScript for type safety
  • Styling: Tailwind CSS for modern, responsive design
  • Content: MDX for rich, component-based content

Key Features

File-based Content Management

All content is stored as MDX files, making it:

  • Easy to version control
  • Simple to update
  • Portable and future-proof

SEO Optimization

Implemented comprehensive SEO features:

  • Meta tags for each page
  • OpenGraph and Twitter Card support
  • JSON-LD structured data
  • Automatic sitemap generation

Performance

  • Server-side rendering for fast initial loads
  • Static generation for blog posts and projects
  • Optimized images using Next.js Image
  • Minimal JavaScript bundle

Lessons Learned

Building this website taught me:

  1. The power of Server Components in Next.js
  2. Effective content management with MDX
  3. SEO best practices for modern web apps
  4. Building maintainable component libraries

Future Improvements

Potential enhancements:

  • Search functionality across blog posts
  • Newsletter subscription
  • Comment system for blog posts
  • Dark mode toggle
  • Analytics dashboard

This project demonstrates my ability to build modern, production-ready web applications with attention to performance, SEO, and user experience.