🌐Personal Portfolio Site

The problem

An earlier version was a quick-Saturday job: every page was a client component, there was no metadata, no sitemap, no structured data, and content was thin. Search engines couldn't see most of it.

The approach

I treated the rebuild as a chance to actually use modern Next.js features properly: a server-component layout, per-route metadata exports, JSON-LD for Person + WebSite + per-page types, generated sitemap/robots/manifest, and an MDX-flavoured blog backed by `gray-matter` and `marked`. Animation lives in small client islands so the bulk of the page is server-rendered.

Implementation highlights

• Server-rendered metadata + structured data on every route.
• Per-page Open Graph and canonical URLs driven by a single site-config module.
• Static export — no server, no runtime cost, deploys straight to GitHub Pages.
• Reduced-motion and full keyboard accessibility honored across components.

Outcome & lessons

Crawlers now see fully-formed HTML on the initial response, social shares preview correctly, and adding new content (a project, a blog post) is a one-file change. The repo is open-sourced as a reference for anyone building similar sites.