// Variation 2 — "Clinical Signal" + Tweaks // Esthétique : sombre profond, héro aéré, ECG en accent. // 3 tweaks expressifs : Vibe, Signal intensity, Densité. const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "vibe": "clinical", "signal": 70, "density": "standard", "focus": "all" }/*EDITMODE-END*/; const FOCUS = { all: { highlight: 'la production', tagline: "Architecte technique, j'ai conçu des systèmes data critiques pour de grands comptes. Aujourd'hui j'applique cette même rigueur d'ingénierie à l'IA : concevoir des systèmes IA fiables et déployables en production.", h2: "Une discipline construite sur des systèmes critiques, appliquée à l'IA partout où la fiabilité compte.", chip: 'INGÉNIEUR IA · PRODUCTION-READY', cta: "Construisons quelque chose", cta2: 'd\'utile.', contactSub: 'En recherche d\'un poste en CDI d\'ingénieur IA. Discutons de votre besoin.' }, health: { highlight: 'santé', tagline: "Architecte technique reconverti à l'ingénierie IA. Je construis des systèmes que les cliniciens peuvent utiliser — robustes, évalués, déployés.", h2: "Une discipline construite sur des systèmes critiques, transposée à un domaine où chaque décision compte.", chip: 'ING. IA · SANTÉ · FR', cta: "Construisons quelque chose", cta2: 'd\'utile.', contactSub: 'En recherche d\'un poste en CDI d\'ingénieur IA — focus santé. Discutons de votre besoin.' }, industry: { highlight: 'l\'industrie', tagline: "Architecte technique passé à l'ingénierie IA. Je conçois des systèmes IA pour des environnements industriels — temps réel, contraintes opérationnelles, intégration legacy.", h2: "Une discipline forgée sur des systèmes critiques, appliquée à l'IA en environnement industriel.", chip: 'ING. IA · INDUSTRIE · FR', cta: "Construisons quelque chose", cta2: 'qui tient.', contactSub: 'En recherche d\'un poste en CDI d\'ingénieur IA — focus industrie. Discutons de votre besoin.' }, research: { highlight: 'la recherche', tagline: "Architecte technique passé à l'ingénierie IA. J'industrialise la recherche : pipelines reproductibles, évaluation rigoureuse, déploiement à l'échelle.", h2: "Une discipline issue des systèmes critiques, mise au service de la recherche appliquée et de son industrialisation.", chip: 'ING. IA · RECHERCHE · FR', cta: "Construisons quelque chose", cta2: 'de rigoureux.', contactSub: 'En recherche d\'un poste en CDI d\'ingénieur IA — focus recherche appliquée. Discutons de votre besoin.' }, }; const VIBES = { clinical: { label: 'Clinical', headFont: '"Inter Tight", "Inter", system-ui, sans-serif', monoFont: '"JetBrains Mono", monospace', italic: true, bg: '#06090B', bg2: '#0B1014', panel: 'rgba(255,255,255,0.025)', border: 'rgba(120,200,210,0.14)', text: '#E8EFF1', dim: '#88979B', accent: 'oklch(0.82 0.13 195)', glow: 'oklch(0.75 0.13 195 / 0.18)', radius: 8, cornerRound: '50%', }, editorial: { label: 'Editorial', headFont: '"Fraunces", "Times New Roman", serif', monoFont: '"JetBrains Mono", monospace', italic: true, bg: '#0E0B07', bg2: '#15110B', panel: 'rgba(255,240,210,0.03)', border: 'rgba(220,190,140,0.16)', text: '#F2EAD8', dim: '#9B8E72', accent: 'oklch(0.82 0.12 75)', glow: 'oklch(0.78 0.12 75 / 0.20)', radius: 2, cornerRound: '50%', }, console: { label: 'Console', headFont: '"JetBrains Mono", "Fira Code", monospace', monoFont: '"JetBrains Mono", monospace', italic: false, bg: '#040607', bg2: '#080B0D', panel: 'rgba(140,255,200,0.025)', border: 'rgba(140,255,200,0.16)', text: '#D8EFE2', dim: '#7AA293', accent: 'oklch(0.86 0.16 155)', glow: 'oklch(0.80 0.16 155 / 0.18)', radius: 0, cornerRound: '0%', }, }; const DENSITY = { spacious: { padX: 88, sectionY: 160, heroY: 120, h1: 116, h2: 56, gap: 32, projGap: 32 }, standard: { padX: 64, sectionY: 120, heroY: 80, h1: 100, h2: 48, gap: 24, projGap: 24 }, dense: { padX: 44, sectionY: 72, heroY: 56, h1: 80, h2: 40, gap: 16, projGap: 18 }, }; const V2 = () => { const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS); const [theme, setTheme] = React.useState(() => localStorage.getItem('pf-theme') || 'dark'); const dark = theme === 'dark'; const vibe = VIBES[tweaks.vibe] || VIBES.clinical; const D = DENSITY[tweaks.density] || DENSITY.standard; const sig = (tweaks.signal ?? 70) / 100; // 0..1 const F = FOCUS[tweaks.focus] || FOCUS.all; // light-mode override (keep clinical-ish neutral light variant always) const C = dark ? { ...vibe, } : { ...vibe, bg: '#FAFBFB', bg2: '#FFFFFF', panel: 'rgba(15,30,35,0.03)', border: 'rgba(15,30,35,0.10)', text: '#0B1418', dim: '#5C6C70', accent: vibe.accent.replace('0.82', '0.50').replace('0.86', '0.48'), glow: vibe.glow.replace('0.75', '0.50').replace('0.78', '0.50').replace('0.80', '0.48'), }; const projects = [ { tag: 'Performance · Vision', title: 'Aria', sub: 'Analyse posturale du coureur', desc: 'Vision par ordinateur pour la détection des compensations biomécaniques en course. Cadence, asymétrie, retour structuré pour coachs et kinésithérapeutes du sport.', stack: ['Python', 'Vision', 'MLflow', 'Docker'], metric: { v: '60 fps', l: 'temps réel' }, github: 'https://github.com/hellebuyckf/aria', }, { tag: 'Clinical · Triage', title: 'Triage Urgence', sub: 'Système d\'aide à la décision pour le tri ESI', desc: 'Pipeline LLM enrichi par RAG sur référentiels cliniques. Scoring multi-critères, journal de décision auditable, interface conçue avec la contrainte temps des urgentistes.', stack: ['LangChain', 'RAG', 'ChromaDB', 'FastAPI', 'PEFT'], metric: { v: '< 800ms', l: 'latence cible' }, migration: true, }, ]; // Signal-driven values const ecgOpacityTop = 0.05 + sig * 0.45; // 0.05..0.50 const ecgOpacityCard = 0.10 + sig * 0.55; const ecgOpacityFooter = 0.08 + sig * 0.50; const ecgStroke = 0.6 + sig * 1.4; // 0.6..2.0 const glowSize = 300 + sig * 800; // 300..1100 const glowAlpha = 0.10 + sig * 0.40; const dotPulse = sig > 0.5 ? `0 0 ${4 + sig * 18}px ${C.accent}` : 'none'; const orbitDash = sig > 0.3; return (
{/* Ambient glow */}
{/* ECG strip background — top */} {/* Nav */} {/* Hero */}
{/* Badge positionné en haut à droite, au-dessus de la ligne ECG */}
SIGNAL ACTIF · DISPONIBLE

