/* global React */ function FilterBar({ filters, active, onChange }) { return (
{filters.map(f => ( ))}
); } /* ───────────────────────────────────────────────────────── STICKER GLYPHS — chunky filled, 2px ink stroke, palette fills. Matches the Brand — Iconography card 1:1. Use viewBox 0 0 40 40. Each is a self-contained . ───────────────────────────────────────────────────────── */ const STICKERS = { flower: ( ), star: ( ), globe: ( ), heart: ( ), letter: ( ), flame: ( ), pin: ( ), smile: ( ), mountain: ( ), note: ( ), time: ( ), home: ( ), bell: ( ), check: ( ), }; /* Per-card sticker set — themed to the project */ const STICKER_SETS = { /* Ion Studio — AI startup */ ion: ['flame', 'star', 'globe'], /* WheelToDo — accessibility app */ wheel: ['heart', 'check', 'smile'], /* Cribd. — student accommodation */ cribd: ['home', 'pin', 'letter'], /* Leftover App — food surplus */ leftover: ['flower', 'note', 'smile'], /* Explore Your Campus — ANU web */ campus: ['pin', 'mountain', 'star'], /* A/B Testing Calculator — data tool */ abtest: ['note', 'check', 'globe'], }; /* Original mini glyphs for the small corner badge — re-used from before */ const GLYPHS = { star: , heart: , globe: (<>), flower: (), flame: , pin: , home: , }; function ProjectCard({ project, featured }) { const { tone = 'cherry', cat, title, teaser, label, meta, glyph, stickers, slug } = project; const href = `/work/${slug}`; const g = GLYPHS[glyph] || GLYPHS.star; const set = (stickers && STICKER_SETS[stickers]) || [glyph, glyph, glyph]; /* Per-card sticker layouts — each project has its own pair of positions on the edges of the color panel. Slight bleed off the edge, varied sizes/angles, no corner-locked symmetry. */ const LAYOUTS = { /* Ion Studio — featured. Big flame high-left, star low-right */ ion: [ { top: '-8%', left: '10%', size: 128, rotate: -14 }, { bottom: '10%', right: '-7%', size: 88, rotate: 12 }, ], /* WheelToDo — high-right + mid-left edge */ wheel: [ { top: '-10%', right: '20%', size: 96, rotate: 10 }, { top: '42%', left: '-8%', size: 64, rotate: -18 }, ], /* Cribd. — mid-right edge + low-left */ cribd: [ { top: '10%', right: '-10%', size: 88, rotate: -12 }, { bottom: '-8%', left: '28%', size: 62, rotate: 16 }, ], /* Leftover App — top-mid + low-right */ leftover: [ { top: '-8%', left: '32%', size: 90, rotate: 8 }, { bottom: '16%', right: '-7%', size: 62, rotate: -14 }, ], /* Explore Campus — high-left + low-mid */ campus: [ { top: '10%', left: '-9%', size: 86, rotate: -10 }, { bottom: '-9%', right: '24%', size: 60, rotate: 18 }, ], /* A/B Testing — top-right + mid-left */ abtest: [ { top: '-9%', right: '16%', size: 84, rotate: -14 }, { bottom: '22%', left: '-8%', size: 62, rotate: 12 }, ], }; const fallback = [ { top: '-10%', right: '20%', size: 90, rotate: -14 }, { bottom: '-8%', left: '20%', size: 64, rotate: 12 }, ]; const layout = LAYOUTS[stickers] || fallback; const thumbImg = project.cardImg || project.heroImg; return (
{thumbImg ? : <>{g}{label} }
{/* Sticker hover system — disabled for now, uncomment to re-enable */}
{cat}

{teaser}

{meta}
); } Object.assign(window, { FilterBar, ProjectCard });