// variant-infographics.jsx — Domain Expertise infographics // Designed for Quiet Weight aesthetic (deep ink + steel-teal + IBM Plex) // Darkened for the LIGHT signal background (--c-bg #f8f7f4). The original // pastels were tuned for a dark theme and washed out on white. These read as // the colored dots / borders / fills across both the Trajectory and the // Capability Map (shared constant). const DOMAIN_COLORS = { genai: '#2c7d72', // steel teal — primary cv: '#3f6bb0', // muted blue mlops: '#4e7d44', // sage gov: '#7d4f97', // muted violet ml: '#9a6b29', // restrained brass research: '#5f6b65', // mineral gray }; // ——— DOMAIN EXPERTISE (quantified bars) ——————————————— // Two real, countable metrics per domain: years active + shipped projects. // No fabricated "depth" score. const DomainBars = ({ data, amber, S }) => { const maxYears = Math.max(...data.map(d => d.years)); const maxProj = Math.max(...data.map(d => d.projects)); return (
{/* column headers */}
DOMAIN
YEARS ACTIVE / max {maxYears}
SHIPPED PROJECTS / max {maxProj}
{data.map((d, i) => (
{/* label */}
{d.axis}
{d.note}
{/* years bar */}
{d.years}
{/* projects bar */}
{d.projects}
))}
); }; // ——— TIMELINE — horizontal rail with alternating labels —————— const Timeline = ({ data, amber, S }) => { const years = data.map(d => d.year); const yMin = Math.min(...years), yMax = Math.max(...years); const span = yMax - yMin; const pad = 60; // side padding so end labels don't clip return (
{/* the rail itself + its rows */}
{/* axis line — dead center */}
{/* end caps */}
{data.map((d, i) => { // Even spacing per milestone (not year-proportional) — keeps the recent // 2023–2026 cluster from overlapping while 2015–2018 sits sparse. const pct = data.length > 1 ? (i / (data.length - 1)) * 100 : 50; const c = DOMAIN_COLORS[d.color] || amber; const isTop = i % 2 === 0; return (
{/* top label block (only rendered for top-side nodes) */}
{d.year}
{d.label}
{d.org && (
{d.org}
)}
{/* connector stub (top) */}
{/* node — baseline = 140px */}
{/* connector stub (bottom) */}
{/* bottom label block */}
{d.year}
{d.label}
{d.org && (
{d.org}
)}
); })}
); }; // ——— SKILL TREE —————————————————————————————————— const SkillTree = ({ data, amber, S }) => { return (
{data.map((d, i) => { const c = DOMAIN_COLORS[d.color] || amber; return (
{/* domain header */}
{d.domain}
{d.count} PROJECTS
{/* children as tags with varying weight */}
{d.children.map((child, j) => { const heavy = child.size === 'heavy'; return ( {child.label} ); })}
); })}
); }; // ——— FULL SECTION —————————————————————————————— const ExpertiseInfographics = ({ data, amber, S, Num }) => { return ( <> {/* RADAR + LEGEND */}
Domain Expertise

Two countable metrics per domain, derived only from documented work: years active (from first shipped artifact in that area — job, publication, or patent) and shipped projects (distinct production systems, peer-reviewed papers, patents, or named programs — not sub-tasks). Hover a row to see what the count contains.

{/* TIMELINE */}
Trajectory
{/* SKILL TREE */}
Capability Map

Sub-capabilities by domain. Filled tags = heavy production experience; outlined = working familiarity.

); }; // expose globally window.ExpertiseInfographics = ExpertiseInfographics;