Personal Portfolio

This portfolio website showcases my work and blog posts using modern web technologies, with an interesting recursive twist - it includes its own documentation about how it's built. Built with Next.js 13+ and TypeScript, it features a clean, responsive design implemented with TailwindCSS, while also serving as a practical example of the technologies it documents.

Key Features

  • Dynamic content loading with MDX
  • Self-documenting MDX implementation
  • Dark mode support with system preference detection
  • Fully responsive design with TailwindCSS
  • SEO optimized with Next.js best practices
  • Type-safe development with TypeScript
  • Interactive code examples and syntax highlighting
  • Blog platform with markdown support

Technical Implementation

Core Architecture

The site uses Next.js App Router and Server Components for optimal performance, implementing the latest React server component patterns. Content is managed through MDX files, making it easy to write and maintain both projects and blog posts.

MDX Integration

The portfolio implements a sophisticated MDX setup that:

  • Uses remark-gfm for GitHub-flavored markdown support
  • Includes custom component mappings for enhanced typography
  • Supports dynamic content loading with Next.js
  • Features syntax highlighting for code blocks
  • Demonstrates MDX best practices through its own documentation

Content Organization

content/
  ├── blog/
  │   └── using-mdx-in-nextjs.mdx
  └── projects/
      └── personal-portfolio.mdx
      └── zubbah.mdx

Interactive Features

  • Theme switching with persistent preferences
  • Dynamic code demonstrations
  • Responsive navigation
  • Optimized image loading

Meta Documentation

This project serves a dual purpose - not only is it a portfolio, but it's also a living example of the technologies it describes. The blog post about MDX implementation actually documents how this very portfolio is built, creating an interesting recursive documentation pattern where the medium is part of the message.

Development Practices

  • TypeScript for type safety
  • ESLint and Prettier for code quality
  • Modular component architecture
  • Semantic HTML with accessibility in mind
  • Performance optimization with Next.js features
  • Git-based content management