Back to blog

Building a Modern Portfolio with Next.js and Tailwind CSS

June 20, 2024 (1y ago)

Building a portfolio site that showcases both your technical skills and design sensibilities is a challenge. In this post, I'll walk through how I built this portfolio using modern web technologies.

Tech Stack

I chose Next.js 15 with the App Router for several reasons:

  • Server Components for better performance
  • Built-in SEO optimization
  • TypeScript support out of the box
  • Tailwind CSS for rapid styling

For UI components, I used shadcn/ui which provides:

  • Beautiful, accessible components
  • Dark mode support
  • Easy customization with Tailwind

Design Philosophy

The design focuses on:

  1. Minimalism - Clean, distraction-free layout
  2. Performance - Fast loading and smooth animations
  3. Accessibility - Semantic HTML and keyboard navigation
  4. Responsive - Works perfectly on all devices

Key Features

Animated Components

I integrated Magic UI components for subtle animations:

  • Blur-fade effects for content reveal
  • Cool mode for interactive avatars
  • Marquee testimonials
  • Animated grid backgrounds

Content Management

All content is managed through TypeScript objects in src/data/resume.tsx. This approach:

  • Makes updates easy without CMS complexity
  • Provides type safety
  • Enables static generation

Navigation

The bottom dock navigation uses Framer Motion for smooth animations and includes:

  • Home and Blog links
  • Social media connections
  • Theme toggle

Performance Optimizations

  • Static Generation for all pages
  • Image optimization with Next.js Image component
  • Code splitting automatic with Next.js
  • Minimal JavaScript through server components

Deployment

The site is deployed on Vercel with:

  • Automatic deployments on git push
  • Global CDN distribution
  • SSL certificates
  • Performance monitoring

Future Enhancements

I'm planning to add:

  • [ ] Blog system (coming soon!)
  • [ ] Project case studies
  • [ ] Newsletter signup
  • [ ] Dark mode persistence

Building this portfolio was a great exercise in balancing technical implementation with user experience. The result is a fast, accessible, and visually appealing site that showcases my skills effectively.

Instagram
X