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.
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.
I implemented four JSON-LD schemas across the site: Person (identity, occupation, alumni, skills), WebSite (search action), ProfessionalService (services, area served), and a CollectionPage listing all projects as CreativeWork items. Each project case study page also gets a BreadcrumbList and a CreativeWork+SoftwareApplication schema with author, dateCreated, and keywords.
Next.js 16's ImageResponse API generates dynamic 1200×630 Open Graph images and 1200×600 Twitter images on the fly. When someone shares a link on social media, they see my name, title, and branding — not a broken preview.
I researched and grouped keywords into brand (Syed Muhammad Hasnain Abdi portfolio), role (Full Stack Developer Pakistan, AI Developer Karachi), AI-specific (OpenAI Developer, RAG Developer), location (Karachi Web Developer), and hiring intent (Hire Full Stack Developer, Freelance Developer Pakistan). All 68 are placed naturally in the title tag, meta description, headings, body content, and JSON-LD structured data. The same approach applies to the services and experience pages.
After deploying and submitting the sitemap to Google Search Console, the site started ranking within weeks. The key lesson: SEO is not a single change — it is the cumulative effect of SSG, structured data, fast page loads, semantic HTML, and keyword-rich natural content. If you want a deeper dive on Progressive Web Apps, read my PWA guide for full-stack developers.