);
}
/* ── projects (lab experiment) ─────────────────────────────────────── */
/* Three candidate layouts for a media-led Projects section, compared in
the unlisted lab: carousel (after liam.cv), framed stack (after
danielwhite.uk + anishfn), and 2-up tiles that replace the Work list
(after anishfn + brianlovin). One 16:10 media ratio for every project.
Numbers trace to resume.js (3,000 AI agents is Lucas's figure, added
there 2026-09-24). The Agent Studio still is Lucas's own
screenshot (2026-09-24). */
/* The media path comes from the lab page's config, so this public file
never names the unlisted route. */
const PROJECT_MEDIA_BASE = window.PORTRAIT_LAB_CONFIG?.projectMediaBase || "";
/* Two tabs head the section (Lucas, 2026-09-24): Work leads. */
const PROJECT_TABS = [
{ key: "work", label: "Work" },
{ key: "projects", label: "Projects" },
];
const PROJECTS = [
{
key: "agent-studio",
group: "work",
title: "Agent Studio",
meta: "Moveworks · Senior PM",
line: "Moveworks AI automation platform ($29M ARR, 3,000 AI agents).",
href: "https://www.moveworks.com/us/en/platform/ai-agent-builder",
media: { kind: "image", src: `${PROJECT_MEDIA_BASE}/agent-studio.webp`, alt: "Agent Studio's conversational process editor: an AI agent's steps as a flow, with the action's settings beside it" },
},
/* Moveworks work (draft, 2026-09-24, from Lucas's handoff). Scope is his
own words: Message API = adoption + developer relations (he did not
build it); Events API = defined, launched, grew; hackathons = NYSE
(Oct 2024) and San Jose at Moveworks.global (Apr 2025) only, nothing
from fall 2025. Marketing wrote the linked posts, so they are linked
as sources, not as his writing. [BRACKETS] are gaps Lucas must fill;
no figure here is invented. */
{
key: "message-api",
group: "work",
title: "Message API",
meta: "Moveworks",
line: "Proactive messages to employees in chat. I led adoption and developer relations.",
href: null,
media: { kind: "placeholder", label: "[IMAGE: Message API docs or Message Tester screenshot]" },
story: {
problem: "[CONFIRM: what customers couldn't do before, e.g. warn employees in chat before an IT issue hit them]",
did: "Led adoption and developer relations: [DETAIL: docs, sample code, customer onboarding?]",
result: "[METRIC: customers using it / messages sent per month]",
},
links: [
{ label: "Launch post", href: "https://www.moveworks.com/us/en/resources/blog/prevent-issues-with-moveworks-api" },
{ label: "Press release", href: "https://www.moveworks.com/us/en/company/news/press-releases/moveworks-announces-api-proactively-prevent-issues" },
],
},
{
key: "events-api",
group: "work",
title: "Events API",
meta: "Moveworks",
line: "Lets any system message employees in chat. I defined, launched, and grew it.",
href: null,
media: { kind: "diagram", diagram: "events", alt: "Your system sends an event to the Events API, the Moveworks bot turns it into a message, and it arrives in Slack or Teams" },
story: {
problem: "[CONFIRM: the problem Events API solved]",
did: "Defined the API, launched it, and grew adoption: [DETAIL: what launch and growth took]",
result: "[METRIC: customers / events per month]",
},
links: [
{ label: "Docs: message delivery", href: "https://help.moveworks.com/api-reference/events-api/message-delivery" },
{ label: "Docs: chat markup", href: "https://help.moveworks.com/api-reference/events-api/chat-markup" },
],
},
{
key: "hackathons",
group: "work",
title: "Hackathons",
meta: "Moveworks",
line: "Ran AI agent hackathons at the NYSE (Oct 2024) and Moveworks.global (Apr 2025).",
href: null,
media: { kind: "placeholder", label: "[IMAGE: photo from the NYSE or San Jose hackathon]" },
story: {
problem: "[CONFIRM: the goal, e.g. get developers building agents on Agent Studio]",
did: "Ran both events: [DETAIL: what running them covered]",
result: "[METRIC: teams / participants / agents built]",
},
links: [
{ label: "NYSE recap", href: "https://www.moveworks.com/us/en/resources/blog/agentic-automation-nyse-hackathon-recap" },
{ label: "San Jose recap", href: "https://www.moveworks.com/us/en/resources/blog/moveworks-global-agent-studio-hackathon-recap" },
],
},
{
key: "reprabbit",
group: "projects",
title: "RepRabbit",
meta: null,
line: "A workout tracker that adapts to your routine.",
href: "https://reprabbit.app",
media: { kind: "image", src: `${PROJECT_MEDIA_BASE}/reprabbit.webp`, alt: "RepRabbit: \"overhead press 95 for 8, 8, then drop to 65 for 12\" becomes a logged Overhead Press row" },
},
{
key: "matchping",
group: "projects",
title: "MatchPing",
meta: null,
line: "Pro Counter-Strike matches in your Discord, edited live as the score changes.",
href: null,
/* Lucas's MatchPing logo beside a product screenshot (2026-09-24). */
media: {
kind: "image",
src: `${PROJECT_MEDIA_BASE}/matchping.webp`,
alt: "The MatchPing logo beside a Discord channel where MatchPing posts a live match card, MOUZ 1–0 FaZe, with the Twitch stream open",
},
},
];
function usePrefersReducedMotion() {
const [reduced, setReduced] = useState(
() => window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false,
);
useEffect(() => {
const media = window.matchMedia?.("(prefers-reduced-motion: reduce)");
if (!media) return undefined;
const onChange = () => setReduced(media.matches);
media.addEventListener?.("change", onChange);
return () => media.removeEventListener?.("change", onChange);
}, []);
return reduced;
}
/* Media frame: 16:10, square corners, hairline (DESIGN.md: nothing else is
rounded). Video is muted and inline, plays only while mostly in view
(and, in the carousel, only on the active slide); reduced motion keeps
the poster. */
function ProjectMedia({ project, active = true }) {
const ref = useRef(null);
const reduced = usePrefersReducedMotion();
const { media } = project;
useEffect(() => {
const video = ref.current;
if (media.kind !== "video" || !video) return undefined;
if (reduced || !active) { video.pause(); return undefined; }
if (!window.IntersectionObserver) return undefined;
const observer = new IntersectionObserver(([entry]) => {
if (entry.intersectionRatio >= 0.6) video.play().catch(() => {});
else video.pause();
}, { threshold: [0, 0.6, 1] });
observer.observe(video);
return () => observer.disconnect();
}, [media.kind, reduced, active]);
const frame = (
{media.kind === "video" ? (
) : media.kind === "diagram" ? (
) : media.kind === "placeholder" ? (
{media.label}
) : (
)}
);
if (!project.href) return frame;
/* The title is the keyboard/screen-reader link; the frame is the same
target for the mouse, so it stays out of the tab order. */
return (
track("project_link_click", { project: project.key, via: "media" })}
>
{frame}
);
}
/* Events API in four steps, drawn in the page's own type and hairlines
so it needs no image. A U-shape so it fits a half-width tile:
your system → Events API ↓ Moveworks bot → Slack or Teams (right to left). */
function EventsFlow({ alt }) {
const step = (label, key) => {label};
const arrow = (glyph) => {glyph};
return (
{step("Your system")}{arrow("→")}{step("Events API", true)}
{}{arrow("↓")}
{step("Slack or Teams")}{arrow("←")}{step("Moveworks bot")}
);
}
/* Optional case study: problem, what Lucas did, result, then sources.
Closed by default so the list stays short. */
function ProjectStory({ project }) {
const { story, links } = project;
if (!story) return null;
const rows = [["Problem", story.problem], ["What I did", story.did], ["Result", story.result]];
return (
e.currentTarget.open && track("project_story_open", { project: project.key })}>
Case study
{rows.map(([label, text]) => (
{label}{text}
))}
{links?.length > 0 && (
Sources
{links.map((link, index) => (
{index > 0 && " · "}
{link.label}
))}
)}
);
}
/* Title + role on one row, one muted line under it, then the optional
case study — the same caption in every layout. */
function ProjectCaption({ project, tag = project.meta }) {
return (
<>
{tag && {tag}}
{project.line}
);
}
function ProjectTitle({ project }) {
return project.href ? (
track("project_link_click", { project: project.key })}
>
{project.title}
) : (
{project.title}
);
}
/* Option 1 — carousel. Native scroll-snap track (swipe/trackpad work
without JS), arrows + named dots, arrow keys on the focused track.
No auto-advance. Arrows and dots only show with more than one item. */
function ProjectsCarousel({ items }) {
const trackRef = useRef(null);
const [index, setIndex] = useState(0);
const reduced = usePrefersReducedMotion();
const go = (next) => {
const trackEl = trackRef.current;
if (!trackEl) return;
const clamped = Math.max(0, Math.min(items.length - 1, next));
trackEl.scrollTo({ left: clamped * trackEl.clientWidth, behavior: reduced ? "auto" : "smooth" });
};
const onScroll = () => {
const trackEl = trackRef.current;
if (trackEl) setIndex(Math.round(trackEl.scrollLeft / Math.max(1, trackEl.clientWidth)));
};
const current = items[index] || items[0];
return (
);
}
/* Option 2 — framed stack, full column width. */
function ProjectsStack({ items }) {
return (
{items.map((project) => (
))}
);
}
/* Option 3 — 2-up tiles. A lone item (Work today) spans both columns. */
function ProjectsTiles({ items }) {
return (
{items.map((project) => (
))}
);
}
/* Tabs styled as the section heading: the active tab in ink, the other
muted. Arrow keys move between them (WAI-ARIA tabs pattern). */
function ProjectTabs({ tab, onChange }) {
const refs = useRef({});
const move = (step) => {
const at = PROJECT_TABS.findIndex((option) => option.key === tab);
const next = PROJECT_TABS[(at + step + PROJECT_TABS.length) % PROJECT_TABS.length];
onChange(next.key);
refs.current[next.key]?.focus();
};
return (
{PROJECT_TABS.map((option) => (
))}
);
}
function WorkSection({ entranceStyle, projectsLayout }) {
const [tab, setTab] = useState("work");
/* Each Projects layout replaces the Work rows, so nothing is listed twice. */
const layouts = { carousel: ProjectsCarousel, stack: ProjectsStack, tiles: ProjectsTiles };
const Layout = layouts[projectsLayout];
if (Layout) {
const items = PROJECTS.filter((project) => project.group === tab);
return (
);
}
return (
Work
{CONTENT.work.map((item) => (
))}
);
}
function FavoritesSection({ entranceStyle }) {
return (
Favorite things
{CONTENT.favorites.map((f) => (
{f.label}
{f.value}
))}
);
}
function Quote({ q, i }) {
return (
{q.quote}
{q.name}{q.relation ? `, ${q.relation}` : ""}
);
}
function KindWordsSection({ entranceStyle }) {
// Bracketed entries in SITE.recommendations are placeholders — they render
// so the section is designable, and must be replaced with real quotes.
const quotes = SITE.recommendations || [];
if (quotes.length === 0) return null;
return (
Kind words
{quotes.map((q, i) => (
))}
);
}
function CopyEmail({ onActivate, label = CONTENT.email.label, placement = "connect", button = false }) {
const [copied, setCopied] = useState(false);
const timer = useRef(null);
useEffect(() => () => clearTimeout(timer.current), []);
const copy = async () => {
onActivate?.();
const address = CONTENT.email.address;
try {
await navigator.clipboard.writeText(address);
} catch {
// Older browsers / non-secure contexts
const ta = document.createElement("textarea");
ta.value = address;
document.body.appendChild(ta);
ta.select();
document.execCommand("copy");
ta.remove();
}
setCopied(true);
clearTimeout(timer.current);
timer.current = setTimeout(() => setCopied(false), 1600);
};
return (
{button ? (
) : (
)}
{copied ? "Copied to clipboard" : ""}
);
}
function ConnectSection({ onEmailActivate, entranceStyle, variant = "current" }) {
const [linkedin, x] = CONTENT.connectLinks;
const links = (
<>
Get in touch by or find me on{" "}
{" "}
or{" "}
.
);
/* Lab: the lead line, then buttons instead of a sentence of links. */
if (variant === "buttons") {
return (
Connect
{CONTENT.connectLead}
);
}
return (
Connect
{CONTENT.connectLead}{" "}
{links}
);
}
function Footer({ entranceStyle }) {
const time = useLocalTime(CONTENT.footerTimeZone);
return (
);
}
/* ── type & spacing experiments (lab route only) ──────────────────────── */
/* A temporary A/B bench for fonts and spacing that sits beside the other
lab experiments. The public page never renders the bench; it applies
TUNE_LIVE's tokens and loads its own fonts statically in index.html.
State lives in the URL: ?display=young|bricolage
&body=plex|bricolage|inter|public|geist&space=current|snug|rhythm
&projects=off|carousel|stack|tiles &bio=current|lines|paragraph
&cta=off|buttons &connect=current|buttons */
const TUNE_ENABLED = PORTRAIT_EXPERIENCE.isLab;
const BRICOLAGE = '"Bricolage Grotesque", system-ui, sans-serif';
const SANS_FALLBACK = 'system-ui, -apple-system, "Segoe UI", sans-serif';
/* Keeps "Product Manager" on one line on desktop. At <= 480px the lab
stylesheet sets --role-wrap-narrow: normal, because the role can't fit
beside the portrait and would push it onto its own row. */
const ROLE_NOWRAP = "var(--role-wrap-narrow, nowrap)";
const TUNE_OPTIONS = {
display: [
{ value: "young", label: "Young Serif" },
{ value: "bricolage", label: "Bricolage" },
],
body: [
{ value: "plex", label: "Plex Mono" },
{ value: "bricolage", label: "Bricolage" },
{ value: "inter", label: "Inter" },
{ value: "public", label: "Public Sans" },
{ value: "geist", label: "Geist" },
],
space: [
{ value: "current", label: "Current" },
{ value: "snug", label: "Snug" },
{ value: "rhythm", label: "Rhythm" },
],
projects: [
{ value: "off", label: "Off" },
{ value: "carousel", label: "Carousel" },
{ value: "stack", label: "Stack" },
{ value: "tiles", label: "Tiles" },
],
bio: [
{ value: "current", label: "Current" },
{ value: "lines", label: "Lines" },
{ value: "paragraph", label: "Paragraph" },
],
cta: [
{ value: "off", label: "Off" },
{ value: "buttons", label: "Buttons" },
],
connect: [
{ value: "current", label: "Current" },
{ value: "buttons", label: "Buttons" },
],
};
/* What the public page renders (shipped 2026-09-23; bio lines, bio and
connect buttons shipped 2026-09-24). The public page applies
these same tokens, so the lab's "Reset to live" can never drift from it. */
const TUNE_LIVE = {
display: "young", body: "inter", space: "snug", projects: "off",
bio: "lines", cta: "buttons", connect: "buttons",
};
const TUNE_DEFAULTS = { ...TUNE_LIVE };
const TUNE_FIELDS = Object.keys(TUNE_LIVE);
/* Spacing presets on a 4px grid, tiered by the law of proximity:
row < paragraph = heading→content < section <= intro break.
The space above a heading is >= 3x the space below it, so each heading
visibly belongs to its own content. Header lifts are zeroed so the
margins are the gaps you actually see. */
const SPACE_PRESETS = {
current: {},
snug: {
"row-gap": "8px", "para-gap": "12px", "h2-gap": "12px",
"header-gap": "24px", "section-gap": "48px", "intro-gap": "56px", "footer-gap": "36px",
},
rhythm: {
"row-gap": "12px", "para-gap": "16px", "h2-gap": "16px",
"header-gap": "32px", "section-gap": "56px", "intro-gap": "72px", "footer-gap": "44px",
},
};
const SPACE_BASE = {
"role-wrap": ROLE_NOWRAP, "font-footer": FONT, "row-pad": "0px", "header-pad": "0px", "header-lift": "0px",
"portrait-lift": "0px", "h1-drop": "0px",
};
/* Columns calibrated in the browser so the bio sets as two balanced lines
(~79 characters, inside Butterick's 45–90) with no one-word last line,
the title keeps >= 40px from the portrait, and the widest body line
ends within ~10px of the column edge — so the portrait's right edge
lines up with the text instead of floating past a ragged margin. (A
few px of slack keeps a 1px rendering difference from rewrapping.) */
const BODY_FACES = {
bricolage: { family: BRICOLAGE, size: "17px", lineHeight: "26px", column: "696px" },
inter: { family: `"Inter", ${SANS_FALLBACK}`, size: "17px", lineHeight: "26px", column: "704px" },
public: { family: `"Public Sans", ${SANS_FALLBACK}`, size: "17px", lineHeight: "26px", column: "720px" },
geist: { family: `"Geist", ${SANS_FALLBACK}`, size: "17px", lineHeight: "26px", column: "684px" },
};
function tuneTokens({ display, body, space }) {
const tokens = {};
if (display === "bricolage") {
Object.assign(tokens, {
/* A grotesque reads smaller than Young Serif at the same size, so it
steps up while keeping the ~1.36 ratio between levels. */
"font-display": BRICOLAGE, "w-display": "600", "ls-display": "-0.02em",
"fs-h1": "30px", "lh-h1": "36px", "fs-h2": "22px", "lh-h2": "28px",
});
}
const proportional = BODY_FACES[body];
if (proportional) {
/* Each proportional face gets its calibrated size and column (see
BODY_FACES). The footer clock stays mono: proportional digits
collapse at 12.5px. */
Object.assign(tokens, {
"font-body": proportional.family, "fs-body": proportional.size,
"lh-body": proportional.lineHeight, "ls-body": "0px", "column": proportional.column,
/* The mark's 3px side bleed reads as a double space next to a
proportional face's narrow word space, so it tucks back in. */
"w-bio": "400", "w-brand": "600", "lh-brand": "22px", "brand-margin": "0 -2px",
"font-footer": FONT, "role-wrap": ROLE_NOWRAP,
});
}
if (space !== "current") {
Object.assign(tokens, SPACE_BASE, SPACE_PRESETS[space]);
}
if (display === "bricolage") tokens["role-wrap"] = ROLE_NOWRAP;
return tokens;
}
function readTune() {
const pick = (key, raw) => (
TUNE_OPTIONS[key].some((option) => option.value === raw) ? raw : TUNE_DEFAULTS[key]
);
const params = new URLSearchParams(window.location.search);
let stored = {};
try {
stored = JSON.parse(window.sessionStorage.getItem("type-tune") || "{}");
} catch {
// Storage may be blocked; the URL and defaults still work.
}
const source = TUNE_FIELDS.some((key) => params.has(key)) ? {} : stored;
const choice = Object.fromEntries(
TUNE_FIELDS.map((key) => [key, pick(key, params.get(key) || source[key])]),
);
return {
...choice,
open: params.has("panel") ? params.get("panel") !== "closed" : stored.open !== false,
};
}
let appliedTuneKeys = [];
function applyTune(tune) {
const root = document.documentElement;
appliedTuneKeys.forEach((key) => root.style.removeProperty(`--${key}`));
const tokens = tuneTokens(tune);
appliedTuneKeys = Object.keys(tokens);
appliedTuneKeys.forEach((key) => root.style.setProperty(`--${key}`, tokens[key]));
}
if (TUNE_ENABLED && !document.getElementById("tune-fonts")) {
const link = document.createElement("link");
link.id = "tune-fonts";
link.rel = "stylesheet";
link.href = "https://fonts.googleapis.com/css2"
+ "?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,200..800"
+ "&family=Inter:wght@400;500;600"
+ "&family=Public+Sans:wght@400;500;600"
+ "&family=Geist:wght@400;500;600"
+ "&display=swap";
document.head.appendChild(link);
}
function TuneRow({ tune, onChange, field, label }) {
return (
{label}
{TUNE_OPTIONS[field].map((option) => (
))}
);
}
/* ── page ────────────────────────────────────────────────────────────── */
function HomeVariant() {
const [waveRequest, setWaveRequest] = useState(0);
const [themeMode, setThemeMode] = useState(() => {
if (!PORTRAIT_EXPERIENCE.isLab) return "light";
try {
const storedTheme = window.sessionStorage.getItem("portrait-lab-theme");
return LAB_THEME_OPTIONS.some((option) => option.value === storedTheme)
? storedTheme
: LAB_DEFAULT_THEME;
} catch {
return LAB_DEFAULT_THEME;
}
});
const [portraitStyle, setPortraitStyle] = useState(() => {
if (!PORTRAIT_EXPERIENCE.isLab) return "color";
try {
return window.PortraitMotion.resolvePortraitStylePreference(
window.sessionStorage.getItem("portrait-lab-style"),
PORTRAIT_EXPERIENCE,
);
} catch {
return PORTRAIT_EXPERIENCE.defaultStyle;
}
});
const [entrancePreference, setEntrancePreference] = useState(() => {
/* Editorial entrance shipped 2026-09-23; the lab starts there too. */
if (!PORTRAIT_EXPERIENCE.isLab) return "editorial";
try {
const stored = window.sessionStorage.getItem("portrait-lab-entrance");
return stored ? window.PortraitMotion.resolveEntrancePreference(stored) : "editorial";
} catch {
return "editorial";
}
});
const [namePreference, setNamePreference] = useState(() => {
if (!PORTRAIT_EXPERIENCE.isLab) return "classic";
try {
return window.sessionStorage.getItem("portrait-lab-name") === "magazine"
? "magazine"
: "classic";
} catch {
return "classic";
}
});
const [entranceReplay, setEntranceReplay] = useState(0);
const [tune, setTune] = useState(() => (TUNE_ENABLED ? readTune() : null));
applyTune(tune || TUNE_LIVE);
const updateTune = (patch) => setTune((prev) => ({ ...prev, ...patch }));
useEffect(() => {
if (!tune) return;
const { open, ...choice } = tune;
try {
window.sessionStorage.setItem("type-tune", JSON.stringify({ ...choice, open }));
} catch {
// The tuner still works when browser storage is unavailable.
}
const params = new URLSearchParams(window.location.search);
Object.entries(choice).forEach(([key, value]) => params.set(key, value));
if (open) params.delete("panel");
else params.set("panel", "closed");
window.history.replaceState(null, "", `${window.location.pathname}?${params}`);
}, [tune]);
useEffect(() => {
document.documentElement.dataset.theme = PORTRAIT_EXPERIENCE.isLab
? themeMode
: "light";
document.body.style.background = T.paper;
}, [themeMode]);
useEffect(() => {
if (!PORTRAIT_EXPERIENCE.isLab) return;
try {
window.sessionStorage.setItem("portrait-lab-theme", themeMode);
} catch {
// The preview still works when browser storage is unavailable.
}
}, [themeMode]);
useEffect(() => {
if (!PORTRAIT_EXPERIENCE.isLab) return;
try {
window.sessionStorage.setItem("portrait-lab-style", portraitStyle);
} catch {
// The preview still works when browser storage is unavailable.
}
}, [portraitStyle]);
useEffect(() => {
if (!PORTRAIT_EXPERIENCE.isLab) return;
try {
window.sessionStorage.setItem("portrait-lab-entrance", entrancePreference);
} catch {
// The preview still works when browser storage is unavailable.
}
}, [entrancePreference]);
useEffect(() => {
if (!PORTRAIT_EXPERIENCE.isLab) return;
try {
window.sessionStorage.setItem("portrait-lab-name", namePreference);
} catch {
// The comparison still works when browser storage is unavailable.
}
}, [namePreference]);
const entranceStyle = (index) => ({ "--entrance-index": index });
/* Copy and markup switches: the lab's choice, else what ships. */
const look = tune || TUNE_LIVE;
return (
{PORTRAIT_EXPERIENCE.isLab && (
)}
setWaveRequest((value) => value + 1)}
/>
{SHOW_KIND_WORDS && }
{SHOW_FAVORITE_THINGS && }
setWaveRequest((value) => value + 1)}
/>