/* global React */ const { useState, useEffect, useRef, useMemo } = React; // ============ TWEAK DEFAULTS ============ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "paper", "accent": "#2b4efd", "typeFamily": "editorial", "heroLayout": "split", "gridLayout": "asymmetric", "density": "comfortable", "tone": "confident", "darkMode": false }/*EDITMODE-END*/; // ============ THEMES ============ const THEMES = { ivory: { bg: "#F5F1EA", fg: "#1A1A1A", muted: "#8A8478", line: "#1A1A1A", card: "#EFEAE0" }, paper: { bg: "#FFFFFF", fg: "#0A0A0A", muted: "#777", line: "#0A0A0A", card: "#F5F5F5" }, ink: { bg: "#0E0E0E", fg: "#F5F1EA", muted: "#8A8478", line: "#F5F1EA", card: "#1A1A1A" }, graphite: { bg: "#1C1C1E", fg: "#E8E6E1", muted: "#8E8E93", line: "#E8E6E1", card: "#2A2A2C" }, bone: { bg: "#E8E2D5", fg: "#2A2520", muted: "#8C8478", line: "#2A2520", card: "#DED7C7" }, }; const TYPE_FAMILIES = { editorial: { display: '"Fraunces", "Playfair Display", Georgia, serif', body: '"Inter", -apple-system, sans-serif', mono: '"JetBrains Mono", monospace', displayWeight: 400, displayTracking: "-0.03em" }, swiss: { display: '"Inter Tight", "Helvetica Neue", sans-serif', body: '"Inter", -apple-system, sans-serif', mono: '"JetBrains Mono", monospace', displayWeight: 500, displayTracking: "-0.04em" }, mono: { display: '"JetBrains Mono", "IBM Plex Mono", monospace', body: '"JetBrains Mono", monospace', mono: '"JetBrains Mono", monospace', displayWeight: 500, displayTracking: "-0.02em" }, warm: { display: '"Instrument Serif", "Cormorant Garamond", serif', body: '"Inter", sans-serif', mono: '"JetBrains Mono", monospace', displayWeight: 400, displayTracking: "-0.02em" }, }; // ============ CONTENT ============ const PROJECTS = [ { id: 1, num: "01", title: "Lumen Health", client: "Lumen Inc.", year: "2025", role: "Lead Product Designer", tags: ["Product", "Health", "Mobile"], desc: "Reimagined the patient onboarding flow for a telehealth platform serving 2M+ users — reducing time-to-first-appointment by 64%.", color: "#E8DCC4", accent: "#3D5A47", }, { id: 2, num: "02", title: "Kindred Bank", client: "Kindred Financial", year: "2024", role: "Senior UX Designer", tags: ["Fintech", "Web", "Design System"], desc: "Built the design system and core dashboard for a community-first banking platform. From component library to investor demo.", color: "#1A2332", accent: "#D4A574", }, { id: 3, num: "03", title: "Field Notes Co.", client: "Field Notes", year: "2024", role: "Brand & Digital", tags: ["E-commerce", "Brand", "Web"], desc: "Editorial-driven storefront for an artisan stationery brand. Doubled conversion through narrative product pages and curated collections.", color: "#C8AB7F", accent: "#2A1F18", }, ]; const SERVICES = [ { num: "01", name: "Product Design", desc: "End-to-end product strategy, user research, and interaction design for digital platforms." }, { num: "02", name: "Design Systems", desc: "Scalable component libraries and design tokens that bridge design and engineering teams." }, { num: "03", name: "Brand & Identity", desc: "Visual identity systems for digital-first brands — from wordmarks to motion." }, { num: "04", name: "Design Leadership", desc: "Fractional design direction, team coaching, and process design for Series A–C startups." }, ]; const EXPERIENCE = [ { years: "2023 — Now", role: "Principal Designer", company: "Independent Practice" }, { years: "2020 — 2023", role: "Senior Product Designer", company: "Stripe" }, { years: "2018 — 2020", role: "Product Designer", company: "Figma" }, { years: "2016 — 2018", role: "Designer", company: "IDEO" }, ]; const TESTIMONIALS = [ { quote: "Alex translates ambiguity into design with a rigor that's rare. Our team's velocity tripled within a quarter of working together.", author: "Maya Chen", role: "VP Product, Lumen" }, { quote: "One of the sharpest design minds I've collaborated with. Strategic, hands-on, and deeply considered.", author: "Daniel Park", role: "CEO, Kindred Bank" }, ]; const WRITING = [ { date: "Mar 2026", title: "Designing for trust in financial products", read: "8 min" }, { date: "Jan 2026", title: "The case for slower onboarding", read: "5 min" }, { date: "Nov 2025", title: "What I learned building 4 design systems", read: "12 min" }, ]; const TONE_VARIATIONS = { confident: { eyebrow: "Independent Designer · Available Q3 2026", headline: ["Designing", "considered", "Designing", "ambitious teams."], sub: "I'm a product designer with a decade of practice — partnering with founders and product leaders to ship interfaces that earn trust and clarity.", nowText: "Building a design system for a Series B fintech, writing a long essay on calm interfaces, and learning ceramics on weekends.", }, warm: { eyebrow: "Hello — Designer based in Brooklyn", headline: ["Crafting", "thoughtful", "digital things", "with care."], sub: "I design products for people. After ten years inside teams at Stripe, Figma, and IDEO, I now work independently with founders I admire.", nowText: "Currently helping a small fintech think through their first design system — and slowly making my way through a stack of design books.", }, direct: { eyebrow: "Designer · NYC · Open for projects", headline: ["Product", "design.", "Made", "deliberately."], sub: "Ten years of product design. Four years inside Stripe and Figma. Now independent. I work with three clients at a time, deeply.", nowText: "Design system for a fintech. Essay in progress. Open to one more project starting July.", }, }; // ============ COMPONENTS ============ function CursorFollower({ theme }) { const ref = useRef(null); const [hovering, setHovering] = useState(false); useEffect(() => { const move = (e) => { if (ref.current) { ref.current.style.transform = `translate(${e.clientX}px, ${e.clientY}px) translate(-50%, -50%) scale(${hovering ? 2.5 : 1})`; } }; const over = (e) => { const t = e.target; if (t.closest && t.closest("[data-cursor='view']")) setHovering(true); else setHovering(false); }; window.addEventListener("mousemove", move); window.addEventListener("mouseover", over); return () => { window.removeEventListener("mousemove", move); window.removeEventListener("mouseover", over); }; }, [hovering]); return (
); } function Reveal({ children, delay = 0, as: Tag = "div", style = {}, ...rest }) { const ref = useRef(null); const [shown, setShown] = useState(false); useEffect(() => { const obs = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { setShown(true); obs.disconnect(); } }); }, { threshold: 0.12 } ); if (ref.current) obs.observe(ref.current); return () => obs.disconnect(); }, []); return ( {children} ); } function Marquee({ items, theme, type }) { const content = items.join(" — "); return (
{[0, 1, 2].map((i) => {content} — )}
); } function ProfilePicture({ theme, accent, size = 180 }) { return (
{/* Shoulders */} {/* Neck */} {/* Head */} {/* Hair */} {/* Subtle facial features */}
); } function Hero({ theme, type, accent, layout, tone }) { const t = TONE_VARIATIONS[tone] || TONE_VARIATIONS.confident; if (layout === "centered") { return (
{t.eyebrow} {t.headline.map((w, i) => ( {i === 1 ? {w} : w} ))} {t.sub}
); } if (layout === "stacked") { return (
{t.eyebrow} ↳ Scroll for selected work
{t.headline.map((w, i) => ( {i === 1 ? {w} : w} ))} {t.sub}
); } // split (default) return (
Alex Mercer {t.eyebrow}
{t.headline.map((w, i) => ( {i === 1 ? {w} : w} ))}
{t.sub}
Brooklyn, NY
10 years practice
Available · Q3 2026
); } function ProjectCard({ p, theme, type, accent, layout, idx }) { const [hover, setHover] = useState(false); if (layout === "list") { return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: "grid", gridTemplateColumns: "60px 1fr 200px 100px", gap: 40, alignItems: "center", padding: "40px 0", borderTop: `1px solid ${theme.line}`, textDecoration: "none", color: theme.fg, position: "relative", transition: "padding 0.5s", paddingLeft: hover ? 24 : 0, }} > {p.num} {p.title} {p.tags.join(" · ")} {p.year} ↗ {hover && (
{p.title.charAt(0)}
)} ); } // asymmetric / grid card const isLeft = idx % 2 === 0; return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: "block", textDecoration: "none", color: theme.fg, }} >
{p.num} / Case Study

