); } // ─── Hero ───────────────────────────────────────────────────────────────────── export default function Hero({ name, lastName, title, description, skills, projects, experiences, education, languages, interests, location, }: HeroProps) { const feat1 = projects.find(p => p.name === "FOON") || projects[0]; const feat2 = projects.find(p => p.name === "Gazelle") || projects[1]; const topSkills = skills.slice(0, 10); const handleFeatureClick = (projectName: string) => { const idx = projects.findIndex((p) => p.name === projectName); if (idx !== -1) { window.dispatchEvent(new CustomEvent("openProject", { detail: { index: idx } })); } }; const levelColor = (level: string) => { if (level === "Native") return "#c8a96e"; if (level === "C2") return "#3a7a5a"; return "#4a6050"; }; return (

{/* ── Headline ─────────────────────────────────────────────────── */}

Let's bend
spacetime

{/* ── Name + description strip ──────────────────────────────── */}

{title}

{name}{" "} {lastName}

{description}

Based in {location}

{/* ── Divider ───────────────────────────────────────────────── */}

{/* ── Creative Bento grid ──────────────────────────────────────── */}

{/* 01 — FOON (Span 2x2: Large Feature) */} handleFeatureClick(feat1.name)} >

{feat1.logo && (

)}

{feat1.name}

Featured Project

{feat1.description}

{feat1.tasks.slice(0, 2).map((task) => (

{task.name} {task.status}

{task.description.length > 80 ? task.description.slice(0, 80) + "..." : task.description}

))}

{feat1.tasks.flatMap((t) => t.technologies).filter((v, i, a) => a.indexOf(v) === i).slice(0, 6).map((tech) => ( {tech} ))}

{feat1.links && (

{feat1.links.map((l) => ( ↗ {l.name} ))}

)} {/* 02 — Gazelle (Span 2x1) */} handleFeatureClick(feat2.name)} >

{feat2.logo && ( )}

{feat2.name}

{feat2.description}

{feat2.tasks.slice(0, 4).map((task) => (

{task.name}

))}

{/* 03 — Experience (Span 1x1) */}

Experience

{experiences.slice(0, 2).map((exp, i) => (

{exp.position}

{exp.company}

))}

{/* 04 — Education (Span 1x1) */}

Education

{education.slice(0, 2).map((edu, i) => (

{edu.degree}

{edu.school.split(" ").slice(-2).join(" ")}

))}

{/* 05 — Skills (Span 2x1) */}

Arsenal

{skills.length} TECHNOLOGIES

{topSkills.map((skill, i) => ( {skill} ))} {skills.length > 10 && ( +{skills.length - 10} more )}

{/* 06 — About (Span 2x1) */}

Beyond Code

Languages

{languages.map((lang) => ( {lang.name} {lang.level} ))}

Interests

{interests.map((interest) => ( {interest} ))}

{/* ── Scroll hint ───────────────────────────────────────────── */}

Scroll to explore

); }