/* ============================================================
Kevin Charboneau — Portfolio · shared data, icons, hooks
Exposed on window for the section + app modules.
============================================================ */
const { useState, useEffect, useRef, useLayoutEffect, useCallback } = React;
/* ---- Icons (Lucide-style, 1.7 stroke) ---- */
const Icon = {
arrowUR: (p) => (),
arrowR: (p) => (),
arrowL: (p) => (),
mail: (p) => (),
linkedin: (p) => (),
/* ---- About list glyphs (Lucide-style, 1.7 stroke) ---- */
rocket: (p) => (),
penTool: (p) => (),
sparkles: (p) => (),
compass: (p) => (),
whistle: (p) => (),
target: (p) => (),
razor: (p) => (),
swap: (p) => (),
sprout: (p) => (),
x: (p) => (),
play: (p) => (),
};
/* ---- Projects (6, vertical carousel) ---- */
const PROJECTS = [
{
slug: "ray-ban-display",
org: "Meta · Wearables & AR",
title: "Meta Ray‑Ban Display",
kicker: "AI Experiences",
year: "2024 — 2026",
role: "Design Lead // Manager",
img: "assets/port/work-arview.jpg",
video: "assets/meta-rayban-display.mp4",
tags: ["On-lens HUD", "Proactive AI", "0→1"],
blurb: "__3 years leading design on a true **world's first**.__ Fashion-forward eyewear that packs a full-color in-lens display, AI assistant, camera, and speakers- all driven by a novel and discreet neural interface.",
lede: "A display you forget you're wearing. I led design across the first consumer-ready in-lens HUD — proactive, glanceable, and out of the way.",
facts: [["Role", "Design Lead / Manager"], ["Years", "2024 — 2026"], ["Scope", "End-to-end HUD system"], ["Team", "Design + AI + Hardware"]],
sections: [
{ h: "The bet", p: "An on-lens display only works if it disappears when you don't need it. The whole system had to feel like a sixth sense, not a screen — surfacing the right glance at the right moment and then getting out of the way." },
{ h: "What I led", p: "A comprehensive surface spanning the assistant, everyday utilities and ambient widgets, designed for legibility on a tiny transparent canvas in any lighting." },
{ h: "The result", p: "A coherent on-lens language now shared across the wearables portfolio — calm typography, motion that respects attention, and interaction models tuned for hands-busy, eyes-up moments." },
],
features: [
{ name: "Navigation & local search - __critically acclaimed hit!__", role: "Led", media: "assets/MRBD_Navigation.mp4" },
{ name: "Meta AI Assistant", role: "Led", media: "assets/MRBD_MetaAI.mp4" },
{ name: "Neural handwriting input", role: "Led", media: "assets/MRBD_Handwriting.mp4" },
{ name: "Teleprompter", role: "Led", media: ["assets/MRBD_Teleprompter0.webp", "assets/MRBD_Teleprompter1.mp4", "assets/MRBD_Teleprompter2.mp4"] },
{ name: "Music, audiobooks & podcasts", role: "Led", media: "assets/MRBD_Music.mp4" },
{ name: "Widgets: sports, weather, stocks, calendar", role: "Led", media: "assets/MRBD_Widgets.mp4" },
],
},
{
slug: "ray-ban-meta",
org: "Meta · AI Glasses",
title: "Ray‑Ban Meta",
kicker: "Camera, audio & Meta AI",
year: "2021 — 2025",
role: "Design Lead // Manager",
img: "assets/imagery/render-glass-shape.jpg",
video: "uploads/RBM Hero Vid Trimmed.mp4",
tags: ["Multimodal AI", "Capture", "Audio"],
blurb: "__Our **breakout hit!** I led Design from day-zero.__ First-ever wearable with a built-in multimodal AI assistant. Record sales proved mainstream demand for AI wearables.",
lede: "The glasses that made wearable AI mainstream. I led design across capture, audio and the multimodal Meta AI assistant.",
facts: [["Role", "Design Manager"], ["Years", "2021 — 2025"], ["Scope", "Capture · Audio · AI"], ["Reach", "Flagship consumer line"]],
features: [
{ name: "Custom partnership integrations w/ Spotify, Strava, Apple Music, Amazon Music, Shazam, Audible, Calm and iHeart", role: "Led" },
{ name: "Livestreaming to Instagram", role: "Led" },
{ name: "Turn-by-turn audio navigation", role: "Led" },
{ name: "Video Calling via WhatsApp and Messenger", role: "Led" },
{ name: "Sharing from glasses to Instagram & Facebook", role: "Led" },
{ name: "Automatic media montages, photo & video capture", role: "Led" },
],
sections: [
{ h: "An assistant you talk to", p: "Designing voice-first, screen-less interaction meant rethinking feedback, trust and confirmation entirely — the product had to be understandable with your eyes on the world." },
{ h: "Craft at scale", p: "Every micro-interaction — a capture chime, an LED, a latency budget — shaped how trustworthy the product felt. I led the team that obsessed over those details." },
],
},
{
slug: "orion",
org: "Meta · Reality Labs",
title: "AR Spatial Web Browser",
kicker: "North-star wearable",
year: "2024",
role: "Design Manager",
img: "assets/orion-header.jpg",
tags: ["True AR", "Prototype", "Spatial"],
blurb: "Widely called the __most advanced AR glasses ever made__, Orion was the first true holographic world-anchored AR experience in an untethered glasses form factor.\n\nI led design for the Spatial Web Browser, charting the first steps toward an ambient internet seamlessly blending with the physical world around you.\n\nOur spatial browser was the __most retentive__ and __most engaging__ feature of the entire device (via usage metrics).",
lede: "True augmented reality in a form factor you'd actually wear. I helped define the spatial interaction model from concept to working prototype.",
facts: [["Role", "Design Lead"], ["Years", "2022 — 2024"], ["Scope", "Spatial interaction"], ["Stage", "Concept → prototype"]],
hideAch: true,
sections: [
{ h: "Designing for space", p: "Orion meant designing for a canvas with no edges — content anchored to the world, to the body, and to the hand. We built an interaction grammar that felt physical and forgiving." },
{ h: "From concept to prototype", p: "I partnered across hardware, input and AI to turn a north-star vision into something you could put on your face and use — pressure-testing every assumption against real optics and real ergonomics." },
],
},
{
slug: "ray-ban-stories",
org: "Meta · Gen 1",
title: "Ray‑Ban Stories",
kicker: "Where it started",
year: "2021 — 2022",
role: "Design Manager",
img: "assets/imagery/devices-card.jpg",
video: "assets/ray-ban-stories.mp4",
tags: ["First gen", "Capture", "0→1"],
blurb: "The smart glasses that started it all. The first collaboration to put dual cameras, open-ear audio, and hands-free capture into genuinely stylish, everyday Ray-Ban frames - proving that fashion-forward was essential in establishing product market fit for this new wearable tech category.\n\nI led design for Media Experiences, founded the Sharing feature team (across Meta), and __shipped Meta's first-ever wearable AI consumer experience__.",
lede: "Where the category started. I helped establish the capture model and companion experience that the whole line was built on.",
facts: [["Role", "Design Manager"], ["Years", "2021 — 2022"], ["Scope", "Capture · Companion app"], ["Stage", "0 → 1"]],
hideAch: true,
sections: [
{ h: "Defining the basics", p: "First-gen meant inventing the vocabulary: how you capture, how you know it worked, how content moves from glasses to phone. We set defaults that still hold up." },
],
},
{
slug: "facebook-groups",
org: "Meta · Community",
title: "Facebook Groups",
kicker: "Community for billions",
year: "2018 — 2021",
role: "Design Manager",
img: "assets/imagery/sculpture-artwork.jpg",
video: "uploads/Facebook Groups trimmed.mp4",
videoStart: 0,
tags: ["1.8B people", "Community", "Leadership"],
blurb: "Launched and optimized an __entirely new surface within Facebook__, reshaping how more than a __billion people__ find and discover community centered around what makes each of us unique.",
lede: "Community for nearly two billion people, redesigned around belonging. I grew and led the design team through its biggest era.",
facts: [["Role", "Design Manager"], ["Years", "2018 — 2021"], ["Scope", "Community product"], ["Reach", "1.8B monthly"]],
achievements: [
{ metric: "7x", label: "Growth attributed to new design" },
{ metric: "1B", label: "Monthly reach world-wide" },
],
sections: [
{ h: "Belonging at scale", p: "Designing for 1.8 billion people means every change ripples across cultures and contexts. We anchored decisions in belonging, not engagement — and built a team that could hold that standard." },
],
},
{
slug: "facebook-ads",
org: "Meta · Ads Platform",
title: "Facebook Ads Platform",
kicker: "The tools that fund the open internet",
year: "2015 — 2018",
role: "Staff Product Designer",
img: "uploads/722shots_so.png",
video: "uploads/256_720x30_shots_so.mp4",
noLoop: true,
tags: ["Enterprise", "Systems", "Scale"],
blurb: "Built measurement tools to help businesses find the causal effect of their ad spend, debunking proxy metrics that fueled the AdTech industry. Giving __superpowers__ to your favorite boutique, restaurant or brand; helping them __discover actionable insights__ to grow their business.",
lede: "The tools that fund the open internet. I owned advertiser surfaces across campaign creation, targeting and measurement.",
facts: [["Role", "Sr. Product Designer"], ["Years", "2015 — 2018"], ["Scope", "Advertiser surfaces"], ["Domain", "Enterprise complexity"]],
features: [
{ name: "Conversion Lift — redesigned complex data science tools to be broadly accessible", role: "Led" },
{ name: "Redesigned account creation, __eliminating 400,000 fraudulent impressions__ per month", role: "Led" },
{ name: "Cross-platform reach and frequency tools", role: "Led" },
{ name: "Facebook's 1st Political Ads format", role: "Led" },
],
sections: [
{ h: "Enterprise complexity, simplified", p: "Dense, high-stakes workflows for professionals who live in the tool all day. I learned to simplify ferocious complexity without dumbing it down — a skill that's been in my DNA ever since." },
],
},
{
slug: "before-meta",
kind: "before",
img: "uploads/BeforeMeta.png",
org: "Earlier career",
title: "Before Meta",
kicker: "Where it began",
year: "Before 2015",
blurb: "My career took off at the dawn of smart phones, a wild west of design experiments trying to understand the most intuitive patterns for humans to interact with this new computing platform.\n\nSince then, I've also had the opportunity to serve as the top design leader for successful startups; collaboratively and strategically influencing key product decisions we bet the entire company on.",
companies: [
{ name: "Inside Social", sub: "Organic social attribution startup", role: "Head of Design", years: "20XX — 20XX", logo: "assets/inside-social.svg" },
{ name: "Capital One", sub: "Consumer banking app", role: "Sr. Product Designer", years: "20XX — 20XX", logo: "assets/capone.svg" },
{ name: "Adaptive Data", sub: "Machine learning startup", role: "Principal Designer", years: "20XX — 20XX", logo: "assets/adaptive-data.svg" },
{ name: "T-Mobile", sub: "Launched some of the first flagship devices of the mobile computing era", role: "Sr. Product Designer", years: "20XX — 20XX", logo: "assets/tmo.svg" },
],
},
];
/* ---- Inline SVG (fetch + inject so currentColor works; mask-image is
unreliable in this sandbox). Cached + prefetched. ---- */
const __svgCache = {};
function prefetchSvg(src) {
if (__svgCache[src]) return __svgCache[src];
__svgCache[src] = fetch(src).then((r) => r.text()).then((txt) => {
// normalize: fill currentColor, fluid sizing
txt = txt.replace(/\swidth="[^"]*"/, "").replace(/\sheight="[^"]*"/, "");
txt = txt.replace("