/* Shared content: translations + project thumbs */ const I18N = { fr: { navWork: 'Mes projets', navAbout: 'À propos', navContact: 'Me contacter', name: 'Irmane', role: 'UX/UI Designer', location: 'Paris, FR', bio: "J'ai toujours trouvé les apps intuitives, jusqu'au jour où j'ai compris pourquoi. Aujourd'hui, je suis UX/UI Designer basé à Paris et je conçois des expériences de bout en bout, avec autant de soin que si c'était pour moi. Car derrière chaque interface, il y a une vraie personne.", bioShort: "Je conçois des expériences de bout en bout, avec autant de soin que si c'était pour moi.", bioAside: "Derrière chaque interface, il y a une vraie personne.", ctaPrimary: 'Travaillons ensemble', ctaSecondary: 'Découvrir mes projets', selectedWork: 'Projets sélectionnés', aboutLabel: 'À propos', indexLabel: 'Index', available: 'Disponible', availableLong: 'Disponible pour de nouveaux projets · Mai 2026', footerCredit: 'Conçu et développé par Irmane', footerColophon: 'Colophon', footerSay: 'Dire bonjour', indexCol: 'Réf.', projectCol: 'Projet', yearCol: 'Année', roleCol: 'Discipline', statusCol: 'Statut', statusLive: 'En ligne', statusCase: 'Étude', viewCase: 'Voir le projet', backToTop: 'Retour en haut', elsewhere: 'Ailleurs', nowPlaying: 'En ce moment', nowPlayingItem: 'Design System chez une scale-up fintech', based: 'Basé à', portfolioYr: 'Portfolio · 2026', section: { '01': 'Intro', '02': 'Travaux', '03': 'Contact' }, projects: [ { id:'playmobil', title:'Playmobil', desc:'Repositionnement UX & Design System', tags:['UX Research','Design System','Strategy','Accessibility'], year:'2024', role:'Lead UX · Design System', status:'live', length:'12 sem.' }, { id:'hairly', title:'Hairly', desc:'Une marketplace mobile pour la réservation de coiffure à domicile', tags:['UX Research','Product Design','User Journey'], year:'2025', role:'Product Design', status:'case', length:'8 sem.' }, { id:'kenya', title:'Kenya Airways', desc:"Réaligner une app avec l'âme d'une marque", tags:['Mobile UX','User Research','Accessibility','Recommandations'], year:'2025', role:'Mobile UX · Brand', status:'case', length:'6 sem.' }, ], }, en: { navWork: 'Selected work', navAbout: 'About', navContact: 'Get in touch', name: 'Irmane', role: 'UX/UI Designer', location: 'Paris, FR', bio: "I always found apps intuitive, until I figured out why. Today I'm a UX/UI Designer based in Paris, crafting end-to-end experiences with the same care I'd give my own. Because behind every interface, there's a real person.", bioShort: "End-to-end product design, crafted with the same care I'd give my own.", bioAside: "Behind every interface, there's a real person.", ctaPrimary: 'Let\u2019s work together', ctaSecondary: 'See my work', selectedWork: 'Selected work', aboutLabel: 'About', indexLabel: 'Index', available: 'Available', availableLong: 'Available for new projects · May 2026', footerCredit: 'Designed and built by Irmane', footerColophon: 'Colophon', footerSay: 'Say hello', indexCol: 'No.', projectCol: 'Project', yearCol: 'Year', roleCol: 'Discipline', statusCol: 'Status', statusLive: 'Live', statusCase: 'Study', viewCase: 'View case', backToTop: 'Back to top', elsewhere: 'Elsewhere', nowPlaying: 'Currently', nowPlayingItem: 'Design system at a fintech scale-up', based: 'Based in', portfolioYr: 'Portfolio · 2026', section: { '01': 'Intro', '02': 'Work', '03': 'Contact' }, projects: [ { id:'playmobil', title:'Playmobil', desc:'UX repositioning & design system', tags:['UX Research','Design System','Strategy','Accessibility'], year:'2024', role:'Lead UX · Design System', status:'live', length:'12 wks' }, { id:'hairly', title:'Hairly', desc:'A mobile marketplace for home hairstyling appointments', tags:['UX Research','Product Design','User Journey'], year:'2025', role:'Product Design', status:'case', length:'8 wks' }, { id:'kenya', title:'Kenya Airways', desc:"Realigning an app with a brand\u2019s soul", tags:['Mobile UX','User Research','Accessibility','Recommendations'], year:'2025', role:'Mobile UX · Brand', status:'case', length:'6 wks' }, ], }, }; /* — Top-bar control bits, shared shape but each variant styles its container — */ function NavToggles({ lang, setLang, theme, setTheme, ink, hover }) { const btn = { display:'inline-flex', alignItems:'center', justifyContent:'center', height:32, padding:'0 10px', borderRadius:999, border:`1px solid ${hover || 'var(--line-strong)'}`, background:'transparent', color:ink || 'var(--ink)', fontSize:12, letterSpacing:0.4, fontWeight:500, transition:'background .2s, border-color .2s', }; return (
); } /* — Typographic project thumbnails (approximations of the screenshot covers) — */ function ThumbPlaymobil({ accent }) { return (
Vers une nouvelle expérience
Design System
Playmobil
{/* Figure */}
Irmane Mze Ali · Corentin Painchaud · Ketura Toure
); } function ThumbHairly() { return (
hair·
~ ly
); } function ThumbKenya() { // Plain cream backdrop only — the recreated logo behind the cover has been // removed so the user's real dropped logo shows on a clean background. return (
); } const THUMBS = { playmobil: ThumbPlaymobil, hairly: ThumbHairly, kenya: ThumbKenya }; /* — Project cover with editable image overlay. In agent/editor mode: image-slot's empty drop UI is visible above the stylized thumb. In production (no omelette writeFile), the empty UI is hidden and the stylized thumb shows through cleanly. When the user drops an image, it covers the stylized fallback. */ function ProjectCoverWithSlot({ id, children }) { return (
{children}
); } /* — Image lightbox: click any filled to view it enlarged in a modal. Mount once near the root of a page. It listens for clicks on filled, locked image-slots (shadow-DOM events retarget to the host element), reads the rendered source and shows it full-size on a dimmed backdrop. */ function ImageLightbox() { const [src, setSrc] = React.useState(null); React.useEffect(() => { const onClick = (e) => { const el = e.target; // Plain images that opt into zoom (e.g. embedded mockups) if (el && el.tagName === 'IMG' && el.hasAttribute('data-zoom')) { if (el.closest('a')) return; const url = el.currentSrc || el.src; if (url) { e.preventDefault(); setSrc(url); } return; } if (!el || el.tagName !== 'IMAGE-SLOT') return; if (!el.hasAttribute('data-filled')) return; // Skip slots inside a link (e.g. project cover cards) — they navigate, not zoom. if (el.closest('a')) return; const img = el.shadowRoot && el.shadowRoot.querySelector('img'); const url = img && (img.currentSrc || img.src); if (url) { e.preventDefault(); setSrc(url); } }; document.addEventListener('click', onClick); return () => document.removeEventListener('click', onClick); }, []); React.useEffect(() => { if (!src) return; const onKey = (e) => { if (e.key === 'Escape') setSrc(null); }; document.addEventListener('keydown', onKey); document.body.style.overflow = 'hidden'; return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; }; }, [src]); if (!src) return null; return (
setSrc(null)} style={{ position:'fixed', inset:0, zIndex:9999, background:'rgba(8,10,14,0.86)', backdropFilter:'blur(6px)', display:'flex', alignItems:'center', justifyContent:'center', padding:'5vh 5vw', cursor:'zoom-out', animation:'lbFade .18s ease', }} > e.stopPropagation()} style={{ maxWidth:'100%', maxHeight:'100%', objectFit:'contain', transform:'scale(1.2)', transformOrigin:'center', borderRadius:12, boxShadow:'0 24px 80px rgba(0,0,0,0.5)', cursor:'default', }} />
); } Object.assign(window, { I18N, THUMBS, NavToggles, ThumbPlaymobil, ThumbHairly, ThumbKenya, ProjectCoverWithSlot, ImageLightbox }); /* — Discreet scroll progress bar: a thin line fixed at the very top of the page that fills left→right as the reader scrolls through the case. */ function ScrollProgress() { const [p, setP] = React.useState(0); React.useEffect(() => { const onScroll = () => { const el = document.documentElement; const max = el.scrollHeight - el.clientHeight; setP(max > 0 ? Math.min(1, el.scrollTop / max) : 0); }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); }; }, []); return (