Creating a modern, performant portfolio website has never been easier with the latest web technologies. In this article, I'll walk you through how I built this very site using Next.js, MDX, and Framer Motion.

Next.js provides an excellent foundation for building modern portfolio websites. Here are some key benefits:

• Server-side rendering for improved SEO and performance
• Static site generation for lightning-fast page loads
• App Router for an intuitive file-based routing system
• Image optimization out of the box
• API routes for serverless functions

MDX combines the simplicity of Markdown with the power of React components. This gives us the ability to:

1. Write content in an easy-to-read format
2. Embed custom components directly in our content
3. Apply consistent styling across all articles
4. Add interactive elements to otherwise static content

Here's an example of a simple React component inside MDX:

<AnimatedImage
  src="/images/example.jpg"
  alt="Example image"
  width={800}
  height={500}
/>

Framer Motion brings our portfolio to life with subtle animations that enhance the user experience without being distracting.

Some key animations implemented in this portfolio:

• Fade-in effects as content enters the viewport
• Hover animations on interactive elements
• Page transitions between routes
• Reading progress indicator

Code blocks are automatically syntax highlighted using the Tailwind Typography plugin:

// A simple TypeScript function
function greet(name: string): string {
  return `Hello, ${name}!`;
}

// Using the function
const message = greet("Reader");
console.log(message); // Output: Hello, Reader!

Tailwind CSS provides utility classes that make styling quick and consistent. The Typography plugin specifically handles Markdown content beautifully, with features like:

• Proper heading hierarchy styling
• Beautiful paragraph spacing
• List formatting
• Code block styling
• Blockquote styling
• And much more

One of the standout features of this portfolio is the theme system. I've implemented several themes:

• Default light and dark themes
• Color themes (red, green, blue)
• Automatic dark mode detection

The theme system works by applying CSS variables to the root element and then referencing those variables throughout the application.

Here's a simplified example of how the theming works:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --primary: 210 40% 98%;
}

.blue {
  --background: 210 100% 98%;
  --foreground: 210 100% 10%;
  --primary: 210 100% 50%;
}

When building a portfolio, performance is critical for both user experience and SEO. Some optimizations made to this site include:

• Static generation of article pages
• Image optimization with Next.js Image component
• Code splitting
• Minimal CSS through Tailwind's utility-first approach
• Optimized font loading

Building a modern portfolio with Next.js, MDX, and Framer Motion provides an excellent developer experience and creates a polished, performant result for visitors.

This approach gives you:

• Great performance metrics
• Beautiful, consistent styling
• Interactive elements when needed
• Simple content management
• Excellent SEO potential

I hope this overview helps you on your journey to creating your own modern portfolio!