Building a Portfolio with Next.js and Tailwind

Why I Chose Next.js

Next.js is a powerful React framework that provides an excellent developer experience with all the features you need for production. It includes server-side rendering, static site generation, and more right out of the box.

Styling with Tailwind CSS

Tailwind CSS has changed the way I approach styling. Instead of writing custom CSS, I can rapidly build designs directly in my markup. This makes development significantly faster while maintaining a consistent design system.

Key Features

• Server-side rendering for better SEO
• Responsive design with Tailwind CSS
• Framer Motion animations for a polished feel
• Dynamic routing for blog posts

Code Examples

Here's a simple example of how I implemented the animated hero section:

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
>
  <h1>Hi, I'm Shah</h1>
</motion.div>

Conclusion

Building this portfolio has been a great learning experience. Next.js and Tailwind CSS make an excellent combination for modern web development.