How to Create a Portfolio Website with Next.js & Tailwind

Creating a portfolio website with Next.js and Tailwind CSS is an excellent choice for developers looking to showcase their work with a modern, performant, and maintainable tech stack. In this comprehensive guide, we'll walk through the process of building a portfolio website from scratch.

Why Next.js and Tailwind CSS?

Next.js and Tailwind CSS have become the go-to combination for many developers, and for good reason:

1. Next.js Benefits:

   • Server-side rendering for better SEO
   • Automatic code splitting for faster page loads
   • Built-in routing and API routes
   • Great developer experience with hot reloading
   • Excellent TypeScript support

2. Tailwind CSS Advantages:

   • Utility-first approach for rapid development
   • Highly customizable design system
   • Built-in responsive design utilities
   • Excellent documentation and community
   • Small bundle size in production

Setting Up Your Development Environment

First, let's set up a new Next.js project with Tailwind CSS:

npx create-next-app@latest portfolio-website
cd portfolio-website

When prompted, select the following options:

• Would you like to use TypeScript? Yes
• Would you like to use Tailwind CSS? Yes
• Would you like to use the src/ directory? No
• Would you like to use App Router? Yes
• Would you like to customize the default import alias? No

Project Structure

A well-organized project structure is crucial for maintainability:

portfolio-website/
├── app/
│   ├── components/
│   ├── layout.tsx
│   ├── page.tsx
│   └── globals.css
├── public/
│   └── images/
├── styles/
├── package.json
└── tailwind.config.js

Essential Components

Let's break down the key components you'll need:

1. Header/Navigation:

// app/components/Header.tsx
export default function Header() {
  return (
    <header className="fixed top-0 w-full bg-white/80 backdrop-blur-sm z-50">
      <nav className="container mx-auto px-4 py-4">
        <div className="flex items-center justify-between">
          <a href="/" className="text-2xl font-bold">Your Name</a>
          <div className="space-x-6">
            <a href="#projects" className="hover:text-blue-600 transition">Projects</a>
            <a href="#about" className="hover:text-blue-600 transition">About</a>
            <a href="#contact" className="hover:text-blue-600 transition">Contact</a>
          </div>
        </div>
      </nav>
    </header>
  );
}

2. Hero Section:

// app/components/Hero.tsx
export default function Hero() {
  return (
    <section className="min-h-screen flex items-center justify-center bg-gradient-to-b from-white to-gray-100">
      <div className="container mx-auto px-4 text-center">
        <h1 className="text-5xl md:text-7xl font-bold mb-6">
          Hi, I'm <span className="text-blue-600">Your Name</span>
        </h1>
        <p className="text-xl md:text-2xl text-gray-600 mb-8">
          Full Stack Developer specializing in modern web technologies
        </p>
        <button className="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition">
          View My Work
        </button>
      </div>
    </section>
  );
}

Ready-to-Use Portfolio Templates

To save time and get started quickly, consider using one of our professionally designed portfolio templates:

These templates come with all the features mentioned above and more, allowing you to focus on customizing the content rather than building from scratch.

Adding Animation and Interactivity

To make your portfolio more engaging, consider adding animations with Framer Motion:

npm install framer-motion

Example of an animated component:

// app/components/AnimatedCard.tsx
import { motion } from 'framer-motion';

export default function AnimatedCard({ children }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
      className="bg-white p-6 rounded-lg shadow-lg"
    >
      {children}
    </motion.div>
  );
}

Optimizing Images and Performance

Next.js provides built-in image optimization. Use the Image component for better performance:

import Image from 'next/image';

export default function ProjectCard({ project }) {
  return (
    <div className="relative overflow-hidden rounded-lg">
      <Image
        src={project.image}
        alt={project.title}
        width={600}
        height={400}
        className="object-cover transition-transform hover:scale-105"
      />
    </div>
  );
}

Deployment and SEO

1. Metadata Setup:

// app/layout.tsx
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Your Name - Portfolio',
  description: 'Full Stack Developer specializing in modern web technologies',
  openGraph: {
    title: 'Your Name - Portfolio',
    description: 'Full Stack Developer specializing in modern web technologies',
    images: ['/og-image.jpg'],
  },
};

2. Deployment Options:
   • Vercel (recommended for Next.js)
   • Netlify
   • AWS Amplify

Advanced Features to Consider

1. Dark Mode:

// app/components/ThemeToggle.tsx
'use client';

import { useState, useEffect } from 'react';

export default function ThemeToggle() {
  const [darkMode, setDarkMode] = useState(false);

  useEffect(() => {
    if (darkMode) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [darkMode]);

  return (
    <button
      onClick={() => setDarkMode(!darkMode)}
      className="p-2 rounded-lg bg-gray-200 dark:bg-gray-800"
    >
      {darkMode ? '🌞' : '🌙'}
    </button>
  );
}

2. Contact Form with Email Integration:

// app/api/contact/route.ts
import { NextResponse } from 'next/server';
import nodemailer from 'nodemailer';

export async function POST(request: Request) {
  const { name, email, message } = await request.json();

  // Configure email transport
  const transporter = nodemailer.createTransport({
    // Your email configuration
  });

  try {
    await transporter.sendMail({
      from: process.env.EMAIL_FROM,
      to: process.env.EMAIL_TO,
      subject: `New Contact Form Submission from ${name}`,
      text: message,
      html: `<p><strong>From:</strong> ${name} (${email})</p><p>${message}</p>`,
    });

    return NextResponse.json({ success: true });
  } catch (error) {
    return NextResponse.json({ error: 'Failed to send email' }, { status: 500 });
  }
}

Best Practices and Tips

1. Performance:

   • Use Next.js Image component for optimized images
   • Implement lazy loading for components below the fold
   • Minimize JavaScript bundle size
   • Use proper caching strategies

2. Accessibility:

   • Include proper ARIA labels
   • Ensure sufficient color contrast
   • Make your site keyboard navigable
   • Add alt text to all images

3. Responsive Design:

   • Use Tailwind's responsive modifiers
   • Test on multiple devices and screen sizes
   • Implement mobile-first design principles

4. Code Organization:

   • Follow DRY (Don't Repeat Yourself) principles
   • Create reusable components
   • Use TypeScript for better type safety
   • Implement proper error handling

Conclusion

Building a portfolio website with Next.js and Tailwind CSS provides a solid foundation for showcasing your work professionally. The combination offers excellent developer experience, performance, and maintainability. Whether you choose to build from scratch or start with one of our templates, focus on creating a unique experience that represents your skills and personality.

Remember to regularly update your portfolio with new projects and keep the technology stack current. A well-maintained portfolio is one of your most valuable assets as a developer.