feat: rework /ai for hiring teams with proof, mobile layout and nav link

[romahawk]

What and why

Turns /ai into a page for hiring teams. It opens with Roman's approved intro and proof points and ends with a hiring call to action. It links a public project (Magic Kick) as proof and no longer names two private projects. The page is readable on phones: project cards instead of a wide table, and long lists collapsed. /ai is now in the main menu and has a teaser on the homepage.

No linked issue.

Changes

Copy: /ai (src/data/aiKnowledgeBase.js, KnowledgeBasePage.jsx)

• Hero: the approved headline, sub-line and three proof points, word for word, then "Download CV" (/roman-mazuryk-cv.pdf, the site's existing CV) and "Email me" (mailto:romazuryk@gmail.com). The old "Start with the five pillars" and "Jump to glossary" buttons are gone. The eyebrow "AI Field Guide · Last reviewed 30 Sep 2026" stays
• Closing call to action (new last section): "Hiring a Technical PM or AI Implementation Lead? Here's my CV, or email romazuryk@gmail.com.", with links to the CV and the email address, plus the quieter line "Building an AI product or pilot? Happy to compare notes."
• Public proof (new section after the hero): Magic Kick, described as the private-use planner kept public as implementation proof, with AI routes for coaching, weekly summaries and risk patterns, ADRs and an issue-to-PR workflow. Links to GitHub and the live app. No user or revenue claims
• Magic Kick also appears in the pillars and the matrix, using the same facts: issue-to-PR workflow (Harness), ADRs (Memory), AI routes (Tools), all In use

Privacy: /ai and everything it renders

• "AI-Business-OS" is now "My personal agent operating system" (id agent-os)
• "DeutschOn-AI" is now "AI learning product" with the note "Capstone, Dec 2026" (id learning-product). The note no longer mentions German B1 learners
• AGENTS.md references are reduced to CLAUDE.md: the Project instructions term, the Memory tool entry and the glossary entry. The personal OS entry-file item now says "An entry file defines the protocol…"
• No links to those repos existed on the page

Mobile layout: /ai below 768px (knowledge-base.css)

• The project matrix table is hidden. Each project becomes a card with its name, status pill and short description. Each project now has a status field in kbProjects
• Best practices, "In my projects", tool verdicts and the glossary show 3 items and a "Show all N" / "Show fewer" button (aria-expanded, aria-controls). They are closed by default. While a glossary search has text, every match is shown
• Done with CSS on top of the full list, so desktop renders exactly as before. The button is not displayed at 768px and above

Navigation (Navbar.jsx, Footer.jsx, site.js)

• "AI" link to /ai in the header list (desktop and the mobile menu) and in the footer nav. It shows as active with aria-current="page" on /ai
• On /ai only, the Services link is hidden in the header and footer, so the page shows no services or prices

Section navigation on /ai (common/SectionNav.jsx, aiKnowledgeBase.js, knowledge-base.css)

• This is the same in-page menu as on /services:
  • Below 1360px, an "On this page" list sits under the hero buttons.
  • From 1360px, a rail in the left margin fades in after the hero and highlights the section in view. It shows numbers only up to 1599px (labels on hover and focus) and full labels from 1600px.
• Items: Proof, 01 Harness to 05 Cost (the pillar numbers), Projects, Glossary, Contact
• The component moved from site/ServicesSectionNav.jsx to common/SectionNav.jsx and is renamed to SectionIndex / SectionRail. ServicesPage.jsx only changes its import
• /ai sets --sv2-accent-text to the same values as /services. .kb-section gets scroll-margin-top, so anchor jumps clear the fixed header

Homepage (HomePage.jsx, site.js)

• New "How I work with AI" section after Delivery (#ai), using the same SectionHeader and link style as the rest of the page. It links to /ai
• The one-line "For my own builds…" note that closed the Delivery section is removed, because the teaser now says the same thing directly below it

Verification

• npm run lint exits 0
• npm run build exits 0 (this runs scripts/check-consistency.mjs first)
• CI green on this PR (CI + Lighthouse CI)
• Vercel preview opened and checked, not just localhost

Local check on vite preview with headless Edge, light theme:

• 390px: no horizontal scroll. Menu shows Work, Delivery, About, Contact, AI (current), no Services. Screenshots taken of the proof section, collapsed tools ("Show all 6"), project cards, collapsed glossary ("Show all 31"; clicking it worked) and the closing CTA
• 1366px: the matrix is the full table, all six harness tools are listed, no toggle buttons. The homepage menu shows AI and Services. The homepage teaser renders after Delivery
• grep -ri "ai-business-os|business-os|deutschon|agents.md" on the /ai component, its data, ai/index.html and useOgMeta.js: no hits
• No em dashes in any added line
• Section menu, local preview:
  • 1440px: the compact rail appears after the hero and highlights 03 on Memory.
  • 1680px: full labels, with Glossary highlighted on the glossary.
  • 390px: the "On this page" list sits under the hero.
  • /services at 1500px: the rail still works (03 highlighted on Proof).

How to test

1. Open the Vercel preview from the checks below
2. /ai on desktop:
   • The hero has the new headline, sub-line, three proof points and two buttons. The CV downloads and Email opens a mail to romazuryk@gmail.com
   • Public proof (Magic Kick) is below the hero. Both links open in a new tab
   • The page ends with the hiring call to action
   • The header has no Services link, and neither does the footer
3. /ai on a phone or a 375px viewport:
   • The project view shows cards
   • Tool lists, practice lists and the glossary show 3 items and a "Show all" button
   • Typing in the glossary search shows all matches
4. / on desktop and mobile:
   • "AI" is in the menu
   • The "How I work with AI" section after Delivery links to /ai
   • Services is still in the menu
5. /ai at 1360px or wider:
   • Scroll past the hero. The left rail appears and highlights the section in view.
   • Click a rail item. The page jumps to that section below the header.
   • Repeat on /services to confirm it still works.
6. Search /ai for "DeutschOn", "Business-OS" and "AGENTS": no results

Core loop: home → Work → a proof link → Contact (email copy, CV download) still works.

Not tested:

• Browsers and themes: only headless Edge (Chromium) was used. No real iOS Safari or Android Chrome, and dark mode was not checked.
• Viewport sizes: not checked between 768px and 800px. There the header is still the desktop one and /ai shows the table.
• Screen readers: not tested with one.
• Lighthouse: not run locally. CI will run it.

Quality gates

• Mobile checked (iOS Safari or Android Chrome, or a 375px viewport): 390px emulation only, see above
• No console errors in the preview
• Accessibility kept: landmarks, aria-label on icon-only controls, focus rings, prefers-reduced-motion
• No new npm dependency, or the reason is given in Notes
• Lucide icons use named imports and are registered in the component's ICONS map (FileDown and Mail are named imports used directly, not data-driven)
• Redirects in vercel.json checked if a route was added, moved or removed (no route changes)

Docs

• CHANGELOG.md updated under [Unreleased]
• docs/ / CLAUDE.md updated if architecture, routing or scope changed (no architecture change)

Screenshots

Taken locally, not attached. To be added from the Vercel preview.

Notes for review

• Old names outside /ai, left unchanged as asked. A grep of src/ for the old names finds two hits, both on the homepage:
  • src/content/site.js:102, AI Field Guide card outcome: "…including my M.Sc. capstone (DeutschOn-AI) and this site."
  • src/content/site.js:156, Experience entry: "DeutschOn-AI (capstone, preparing for pilot), AlphaRhythm (pre-beta)."
• Breakpoint. The repo has no Tailwind and no single "md" value, so mobile here means below 768px (the Tailwind md convention). The header switches to the burger menu at 800px, as before.
• Services hidden on /ai. I read "Don't show any services or prices on /ai" as covering the header and footer links too. It is a single isAiPage check in each component if you'd rather keep the link.
• Menu order. AI sits after Contact (Work, Delivery, About, Contact, AI, Services). Moving it is a one-line change in Navbar.jsx.
• Search previews unchanged. The /ai title and description used by search engines and link previews are unchanged ("AI Field Guide: Harness, Skills, Memory, Tools, Cost"). They could be aligned with the new headline in a follow-up.
• Magic Kick status. The matrix entries are marked In use because it is live.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
portfolio-fullstack	Ready	Preview	Oct 14, 2026 4:18pm UTC
portfolio-react	Ready	Preview	Oct 14, 2026 4:18pm UTC