From 28c9d2533f8e83bc1895a6234f425d25ab59eb90 Mon Sep 17 00:00:00 2001 From: Roman Mazuryk Date: Wed, 14 Oct 2026 17:23:48 +0200 Subject: [PATCH 1/2] feat: rework /ai for hiring teams with proof, mobile layout and nav link Co-Authored-By: Claude Opus 5.5 --- CHANGELOG.md | 9 ++ src/assets/css/knowledge-base.css | 107 +++++++++++++++++++ src/components/Footer.jsx | 14 ++- src/components/KnowledgeBasePage.jsx | 153 ++++++++++++++++++++++----- src/components/Navbar.jsx | 24 ++++- src/components/site/HomePage.jsx | 8 +- src/content/site.js | 13 ++- src/data/aiKnowledgeBase.js | 70 ++++++++---- 8 files changed, 342 insertions(+), 56 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7bb24e3..1d88459 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,15 @@ Versioning: [Semantic Versioning](https://semver.org/spec/v2.0.0.html) ## [Unreleased] +### Changed (/ai for hiring teams: intro, proof, mobile, navigation) +- `/ai` hero uses the approved copy: "I help organisations move AI from pilot to everyday use, safely.", a sub-line, three proof points (Medintegro, PharmaLogis, own AI operating system) and Download CV / Email me buttons +- `/ai` closes with "Hiring a Technical PM or AI Implementation Lead?" (CV and email links) and a quieter line for AI product or pilot builders. No services or prices on `/ai`: the Services link is hidden in the header and footer on that page only +- New Public proof section on `/ai`: Magic Kick, the private-use planner kept public as implementation proof (GitHub and live app links). Its issue-to-PR workflow, ADRs and AI routes are listed in the Harness, Memory and Tools pillars and in the project matrix +- Privacy: `/ai` no longer names the personal OS or the language app. They are "My personal agent operating system" and "AI learning product" (Capstone, Dec 2026); AGENTS.md references are reduced to CLAUDE.md +- Mobile (below 768px): the project matrix becomes one card per project (name, status, short description), and best practices, project applications, tool verdicts and the glossary show 3 items with a "Show all" toggle. A glossary search always shows every match. Desktop layout unchanged +- Navigation: "AI" link to `/ai` in the header (desktop and mobile menu) and the footer +- Homepage: a "How I work with AI" teaser section after Delivery links to `/ai`. It replaces the one-line AI note that closed the Delivery section + ### Changed (/ai project matrix) - Empty matrix cells show "n/a" instead of an em dash; the "Not applicable" label for screen readers is unchanged diff --git a/src/assets/css/knowledge-base.css b/src/assets/css/knowledge-base.css index f799a53..6660b05 100644 --- a/src/assets/css/knowledge-base.css +++ b/src/assets/css/knowledge-base.css @@ -348,6 +348,113 @@ text-decoration: none; } +/* Hero proof points (buttons follow them, inside .page-hero__extra) */ +.kb-hero-points { + display: grid; + gap: 10px; + max-width: 760px; + margin: 8px 0 0; + padding: 0; + list-style: none; +} + +.kb-hero-points li { + position: relative; + padding-left: 22px; + color: var(--muted-strong); + line-height: 1.6; +} + +.kb-hero-points li::before { + content: ""; + position: absolute; + left: 2px; + top: 0.62em; + width: 8px; + height: 8px; + border-radius: 999px; + background: var(--brand); +} + +/* Public proof */ +.kb-proof-links { + display: flex; + flex-wrap: wrap; + gap: 12px; +} + +/* Mobile project cards (replace the matrix below 768px) */ +.kb-matrix-cards { + display: none; + gap: 12px; + margin: 0; + padding: 0; + list-style: none; +} + +.kb-matrix-card { + padding: 14px 16px; + border: 1px solid var(--border); + border-radius: var(--radius); + background: var(--panel); +} + +.kb-matrix-card__head { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 8px; + color: var(--text); +} + +.kb-matrix-card p { margin: 6px 0 0; color: var(--muted-strong); line-height: 1.6; } + +/* Collapsible lists: toggle only exists below 768px */ +.kb-page .kb-collapse__toggle { display: none; } + +/* Closing call to action */ +.kb-closing h2 { + margin: 0 0 10px; + font-size: clamp(20px, 3vw, 26px); +} + +.kb-closing a { + color: var(--brand); + text-decoration: underline; + text-underline-offset: 3px; + overflow-wrap: anywhere; +} + +.kb-box .kb-closing__quiet { + margin-top: 14px; + color: var(--muted); + font-size: 14px; +} + +@media (max-width: 767px) { + .kb-matrix { display: none; } + .kb-matrix-cards { display: grid; } + + .kb-collapse:not(.kb-collapse--open) > .kb-collapse__extra { display: none; } + + .kb-page .kb-collapse__toggle { + display: inline-flex; + align-items: center; + min-height: 44px; + margin-top: 6px; + padding: 0; + border: 0; + background: none; + color: var(--brand); + font: inherit; + font-weight: 600; + text-decoration: underline; + text-underline-offset: 3px; + cursor: pointer; + } +} + @media (max-width: 640px) { .kb-tools li { grid-template-columns: 58px 1fr; diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index 26a90f0..98390b7 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -1,6 +1,6 @@ import React from "react"; import { Linkedin, Github, Mail, FileDown, ArrowUpRight } from "lucide-react"; -import { contact, identity, labels, nav, navServices } from "../content/site.js"; +import { contact, identity, labels, nav, navAi, navServices } from "../content/site.js"; const SOCIAL_LINKS = [ { label: "LinkedIn", href: contact.linkedin, icon: Linkedin }, @@ -11,7 +11,10 @@ const SOCIAL_LINKS = [ export default function Footer() { const year = new Date().getFullYear(); - const isHome = typeof window !== "undefined" && (window.location.pathname.replace(/\/+$/, "") || "/") === "/"; + const path = typeof window !== "undefined" ? window.location.pathname.replace(/\/+$/, "") || "/" : "/"; + const isHome = path === "/"; + // Matches the header: no Services link on /ai. + const isAiPage = path === navAi.href; return (