A practical walkthrough of how I built this very portfolio — covering Static Site Generation, JSON-LD structured data, Open Graph images, and a 68-keyword SEO strategy that ranks for "Full Stack Developer Pakistan".
When I started building my portfolio, I had one clear goal: it had to rank on Google for keywords like "Syed Muhammad Hasnain Abdi portfolio" and "Full Stack Developer Pakistan". That meant SEO was a first-class concern, not an afterthought.
Static Site Generation (SSG)
I used Next.js 16 App Router with SSG for every route — including dynamic project case study pages via generateStaticParams. Every page is pre-rendered to static HTML at build time, which means instant TTFB and perfect Lighthouse scores. The home page loads in under 700 ms with all animations and images. You can see this in action on my projects page where every case study is statically generated.
Structured Data (JSON-LD)