IA fiable pour {F.highlight}.

{F.tagline}
{/* Profile orb */}
François Hellebuyck
{/* Orbit ring */} {orbitDash && ( )}
● {F.chip}
{/* About */}

{F.h2}

Aujourd'hui ingénieur IA, j'arrive avec plus d'une décennie d'expérience comme architecte applicatif sur des plateformes data critiques pour de grands comptes : conception, intégration, exploitation — des systèmes que l'on n'a pas le droit de casser.

Je porte cette discipline dans l'IA appliquée : faire fonctionner des modèles est aujourd'hui accessible — les rendre fiables, évaluables, traçables, déployables, ne l'est pas.

C'est précisément cet espace que j'occupe.

{/* Projects */}
{projects.map(p => (
{/* Corner ECG */}
{p.tag.toUpperCase()}

{p.title}

{p.sub}

{p.desc}

{p.stack.map(s => ( {s} ))}
{p.metric.v}
{p.metric.l}
{p.migration && (
Projet en cours de migration vers le portfolio
)} {p.github && ( )}
))}
{/* Skills */}
{ e.currentTarget.style.background = C.accent + '18'; e.currentTarget.style.borderColor = C.accent; }} onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = C.accent + '44'; }} > Voir la carte mentale
{[ { g: 'LLM & IA Générative', items: ['LangChain', 'HuggingFace', 'Fine-tuning', 'RAG', 'ChromaDB', 'Prompt Engineering'] }, { g: 'Développement & API', items: ['Python', 'FastAPI', 'Java', 'Spring Batch', 'Bash', 'JavaScript', 'SQL'] }, { g: 'DevOps & Administration', items: ['Docker', 'GitHub Actions', 'CI/CD', 'Linux', 'Git', 'Maven', 'Monitoring', 'Supervision'] }, { g: 'Data & Big Data', items: ['Apache Spark', 'Kafka', 'Elasticsearch', 'Hadoop', 'PySpark', 'Cloudera CDH', 'Hive', 'Oozie'] }, { g: 'Cloud Azure', items: ['IoT Hub', 'Event Hub', 'HDInsight', 'Data Factory', 'Stream Analytics', 'ACR'] }, { g: 'Outillage IA & ML', items: ['MLflow', 'LangSmith', 'Scikit-Learn', 'Pandas', 'NumPy', 'Jupyter'] }, ].map(g => (
{g.g}
{g.items.map(i => ( {i} ))}
))}
{/* Experience */}
{[ { y: 'JUIN 2025 →', t: 'AI Engineer', sub: 'OpenClassrooms', subColor: 'rgb(46.3% 31.8% 92.2%)', d: <>Formation diplômante RNCP Niveau 7 (Bac+5)  · 804h + 14 projets pratiques et un projet de fin d'étude. Spécialisation IA appliquée : LLM, RAG, fine-tuning, déploiement. }, { y: '2013 → 2025', t: 'Architecte Technique Senior', sub: 'CGI', subColor: 'rgb(88.3% 13.1% 21.4%)', d: 'Paris (2013–2016) · Montpellier (2016–2025) · Hybride. Missions grands comptes : Télécom, Finance, Industrie, Énergie. Conception et exploitation de plateformes data critiques.' }, { y: '1997 → 2012', t: 'Architecte Technique / Expert JEE / Ingénieur', sub: <>Logica (acquis par CGI), d: 'Paris · Secteurs : Télécom, Finance, Énergie, Industrie. Développement, expertise JEE, architecture applicative.' }, ].map((e, i) => (
{e.y}
{e.t}{e.sub ? · {e.sub} : null}
{e.d}
))}
{/* Contact */}

