Portfolio Update

A full redesign of my portfolio using Next.js 15, MDX, Tailwind CSS, and Radix UI with a focus on accessibility and theming.

Portfolio Update is a ground-up rebuild of my personal website designed to better showcase projects, improve accessibility, and create a more maintainable content workflow. The project combines MDX-driven content, modern theming, and reusable UI components to create a portfolio that can evolve alongside my work.

Why I Built It

My previous portfolio no longer reflected my current experience as a front-end developer or the quality of projects I wanted to showcase. The redesign focused on creating a faster, more accessible, and easier to maintain platform while improving the overall presentation of project case studies.

The project also served as an opportunity to explore modern Next.js patterns, MDX-powered content authoring, and Tailwind CSS v4 theming.

Key Features

  • MDX-based project content with reusable layouts and components
  • Dynamic project pages powered by frontmatter metadata
  • Tailwind CSS v4 theming with dark mode support
  • Accessibility-focused UI built with Radix UI primitives
  • Responsive layouts optimized for desktop and mobile devices
  • Performance-focused architecture and Lighthouse optimization

Design Challenges

Rebuilding the portfolio required balancing visual presentation, maintainability, and accessibility.

  • Creating reusable MDX components for project content
  • Designing a consistent visual system across pages
  • Implementing theme support with Tailwind CSS v4
  • Maintaining accessibility across interactive components
  • Building a content workflow that scales as projects are added

System Architecture

The portfolio is built using a content-driven architecture designed to separate presentation from project content.

  • Next.js App Router for routing and rendering
  • MDX for project content and custom layouts
  • Tailwind CSS v4 for styling and theming
  • ShadCN and Radix UI for accessible UI components
  • Static content generation for performance and SEO

The result is a lightweight platform that makes adding and maintaining project content straightforward while preserving a consistent user experience.

Lessons Learned

This project reinforced the value of content-driven architecture and component reuse. Building project pages with MDX significantly reduced the effort required to add new content while maintaining design consistency. The redesign also provided hands-on experience with Tailwind CSS v4, modern theming strategies, and accessibility-focused UI development.

Future Development

Planned enhancements include:

  • Additional project case studies
  • Expanded project media galleries
  • Blog and article support
  • Enhanced search and content discovery
  • Continued accessibility and performance improvements

GitHub