Launching My New Portfolio with Next.js and shadcn/ui (2025)

After months of neglecting my portfolio due to work and side projects, I finally decided to rework and launch my new personal portfolio — built using Next.js and shadcn/ui. My focus was on performance, usability, and a clean design system.

Why Next.js?

Next.js has become the de facto choice for building fast, modern websites. After considering some content driven frameworks like Astro and Docusaurus, I chose Next.js for its:

  • File-based routing
  • Static generation for pages
  • Built-in SEO features
  • Zero config for performance

It also made deploying on Vercel seamless, and inline with my development workflow.

Why shadcn/ui?

I wanted a component library that was:

  • Accessible by default
  • Minimalist in style
  • Highly customizable

shadcn/ui fit that perfectly. It let me build a modern interface without bloating the bundle size. The components are beautifully simple — no extra styling or JavaScript overhead.

Performance First

I optimized for speed:

  • Images are lazy-loaded and responsive
  • Fonts are self-hosted for faster rendering
  • Lighthouse scores are consistently: Performance 100, Accessibility 96, Best Practices 98, SEO 100

Clean and Usable Design

The UI is built around real usability:

  • Clear typography
  • High contrast color scheme black and white
  • Light and Dark mode support
  • Keyboard navigation support
  • Simple, intuitive layout

The Stack

  • Next.js (App Router)
  • TypeScript
  • Tailwind CSS
  • shadcn/ui
  • Vercel for hosting

Some nice perks

  • Dark mode support
  • A blog powered by MDX

What's Next?

I’m planning to extend:

  • Project case studies with before/after metrics
  • More blog posts on web development topics
  • Experiment with a Rust for delivering content.

Final Thoughts

Launching this portfolio taught me how effective simplicity can be. With just the right tools, performance and usability don't require compromise.

Want to see it in action? Explore around.

FAQs

1. Is shadcn/ui production-ready?
Yes — it’s used by many devs for real-world apps and has a growing community.

2. Why not use a CMS or builder?
I wanted full control over performance and accessibility.

3. Can I use shadcn/ui with other frameworks?
It’s designed for React, so you can use it in any React environment, not just Next.js.

4. Is this page MDX?
Yes, it’s written in MDX, allowing for a mix of Markdown and React components.

5. How long did the build take?
A couple spare hours — thanks to Tailwind and shadcn/ui speeding things up.