Architecting a Multi-Theme Portfolio

Building a portfolio that supports multiple visual themes is a unique challenge that combines creative design with solid engineering patterns.

Why Multi-Theme?

A multi-theme portfolio demonstrates versatility and technical prowess. It shows potential clients and employers that you can adapt your skills to different aesthetics and user experiences.

Route-Based Theming

Instead of using React context for theme management, we opted for route-based theming. Each theme gets its own route segment (/bento, /minimalist, /terminal), which provides:

1. Better SEO — Each theme has its own URL
2. Performance — No runtime theme switching overhead
3. Simplicity — Clean code separation

Implementation

// app/bento/page.tsx — Server Component
export default function BentoPage() {
  return <BentoLayout data={portfolioData} />
}

Each layout component is a client component that handles its own animations and interactivity, while the page component remains a Server Component for optimal performance.

Conclusion

Route-based theming is an elegant approach that leverages Next.js's file-system routing to provide distinct visual experiences without sacrificing performance.