Building a Portfolio with Next.js and Framer Motion

Creating a portfolio website is an essential step for any web developer to showcase their skills and projects. With modern frameworks like Next.js and animation libraries like Framer Motion, you can create stunning, interactive experiences that make your portfolio stand out.

Why Next.js?

Next.js is a React framework that provides a great developer experience with features like:

• Server-side rendering

• Static site generation

• Fast refresh

• Built-in routing

• API routes

• TypeScript support

These features make it ideal for building a performant and SEO-friendly portfolio website.

Adding Animations with Framer Motion

Framer Motion is a production-ready animation library for React that makes it easy to create complex animations. Here's how you can use it in your Next.js project:

      import { motion } from 'framer-motion';

      export default function AnimatedComponent() {
        return (
          
            Hello, I'm an animated component!
          
        );
      }
      ```

      ## Creating Scroll Animations

      One of the most popular effects for portfolio websites is revealing content as the user scrolls down the page. You can achieve this with Framer Motion's `whileInView` prop:

      ```jsx
      import { motion } from 'framer-motion';

      export default function ScrollRevealSection() {
        return (
          
            This content will animate in when it comes into view!
          
        );
      }
      ```

      ## Staggered Animations for Lists

      When displaying a list of projects or skills, staggered animations can create a polished, professional look:

      ```jsx
      import { motion } from 'framer-motion';

      export default function ProjectsList() {
        const projects = [
          { id: 1, title: "Project 1" },
          { id: 2, title: "Project 2" },
          { id: 3, title: "Project 3" },
        ];

        return (
          

            {projects.map((project, index) => (
              
                {project.title}
              
            ))}
          
        );
      }
      ```

      ## Page Transitions

      Next.js 14 has improved support for page transitions. Combined with Framer Motion, you can create smooth transitions between pages:

      ```jsx
      'use client';

      import { motion } from 'framer-motion';

      export default function Template({ children }) {
        return (
          
            {children}
          
        );
      }
      ```

      ## Conclusion

      By combining Next.js 14 with Framer Motion, you can create a portfolio website that not only showcases your work but also demonstrates your ability to create modern, interactive web experiences. The animations add a layer of polish and engagement that can help your portfolio stand out to potential clients or employers.

      Remember that animations should enhance the user experience, not distract from it. Use them purposefully to guide attention and create a cohesive, professional presentation of your work.