π 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?
Top comments (0)