/* global React, ReactDOM */ const { useState, useEffect, useCallback, useRef } = React; /* ========================================================================== Project data ========================================================================== */ const PROJECTS = [ { id: "mode", name: "Mode Network", role: "Lead Product Designer, Mode Network", year: "2024", outcome: "Cross-chain UX for Superchain interoperability and onboarding flows.", tags: ["Product Design", "Design System", "Web3", "L2", "React", "TypeScript"], context: [ "Mode is an L2 in the Superchain ecosystem focused on AI-native applications. As lead designer I owned the end-to-end product surface: bridge, portal, identity, and the marketing funnel that fed into them.", "Shipped a redesigned bridging experience and a unified portal that consolidated three previously fragmented surfaces. Set the foundation for cross-chain UX patterns reused by ecosystem partners.", ], facts: [ ["Role", "Lead Product Designer"], ["Engagement", "May 2024 to Oct 2024"], ["Scope", "Bridge · Portal · Identity"], ["Team", "8 design + eng"], ], palette: ["#2B2EFD", "#5457FD", "#0B0B36"], }, { id: "mantle", name: "Mantle Network", role: "Senior Product Designer, Mantle", year: "2023", outcome: "Core protocol UI and ecosystem dashboards for a top-ten L2.", tags: ["Product Design", "Design System", "Dashboards", "Figma", "Web3"], context: [ "Owned the protocol-facing product surface for Mantle, including the staking dashboard, ecosystem hub, and developer tooling pages.", "Built a shared component library across three product teams. Established interaction patterns for high-stakes financial flows handled at billion-dollar TVL.", ], facts: [ ["Role", "Senior Product Designer"], ["Engagement", "Dec 2022 to Sep 2023"], ["Scope", "Protocol UI · Ecosystem"], ["Stack", "Figma · React · Tailwind"], ], palette: ["#0B0B36", "#2B2EFD", "#7E81FD"], }, { id: "windranger", name: "Windranger Labs", role: "Senior Product Designer, Windranger", year: "2023", outcome: "Multi-dApp design system for a portfolio of DeFi products.", tags: ["Design System", "Tokens", "Documentation", "Storybook"], context: [ "Built a cross-product design system spanning four dApps with shared identity, token contracts, and component libraries.", "Documentation, governance, and contribution model. Reduced new product spin-up from weeks to days.", ], facts: [ ["Role", "Senior Product Designer"], ["Engagement", "Feb 2022 to Sep 2023"], ["Scope", "Design system · 4 dApps"], ["Stack", "Figma · Storybook"], ], palette: ["#37373D", "#2B2EFD", "#C2C5C9"], }, { id: "oddscenes", name: "Odd Scenes", role: "Creative Director, Odd Scenes", year: "2024 / Now", outcome: "AI-native design studio. Brand, web, product, pitch, social, merch.", tags: ["Brand", "Web", "Product", "Pitch", "Social", "Merch", "AI"], context: [ "Founded Odd Scenes as a solo studio operated through a custom stack of automation, agents, and tooling that handles 60 to 80% of production work.", "Clients ship faster than they would with a traditional agency, at a fraction of the cost. Output across brand, web, product, pitch, social, and merch.", ], facts: [ ["Role", "Founder · Creative Director"], ["Engagement", "Nov 2024 to Present"], ["Scope", "Brand · Web · Product"], ["Live", "oddscenes.com"], ], palette: ["#030304", "#2B2EFD", "#F6244A"], external: "https://oddscenes.com", }, { id: "skillflux", name: "SkillFlux", role: "Product Designer, SkillFlux", year: "2024", outcome: "AI learning platform for personalized skill development.", tags: ["Product Design", "Onboarding", "AI UX", "Mobile"], context: [ "Designed the core learning experience for SkillFlux, an AI tutor that personalizes curriculum based on goals and pace.", "Onboarding, daily session UI, progress mechanics. Tested across cohorts of early users.", ], facts: [ ["Role", "Product Designer"], ["Scope", "Core product"], ["Stack", "Figma · React Native"], ], palette: ["#131467", "#7E81FD", "#9395FD"], }, { id: "digiheal", name: "DigiHeal", role: "Product Designer, DigiHeal", year: "2023", outcome: "Digital health platform for patient-clinician coordination.", tags: ["Healthcare", "Product Design", "Compliance", "Forms"], context: [ "Designed clinical workflows and patient-facing tools for a digital health platform serving outpatient care.", "Worked within HIPAA-compliant constraints. Reduced time-to-action for clinicians on triage flows.", ], facts: [ ["Role", "Product Designer"], ["Scope", "Patient · Clinician"], ["Stack", "Figma · React"], ], palette: ["#0e0e11", "#2B2EFD", "#37373D"], }, ]; /* ========================================================================== SVG placeholder thumbnails ========================================================================== */ function ProjectThumb({ project, variant = 0 }) { const [c1, c2, c3] = project.palette; const id = project.id + "-" + variant; // Variant 0 = card thumb. 1..4 = modal screenshots. if (variant === 0) { return ( ); } // Modal shots — different compositions if (variant === 1) { return ( ); } if (variant === 2) { return ( ); } if (variant === 3) { return ( ); } return ( ); } /* ========================================================================== Theme handling ========================================================================== */ function useTheme() { const [theme, setTheme] = useState(() => { if (typeof window === "undefined") return "dark"; try { const stored = localStorage.getItem("jb-theme"); if (stored === "light" || stored === "dark") return stored; } catch (e) {} if (window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches) { return "light"; } return "dark"; }); useEffect(() => { const root = document.documentElement; root.classList.toggle("theme-light", theme === "light"); root.classList.toggle("theme-dark", theme === "dark"); try { localStorage.setItem("jb-theme", theme); } catch (e) {} }, [theme]); return [theme, setTheme]; } function ThemeToggle({ theme, onChange }) { const next = theme === "dark" ? "light" : "dark"; return ( ); } /* ========================================================================== Top bar ========================================================================== */ function TopBar({ theme, setTheme }) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return (
{/* */} JB Justin Brazeau
); } /* ========================================================================== Hero ========================================================================== */ function Hero() { return (
); } /* ========================================================================== Work ========================================================================== */ // function WorkGrid({ onOpen }) { // return ( //
//
//
//
//
02 / Selected Work
//

