feat: design-system upgrade + brand to 'Mr Hoelee'

- Extract CSS into src/styles/global.css with design tokens (hoelee.com brand palette)
- Self-hosted Inter + JetBrains Mono via @fontsource
- Sticky nav + manual light/dark toggle + copy-button code blocks
- Author card + Person JSON-LD (E-E-A-T), article meta, related posts, reading time
- Full SEO: canonical, OG (with dims), twitter:card, favicon (all sizes), RSS + sitemap
- New /categories/ and /categories/[category]/ pages
- Add docs/ knowledge guides (content, design, seo, ops) + README index
- Brand name: hoelee.dev -> Mr Hoelee

docs/seo-reference.md

@@ -0,0 +1,64 @@
+# SEO & Metadata Reference — blog.hoelee.com
+
+Operational reference for the SEO/GEO decisions baked into this project. Read when adding posts, changing `<head>` markup, or debugging search visibility.
+
+---
+
+## Two-lane strategy (2026)
+
+Optimize for **both**:
+1. **Classic SEO** — Google blue links (still the majority of name searches).
+2. **GEO (Generative Engine Optimization)** — getting cited by Google AI Overviews, ChatGPT Search, Perplexity. They pull from well-structured, question-answering content.
+
+---
+
+## Identity & E-E-A-T (do this first, once)
+
+The entire blog strategy is a **name-search play**, so identity must be airtight:
+
+- **One name everywhere:** "Lee Teong Hoe" / "Mr Hoelee" — pick one and keep it identical on blog, LinkedIn, GitHub, git.hoelee.com.
+- **One photo** across all profiles.
+- **`sameAs` handles** in the `Person`/`ProfilePage` schema → LinkedIn, GitHub, git.hoelee.com.
+- **`ProfilePage` schema** wrapping every post's author bio — how Google connects my writing to my professional identity.
+
+---
+
+## Per-post checklist
+
+- [ ] Unique title ≤ 60 chars (target keyword near front)
+- [ ] Meta description ≤ 155 chars
+- [ ] Canonical URL set
+- [ ] Custom `og:image` (1200×630) — **never** the reused logo
+- [ ] `og:image:width/height` declared (else WhatsApp/Telegram/LinkedIn reject the preview)
+- [ ] `twitter:card: summary_large_image`
+- [ ] Category + tags set
+- [ ] Author card present
+- [ ] Internal links to ≥1 pillar post
+
+---
+
+## Structural checklist (site-wide)
+
+- [ ] `sitemap.xml` + `robots.txt` + RSS — auto-generated by Astro
+- [ ] Core Web Vitals 90+ (verify Lighthouse on 390px **and** 1280px)
+- [ ] Question-shaped H2/H3 (the phrasing a learner actually searches)
+- [ ] Related-posts module (3 cards) on every post
+- [ ] No orphaned/thin pages (avoid the hoelee.com ~400-attachment mistake)
+
+---
+
+## Syndication policy
+
+- Primary home = **this domain** (own the SEO).
+- **Cross-post to Dev.to / Medium** with a `rel=canonical` pointing back to blog.hoelee.com — reach without platform lock-in.
+- Never make a third-party platform the primary host.
+
+---
+
+## The "hard job → post" GEO framing
+
+When writing, phrase the opening as the exact question someone types into an AI engine or Google:
+
+> "How do I set up site-to-site OpenVPN behind CGNAT?"
+
+Then answer it directly with clear H2/H3 headings. This is what both Google and the AI engines cite.