Building a Modern Portfolio with Next.js and Framer Motion

Creating a standout portfolio is crucial for any developer looking to showcase their skills and attract potential employers or clients. In this article, I'll walk you through the process of building a modern, interactive portfolio using Next.js, Tailwind CSS, and Framer Motion.

Why Next.js?

Next.js provides an excellent foundation for building modern web applications with:

**Server-side rendering** for better SEO and performance

**File-based routing** for easy navigation setup

**Built-in optimization** for images, fonts, and scripts

**TypeScript support** out of the box

Setting Up the Project

First, let's create a new Next.js project:

npx create-next-app@latest my-portfolio --typescript --tailwind --eslint

cd my-portfolio

npm install framer-motion

Adding Animations with Framer Motion

Framer Motion makes it easy to add smooth, professional animations to your React components:

import { motion } from "framer-motion";

const Hero = () => {

return (

<motion.div

initial={{ opacity: 0, y: 20 }}

animate={{ opacity: 1, y: 0 }}

transition={{ duration: 0.6 }}

className="hero-section"

<h1>Welcome to My Portfolio</h1>

</motion.div>

);

};

Key Features to Include

1. Responsive Design

Ensure your portfolio looks great on all devices using Tailwind's responsive utilities.

2. Dark Mode Support

Implement a theme toggle for better user experience.

3. Interactive Elements

Use Framer Motion to add hover effects and page transitions.

4. Performance Optimization

Optimize images, implement lazy loading, and minimize bundle size.

Best Practices

1. **Keep it simple** - Don't overwhelm visitors with too many animations

2. **Focus on content** - Your work should be the star of the show

3. **Optimize for speed** - Fast loading times are crucial

4. **Make it accessible** - Ensure your portfolio works for everyone

Conclusion

Building a modern portfolio with Next.js and Framer Motion allows you to create a professional, performant, and visually appealing showcase of your work. The combination of these technologies provides the perfect balance of functionality and aesthetics.

Remember to keep your portfolio updated with your latest projects and continuously iterate based on feedback and new technologies.