Surfaced by the clarity-review pass on the v0.1.0 release branch (B4). Do NOT apply for v0.1.0 — captured for post-launch.
src/components/Knob.svelte ties each pad to its category in three separate locations:
- CSS rule blocks:
.pad-green ↔ See Work (lines ~505-511), .pad-amber ↔ GTK (~521-527), .pad-neutral ↔ Contact (~532-537)
aria-label strings on the target-zone buttons (~352, ~362, ~373)
- Active / inactive / glow targets wired per pad
A small const map would single-source the mapping:
const PADS = [
{ id: 'see-work', color: 'green', label: 'See Work', ariaHelp: '…' },
{ id: 'gtk', color: 'amber', label: 'Get to Know', ariaHelp: '…' },
{ id: 'contact', color: 'neutral', label: 'Contact', ariaHelp: '…' },
];
Then {#each PADS} over the SVG paths and the click-target buttons collapses three near-identical CSS blocks + three near-identical buttons into one declaration.
Files
src/components/Knob.svelte
Surfaced by the clarity-review pass on the v0.1.0 release branch (B4). Do NOT apply for v0.1.0 — captured for post-launch.
src/components/Knob.svelteties each pad to its category in three separate locations:.pad-green↔ See Work (lines ~505-511),.pad-amber↔ GTK (~521-527),.pad-neutral↔ Contact (~532-537)aria-labelstrings on the target-zone buttons (~352, ~362, ~373)A small const map would single-source the mapping:
Then
{#each PADS}over the SVG paths and the click-target buttons collapses three near-identical CSS blocks + three near-identical buttons into one declaration.Files
src/components/Knob.svelte