Building My Portfolio with Next.js

Creating a personal portfolio is one of the most important projects for any developer. It's your digital business card, showcasing your skills, experience, and personality to potential employers and clients. In this post, I'll walk you through how I built my portfolio using modern web technologies.

Why I Chose Next.js

After evaluating various frameworks, I settled on Next.js for several compelling reasons:

• Performance: Built-in optimizations like automatic code splitting and image optimization
• SEO-friendly: Server-side rendering out of the box
• Developer Experience: Hot reloading, TypeScript support, and excellent tooling
• Flexibility: Can be deployed as a static site or with server-side features

Tech Stack Overview

Here's the complete tech stack I used for this project:

• Framework: Next.js 14 with App Router
• Language: TypeScript for type safety
• Styling: Tailwind CSS for rapid styling
• Animations: Framer Motion for smooth transitions
• Content: MDX for blog posts
• Deployment: Vercel for seamless deployment

Key Features Implemented

1. Responsive Design

The portfolio needed to look great on all devices. Using Tailwind's responsive utilities, I created a mobile-first design that scales beautifully:

<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
  {projects.map((project) => (
    <ProjectCard key={project.id} project={project} />
  ))}
</div>

2. Dark Mode Support

I implemented a theme switcher using next-themes that remembers user preferences:

const { theme, setTheme } = useTheme();

return (
  <Button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
    {theme === "light" ? <Moon /> : <Sun />}
  </Button>
);

3. Smooth Animations

Framer Motion adds life to the portfolio with subtle animations:

<motion.div
  initial={{ opacity: 0, y: 20 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true }}
  transition={{ duration: 0.6 }}
>
  <ProjectCard project={project} />
</motion.div>

Performance Optimizations

Image Optimization

Next.js's next/image component provides automatic optimization:

<Image
  src={project.image}
  alt={project.title}
  fill
  className="object-cover"
  priority={featured}
/>

Bundle Analysis

I used @next/bundle-analyzer to identify and eliminate unused code:

npm run analyze

This helped reduce the initial bundle size by 30%.

SEO and Metadata

Proper SEO is crucial for a portfolio. I used Next.js's Metadata API:

export const metadata: Metadata = {
  title: "John Doe - Full Stack Developer",
  description: "Portfolio showcasing my web development projects",
  openGraph: {
    title: "John Doe - Portfolio",
    description:
      "Full Stack Developer passionate about modern web technologies",
    images: ["/og-image.png"],
  },
};

Blog Integration with MDX

The blog system uses MDX for rich content:

import { MDXRemote } from "next-mdx-remote/rsc";

const components = {
  h1: (props) => <h1 className="text-3xl font-bold" {...props} />,
  // ... other components
};

<MDXRemote source={content} components={components} />;

Deployment and CI/CD

Deploying to Vercel was straightforward:

1. Connected the GitHub repository
2. Vercel automatically detected it as a Next.js project
3. Set up automatic deployments on push to main

The build process includes:

• Type checking with TypeScript
• Linting with ESLint
• Formatting with Prettier

Lessons Learned

Building this portfolio taught me several valuable lessons:

1. Start with a plan: Wireframing saved hours of development time
2. Mobile-first design: It's easier to scale up than down
3. Performance matters: Users notice slow-loading sites
4. Accessibility is crucial: Use semantic HTML and proper ARIA labels

What's Next?

I'm planning to add several enhancements:

• [ ] Blog comment system
• [ ] Project filtering by technology
• [ ] Contact form with email integration
• [ ] Analytics dashboard
• [ ] Progressive Web App features

Conclusion

Building a portfolio with Next.js was an incredibly rewarding experience. The framework's developer experience, combined with modern tools like Tailwind and Framer Motion, made it possible to create a professional, performant website in a relatively short time.

The key is to start simple and iterate. Don't try to build everything at once – focus on getting a solid foundation and then enhance it over time.

Want to see the code? Check out the GitHub repository for this project.

Questions or feedback? Feel free to reach out – I'd love to hear from you!