About
Technical documentation for the About portfolio page — a static, installable PWA built with vanilla HTML, CSS, and JavaScript.
Architecture
- Static HTML — no build step, no framework. The page is served directly from GitHub Pages.
- Shared design system — all colors, spacing, typography, shadows, and border radii come from
/assets/css/base.cssdesign tokens. - PWA — a service worker (
sw.js) precaches the app shell for offline use, and a manifest (manifest.json) makes the page installable. - Dark mode — a
data-themeattribute on<html>toggles light/dark via CSS custom properties.
Design Tokens
The page uses only the root tokens: --color-*, --space-*, --text-*, --shadow-*, and --border-radius-*. No hardcoded values.
SEO
- Full meta set: title, description, author, keywords, canonical, robots.
- Open Graph and Twitter card tags with a shared OG image.
- JSON-LD
Personstructured data. - Listed in
sitemap.xml.
Accessibility
- Skip link, ARIA labels, and keyboard-accessible navigation.
- 44×44px touch targets and visible focus indicators.
- Respects
prefers-reduced-motion.