/* Mes projets — overview / index page. Same UI vocabulary as the case studies. */ function ProjectsPage({ accent = '#6E8E3A', accentSoft = '#DAEACD', accentInk = '#355C1E' }) { const [lang, setLangState] = React.useState(() => window.getInitialLang ? window.getInitialLang() : 'fr'); const setLang = (l) => { window.setLangPref && window.setLangPref(l); setLangState(l); }; const [theme, setTheme] = React.useState('light'); const t = I18N[lang]; useContentVersion(); let L = lang === 'fr' ? { title: 'Mes projets', intro: "Une sélection de mes travaux récents en UX design, où chaque projet reflète une attention particulière portée aux besoins des utilisateurs.", } : { title: 'My projects', intro: "A selection of my recent UX work, each project reflecting particular attention to user needs.", }; L = applyContentOverrides('projets', lang, L); // Project cards — descriptions kept short for the grid view const cards = lang === 'fr' ? [ { id:'playmobil', title:'Playmobil', desc:'Repositionnement UX & Design System', tags:['Navigation','Design System','UX Research','Accessibility','Strategy'], href:'Playmobil.html' }, { id:'hairly', title:'Hairly', desc:'Une marketplace mobile pour la réservation de coiffure à domicile', tags:['UX Research','Product design','User Journey','Mobile'], href:'Hairly.html' }, { id:'kenya', title:'Kenya Airways', desc:"Application de suivi émotionnel avec une approche empathique et respectueuse de la vie privée.", tags:['Mobile UX','User Research','Accessibility'], href:'Kenya.html' }, ] : [ { id:'playmobil', title:'Playmobil', desc:'UX repositioning & design system', tags:['Navigation','Design System','UX Research','Accessibility','Strategy'], href:'Playmobil.html' }, { id:'hairly', title:'Hairly', desc:'A mobile marketplace for home hairstyling appointments', tags:['UX Research','Product design','User Journey','Mobile'], href:'Hairly.html' }, { id:'kenya', title:'Kenya Airways', desc:"Empathy-led travel companion app with strong privacy focus.", tags:['Mobile UX','User Research','Accessibility'], href:'Kenya.html' }, ]; return (
{/* — TOP NAV — */}
I.UX {t.location}
{/* Title block */}

{L.title}

{L.intro}

{/* Editorial rows */}
{/* — FOOTER — */}
); } Object.assign(window, { ProjectsPage }); /* ─── Layout variants ─────────────────────────────────────────────────── */ function GridLayout({ cards }) { return (
{cards.map(c => (
{c.title}

{c.desc}

{c.tags.map(tag => {tag})}
))}
); } function EditorialLayout({ cards, lang }) { const viewLabel = lang === 'fr' ? 'Voir le projet' : 'View case'; return (
{cards.map((c, i) => (
№ {String(i + 1).padStart(3,'0')}

{c.title}.

{c.desc}

{c.tags.slice(0,4).map(tag => {tag})}
{viewLabel}
))}
); } function IndexLayout({ cards, lang }) { const [hovered, setHovered] = React.useState(null); const C = { idx: lang === 'fr' ? 'Réf.' : 'No.', project: lang === 'fr' ? 'Projet' : 'Project', year: lang === 'fr' ? 'Année' : 'Year', tags: lang === 'fr' ? 'Discipline' : 'Discipline' }; // each project knows its year via I18N projects metadata const years = { playmobil: '2024', hairly: '2025', kenya: '2025' }; return (
{/* header row */}
{C.idx} {C.project} {C.year} {C.tags}
{cards.map((c, i) => ( setHovered(c.id)} onMouseLeave={()=>setHovered(h => h === c.id ? null : h)}> № {String(i+1).padStart(3,'0')}
{c.title}
{c.desc}
{years[c.id]}
{c.tags.slice(0,3).map(tag => {tag})}
))} {/* Floating thumb preview */}
{hovered && }
); } Object.assign(window, { GridLayout, EditorialLayout, IndexLayout }); /* — Per-project hero cards, sized for the grid (~ 1:1 card). */ function ProjectHero({ id }) { if (id === 'playmobil') return ; if (id === 'hairly') return ; if (id === 'kenya') return ; return null; } function PJPlaymobilHero() { return (
{/* eyebrow */}
Vers une nouvelle expérience
Design System
{/* huge title centred */}
Playmobil
{/* character placeholder right */}
{/* hydrant */}
{/* credits */}
Irmane Mze Ali · Corentin Painchaud · Ketura Toure
); } function PJHairlyHero() { return (
hai r ·
~ ly
); } function PJKenyaHero() { return (
K
Kenya
Airways
The Pride of Africa
); }