How I Built My Portfolio with Tailwind & shadcn UI

Building a developer portfolio is more than just showcasing your work—it's about creating an experience that reflects your skills, personality, and attention to detail. In this post, I'll walk you through how I built my portfolio using modern web technologies.

The Tech Stack

I chose a modern, performant stack that would allow me to focus on design and user experience:

Design Philosophy

My approach was to create a clean, minimal design that puts the focus on content while still being visually engaging. I wanted something that would work well for both light and dark themes.

Key Design Decisions:

Implementation Highlights

Theme System

I implemented a robust theme system using next-themes that persists user preferences and handles SSR properly.

Component Architecture

Each page is split into server and client components for optimal performance:

Performance Optimizations

Challenges and Solutions

Hydration Issues

One of the biggest challenges was handling theme switching without hydration mismatches. I solved this by:

Animation Performance

To ensure smooth animations across devices:

What's Next?

I'm planning to add:

Conclusion

Building this portfolio was an excellent opportunity to experiment with modern web technologies while creating something that truly represents my work. The combination of Next.js, Tailwind, and shadcn/ui provided the perfect balance of developer experience and end-user performance.

Feel free to check out the source code and let me know what you think!