DEV Community

Shafiq Hammad
Shafiq Hammad

Posted on

How I Built My Portfolio with Next.js, Tailwind & Sanity

πŸ“Œ Introduction

If you're a frontend developer looking to build a high-performance, SEO-friendly portfolio that’s easy to maintain and extend β€” this post is for you.

I recently rebuilt my personal website β€” shafiqhammad.site β€” using Next.js 15, Tailwind CSS v4, and Sanity CMS. My goal was to create a visually polished, content-driven portfolio that could evolve with my career while delivering exceptional speed and SEO results.

In this post, I’ll walk you through:

  • Why I chose this stack
  • How I structured the project
  • How I integrated FormBold for contact form submissions
  • My approach to SEO and performance
  • Key takeaways from the process

πŸš€ Why I Rebuilt My Portfolio

My previous portfolio lacked scalability, performance, and content flexibility. It didn’t reflect my current skill set or frontend thinking in 2025.

So, I decided to rebuild everything from the ground up using:

  • Next.js 15 App Router for modern routing and layout
  • Tailwind CSS for rapid UI development
  • Sanity CMS for headless content management
  • FormBold to handle contact form submissions without backend complexity
  • Best practices for SEO, performance, and accessibility

πŸ› οΈ Tech Stack Overview

πŸ”§ Next.js 15 (App Router)

Next.js 15 offers improved flexibility through server/client component separation and nested layouts. I used:

  • generateStaticParams() for static blog generation
  • Layouts for consistent UI structure
  • Route-specific metadata for SEO

🎨 Tailwind CSS v4

Tailwind helped me build and iterate quickly with:

  • Responsive utilities
  • Theme customization via CSS variables
  • Plugins like @tailwindcss/typography for better blog styling
  • Zero custom CSS

πŸ“° Sanity CMS

Sanity gave me the power of structured content with an intuitive Studio interface.

I created custom schemas for:

  • Blog posts
  • SEO metadata
  • Hero banners and page settings

Using GROQ queries, I pulled this data into the frontend cleanly and efficiently.

πŸ’‘ Key Features I Built

πŸ“„ Dynamic Blog with Sanity

Each post uses a clean, SEO-optimized route (/blog/[slug]) with:

  • Metadata from Sanity
  • Rich content rendering using @portabletext/react
  • Static generation for fast load times
  • Sharing-ready OG images and Twitter cards

πŸ“¬ Contact Form with FormBold

Instead of building a backend API, I used FormBold β€” a secure form backend service.

Features:

  • Instant email alerts
  • GDPR-compliant
  • Easy spam filtering with honeypot
  • Just add your form ID

πŸ“ˆ SEO & Performance Strategy

A portfolio is nothing without discoverability. Here’s how I tackled SEO and performance:

πŸ” SEO Essentials

  • Custom <title>, <meta> tags on every page
  • Canonical URLs and structured breadcrumbs
  • Open Graph and Twitter Card metadata for better link sharing
  • Dynamic sitemap generation with next-sitemap

⚑ Performance Optimization

  • next/image for responsive, optimized images
  • next/font for performant custom font loading
  • Minimal JavaScript using server components
  • Lighthouse Score:
    • βœ… Performance: 99
    • βœ… SEO: 100
    • βœ… Accessibility: 95

🧠 What I Learned

  • Next.js 15 App Router brings modern developer ergonomics but requires careful server/client boundaries
  • Tailwind CSS continues to be the fastest way to build responsive UIs
  • Sanity CMS is incredibly powerful for developers and editors alike
  • FormBold saved me hours by abstracting away form backend logic
  • SEO should be part of your stack β€” not an afterthought

🌐 Explore the Live Site

Check it out:

πŸ’» shafiqhammad.site β€” Full portfolio

πŸ“ shafiqhammad.site/blog β€” Blog articles powered by Sanity

πŸ’¬ Let’s Connect

Have feedback, questions, or want to collaborate?

πŸ”— LinkedIn

πŸ™ GitHub

πŸ“¬ Contact Form

Top comments (0)