// Direction A — System catalog (baseline)
// Tabular, indexed, slightly technical. Categories as rows in a data-table.
// Subcategories visible inline at all times as a tag-strip in a second column.
// Interaction model: subs always visible (no expand/collapse). Clicking a
// subcategory tag navigates to its index page.
//
// All colour values come from CSS custom properties on :root so brand
// variations can re-skin this layout by overriding the vars (see
// direction-a-motion.jsx and direction-a-mono.jsx).
const VAR_RULE = 'var(--rule)';
const VAR_INK = 'var(--ink)';
const VAR_INK2 = 'var(--ink-2)';
const VAR_INK3 = 'var(--ink-3)';
const VAR_PAPER = 'var(--paper)';
const VAR_PAPER2 = 'var(--paper-2)';
// Small inline lock icon used wherever an item is gated behind the
// existing password-protected page. SVG is sized in em so it tracks the
// surrounding text. currentColor lets the parent control color via CSS.
function LockIcon({ size = 12 }) {
return (
);
}
// Pattern icons by Spencer — 5x5 grid of rounded squares, currentColor fill.
// '1' = filled, '0' = empty. Original positions live in icons/*.svg.
const CATEGORY_ICON_PATTERNS = {
architecture: ['00100', '01110', '11111', '11101', '11101'],
visual: ['10101', '01110', '11111', '01110', '10101'],
coding: ['11011', '10001', '10001', '10001', '11011'],
material: ['01010', '10101', '01010', '10101', '01010'],
};
function CategoryIcon({ name, size = 32, idx = 0, lit = true }) {
const grid = CATEGORY_ICON_PATTERNS[name];
if (!grid) return null;
// Original SVG: viewBox 142.36, cell 20.47, step 30.47, radius 4.41.
return (
);
}
function SRLogo({ height = 32 }) {
return (
);
}
function A_Header({ now }) {
const mobile = window.useIsMobile();
if (mobile) {
// Phone: logo + name on a row, then practice/location stacked compactly
// below. The clock is dropped — it's a desktop flourish, not navigation.
return (
Index
Spencer Russell
Design · Architecture · MakingPortland, OR · 45.51°N
);
}
function A_Statement({ collapsed }) {
const mobile = window.useIsMobile();
if (mobile) {
// Phone: single column, left-aligned, natural wrapping (the desktop version
// pins three nowrap lines flush-right — that overflows a narrow screen).
// No hover on touch, so this just shows the bio at a comfortable size.
return (
§ 00 / About
A licensed architect and computational designer working across buildings, software, image, and the workshop, focused on creative technology and motion.
Work in four parts. Items marked with a lock require a password, available on request.
);
}
return (
§ 00 / About
{/* Bio — shown at rest. Locked to three near-equal, right-aligned lines
via controlled breaks; font scales with the viewport (clamp) so the
three-line shape and occupied width hold responsively. */}
A licensed architect and computational designer working across buildings, software, image, and the workshop, focused on creative technology and motion.
{/* Catalog description — shown on hover */}
Work in four parts. Items marked with a lock require a password, available on request.
);
}
function DirectionA_Arch() {
// Single-open accordion: only one project's detail is expanded at a time so
// the artboard's fixed height bounds to (collapsed table + one open detail).
const [openTitle, setOpenTitle] = React.useState(null);
return (
← index/architecture[spatial]
§ 01
§ 01 / Architecture
architecture
[spatial]
Completed projects shown publicly below. A detailed portfolio
of work samples — drawings, process, and case studies — is available to prospective
clients on request.
);
}
function A_ProjectRow({ p, last, open, onToggle }) {
const [h, setH] = React.useState(false);
// Treat 'TVA' as the primary/inked firm; other firms (e.g. futureform)
// render in ink-2 so the table reads as 'mostly TVA, with these others'.
// If futureform becomes the larger bucket later, just flip the check.
const firmStrong = p.firm === 'TVA';
return (