Portfolio Website — Web Application Case Study

As a Full Stack Developer and AI Application Developer looking for freelance and full-time opportunities, I needed a portfolio that would rank on Google for keywords like "Syed Muhammad Hasnain Abdi portfolio" and "Full Stack Developer Pakistan". Existing portfolio templates were either slow, not SEO-optimized, or did not allow the granular control over structured data and metadata that search engines reward. The challenge was to build a single-page experience that also exposes dedicated deep-link pages for case studies — without sacrificing performance or Lighthouse scores.

I built the entire portfolio from scratch using Next.js 16 App Router with Static Site Generation (SSG) for every route including dynamic /projects/[slug] pages. Server components handle metadata and structured data, while isolated client components (Hero animations, ImageGallery, CursorEffects) deliver interactivity. SEO is treated as a first-class concern: three JSON-LD schemas (Person, WebSite, ProfessionalService), Open Graph + Twitter Cards, dynamic OG/Twitter images via ImageResponse, auto-generated sitemap.xml and robots.txt, and a 68-keyword strategy targeting brand, role, location, and hiring intent.

Next.js 16 with Turbopack powers both dev and production builds. TypeScript 5 enforces strict typing across the entire codebase. Tailwind CSS 4 handles all styling with utility-first classes. Framer Motion 12 delivers hero animations, scroll-triggered reveals, and magnetic buttons. shadcn/ui (built on Radix UI) provides accessible primitives. Nodemailer powers the contact form API route with auto-reply emails. Sharp handles image optimization. The site is deployed on Space-Z.ai infrastructure with s-maxage=31536000 caching headers for static assets.