Personal Portfolio Website

A modern and minimalist portfolio website built to showcase my work and writing. The site features a clean design with dark mode support and smooth transitions.

Contributors Modern and clean portfolio website interface

Tech Stack

  • Framework: Next.js 14 with App Router
  • Language: TypeScript
  • Styling: Tailwind CSS
  • UI Components: Shadcn UI
  • Content: MDX for works and blog posts
  • Deployment: Vercel

Key Features

Responsive Design

The site is fully responsive and works seamlessly across all devices, from mobile phones to large desktop screens.

Data Table Clean and efficient development environment

Dark Mode

Implemented system-aware dark mode that also allows manual toggling, providing a comfortable viewing experience in any lighting condition.

Components Overview Dark Dark mode interface with clean component design

MDX Integration

Content is managed through MDX files, allowing for rich content creation with React components mixed with Markdown syntax.

Design Tokens Modern tech stack and project architecture

Performance

  • Server-side rendering for optimal loading performance
  • Image optimization with Next.js Image component
  • Minimal client-side JavaScript
  • Perfect Lighthouse scores

Development Process

The development process focused on creating a maintainable and performant codebase. Key considerations included:

  1. Component Architecture: Building reusable components that can be easily styled and modified
  2. Type Safety: Utilizing TypeScript for better development experience and code reliability
  3. Content Management: Implementing a flexible MDX system for easy content updates
  4. Performance Optimization: Ensuring fast page loads and smooth interactions

Outcome

The result is a fast, accessible, and maintainable portfolio website that effectively showcases my work and writing. The site achieves perfect Lighthouse scores and provides an excellent user experience across all devices.