Implement achraf's portfolio

components/Hero.tsx

@@ -0,0 +1,413 @@
+"use client";
+
+import SafeImage from "./SafeImage";
+
+interface Task {
+  name: string;
+  description: string;
+  status: string;
+  technologies: string[];
+}
+
+interface ProjectLink {
+  name: string;
+  url: string;
+}
+
+interface Project {
+  name: string;
+  description: string;
+  logo?: string;
+  links?: ProjectLink[];
+  tasks: Task[];
+}
+
+interface Experience {
+  company: string;
+  position: string;
+  startDate: string;
+  endDate: string;
+  logo?: string;
+}
+
+interface Education {
+  degree: string;
+  school: string;
+  startDate: string;
+  endDate: string;
+}
+
+interface HeroProps {
+  name: string;
+  lastName: string;
+  title: string;
+  description: string;
+  skills: string[];
+  projects: Project[];
+  experiences: Experience[];
+  education: Education[];
+  languages: { name: string; level: string }[];
+  interests: string[];
+  location: string;
+}
+
+// ─── BentoCard ───────────────────────────────────────────────────────────────
+
+function BentoCard({
+  num,
+  label,
+  href,
+  children,
+  accent = false,
+  delay = 0,
+}: {
+  num: string;
+  label: string;
+  href: string;
+  children: React.ReactNode;
+  accent?: boolean;
+  delay?: number;
+}) {
+  return (
+    <a
+      href={href}
+      style={{
+        animationName: "fadeUp",
+        animationDuration: "0.7s",
+        animationTimingFunction: "ease",
+        animationFillMode: "both",
+        animationDelay: `${delay}ms`,
+        display: "flex",
+        flexDirection: "column",
+        padding: "1.75rem",
+        border: "1px solid #1c1f26",
+        background: accent ? "rgba(200,169,110,0.03)" : "#0e1014",
+        textDecoration: "none",
+        color: "inherit",
+        position: "relative",
+        overflow: "hidden",
+        cursor: "pointer",
+        transition: "border-color 0.3s ease, background 0.3s ease, transform 0.3s ease",
+        minHeight: "200px",
+      }}
+      onMouseEnter={(e) => {
+        const el = e.currentTarget as HTMLElement;
+        el.style.borderColor = "#6b5730";
+        el.style.background = accent ? "rgba(200,169,110,0.07)" : "rgba(200,169,110,0.03)";
+        el.style.transform = "translateY(-2px)";
+        const arrow = el.querySelector(".card-arrow") as HTMLElement | null;
+        if (arrow) arrow.style.opacity = "1";
+        const shine = el.querySelector(".card-shine") as HTMLElement | null;
+        if (shine) shine.style.opacity = "1";
+      }}
+      onMouseLeave={(e) => {
+        const el = e.currentTarget as HTMLElement;
+        el.style.borderColor = "#1c1f26";
+        el.style.background = accent ? "rgba(200,169,110,0.03)" : "#0e1014";
+        el.style.transform = "translateY(0)";
+        const arrow = el.querySelector(".card-arrow") as HTMLElement | null;
+        if (arrow) arrow.style.opacity = "0";
+        const shine = el.querySelector(".card-shine") as HTMLElement | null;
+        if (shine) shine.style.opacity = "0";
+      }}
+    >
+      <div
+        className="card-shine"
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: "linear-gradient(135deg, rgba(200,169,110,0.06) 0%, transparent 50%)",
+          opacity: 0,
+          transition: "opacity 0.3s",
+          pointerEvents: "none",
+        }}
+      />
+
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "auto" }}>
+        <div style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.58rem", letterSpacing: "0.2em", color: "#c8a96e", opacity: 0.7 }}>
+          {num} · {label}
+        </div>
+        <div className="card-arrow" style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.75rem", color: "#c8a96e", opacity: 0, transition: "opacity 0.2s" }}>
+          ↗
+        </div>
+      </div>
+
+      <div style={{ marginTop: "1rem", flex: 1 }}>{children}</div>
+    </a>
+  );
+}
+
+// ─── Hero ─────────────────────────────────────────────────────────────────────
+
+export default function Hero({
+  name,
+  lastName,
+  title,
+  description,
+  skills,
+  projects,
+  experiences,
+  education,
+  languages,
+  interests,
+  location,
+}: HeroProps) {
+
+  const feat1 = projects[2]; // FOON
+  const feat2 = projects[0]; // Gazelle
+  const topSkills = skills.slice(0, 10);
+
+  const levelColor = (level: string) => {
+    if (level === "Native") return "#c8a96e";
+    if (level === "C2") return "#3a7a5a";
+    return "#4a6050";
+  };
+
+  return (
+    <section
+      id="hero"
+      className="hero-section"
+      style={{ minHeight: "100vh", position: "relative" }}
+    >
+      <div style={{ maxWidth: "1200px", margin: "0 auto", position: "relative", zIndex: 3 }}>
+
+        {/* ── Headline ─────────────────────────────────────────────────── */}
+        <div
+          className="animate-fade-up delay-1"
+          style={{ marginBottom: "2.5rem" }}
+        >
+          <h1
+            style={{
+              fontFamily: "var(--font-lora), Georgia, serif",
+              fontStyle: "italic",
+              fontWeight: 400,
+              fontSize: "clamp(2.6rem, 7vw, 7rem)",
+              lineHeight: 1.05,
+              letterSpacing: "-0.01em",
+              color: "#e2e4e9",
+              margin: 0,
+              userSelect: "none",
+            }}
+          >
+            Let&apos;s bend
+            <br />
+            <span style={{ color: "#c8a96e" }}>spacetime</span>
+          </h1>
+        </div>
+
+        {/* ── Name + description strip ──────────────────────────────── */}
+        <div className="hero-header-strip animate-fade-up delay-2">
+          <div>
+            <div
+              className="section-label"
+              style={{ marginBottom: "0.5rem", display: "flex", alignItems: "center", gap: "0.6rem" }}
+            >
+              <span style={{ display: "inline-block", width: "24px", height: "1px", background: "#c8a96e" }} />
+              {title}
+            </div>
+            <div
+              style={{
+                fontFamily: "var(--font-bebas), Impact, sans-serif",
+                fontSize: "clamp(1.6rem, 4vw, 3rem)",
+                letterSpacing: "0.04em",
+                color: "#6b7280",
+                lineHeight: 1,
+              }}
+            >
+              {name}{" "}
+              <span style={{ color: "#4a5060" }}>{lastName}</span>
+            </div>
+          </div>
+
+          <div style={{ maxWidth: "360px" }}>
+            <p style={{ fontFamily: "var(--font-lora), serif", fontSize: "0.88rem", lineHeight: 1.75, color: "#6b7280", margin: 0 }}>
+              {description}
+            </p>
+            <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", marginTop: "0.6rem" }}>
+              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#4a5060" strokeWidth="2">
+                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
+                <circle cx="12" cy="10" r="3" />
+              </svg>
+              <span style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.62rem", letterSpacing: "0.1em", color: "#4a5060" }}>
+                {location}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* ── Divider ───────────────────────────────────────────────── */}
+        <div
+          className="animate-fade-up delay-3"
+          style={{ height: "1px", background: "#1c1f26", marginBottom: "2rem" }}
+        />
+
+        {/* ── 3 × 2 Bento grid ──────────────────────────────────────── */}
+        <div className="hero-bento-grid">
+
+          {/* 01 — FOON */}
+          <BentoCard num="01" label="TypeScript SDK" href="#projects" accent delay={500}>
+            <div style={{ display: "flex", alignItems: "center", gap: "0.75rem", marginBottom: "0.75rem" }}>
+              {feat1.logo && (
+                <SafeImage src={feat1.logo} alt={feat1.name} width={28} height={28}
+                  style={{ width: "22px", height: "22px", objectFit: "contain", filter: "brightness(0.9)" }}
+                />
+              )}
+              <h3 style={{ fontFamily: "var(--font-bebas), sans-serif", fontSize: "1.8rem", letterSpacing: "0.04em", color: "#e2e4e9", lineHeight: 1 }}>
+                {feat1.name}
+              </h3>
+            </div>
+            <p style={{ fontFamily: "var(--font-lora), serif", fontSize: "0.82rem", lineHeight: 1.65, color: "#6b7280", marginBottom: "1rem" }}>
+              {feat1.description}
+            </p>
+            <div style={{ display: "flex", flexWrap: "wrap", gap: "0.35rem", marginBottom: "0.75rem" }}>
+              {feat1.tasks.flatMap((t) => t.technologies).filter((v, i, a) => a.indexOf(v) === i).slice(0, 4).map((tech) => (
+                <span key={tech} className="tech-tag">{tech}</span>
+              ))}
+            </div>
+            {feat1.links && (
+              <div style={{ display: "flex", gap: "0.6rem", flexWrap: "wrap", marginTop: "auto" }}>
+                {feat1.links.slice(0, 2).map((l) => (
+                  <span key={l.name} style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.6rem", letterSpacing: "0.1em", color: "#c8a96e", textTransform: "uppercase" }}>
+                    ↗ {l.name}
+                  </span>
+                ))}
+              </div>
+            )}
+          </BentoCard>
+
+          {/* 02 — Gazelle */}
+          <BentoCard num="02" label="Java · Healthcare" href="#projects" delay={600}>
+            <div style={{ display: "flex", alignItems: "center", gap: "0.75rem", marginBottom: "0.75rem" }}>
+              {feat2.logo && (
+                <SafeImage src={feat2.logo} alt={feat2.name} width={28} height={28}
+                  fallbackLabel={feat2.name.slice(0, 2).toUpperCase()}
+                  style={{ width: "22px", height: "22px", objectFit: "contain", filter: "brightness(0.75) grayscale(0.3)" }}
+                />
+              )}
+              <h3 style={{ fontFamily: "var(--font-bebas), sans-serif", fontSize: "1.8rem", letterSpacing: "0.04em", color: "#e2e4e9", lineHeight: 1 }}>
+                {feat2.name}
+              </h3>
+            </div>
+            <p style={{ fontFamily: "var(--font-lora), serif", fontSize: "0.82rem", lineHeight: 1.65, color: "#6b7280", marginBottom: "1rem" }}>
+              {feat2.description}
+            </p>
+            <div style={{ display: "flex", flexDirection: "column", gap: "0.4rem" }}>
+              {feat2.tasks.map((task) => (
+                <div key={task.name} style={{ display: "flex", alignItems: "center", gap: "0.6rem" }}>
+                  <span style={{ width: "5px", height: "5px", borderRadius: "50%", background: task.status === "Done" ? "#3a7a5a" : "#c8954a", flexShrink: 0 }} />
+                  <span style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.62rem", color: "#6b7280", letterSpacing: "0.04em" }}>
+                    {task.name}
+                  </span>
+                  <span className={task.status === "Done" ? "status-done" : "status-progress"}>{task.status}</span>
+                </div>
+              ))}
+            </div>
+          </BentoCard>
+
+          {/* 03 — Experience */}
+          <BentoCard num="03" label="Career" href="#experience" delay={700}>
+            <h3 style={{ fontFamily: "var(--font-bebas), sans-serif", fontSize: "1.8rem", letterSpacing: "0.04em", color: "#e2e4e9", lineHeight: 1, marginBottom: "1rem" }}>
+              Experience
+            </h3>
+            <div style={{ display: "flex", flexDirection: "column", gap: "0.65rem" }}>
+              {experiences.map((exp, i) => (
+                <div key={exp.company + exp.position} style={{ display: "flex", alignItems: "flex-start", gap: "0.75rem", opacity: i === 0 ? 1 : i === 1 ? 0.6 : 0.35 }}>
+                  <div style={{ width: "6px", height: "6px", borderRadius: "50%", background: i === 0 ? "#c8a96e" : "#1c1f26", border: i === 0 ? "none" : "1px solid #4a5060", marginTop: "5px", flexShrink: 0 }} />
+                  <div>
+                    <div style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.7rem", color: i === 0 ? "#e2e4e9" : "#6b7280", letterSpacing: "0.04em", lineHeight: 1.3 }}>
+                      {exp.position}
+                    </div>
+                    <div style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.58rem", letterSpacing: "0.12em", color: i === 0 ? "#c8a96e" : "#4a5060", textTransform: "uppercase", marginTop: "1px" }}>
+                      {exp.company} · {exp.endDate === "current" ? "Present" : exp.endDate.split("-")[2]}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </BentoCard>
+
+          {/* 04 — Education */}
+          <BentoCard num="04" label="Academic" href="#education" delay={800}>
+            <h3 style={{ fontFamily: "var(--font-bebas), sans-serif", fontSize: "1.8rem", letterSpacing: "0.04em", color: "#e2e4e9", lineHeight: 1, marginBottom: "1rem" }}>
+              Education
+            </h3>
+            <div style={{ display: "flex", flexDirection: "column", gap: "0.85rem" }}>
+              {education.map((edu, i) => (
+                <div key={edu.degree} style={{ borderLeft: "2px solid #1c1f26", paddingLeft: "0.75rem" }}>
+                  <div style={{ fontFamily: "var(--font-bebas), sans-serif", fontSize: "0.88rem", letterSpacing: "0.06em", color: i === 0 ? "#e2e4e9" : "#6b7280", lineHeight: 1.3, marginBottom: "0.2rem" }}>
+                    {edu.degree}
+                  </div>
+                  <div style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.58rem", letterSpacing: "0.1em", color: "#4a5060", textTransform: "uppercase" }}>
+                    {edu.school.split(" ").slice(-2).join(" ")} · {edu.endDate}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </BentoCard>
+
+          {/* 05 — Skills */}
+          <BentoCard num="05" label="Stack" href="#skills" delay={900}>
+            <h3 style={{ fontFamily: "var(--font-bebas), sans-serif", fontSize: "1.8rem", letterSpacing: "0.04em", color: "#e2e4e9", lineHeight: 1, marginBottom: "1rem" }}>
+              {skills.length} Skills
+            </h3>
+            <div style={{ display: "flex", flexWrap: "wrap", gap: "0.35rem" }}>
+              {topSkills.map((skill, i) => (
+                <span key={skill} className="tech-tag" style={{ opacity: 1 - i * 0.06, fontSize: i < 3 ? "0.68rem" : "0.6rem" }}>
+                  {skill}
+                </span>
+              ))}
+              {skills.length > 10 && (
+                <span className="tech-tag" style={{ color: "#c8a96e", borderColor: "#6b5730" }}>
+                  +{skills.length - 10}
+                </span>
+              )}
+            </div>
+          </BentoCard>
+
+          {/* 06 — About */}
+          <BentoCard num="06" label="Profile" href="#contact" accent delay={1000}>
+            <h3 style={{ fontFamily: "var(--font-bebas), sans-serif", fontSize: "1.8rem", letterSpacing: "0.04em", color: "#e2e4e9", lineHeight: 1, marginBottom: "1rem" }}>
+              About
+            </h3>
+            <div style={{ marginBottom: "0.85rem" }}>
+              <div style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.56rem", letterSpacing: "0.18em", color: "#4a5060", textTransform: "uppercase", marginBottom: "0.45rem" }}>
+                Languages
+              </div>
+              <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
+                {languages.map((lang) => (
+                  <span key={lang.name} style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.62rem", padding: "2px 8px", border: `1px solid ${levelColor(lang.level)}`, color: levelColor(lang.level), letterSpacing: "0.06em" }}>
+                    {lang.name} {lang.level}
+                  </span>
+                ))}
+              </div>
+            </div>
+            <div>
+              <div style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.56rem", letterSpacing: "0.18em", color: "#4a5060", textTransform: "uppercase", marginBottom: "0.45rem" }}>
+                Interests
+              </div>
+              <div style={{ display: "flex", flexWrap: "wrap", gap: "0.35rem" }}>
+                {interests.map((interest, i) => (
+                  <span key={interest} style={{ fontFamily: "var(--font-lora), serif", fontSize: "0.78rem", fontStyle: "italic", color: "#6b7280" }}>
+                    {interest}{i < interests.length - 1 && <span style={{ color: "#1c1f26", marginLeft: "0.35rem" }}>·</span>}
+                  </span>
+                ))}
+              </div>
+            </div>
+          </BentoCard>
+        </div>
+
+        {/* ── Scroll hint ───────────────────────────────────────────── */}
+        <div
+          className="animate-fade-up delay-6"
+          style={{ marginTop: "2rem", display: "flex", alignItems: "center", justifyContent: "center", gap: "0.75rem" }}
+        >
+          <div style={{ height: "1px", width: "40px", background: "#1c1f26" }} />
+          <span style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.58rem", letterSpacing: "0.2em", color: "#4a5060", textTransform: "uppercase" }}>
+            Scroll to explore
+          </span>
+          <div style={{ height: "1px", width: "40px", background: "#1c1f26" }} />
+        </div>
+      </div>
+    </section>
+  );
+}