feat: remodel portfolio experience and technical SEO

[Foscat]

Summary

• remodel the portfolio around an STE-first home experience, a compact command-bar navigation model, a complete Work archive, and a dedicated Interface System route for the four published NPM libraries
• turn Mermaid diagrams into responsive fullscreen explorers with pan, zoom, fit, reset, export, keyboard controls, and mobile-safe viewing
• rebuild technical SEO around route-specific static shells, canonical metadata, structured data, sitemap coverage, and Render route handling while tightening public-facing copy
• contain the primary navigation, route command bar, and back-to-top control in distinct responsive regions, including short-height and orientation changes
• strengthen accessible semantics, palette contrast, scroll restoration, deterministic test execution, and versioned visual-regression coverage

Root cause and impact

The primary and route navigation layers used independent fixed offsets around a breakpoint where the desktop command bar could wrap. The back-to-top action also occupied the same top-right region, which allowed persistent controls to overlap while scrolling or resizing. The fullscreen Mermaid explorer inherited RSuite modal padding while sizing descendants to the viewport, cropping detailed diagrams on phones.

This update measures the visible primary-navigation height, moves the content-fit switch to 940px, reserves bottom safe-area space for back-to-top, keeps route chrome near-opaque, and gives fullscreen diagrams one bounded header/canvas grid.

Verification

• npm run lint:all
• npm run test-functions — 493 Vitest tests, 5 SEO contract tests, and 4 link contract tests passed
• npm run test-ui — 132 Playwright tests passed with 1 intentional Home section-navigation skip
• npm run build
• npm run quality:bundle-budgets
• npm run quality:route-tests
• npm run seo:check
• targeted Prettier validation across every changed file
• git diff --check
• manual Chrome QA at 390x844, 844x390, 900x650, 940x650, and 1280x500, including both drawers, back-to-top, navigation scroll states, and fullscreen Mermaid fit/close behavior

Deployment note

This PR does not deploy the site. After merge and Render deployment, submit the sitemap and request a fresh crawl in Google Search Console so crawlers can replace stale route data with the new static SEO shells.