// projects.jsx — Section 3: Bento with interactive widgets const PROJECTS_FR = [ { id: 'assurance', cat: 'Assurance professionnelle · Santé', role: 'CRM sur-mesure & applications métier', year: '2024 — 2026', desc: 'Refonte complète du CRM d’un acteur de référence en assurance professionnelle de santé : douze applications métier intégrées, prospection multi-canal automatisée, scoring commercial en temps réel.', tags: ['HubSpot', 'Airtable', 'CF Workers', 'TS'], size: 'lg', metrics: [ { v: '12', k: 'apps métier' }, { v: '4×', k: 'vélocité' }, { v: '18 mo', k: 'engagement' }, ], widget: 'pipeline', }, { id: 'reno', cat: 'Rénovation énergétique', role: 'Plateforme d’éligibilité & cartographie', year: '2025', desc: 'Simulateur d’éligibilité MaPrimeRénov’ et cartographie clients déployés en edge.', tags: ['CF Workers', 'Leaflet'], size: 'sm', metrics: [{ v: '187', k: 'ms p95' }], widget: 'latency', }, { id: 'tatoo', cat: 'Studio créatif', role: 'Réservation · RGPD', year: '2024', desc: 'Plateforme de prise de rendez-vous et workflow de gestion des consentements.', tags: ['Webflow', 'Fillout', 'CF'], size: 'sm', metrics: [{ v: '100 %', k: 'conformité' }], widget: 'flow', }, { id: 'treso', cat: 'Pilotage financier', role: 'Tableau de bord de trésorerie', year: '2025', desc: 'Consolidation multi-comptes en temps réel, rapprochement bancaire automatisé, prévisionnel glissant à 90 jours.', tags: ['Airtable', 'Node.js', 'CF'], size: 'wd', metrics: [ { v: '6', k: 'comptes' }, { v: '90 j', k: 'horizon' }, { v: '0', k: 'saisie manuelle' }, ], widget: 'treasury', }, { id: 'edu', cat: 'Édition · Pédagogie', role: 'Suivi pédagogique', year: '2025', desc: 'Application de pilotage déployée dans trois établissements : 800+ élèves.', tags: ['Airtable', 'CF Workers'], size: 'sm', metrics: [{ v: '824', k: 'élèves actifs' }], widget: 'cohort', }, { id: 'lab', cat: 'Laboratoire R&D', role: 'Recherche & expérimentation', year: 'En continu', desc: 'Cellule interne d’exploration : agents IA, micro-outils, prototypes data.', tags: ['Claude API', 'Three.js'], size: 'sm', metrics: [{ v: '42', k: 'expérimentations' }], widget: 'lab', }, ]; const PROJECTS_EN = [ { ...PROJECTS_FR[0], cat: 'Professional insurance · Healthcare', role: 'Custom CRM & business apps', desc: 'Full CRM rebuild for a leading professional healthcare insurance provider: twelve embedded business apps, automated multi-channel prospecting, real-time commercial scoring.', metrics: [ { v: '12', k: 'business apps' }, { v: '4×', k: 'velocity' }, { v: '18 mo', k: 'engagement' }, ], }, { ...PROJECTS_FR[1], cat: 'Energy retrofit', role: 'Eligibility & mapping platform', desc: 'Subsidy eligibility simulator and client mapping deployed at the edge.', metrics: [{ v: '187', k: 'ms p95' }], }, { ...PROJECTS_FR[2], cat: 'Creative studio', role: 'Booking · GDPR', desc: 'Booking platform and GDPR consent workflow for a creative studio.', metrics: [{ v: '100 %', k: 'compliance' }], }, { ...PROJECTS_FR[3], cat: 'Financial steering', role: 'Treasury dashboard', desc: 'Real-time multi-account consolidation, automated reconciliation, 90-day rolling forecast.', metrics: [ { v: '6', k: 'accounts' }, { v: '90 d', k: 'horizon' }, { v: '0', k: 'manual entry' }, ], }, { ...PROJECTS_FR[4], cat: 'Education · Publishing', role: 'Student tracking', desc: 'Pedagogical platform across three schools: 800+ active students.', metrics: [{ v: '824', k: 'active students' }], }, { ...PROJECTS_FR[5], cat: 'R&D Lab', role: 'Research & experimentation', desc: 'Internal exploration cell: AI agents, micro-tools, data prototypes.', metrics: [{ v: '42', k: 'experiments' }], }, ]; /* ───────── Interactive widgets ───────── */ // Pipeline kanban — animated value ticking function WidgetPipeline() { const [tick, setTick] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setTick((x) => x + 1), 2200); return () => clearInterval(id); }, []); const stages = [ { k: 'Lead', n: 142 + (tick % 6), color: 'rgba(168,85,247,0.5)' }, { k: 'Qualifié', n: 87 + (tick % 4), color: 'rgba(168,85,247,0.65)' }, { k: 'Proposition', n: 34 + ((tick + 1) % 3),color: 'rgba(168,85,247,0.8)' }, { k: 'Signé', n: 12 + ((tick + 2) % 2),color: 'rgba(168,85,247,1)' }, ]; const max = Math.max(...stages.map(s => s.n)); return (
PIPELINE · LIVE sync 2 s
{stages.map((s, i) => (
{s.n}
{s.k}
))}
); } // Latency — live world map dots pulsing + p95 ticker function WidgetLatency() { const [v, setV] = React.useState(187); React.useEffect(() => { const id = setInterval(() => setV(160 + Math.floor(Math.random() * 40)), 1500); return () => clearInterval(id); }, []); const dots = [ { x: 28, y: 38 }, { x: 50, y: 32 }, { x: 72, y: 45 }, { x: 38, y: 60 }, { x: 60, y: 55 }, { x: 80, y: 65 }, ]; return (
{[...Array(8)].map((_, i) => )} {[...Array(11)].map((_, i) => )} {dots.map((d, i) => ( ))}
EDGE · p95 {v}ms
); } // Flow — animated DAG function WidgetFlow() { return (
Form RGPD Mail CRM Slot
); } // Treasury — sparkline + scrubbing labels (interactive on hover) function WidgetTreasury() { const ref = React.useRef(null); const [hover, setHover] = React.useState(null); const pts = [40, 55, 42, 68, 50, 72, 60, 82, 72, 88, 70, 95, 84, 92, 88, 102, 96, 110]; const months = ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D', 'J', 'F', 'M', 'A', 'M', 'J']; const max = Math.max(...pts), min = Math.min(...pts); const w = 600, h = 110; const path = pts.map((p, i) => { const x = (i / (pts.length - 1)) * w; const y = h - ((p - min) / (max - min)) * (h - 16) - 8; return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`; }).join(' '); const area = `${path} L${w},${h} L0,${h} Z`; const onMove = (e) => { const r = ref.current.getBoundingClientRect(); const x = (e.clientX - r.left) / r.width; const idx = Math.max(0, Math.min(pts.length - 1, Math.round(x * (pts.length - 1)))); setHover(idx); }; const idx = hover ?? pts.length - 1; const px = (idx / (pts.length - 1)) * 100; return (
setHover(null)}>
{months[idx]} {(pts[idx] * 1.2).toFixed(0)} k€
); } // Cohort — live activity grid function WidgetCohort() { const cols = 18, rows = 6; const [seed, setSeed] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setSeed((s) => s + 1), 2400); return () => clearInterval(id); }, []); return (
{[...Array(rows)].map((_, r) => [...Array(cols)].map((_, c) => { const i = r * cols + c; const live = ((i * 37 + seed * 13) % 100) < 32; return ( ); }) )}
); } // Lab — orbital experiments + counter function WidgetLab() { return (
); } const WIDGETS = { pipeline: WidgetPipeline, latency: WidgetLatency, flow: WidgetFlow, treasury: WidgetTreasury, cohort: WidgetCohort, lab: WidgetLab, }; /* ───────── Card ───────── */ function MagicCard({ p, idx, ctaLabel }) { const ref = React.useRef(null); const [hovered, setHovered] = React.useState(false); const Widget = WIDGETS[p.widget]; const onMove = (e) => { const el = ref.current; if (!el) return; const r = el.getBoundingClientRect(); el.style.setProperty('--mx', `${e.clientX - r.left}px`); el.style.setProperty('--my', `${e.clientY - r.top}px`); }; const num = String(idx + 1).padStart(2, '0'); return (
setHovered(true)} onMouseLeave={() => setHovered(false)} style={{ animationDelay: `${0.1 + idx * 0.08}s` }}>
{num} · SECTEUR {p.year}
{p.cat}

{p.role}

{p.desc}

{Widget && (
)} {p.metrics && (
{p.metrics.map((m, i) => (
{m.v} {m.k}
))}
)}
); } function Projects() { const { t: T, lang } = useT(); const data = lang === 'en' ? PROJECTS_EN : PROJECTS_FR; return (
{T('pj.label')}

{T('pj.title.a')}{T('pj.title.b')}

{T('pj.intro')}

{data.map((p, i) => )}
); } window.Projects = Projects;