{F.cta}
{F.cta2}

{F.contactSub}

linkedin.com/in/fhellebuyck →
© {new Date().getFullYear()} FRANÇOIS HELLEBUYCK FR · INGÉNIERIE IA
{/* Tweaks panel */} setTweak('focus', v)} options={[ { value: 'all', label: 'Tous domaines' }, { value: 'health', label: 'Santé' }, { value: 'industry', label: 'Industrie' }, { value: 'research', label: 'Recherche' }, ]} /> setTweak('vibe', v)} options={[ { value: 'clinical', label: 'Clinical' }, { value: 'editorial', label: 'Editorial' }, { value: 'console', label: 'Console' }, ]} /> setTweak('signal', v)} min={0} max={100} step={1} suffix="%" /> setTweak('density', v)} options={[ { value: 'spacious', label: 'Aéré' }, { value: 'standard', label: 'Standard' }, { value: 'dense', label: 'Dense' }, ]} />
); }; const Eyebrow = ({ C, vibe, num, label, centered }) => (
/{num} {label.toUpperCase()}
); function ecgPath(w = 1600, h = 200) { const mid = h / 2; const segments = Math.floor(w / 200); let d = `M 0 ${mid}`; for (let i = 0; i < segments; i++) { const x = i * 200; d += ` L ${x + 60} ${mid}`; d += ` L ${x + 75} ${mid - 8}`; d += ` L ${x + 90} ${mid + 5}`; d += ` L ${x + 100} ${mid - h * 0.35}`; d += ` L ${x + 110} ${mid + h * 0.18}`; d += ` L ${x + 125} ${mid - 4}`; d += ` L ${x + 145} ${mid + 10}`; d += ` L ${x + 200} ${mid}`; } d += ` L ${w} ${mid}`; return d; } window.V2 = V2;