From ee4801fb429c19897586495eeeb34843fa88c766 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 3 Nov 2026 20:09:50 +0000
Subject: [PATCH 1/3] Build the redesigned About page

About gets the home's intro (label, title, text and the topic map at the
same place), then one part per island of the map: the heading under the
intro text, staying in view while its part is read, and the text under
the map in Newsreader 20px/32px (18px/29px on phones). Below 1120px the
parts are one column of up to 720px. The map's dots link to the parts.
The Person JSON-LD is kept, and the page drops the legacy class.

Going from Home to About moves the map without drawing it again: Layout
now renders Astro's ClientRouter on the pages with the intro map
(introMap, on by default without the text column), held to Home and
About. TopicMap carries its canvas over to the next page's map and
Background keeps its element; links to any other page load in full, as
before, and nothing is prefetched.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013MdjUerTCBDeF5DG9puDd2
---
 astro.config.mjs                 |   1 +
 src/components/Background.astro  |  13 ++-
 src/components/IntroRouter.astro |  33 +++++++
 src/components/TopicMap.astro    |  35 +++++--
 src/layouts/Layout.astro         |  10 +-
 src/pages/about.astro            | 157 ++++++++++++++++++++++++++++---
 6 files changed, 225 insertions(+), 24 deletions(-)
 create mode 100644 src/components/IntroRouter.astro

