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

Shafiq Hammad — Thu, 26 Jun 2025 16:44:14 +0000

📌 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

DEV Community: Shafiq Hammad