Building a Modern Portfolio with Next.js 15

Creating a personal portfolio is always an exciting project, but doing it with the latest and greatest web technologies makes it even more fun. Let me walk you through how I built this site using Next.js 15, Tailwind CSS v4, and tRPC.

Why These Technologies?

When I started planning this portfolio, I had a few key requirements:

• Performance: Fast loading times and smooth navigation
• Type Safety: Full end-to-end type safety for reliability
• Modern Styling: Flexible and maintainable CSS with the latest features
• Great DX: Excellent developer experience for future updates

Next.js 15: The Foundation

Next.js 15 brings some fantastic improvements, especially with the App Router now being stable and mature. The new directory structure with src/app feels much cleaner, and the built-in optimizations for images, fonts, and metadata are incredible.

// Example of the clean App Router structure
export default function HomePage() {
  return (
    <main className="container mx-auto px-4 py-12">
      <HeroSection />
      <FeaturedWork />
    </main>
  );
}

Tailwind CSS v4: CSS-First Configuration

One of the most exciting parts of this build was using Tailwind CSS v4's new CSS-first configuration. Instead of a JavaScript config file, you can define your theme directly in CSS:

@theme {
  --color-accent-blue: #60A5FA;
  --color-accent-pink: #F472B6;
  --color-background: #0a0a0a;
  --color-foreground: #fafafa;
}

This approach feels much more natural and integrates beautifully with CSS custom properties.

tRPC: Type-Safe APIs

Even though this is mostly a static site, I wanted to prepare for future interactive features like a contact form or comment system. tRPC provides end-to-end type safety that's absolutely magical:

// Define your API routes with full type safety
export const appRouter = router({
  contact: publicProcedure
    .input(z.object({
      name: z.string(),
      email: z.string().email(),
      message: z.string().min(10),
    }))
    .mutation(async ({ input }) => {
      // Handle contact form submission
      return { success: true };
    }),
});

Key Features

Art Gallery System

The art gallery was particularly fun to build. I created a custom system that handles both pixel art and digital art with appropriate scaling and presentation:

• Pixel Art: Uses image-rendering: pixelated for crisp pixel scaling
• Digital Art: Smooth scaling with lightbox functionality
• Filtering: Category-based filtering with smooth animations

Blog System with MDX

The blog uses MDX for rich content with custom components. This post you're reading is actually written in MDX! The system includes:

• Frontmatter parsing with gray-matter
• Reading time calculation
• Syntax highlighting with rehype-highlight
• Custom styled components

Performance Optimizations

• Image Optimization: Next.js automatic image optimization
• Font Loading: Optimized font loading with next/font
• Bundle Analysis: Regular bundle size monitoring
• Core Web Vitals: Focused on excellent performance metrics

Challenges and Solutions

Custom Scrollbar Styling

Creating a custom scrollbar that matches the gradient theme required some creative CSS:

::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #60A5FA, #F472B6);
  border-radius: 6px;
  border: 2px solid oklch(0.145 0 0);
}

Navigation Progress Bar

Implementing a smooth navigation progress bar with NProgress required careful integration with Next.js routing:

useEffect(() => {
  const handleClick = (e: MouseEvent) => {
    const link = target.closest('a');
    if (link && shouldStartProgress(link)) {
      NProgress.start();
    }
  };

  document.addEventListener('click', handleClick);
  return () => document.removeEventListener('click', handleClick);
}, []);

What's Next?

This portfolio is just the beginning. I'm planning to add:

• Interactive Demos: Embedded previews of web projects
• Comment System: For blog posts and art pieces
• Analytics Dashboard: To track visitor engagement
• Dark/Light Mode Toggle: Because options are good

Conclusion

Building with modern web technologies is incredibly rewarding. The combination of Next.js 15, Tailwind CSS v4, and tRPC creates a development experience that's both powerful and enjoyable.

The best part? Everything is type-safe, performant, and maintainable. If you're thinking about building your own portfolio, I highly recommend this tech stack.

Happy coding! 🚀