diff --git a/astro.config.mjs b/astro.config.mjs
index 3182e6d..5e7c3d5 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -43,6 +43,7 @@ export default defineConfig({
     output: 'static',
     compressHTML: true, // Astro 7 defaults to 'jsx', which drops whitespace between inline elements
     trailingSlash: 'always', // Pages live at /page/; dist/_redirects sends /page there with a 301
+    prefetch: false, // The ClientRouter on Home and About (IntroRouter.astro) would otherwise prefetch every link hovered
     vite: {
         resolve: {
             preserveSymlinks: true
diff --git a/src/components/Background.astro b/src/components/Background.astro
index 38792f8..e369134 100644
--- a/src/components/Background.astro
+++ b/src/components/Background.astro
@@ -6,15 +6,24 @@
 // The pattern alone makes way, so the paper keeps going: around the topic map (TopicMap.astro), clear inside the
 // ellipse that fits the map's box and back to full strength at 1.55 times that size; on a page with the centred 720px
 // text column (textColumn), behind a band as wide as the column, fading out between 16px and 112px on each side.
+//
+// With `persist`, going between two pages with the map without a full page load (Layout's introMap: Home and About),
+// the router keeps this element as it is drawn, and its hole moves to the next page's map. A page with the text column
+// has its own mask, so it never shares the element.
 interface Props {
 	/** The page has the centred 720px text column of articles: the pattern is cleared behind it. */
 	textColumn?: boolean;
+	/** Keep the element, as drawn, when the router (IntroRouter.astro) goes to another page that keeps it. */
+	persist?: boolean;
 }
 
-const { textColumn = false } = Astro.props;
+const { textColumn = false, persist = false } = Astro.props;
+// The attribute that transition:persist sets. The directive itself would also add Astro's view transition styles to
+// every page with the background, the 404 page and /documents/ included, which never use the router.
+const keep = persist && !textColumn ? 'page-background' : undefined;
 ---
 
-<page-background aria-hidden="true">
+<page-background aria-hidden="true" data-astro-transition-persist={keep}>
 	<div class="paper"></div>
 	<canvas class="pattern" data-mask={textColumn ? 'column' : undefined}></canvas>
 </page-background>
diff --git a/src/components/IntroRouter.astro b/src/components/IntroRouter.astro
new file mode 100644
index 0000000..a011466
--- /dev/null
+++ b/src/components/IntroRouter.astro
@@ -0,0 +1,33 @@
+---
+// Going between Home and About without a full page load, so that the topic map, at the same place on both pages, is
+// moved rather than drawn again, and the background with it. Layout renders this in the <head> of the pages that have
+// the intro and its map (its introMap prop). It is Astro's ClientRouter, held to those pages:
+// - A link between them swaps the page in place. TopicMap carries its canvas over to the next page's map, and
+//   Background keeps its element (data-astro-transition-persist); everything else is the next page's own.
+// - A link from them to any other page loads it in full, as before, without the router fetching it first. Pages
+//   without this component load in full anyway.
+// - The page changes at once, as in the prototype: no cross-fade, and a plain swap where view transitions are missing.
+// - Nothing is prefetched (prefetch: false in astro.config.mjs), as before.
+//
+// A page's own script runs once, the first time the page is shown, and stays: a listener it adds to document or
+// window also hears the other page's events, and anything it found in the page is gone once the router swaps it.
+import { ClientRouter } from 'astro:transitions';
+---
+
+<ClientRouter fallback="swap" />
+
+<script>
+	// Home and About, the pages that share the map. Any other page, even one with this component, loads in full.
+	const INTRO_PAGES = new Set(['/', '/about/']);
+
+	document.addEventListener('astro:before-preparation', (event) => {
+		if (!INTRO_PAGES.has(event.to.pathname)) event.preventDefault();
+	});
+</script>
+
+{/* Astro's transition:animate="none", for the whole page. Inline, so that only these pages have it. */}
+<style is:inline>
+	::view-transition-group(root) { animation: none; }
+	::view-transition-old(root) { animation: none; opacity: 0; mix-blend-mode: normal; }
+	::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
+</style>
diff --git a/src/components/TopicMap.astro b/src/components/TopicMap.astro
index d202f8b..b43b996 100644
--- a/src/components/TopicMap.astro
+++ b/src/components/TopicMap.astro
@@ -11,6 +11,11 @@
 // - With `links`, the dots are links, for example to the matching part of a page; otherwise they are buttons.
 // - Setting data-picked="<topic>" on the <topic-map> element marks that dot as picked and dims the others; removing it
 //   clears the pick. Button dots get aria-pressed to match.
+//
+// Going between two pages that both have the map without a full page load (Layout's introMap: Home and About), the
+// router keeps the drawing: the canvas is carried over (data-astro-transition-persist) into the next page's
+// <topic-map>, which is otherwise that page's own, with its own dots (buttons or links), no data-picked and no
+// listeners. Nothing is drawn again unless the map's size changed.
 import spec from '../data/topic-map.json';
 import mapUrl from '../assets/background/map.png?url';
 
@@ -38,7 +43,8 @@ const topics = spec.topics.map((t) => ({ ...t, id: t.id as Topic, href: links[t.
 
 <link rel="preload" href={mapUrl} as="image" type="image/png" />
 <topic-map class="tm" role="group" aria-label={label} data-src={mapUrl} style={`aspect-ratio: ${boxW} / ${boxH}`}>
-	<canvas class="tm-print" aria-hidden="true"></canvas>
+	{/* data-astro-transition-persist is what transition:persist sets, without Astro's view transition styles. */}
+	<canvas class="tm-print" aria-hidden="true" data-astro-transition-persist="topic-map-print"></canvas>
 	<div class="tm-labels">
 		{topics.map((t) => <span class="tm-area" style={place(t.areaAt)}>{t.area}</span>)}
 		{topics.map((t) =>
@@ -155,6 +161,10 @@ const topics = spec.topics.map((t) => ({ ...t, id: t.id as Topic, href: links[t.
 	type MapData = { grey: Uint8Array; w: number; h: number; mask: HTMLCanvasElement };
 	let loading: Promise<MapData> | null = null;
 
+	// What each canvas holds: its [width, height, pixel ratio] when drawn. It is kept by canvas rather than by map, so a
+	// canvas carried over to the next page's map counts as drawn there.
+	const drawnSizes = new WeakMap<HTMLCanvasElement, number[]>();
+
 	// map.png (data-src) is the grey image the prototype gave the shader. The prototype also masked the print to where
 	// there is ink, as the shader leaves a faint dot on bare paper, and faded the land over the outer 4% of the box.
 	// If the image can't be had, the map shows its labels and dots alone, and the next draw tries again.
@@ -245,7 +255,6 @@ const topics = spec.topics.map((t) => ({ ...t, id: t.id as Topic, href: links[t.
 
 	class TopicMap extends HTMLElement {
 		static observedAttributes = ['data-picked'];
-		#drawn: number[] | null = null;
 		#drawing = false;
 		#timer = 0;
 		#observer = new ResizeObserver(() => this.#resized());
@@ -277,13 +286,20 @@ const topics = spec.topics.map((t) => ({ ...t, id: t.id as Topic, href: links[t.
 			this.#mark();
 		}
 
+		#canvas() {
+			return this.querySelector<HTMLCanvasElement>('.tm-print');
+		}
+
 		#draw() {
-			const canvas = this.querySelector<HTMLCanvasElement>('.tm-print');
+			const canvas = this.#canvas();
 			if (!canvas || !this.dataset.src || this.#drawing || !this.clientWidth) return;
 			this.#drawing = true;
 			load(this.dataset.src)
 				.then((data) => {
-					this.#drawn = draw(this, canvas, data);
+					// The canvas may have gone to another page's map meanwhile: that map draws it if it needs to.
+					if (!this.contains(canvas)) return;
+					const drawn = draw(this, canvas, data);
+					if (drawn) drawnSizes.set(canvas, drawn);
 				})
 				.catch(() => {})
 				.finally(() => {
@@ -291,13 +307,20 @@ const topics = spec.topics.map((t) => ({ ...t, id: t.id as Topic, href: links[t.
 				});
 		}
 
+		#drawnSize() {
+			const canvas = this.#canvas();
+			return canvas && drawnSizes.get(canvas);
+		}
+
 		// Drawn once. While the map is resized the browser stretches what is drawn; once resizing stops, it is drawn
 		// again, and only if its size changed by more than a tenth, or it moved to a screen with another pixel density.
 		#resized = () => {
 			clearTimeout(this.#timer);
-			if (!this.#drawn) return this.#draw();
+			if (!this.#drawnSize()) return this.#draw();
 			this.#timer = window.setTimeout(() => {
-				const [w, h, dpr] = this.#drawn!;
+				const drawn = this.#drawnSize();
+				if (!drawn) return this.#draw();
+				const [w, h, dpr] = drawn;
 				if (Math.abs(this.clientWidth - w) > w / 10 || Math.abs(this.clientHeight - h) > h / 10 || pixelRatio() !== dpr) this.#draw();
 			}, 200);
 		};
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 7717a49..b70de5f 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -4,6 +4,7 @@ import '../styles/legacy.css';
 import Background from '../components/Background.astro';
 import Frame from '../components/Frame.astro';
 import Favicons from '../components/Favicons.astro';
+import IntroRouter from '../components/IntroRouter.astro';
 import monoFont from '../fonts/dejavu-sans-mono.woff2?url';
 import { SITE_SHARE, type Share } from '../lib/share';
 
@@ -17,6 +18,10 @@ interface Props {
   textColumn?: boolean;
   /** Ask search engines not to index the page. */
   noindex?: boolean;
+  /** The page opens with the intro and its topic map, as Home and About do: going between those pages then happens
+      without a full page load, and the map and the background stay as they are drawn (IntroRouter.astro).
+      On by default on pages without the text column. */
+  introMap?: boolean;
 }
 
 // Accept props for meta tags. `share` is the page's share image, the site's unless it has its own.
@@ -27,6 +32,7 @@ const {
   type = 'website',
   textColumn = type === 'article',
   noindex = false,
+  introMap = !textColumn,
 } = Astro.props;
 const ogImage = new URL(share.path, Astro.site).toString();
 
@@ -72,10 +78,12 @@ const canonical = canonicalURL.toString();
 
 		<!-- Every page's text starts in the mono font, so fetch it with the page -->
 		<link rel="preload" href={monoFont} as="font" type="font/woff2" crossorigin />
+
+		{introMap && <IntroRouter />}
 	</head>
 	<body>
 		<a class="skip-link" href="#main">Skip to main content</a>
-		<Background textColumn={textColumn} />
+		<Background textColumn={textColumn} persist={introMap} />
 		<Frame>
 			<slot />
 		</Frame>
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 87c6966..cdcef40 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,5 +1,9 @@
 ---
+// About: the same intro as the home, so the label, the title and the map sit at the same place on both pages, then
+// one part per island of the map. Each part's heading stays in view under the intro text while its text, under the
+// map, is read. The map's orange dots link to the parts.
 import Layout from '../layouts/Layout.astro';
+import Intro from '../components/Intro.astro';
 import JsonLd from '../components/JsonLd.astro';
 
 // JSON-LD structured data for Person
@@ -15,30 +19,153 @@ const personSchema = {
     "https://www.linkedin.com/in/josselinperrus/"
   ]
 };
+
+// The boundary model Skills, in the owner's public skills repository.
+const boundaryModelSkills = 'https://github.com/meaningfool/skills/tree/main/skills/boundary-model';
 ---
 
 <Layout title="About | meaningfool" description="About Josselin Perrus - Product manager based in Paris">
 	<JsonLd data={personSchema} />
-	<main id="main" class="legacy">
-		<div class="content">
-			<h1>About me</h1>
-			<p>🏁 Customer success is the goal. (Productized) software may be solution. And it may not. Whatever works</p>
-			<p>👂 Actively listening is where it all starts and ends.</p>
-			<p>⚙️ "Perfection is achieved when there is nothing left to take away." is the rightful defintion of a solution / system</p>
-			<p>&nbsp;</p>
-			<p>🐥 I'm the father of 1, and when I get away, I'm probably bikepaching 🚴‍♂️, or sailing ⛵.</p>
-			<p>👨‍🚀 What get's me going: solving problems, learning, exploring / pioneering a field.</p>
-			<p>🗺️ AI is clearing the map. I'm out there trying to make sense of the new landscape. In public</p>
-			<h1>Work with me</h1>
-			<p>👨‍💻 I mainly do freelance product manager work.</p>
-			<p>💥 But if you think I could be a unique fit for a permanent position, please reach out.</p>
+	<main id="main" class="about">
+		<Intro label="About" links={{ 'customer-success': '#customer-success', product: '#product', 'ai-agents': '#ai-agents' }}>
+			<Fragment slot="title">Customer success,<br />Product,<br />AI agents<span>.</span></Fragment>
+			I'm Josselin Perrus, product manager turned builder. I started in customer-facing roles, spent seven years building the product at Linkurious (2026 exit), and the last three years building with AI.
+		</Intro>
+
+		<div class="parts">
+			<section class="part" id="customer-success" aria-labelledby="customer-success-name">
+				<div class="tag">
+					<h2 id="customer-success-name">Customer Success</h2>
+					<p>Identify the value</p>
+				</div>
+				<div class="text">
+					<p>I started in client-facing positions. Talking to customers and making them successful is still the highlight of my day. It's also where I learnt to listen and be pragmatic.</p>
+					<p>Listen, because when you have little leverage on the product, that's your only chance to narrow the problem enough that you may be able to find a solution.</p>
+					<p>Pragmatic, because a now-solution beats everyday a beautiful solution.</p>
+				</div>
+			</section>
+
+			<section class="part" id="product" aria-labelledby="product-name">
+				<div class="tag">
+					<h2 id="product-name">Product</h2>
+					<p>Decide what to build</p>
+				</div>
+				<div class="text">
+					<p>Linkurious grew from €1K / year / customer to over €100K / year / customer. Self-financed. As the Founding PM, I had to identify the highest leverage bets, and build alignment with the cofounders. And push back on the rest.</p>
+					<p>I build focus and clarity in fluid environments on a deep understanding of customers (120 interviews in the first 6 months at Linkurious), their problems, and how they create opportunities to meet the company strategy.</p>
+				</div>
+			</section>
+
+			<section class="part" id="ai-agents" aria-labelledby="ai-agents-name">
+				<div class="tag">
+					<h2 id="ai-agents-name">AI Agents</h2>
+					<p>Software factory</p>
+				</div>
+				<div class="text">
+					<p>My very first AI project was Dec. 2023: building a knowledge graph from a sum of articles using structured extraction. Later came a data lineage tool, a report on agent frameworks and 2 voice agent projects.</p>
+					<p>I build them end to end with coding agents, from the infrastructure to the prompts, from backend/frontend to benchmarks and evals.</p>
+					<p>I <em>compound</em> building my own set of tools such as my <em>boundary model</em> Skills (<a href={boundaryModelSkills}>GitHub</a>).</p>
+				</div>
+			</section>
 		</div>
 	</main>
 </Layout>
 
 <style>
-	/* The text of About is in the serif, like the text of articles. */
-	.content p {
+	.about {
+		padding-bottom: 24px;
+	}
+
+	/* The parts sit on the intro's two columns: the heading under the intro text, the text under the map. */
+	.part {
+		display: grid;
+		grid-template-columns: 500px minmax(480px, 636px);
+		justify-content: space-between;
+		gap: 12px 56px;
+		padding: 32px 0 44px;
+		border-top: 1px solid var(--line);
+		scroll-margin-top: 24px;
+	}
+
+	/* The heading stays in view while its part is read. */
+	.tag {
+		position: sticky;
+		top: 32px;
+		align-self: start;
+		display: grid;
+		gap: 6px;
+	}
+
+	/* The orange dot, then the name. */
+	h2 {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		margin: 0;
+		font-weight: 400;
+		font-size: 18px;
+		line-height: 1.6;
+		letter-spacing: -0.04em;
+	}
+
+	h2::before {
+		content: '';
+		flex: none;
+		width: 9px;
+		height: 9px;
+		border-radius: 50%;
+		background: var(--accent);
+	}
+
+	/* The map's label for the part, in grey capitals. */
+	.tag p {
+		font-size: 10px;
+		line-height: 1.6;
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+		color: var(--muted);
+	}
+
+	/* The article's serif and size. */
+	.text {
+		display: grid;
+		gap: 20px;
 		font-family: var(--serif);
+		font-size: 20px;
+		line-height: 32px;
+	}
+
+	.text a {
+		color: inherit;
+		text-decoration: underline;
+		text-decoration-color: var(--accent);
+		text-underline-position: auto;
+		text-underline-offset: 4px;
+	}
+
+	/* The map's dots link to the parts: scroll there smoothly, unless motion is to be reduced. */
+	@media (prefers-reduced-motion: no-preference) {
+		:global(:root:has(.about .parts)) {
+			scroll-behavior: smooth;
+		}
+	}
+
+	/* Below 1120px, as the intro, one column, up to 720px. */
+	@media (max-width: 1119px) {
+		.part {
+			grid-template-columns: minmax(0, 720px);
+			justify-content: start;
+		}
+
+		.tag {
+			position: static;
+		}
+	}
+
+	@media (max-width: 900px) {
+		.text {
+			font-size: 18px;
+			line-height: 29px;
+		}
 	}
 </style>

From 016a2ce2af9ca5c29a736b8e3349ad06369c0c90 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 3 Nov 2026 20:22:40 +0000
Subject: [PATCH 2/3] Give the router to Home and About only, from one list

The router was on every page without the text column, so the temporary
/map-preview/ had it too: going from there to About kept map-preview's
pick listener running on About. src/lib/intro-pages.ts now lists Home
and About, and Layout and IntroRouter both read it, so the pages that
get the router and the pages it goes to can't drift apart. Layout's
introMap prop is gone.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013MdjUerTCBDeF5DG9puDd2
---
 astro.config.mjs                 |  2 +-
 src/components/Background.astro  |  6 +++---
 src/components/IntroRouter.astro | 13 ++++++-------
 src/components/TopicMap.astro    |  8 ++++----
 src/layouts/Layout.astro         | 14 +++++++-------
 src/lib/intro-pages.ts           |  6 ++++++
 6 files changed, 27 insertions(+), 22 deletions(-)
 create mode 100644 src/lib/intro-pages.ts

diff --git a/astro.config.mjs b/astro.config.mjs
index 5e7c3d5..0c78087 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -43,7 +43,7 @@ export default defineConfig({
     output: 'static',
     compressHTML: true, // Astro 7 defaults to 'jsx', which drops whitespace between inline elements
     trailingSlash: 'always', // Pages live at /page/; dist/_redirects sends /page there with a 301
-    prefetch: false, // The ClientRouter on Home and About (IntroRouter.astro) would otherwise prefetch every link hovered
+    prefetch: false, // Home and About's ClientRouter (IntroRouter.astro) would otherwise prefetch every link hovered
     vite: {
         resolve: {
             preserveSymlinks: true
diff --git a/src/components/Background.astro b/src/components/Background.astro
index e369134..57fc802 100644
--- a/src/components/Background.astro
+++ b/src/components/Background.astro
@@ -7,9 +7,9 @@
 // ellipse that fits the map's box and back to full strength at 1.55 times that size; on a page with the centred 720px
 // text column (textColumn), behind a band as wide as the column, fading out between 16px and 112px on each side.
 //
-// With `persist`, going between two pages with the map without a full page load (Layout's introMap: Home and About),
-// the router keeps this element as it is drawn, and its hole moves to the next page's map. A page with the text column
-// has its own mask, so it never shares the element.
+// With `persist`, going between Home and About without a full page load (IntroRouter.astro), the router keeps this
+// element as it is drawn, and its hole moves to the next page's map. A page with the text column has its own mask, so
+// it never shares the element.
 interface Props {
 	/** The page has the centred 720px text column of articles: the pattern is cleared behind it. */
 	textColumn?: boolean;
diff --git a/src/components/IntroRouter.astro b/src/components/IntroRouter.astro
index a011466..ae76800 100644
--- a/src/components/IntroRouter.astro
+++ b/src/components/IntroRouter.astro
@@ -1,11 +1,11 @@
 ---
 // Going between Home and About without a full page load, so that the topic map, at the same place on both pages, is
-// moved rather than drawn again, and the background with it. Layout renders this in the <head> of the pages that have
-// the intro and its map (its introMap prop). It is Astro's ClientRouter, held to those pages:
+// moved rather than drawn again, and the background with it. Layout renders this in the <head> of those two pages
+// (src/lib/intro-pages.ts). It is Astro's ClientRouter, held to them:
 // - A link between them swaps the page in place. TopicMap carries its canvas over to the next page's map, and
 //   Background keeps its element (data-astro-transition-persist); everything else is the next page's own.
-// - A link from them to any other page loads it in full, as before, without the router fetching it first. Pages
-//   without this component load in full anyway.
+// - A link from them to any other page loads it in full, as before, without the router fetching it first. Other pages
+//   don't have the router, so they load every page in full.
 // - The page changes at once, as in the prototype: no cross-fade, and a plain swap where view transitions are missing.
 // - Nothing is prefetched (prefetch: false in astro.config.mjs), as before.
 //
@@ -17,11 +17,10 @@ import { ClientRouter } from 'astro:transitions';
 <ClientRouter fallback="swap" />
 
 <script>
-	// Home and About, the pages that share the map. Any other page, even one with this component, loads in full.
-	const INTRO_PAGES = new Set(['/', '/about/']);
+	import { isIntroPage } from '../lib/intro-pages';
 
 	document.addEventListener('astro:before-preparation', (event) => {
-		if (!INTRO_PAGES.has(event.to.pathname)) event.preventDefault();
+		if (!isIntroPage(event.to.pathname)) event.preventDefault();
 	});
 </script>
 
diff --git a/src/components/TopicMap.astro b/src/components/TopicMap.astro
index b43b996..2a81f71 100644
--- a/src/components/TopicMap.astro
+++ b/src/components/TopicMap.astro
@@ -12,10 +12,10 @@
 // - Setting data-picked="<topic>" on the <topic-map> element marks that dot as picked and dims the others; removing it
 //   clears the pick. Button dots get aria-pressed to match.
 //
-// Going between two pages that both have the map without a full page load (Layout's introMap: Home and About), the
-// router keeps the drawing: the canvas is carried over (data-astro-transition-persist) into the next page's
-// <topic-map>, which is otherwise that page's own, with its own dots (buttons or links), no data-picked and no
-// listeners. Nothing is drawn again unless the map's size changed.
+// Going between Home and About without a full page load (IntroRouter.astro), the router keeps the drawing: the canvas
+// is carried over (data-astro-transition-persist) into the next page's <topic-map>, which is otherwise that page's
+// own, with its own dots (buttons or links), no data-picked and no listeners. Nothing is drawn again unless the map's
+// size changed.
 import spec from '../data/topic-map.json';
 import mapUrl from '../assets/background/map.png?url';
 
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index b70de5f..6d759b6 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -7,6 +7,7 @@ import Favicons from '../components/Favicons.astro';
 import IntroRouter from '../components/IntroRouter.astro';
 import monoFont from '../fonts/dejavu-sans-mono.woff2?url';
 import { SITE_SHARE, type Share } from '../lib/share';
+import { isIntroPage } from '../lib/intro-pages';
 
 interface Props {
   title?: string;
@@ -18,10 +19,6 @@ interface Props {
   textColumn?: boolean;
   /** Ask search engines not to index the page. */
   noindex?: boolean;
-  /** The page opens with the intro and its topic map, as Home and About do: going between those pages then happens
-      without a full page load, and the map and the background stay as they are drawn (IntroRouter.astro).
-      On by default on pages without the text column. */
-  introMap?: boolean;
 }
 
 // Accept props for meta tags. `share` is the page's share image, the site's unless it has its own.
@@ -32,10 +29,13 @@ const {
   type = 'website',
   textColumn = type === 'article',
   noindex = false,
-  introMap = !textColumn,
 } = Astro.props;
 const ogImage = new URL(share.path, Astro.site).toString();
 
+// Home and About go from one to the other without a full page load, keeping the map and the background as they are
+// drawn (IntroRouter.astro). The list is src/lib/intro-pages.ts.
+const introPage = isIntroPage(Astro.url.pathname);
+
 // Use Astro's built-in URL handling for canonical URLs
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 const canonical = canonicalURL.toString();
@@ -79,11 +79,11 @@ const canonical = canonicalURL.toString();
 		<!-- Every page's text starts in the mono font, so fetch it with the page -->
 		<link rel="preload" href={monoFont} as="font" type="font/woff2" crossorigin />
 
-		{introMap && <IntroRouter />}
+		{introPage && <IntroRouter />}
 	</head>
 	<body>
 		<a class="skip-link" href="#main">Skip to main content</a>
-		<Background textColumn={textColumn} persist={introMap} />
+		<Background textColumn={textColumn} persist={introPage} />
 		<Frame>
 			<slot />
 		</Frame>
diff --git a/src/lib/intro-pages.ts b/src/lib/intro-pages.ts
new file mode 100644
index 0000000..13b5f24
--- /dev/null
+++ b/src/lib/intro-pages.ts
@@ -0,0 +1,6 @@
+// Home and About, the pages that open with the intro and its topic map at the same place. Going from one to the other
+// happens without a full page load, so the map is moved rather than drawn again (src/components/IntroRouter.astro).
+// Layout gives these pages the router, and the router loads any other page in full.
+export const INTRO_PAGES: readonly string[] = ['/', '/about/'];
+
+export const isIntroPage = (pathname: string) => INTRO_PAGES.includes(pathname);

From 1f36b5ea7e5746d0e16bfe77f1bd158574352ab2 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 3 Nov 2026 20:29:58 +0000
Subject: [PATCH 3/3] Say in TopicMap that only the canvas goes to the next
 page

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013MdjUerTCBDeF5DG9puDd2
---
 src/components/TopicMap.astro | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/TopicMap.astro b/src/components/TopicMap.astro
index 2a81f71..330428d 100644
--- a/src/components/TopicMap.astro
+++ b/src/components/TopicMap.astro
@@ -269,7 +269,8 @@ const topics = spec.topics.map((t) => ({ ...t, id: t.id as Topic, href: links[t.
 			});
 		}
 
-		// Runs again if the element is moved, for example kept from one page to the next: what is drawn stays.
+		// Runs again if the element is moved: what is drawn stays. From one page to the next, only the canvas is kept, and
+		// the next page's map takes it (see the top of this file).
 		connectedCallback() {
 			this.#mark();
 			this.#observer.observe(this);