/* global React, PROJECTS, PERSONAL_EXTRA, projBySlug, byKind, pmono, Placeholder, BeforeAfter, SiteNav, ContactBand, SiteFooter */ // Work index + project templates (professional / personal / academic). const KIND_BLURB = { Professional: 'Institutional-scale built work — higher-ed housing, wellness and education — carried from pre-design through construction administration.', Personal: 'Design-build remodels and ground-up residential work — designed, detailed and largely built by hand. The depth of the passion and the entrepreneur.', Academic: 'Competition, studio and thesis work — the conceptual range behind the built portfolio.', }; // ── Work index ───────────────────────────────────────────────── function WorkPage() { const [filter, setFilter] = React.useState('All'); React.useEffect(() => { window.scrollTo(0, 0); }, []); const kinds = ['Professional', 'Personal', 'Academic'].filter((k) => filter === 'All' || filter === k); return (
Selected Work

Designed, detailed, built.

Three bodies of work — institutional projects delivered with a firm, hands-on remodels built by hand, and the academic work that keeps the conceptual muscle warm.

{['All', 'Professional', 'Personal', 'Academic'].map((c) => { const on = c === filter; const count = c === 'All' ? PROJECTS.length : byKind(c).length; return ( ); })}
{kinds.map((kind) => (

{kind}

{KIND_BLURB[kind]}

{kind === 'Academic' ? : (
{byKind(kind).map((p) => )} {kind === 'Personal' && PERSONAL_EXTRA.map((p) => )}
)}
))}
); } function ProjectCard({ p }) { return (
{p.n}
{p.name}

{p.tag}

{p.details &&
{p.details[0][1]}
}
); } function ExtraCard({ p }) { return (
Additional
{p.name}

{p.blurb}

); } // Academic grid — thesis featured large, the rest as a supporting row. function AcademicGrid() { const thesis = projBySlug('temporary-architecture'); const rest = byKind('Academic').filter((p) => p.slug !== 'temporary-architecture'); return (
Master’s Thesis
{thesis.name}

{thesis.tag}

Read the thesis →
{rest.map((p) => (
{p.subtitle}
{p.name}
 ))}
); } // ── Project router ───────────────────────────────────────────── function ProjectPage({ slug }) { const p = projBySlug(slug); React.useEffect(() => { window.scrollTo(0, 0); }, [slug]); if (!p) return ; if (p.kind === 'Professional') return ; if (p.kind === 'Personal') return ; if (p.slug === 'temporary-architecture') return ; return ; } // Shared hero + prev/next within the same kind. function ProjectHero({ p, tagline }) { return (
{p.kind} · {p.n}

{p.name}

{p.subtitle &&
{p.subtitle}
} {tagline &&

{tagline}

}
); } function DetailsBlock({ details }) { return (
Project Details
{details.map(([k, v]) => (
{k}
{v}
))}
); } function NextProject({ p }) { const pool = byKind(p.kind); const idx = pool.findIndex((x) => x.slug === p.slug); const next = pool[(idx + 1) % pool.length]; if (!next || next.slug === p.slug) return null; return (
Next in {p.kind} →
{next.name}
{next.subtitle}
 ); } function Section({ num, label, title, note, children, bg }) { return (
{num} {label}

{title}

{note &&

{note}

} {children}
); } // ── Professional template ────────────────────────────────────── function ProfessionalProject({ p }) { return (
{p.desc.map((para, i) =>

{para}

)}
{p.gallery && p.gallery.length > 0 && (
{p.gallery.map(([src, cap]) => (
{cap}
{cap}
))}
)}
{p.roles.map((r, i) => (
{String(i + 1).padStart(2, '0')}
{r.title}
    {r.bullets.map((b, j) => (
  • —{b}
    • ))}
))}
{p.credit && }
); } // ── Personal template (Vision / Before-After / Narrative / Renderings) ── function PersonalProject({ p }) { let n = 0; const next = () => String(++n).padStart(2, '0'); return (
{p.designGoals && (
Design Goals
{p.designGoals.map((g) => ( {g} ))}
)} {p.vision && (

{p.vision}

)} {p.beforeAfter && (() => { const pairs = Array.isArray(p.beforeAfter) ? p.beforeAfter : [p.beforeAfter]; const row = p.beforeAfterLayout === 'row' && pairs.length > 1; return (
{pairs.map((ba, i) => (
{ba.caption &&

{ba.caption}

}
))}
); })()} {p.renderings && (
{p.renderings.map(([src, cap, thumbs]) => (
{cap}
{cap}
{thumbs && thumbs.length > 0 && (
{thumbs.map(([tsrc, tcap]) => (
{tcap}
{tcap}
))}
)}
))}
)} {p.narrative && (
{p.narrative.map((para, i) =>

{para}

)}
)} {p.credit && }
); } // ── Thesis (rich academic) ───────────────────────────────────── function ThesisProject({ p }) { return (
{p.desc.map((para, i) =>

{para}

)}

Tower massing studied in its urban context model.

{p.credit && }
); } // ── Simple academic detail ───────────────────────────────────── function AcademicProject({ p }) { return ( ); } // Labeled placeholder gallery — communicates exactly what photography would add value. function GallerySection({ num, p, title = 'Project Gallery', label = 'Imagery', note = 'Suggested photography to round out the story — drop a real image into each slot (interiors, details and key spaces a recruiter wants to see).' }) { const images = p.images || []; const slots = p.imageSlots || []; if (!images.length && !slots.length) return null; const useReal = images.length > 0; return (
{useReal ? images.map(([src, cap], i) => (
{cap}
{cap}
)) : slots.map(([lbl, kind], i) => ( ))}
); } function CreditLine({ text }) { return (

{text}

); } function NotFound() { return (
404

This page isn’t in the set.

← Back home
); } Object.assign(window, { WorkPage, ProjectPage, NotFound });