{p.title}

{p.year}

{p.desc}

{p.tags.map((t) => ( {t} ))}
); } function ProjectMockup({ project, type }) { // Simple, abstract mockup - a placeholder design composed of shapes return ( ); } function Work({ theme, type, accent, layout }) { return (
§ 01 / Selected Work

Recent case studies.

 A small selection from the past 18 months. Each represents a deep partnership — strategy, design, and shipping.
{PROJECTS.map((p, i) => )}
); } function About({ theme, type, accent }) { return (
§ 02 / About
I work with founders and product leaders to design considered, useful products — from zero-to-one to mature platforms.

For ten years I've practiced inside teams at IDEO, Figma, and Stripe — shipping products used by millions and shaping design culture in fast-moving organizations.

Now I work independently, with three clients at a time. I'm drawn to honest products, calm interfaces, and teams who care about craft as much as outcomes.

); } function Services({ theme, type, accent }) { return (
§ 03 / Services

How I can help.
{SERVICES.map((s, i) => (

{s.name}

{s.num}

{s.desc}

 ))}
); } function Experience({ theme, type, accent }) { return (
§ 04 / Experience

A decade of practice.
{EXPERIENCE.map((e, i) => ( {e.years} {e.role} {e.company} ))}
); } function Testimonials({ theme, type, accent }) { return (
§ 05 / Words from Collaborators
{TESTIMONIALS.map((t, i) => (
"{t.quote}"
{t.author}
{t.role}
 ))}
); } function Writing({ theme, type, accent }) { return (
§ 06 / Writing

Recent essays.

All writing ↗
{WRITING.map((w, i) => ( {w.date} {w.title} {w.read} ))}
); } function Now({ theme, type, accent, tone }) { const t = TONE_VARIATIONS[tone] || TONE_VARIATIONS.confident; return (
§ 07 / Now
Updated April 2026
INDEPENDENT DESIGNER · AVAILABLE Q3 2026
); } function Contact({ theme, type, accent }) { return (
§ 08 / Let's Work Together
 {"Alex Mercer\nINDEPENDENT DESIGNER · AVAILABLE Q3 2026"}
Email
hello@alexmercer.studio
Elsewhere
{["Read.cv ↗", "Are.na ↗", "LinkedIn ↗", "Twitter ↗"].map((l) => ( {l} ))}
); } function Footer({ theme, type }) { return ( ); } function Nav({ theme, type, accent, name }) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 80); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); return ( ); } // ============ PORTFOLIO TWEAKS PANEL ============ function PortfolioTweaks({ tweaks, setTweak }) { const { TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakColor, TweakToggle } = window; return ( setTweak("theme", v)} /> setTweak("accent", v)} /> setTweak("typeFamily", v)} /> setTweak("heroLayout", v)} /> setTweak("gridLayout", v)} /> setTweak("density", v)} /> setTweak("tone", v)} /> ); } // ============ APP ============ function App() { const { useTweaks } = window; const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS); const [dark, setDark] = useState(false); // Resolve theme — if user toggles dark mode override, switch to dark variant const baseTheme = THEMES[tweaks.theme] || THEMES.ivory; const isDark = baseTheme.bg.startsWith("#0") || baseTheme.bg.startsWith("#1"); const theme = useMemo(() => { if (dark && !isDark) return THEMES.ink; if (!dark && isDark) return baseTheme; // keep dark theme if explicitly chosen return baseTheme; }, [dark, baseTheme, isDark]); const type = TYPE_FAMILIES[tweaks.typeFamily] || TYPE_FAMILIES.editorial; const accent = tweaks.accent; const density = tweaks.density; // density scaling const densityScale = density === "compact" ? 0.85 : density === "spacious" ? 1.15 : 1; useEffect(() => { document.body.style.background = theme.bg; document.body.style.color = theme.fg; }, [theme]); return (