// PROJECT DETAIL — a full magazine-spread takeover for a single project
const ProjectDetail = ({ project, onClose }) => {
React.useEffect(() => {
const onKey = (e) => { if (e.key === "Escape") onClose(); };
window.addEventListener("keydown", onKey);
document.body.style.overflow = "hidden";
return () => {
window.removeEventListener("keydown", onKey);
document.body.style.overflow = "";
};
}, [onClose]);
if (!project) return null;
const p = project;
const detail = p.detail || {
challenge: "What was the brief? In a few sentences — what problem you were solving and who it was for. Real students, real users, real stakes.",
approach: "How you tackled it — research, sketches, the early Figma file with 47 frames, the version that didn't work, the version that did.",
outcome: "What shipped, what changed, what you learned. Add a number or two if you've got 'em — % engagement, # users, # all-nighters.",
bullets: [
"User research with 12 students — 4 interviews + a survey",
"Mid-fi wireframes, then a styled prototype in Figma",
"Built it out in React + Tailwind over a long weekend",
"Tested with 8 users, iterated twice, shipped on a Tuesday",
],
tools: ["Figma", "React", "Tailwind", "Notion", "Procreate"],
timeline: "6 weeks",
team: "Solo, with feedback from my design club",
quote: "The version we shipped is the version we almost didn't.",
};
return (
{ if (e.target === e.currentTarget) onClose(); }}
>