Recent projects

//
// {/*
// Six projects across web3, AI, learning, and health. Click any card for context, screens, and stack. //
*/} //
//
// {PROJECTS.map((p, i) => ( // // ))} //
//
//
// ); // } function WorkGrid({ onOpen }) { return (
02 / Selected Work

Recent projects

Cover image showing thumbnails of projects

View recent demos at this link

View Work
); } /* ========================================================================== Modal ========================================================================== */ function ProjectModal({ index, onClose, onPrev, onNext }) { const dialogRef = useRef(null); useEffect(() => { const onKey = (e) => { if (e.key === "Escape") onClose(); else if (e.key === "ArrowLeft") onPrev(); else if (e.key === "ArrowRight") onNext(); }; document.addEventListener("keydown", onKey); const prevOverflow = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = prevOverflow; }; }, [onClose, onPrev, onNext]); if (index == null) return null; const p = PROJECTS[index]; return (
e.stopPropagation()} >
{p.role}

{p.name}

{p.context.map((c, i) =>

{c}

)}
{p.tags.map(t => {t})}
{p.external && (
Visit {p.external.replace(/^https?:\/\//, "")}
)}
{p.facts.map(([k, v]) => (
{k}
{v}
))}
); } /* ========================================================================== About ========================================================================== */ const TIMELINE = [ ["Nov 2024 / Now", "Odd Scenes Media", "Creative Director"], ["May 2024 / Oct 2024", "Mode Network", "Lead Product Designer"], ["Dec 2022 / Sep 2023", "Mantle Network", "Senior Product Designer"], ["Feb 2022 / Sep 2023", "Windranger Labs", "Senior Product Designer"], ["Apr 2016 / Apr 2022", "Toptal", "Freelance Product Designer"], // ["Apr 2019 / Jun 2020", "Scubago", "Frontend Developer"], // ["Apr 2017 / Mar 2019", "GoHiring GmbH", "Designer & Frontend Developer"], ]; const SKILL_GROUPS = [ ["Design", ["Product Design", "UI", "Visual Design", "Brand Identity", "Design Systems", "Information Architecture", "Typography"]], ["AI & Automation", ["Human Centered AI Design", "Generative Design", "AI Productivity", "Workflow Design", "Automation", "n8n"]], ["Development", ["Front-End", "React.js", "TypeScript", "JavaScript", "Node.js", "CSS"]], ["Strategy", ["Product Strategy", "User Research"]], ]; function About() { return (
03 / About

Senior product designer working at the intersection of design, code, and AI.

{/*
10 years across SaaS, fintech, web3, and remote startups. Currently solo at Odd Scenes.
*/}

Product designer with a decade of work behind shipped software across SaaS, fintech, web3, and remote startups. Comfortable owning a surface end-to-end, from research through production.

Eight years writing frontend code keeps the work grounded in what is buildable. The last two have been spent rebuilding personal practice around AI: agents, automation, and tooling that takes most of the production load so the human hours go into craft and direction.

{/*

*/} {/* Based in Thailand, working remote globally. */} {/* Most recently Lead Product Designer at Mode Network and Senior Product Designer at Mantle Network. */} {/*

*/}
{TIMELINE.map(([dates, company, role], i) => (
{dates}
{company}
{role}
))}
{SKILL_GROUPS.map(([label, items]) => (
{label}
{items.map(it => {it})}
))}
); } /* ========================================================================== Studio ========================================================================== */ function Studio({ theme }) { return (
); } /* ========================================================================== Contact ========================================================================== */ function Contact() { return (
05 / Contact

Let's talk.

Email justin@oddscenes.com LinkedIn linkedin.com/in/justinbrazeau GitHub github.com/justinbrazeau X x.com/justinbrazeau {/* Book a call cal.com/justinbrazeau */}
); } function Footer() { const year = new Date().getFullYear(); return ( ); } /* ========================================================================== App ========================================================================== */ function App() { const [theme, setTheme] = useTheme(); const [openIndex, setOpenIndex] = useState(null); const open = useCallback((i) => setOpenIndex(i), []); const close = useCallback(() => setOpenIndex(null), []); const prev = useCallback(() => setOpenIndex(i => (i == null ? 0 : (i - 1 + PROJECTS.length) % PROJECTS.length)), []); const next = useCallback(() => setOpenIndex(i => (i == null ? 0 : (i + 1) % PROJECTS.length)), []); return (
); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render();