add docker files

components/Hero.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useRef, useState } from "react";
 import SafeImage from "./SafeImage";
 
 interface Task {
@@ -60,6 +61,9 @@ function BentoCard({
   children,
   accent = false,
   delay = 0,
+  className = "",
+  style = {},
+  onClick,
 }: {
   num: string;
   label: string;
@@ -67,10 +71,33 @@ function BentoCard({
   children: React.ReactNode;
   accent?: boolean;
   delay?: number;
+  className?: string;
+  style?: React.CSSProperties;
+  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
 }) {
+  const cardRef = useRef<HTMLAnchorElement>(null);
+  const [mousePosition, setMousePosition] = useState({ x: -1000, y: -1000 });
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    if (cardRef.current) {
+      const rect = cardRef.current.getBoundingClientRect();
+      setMousePosition({
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top,
+      });
+    }
+  };
+
   return (
     <a
+      ref={cardRef}
       href={href}
+      onClick={onClick}
+      className={`bento-card ${className}`}
+      onMouseMove={handleMouseMove}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
       style={{
         animationName: "fadeUp",
         animationDuration: "0.7s",
@@ -80,59 +107,46 @@ function BentoCard({
         display: "flex",
         flexDirection: "column",
         padding: "1.75rem",
-        border: "1px solid #1c1f26",
-        background: accent ? "rgba(200,169,110,0.03)" : "#0e1014",
+        border: "1px solid rgba(255,255,255,0.05)",
+        background: accent ? "rgba(200,169,110,0.03)" : "rgba(14,16,20,0.4)",
+        backdropFilter: "blur(12px)",
         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";
+        transition: "border-color 0.4s ease, transform 0.4s ease, background 0.4s ease, box-shadow 0.4s ease",
+        borderRadius: "16px",
+        minHeight: "220px",
+        boxShadow: isHovered ? "0 8px 32px rgba(0,0,0,0.4)" : "0 4px 16px rgba(0,0,0,0.2)",
+        transform: isHovered ? "translateY(-4px) scale(1.01)" : "translateY(0) scale(1)",
+        borderColor: isHovered ? "rgba(200,169,110,0.3)" : "rgba(255,255,255,0.05)",
+        ...style,
       }}
     >
+      {/* Spotlight Effect */}
       <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",
+          background: `radial-gradient(500px circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(200,169,110,0.12), transparent 40%)`,
+          opacity: isHovered ? 1 : 0,
+          transition: "opacity 0.4s ease",
           pointerEvents: "none",
+          zIndex: 0,
         }}
       />
 
-      <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 }}>
+      <div style={{ position: "relative", zIndex: 1, 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.8 }}>
           {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 style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.75rem", color: "#c8a96e", opacity: isHovered ? 1 : 0, transition: "opacity 0.3s ease, transform 0.3s ease", transform: isHovered ? "translate(2px, -2px)" : "translate(0, 0)" }}>
           ↗
         </div>
       </div>
 
-      <div style={{ marginTop: "1rem", flex: 1 }}>{children}</div>
+      <div style={{ marginTop: "1.25rem", flex: 1, position: "relative", zIndex: 1, display: "flex", flexDirection: "column" }}>{children}</div>
     </a>
   );
 }
@@ -152,11 +166,17 @@ export default function Hero({
   interests,
   location,
 }: HeroProps) {
-
-  const feat1 = projects[2]; // FOON
-  const feat2 = projects[0]; // Gazelle
+  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";
@@ -167,9 +187,47 @@ export default function Hero({
     <section
       id="hero"
       className="hero-section"
-      style={{ minHeight: "100vh", position: "relative" }}
+      style={{ minHeight: "100vh", position: "relative", zIndex: 10 }}
     >
-      <div style={{ maxWidth: "1200px", margin: "0 auto", position: "relative", zIndex: 3 }}>
+      <style>{`
+        .creative-bento-grid {
+          display: grid;
+          grid-template-columns: repeat(4, 1fr);
+          gap: 1.25rem;
+          width: 100%;
+          position: relative;
+        }
+        
+        .bento-span-2x2 { grid-column: span 2; grid-row: span 2; }
+        .bento-span-2x1 { grid-column: span 2; grid-row: span 1; }
+        .bento-span-1x1 { grid-column: span 1; grid-row: span 1; }
+
+        @media (max-width: 1024px) {
+          .creative-bento-grid {
+            grid-template-columns: repeat(2, 1fr);
+          }
+          .bento-span-2x2 { grid-column: span 2; grid-row: span 2; }
+          .bento-span-2x1 { grid-column: span 2; grid-row: span 1; }
+          .bento-span-1x1 { grid-column: span 1; grid-row: span 1; }
+        }
+
+        @media (max-width: 600px) {
+          .creative-bento-grid {
+            grid-template-columns: 1fr;
+            gap: 1rem;
+          }
+          .bento-span-2x2, .bento-span-2x1, .bento-span-1x1 {
+            grid-column: span 1;
+            grid-row: auto;
+          }
+        }
+          
+        .glow-text {
+          text-shadow: 0 0 24px rgba(200, 169, 110, 0.4);
+        }
+      `}</style>
+
+      <div style={{ maxWidth: "1200px", margin: "0 auto", position: "relative" }}>
 
         {/* ── Headline ─────────────────────────────────────────────────── */}
         <div
@@ -181,9 +239,9 @@ export default function Hero({
               fontFamily: "var(--font-lora), Georgia, serif",
               fontStyle: "italic",
               fontWeight: 400,
-              fontSize: "clamp(2.6rem, 7vw, 7rem)",
+              fontSize: "clamp(3rem, 7vw, 7.5rem)",
               lineHeight: 1.05,
-              letterSpacing: "-0.01em",
+              letterSpacing: "-0.02em",
               color: "#e2e4e9",
               margin: 0,
               userSelect: "none",
@@ -191,7 +249,7 @@ export default function Hero({
           >
             Let&apos;s bend
             <br />
-            <span style={{ color: "#c8a96e" }}>spacetime</span>
+            <span style={{ color: "#c8a96e" }} className="glow-text">spacetime</span>
           </h1>
         </div>
 
@@ -208,7 +266,7 @@ export default function Hero({
             <div
               style={{
                 fontFamily: "var(--font-bebas), Impact, sans-serif",
-                fontSize: "clamp(1.6rem, 4vw, 3rem)",
+                fontSize: "clamp(1.8rem, 4.5vw, 3.5rem)",
                 letterSpacing: "0.04em",
                 color: "#6b7280",
                 lineHeight: 1,
@@ -219,17 +277,14 @@ export default function Hero({
             </div>
           </div>
 
-          <div style={{ maxWidth: "360px" }}>
-            <p style={{ fontFamily: "var(--font-lora), serif", fontSize: "0.88rem", lineHeight: 1.75, color: "#6b7280", margin: 0 }}>
+          <div style={{ maxWidth: "420px" }}>
+            <p style={{ fontFamily: "var(--font-lora), serif", fontSize: "0.95rem", lineHeight: 1.75, color: "#8b92a5", 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}
+            <div style={{ display: "flex", alignItems: "center", gap: "0.6rem", marginTop: "1rem" }}>
+              <div style={{ width: "8px", height: "8px", borderRadius: "50%", background: "#c8a96e", boxShadow: "0 0 8px #c8a96e" }} />
+              <span style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.65rem", letterSpacing: "0.15em", color: "#c8a96e", textTransform: "uppercase" }}>
+                Based in {location}
               </span>
             </div>
           </div>
@@ -238,36 +293,68 @@ export default function Hero({
         {/* ── Divider ───────────────────────────────────────────────── */}
         <div
           className="animate-fade-up delay-3"
-          style={{ height: "1px", background: "#1c1f26", marginBottom: "2rem" }}
+          style={{ height: "1px", background: "linear-gradient(90deg, rgba(200,169,110,0.5) 0%, transparent 100%)", marginBottom: "3rem", opacity: 0.3 }}
         />
 
-        {/* ── 3 × 2 Bento grid ──────────────────────────────────────── */}
-        <div className="hero-bento-grid">
+        {/* ── Creative Bento grid ──────────────────────────────────────── */}
+        <div className="creative-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" }}>
+          {/* 01 — FOON (Span 2x2: Large Feature) */}
+          <BentoCard 
+            num="01" 
+            label="Showcase" 
+            href="#projects" 
+            accent 
+            delay={400} 
+            className="bento-span-2x2"
+            onClick={() => handleFeatureClick(feat1.name)}
+          >
+            <div style={{ display: "flex", alignItems: "center", gap: "1rem", marginBottom: "1.25rem" }}>
               {feat1.logo && (
-                <SafeImage src={feat1.logo} alt={feat1.name} width={28} height={28}
-                  style={{ width: "22px", height: "22px", objectFit: "contain", filter: "brightness(0.9)" }}
-                />
+                <div style={{ background: "rgba(255,255,255,0.05)", padding: "12px", borderRadius: "12px", backdropFilter: "blur(4px)", border: "1px solid rgba(255,255,255,0.05)" }}>
+                  <SafeImage src={feat1.logo} alt={feat1.name} width={40} height={40}
+                    style={{ width: "32px", height: "32px", objectFit: "contain", filter: "brightness(1.1)" }}
+                  />
+                </div>
               )}
-              <h3 style={{ fontFamily: "var(--font-bebas), sans-serif", fontSize: "1.8rem", letterSpacing: "0.04em", color: "#e2e4e9", lineHeight: 1 }}>
-                {feat1.name}
-              </h3>
+              <div>
+                <h3 style={{ fontFamily: "var(--font-bebas), sans-serif", fontSize: "2.5rem", letterSpacing: "0.04em", color: "#e2e4e9", lineHeight: 1 }}>
+                  {feat1.name}
+                </h3>
+                <span style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.65rem", color: "#c8a96e", letterSpacing: "0.1em", textTransform: "uppercase" }}>
+                  Featured Project
+                </span>
+              </div>
             </div>
-            <p style={{ fontFamily: "var(--font-lora), serif", fontSize: "0.82rem", lineHeight: 1.65, color: "#6b7280", marginBottom: "1rem" }}>
+            
+            <p style={{ fontFamily: "var(--font-lora), serif", fontSize: "1rem", lineHeight: 1.7, color: "#9ca3af", marginBottom: "1.5rem" }}>
               {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 style={{ flex: 1, display: "flex", flexDirection: "column", gap: "0.75rem", marginBottom: "1.5rem" }}>
+              {feat1.tasks.slice(0, 2).map((task) => (
+                <div key={task.name} style={{ background: "rgba(0,0,0,0.2)", borderRadius: "8px", padding: "10px 12px", border: "1px solid rgba(255,255,255,0.03)" }}>
+                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "4px" }}>
+                    <span style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.7rem", color: "#e2e4e9" }}>{task.name}</span>
+                    <span className={task.status === "Done" ? "status-done" : "status-progress"} style={{ fontSize: "0.5rem", padding: "2px 4px" }}>{task.status}</span>
+                  </div>
+                  <div style={{ fontFamily: "var(--font-lora), serif", fontSize: "0.8rem", color: "#6b7280", lineHeight: 1.4 }}>
+                    {task.description.length > 80 ? task.description.slice(0, 80) + "..." : task.description}
+                  </div>
+                </div>
               ))}
             </div>
+
+            <div style={{ display: "flex", flexWrap: "wrap", gap: "0.4rem", marginBottom: "1rem" }}>
+              {feat1.tasks.flatMap((t) => t.technologies).filter((v, i, a) => a.indexOf(v) === i).slice(0, 6).map((tech) => (
+                <span key={tech} className="tech-tag" style={{ borderRadius: "4px", background: "rgba(200,169,110,0.05)" }}>{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" }}>
+              <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap", marginTop: "auto", borderTop: "1px solid rgba(255,255,255,0.05)", paddingTop: "1rem" }}>
+                {feat1.links.map((l) => (
+                  <span key={l.name} style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.65rem", letterSpacing: "0.1em", color: "#c8a96e", textTransform: "uppercase", display: "flex", alignItems: "center", gap: "4px" }}>
                     ↗ {l.name}
                   </span>
                 ))}
@@ -275,50 +362,56 @@ export default function Hero({
             )}
           </BentoCard>
 
-          {/* 02 — Gazelle */}
-          <BentoCard num="02" label="Java · Healthcare" href="#projects" delay={600}>
+          {/* 02 — Gazelle (Span 2x1) */}
+          <BentoCard 
+            num="02" 
+            label="Enterprise" 
+            href="#projects" 
+            delay={500} 
+            className="bento-span-2x1"
+            onClick={() => handleFeatureClick(feat2.name)}
+          >
             <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)" }}
+                  style={{ width: "24px", height: "24px", objectFit: "contain", filter: "brightness(0.9) grayscale(0.2)" }}
                 />
               )}
-              <h3 style={{ fontFamily: "var(--font-bebas), sans-serif", fontSize: "1.8rem", letterSpacing: "0.04em", color: "#e2e4e9", lineHeight: 1 }}>
+              <h3 style={{ fontFamily: "var(--font-bebas), sans-serif", fontSize: "2rem", 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" }}>
+            <p style={{ fontFamily: "var(--font-lora), serif", fontSize: "0.85rem", lineHeight: 1.65, color: "#8b92a5", marginBottom: "1rem", flex: 1 }}>
               {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" }}>
+            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.5rem" }}>
+              {feat2.tasks.slice(0, 4).map((task) => (
+                <div key={task.name} style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+                  <span style={{ width: "6px", height: "6px", borderRadius: "50%", background: task.status === "Done" ? "#3a7a5a" : "#c8954a", flexShrink: 0, boxShadow: `0 0 4px ${task.status === "Done" ? "#3a7a5a" : "#c8954a"}` }} />
+                  <span style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.65rem", color: "#9ca3af", letterSpacing: "0.02em", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                     {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}>
+          {/* 03 — Experience (Span 1x1) */}
+          <BentoCard num="03" label="Career" href="#experience" delay={600} className="bento-span-1x1">
             <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 style={{ display: "flex", flexDirection: "column", gap: "0.8rem", flex: 1 }}>
+              {experiences.slice(0, 2).map((exp, i) => (
+                <div key={exp.company + exp.position} style={{ display: "flex", alignItems: "flex-start", gap: "0.75rem", opacity: i === 0 ? 1 : 0.6 }}>
+                  <div style={{ width: "6px", height: "6px", borderRadius: "50%", background: i === 0 ? "#c8a96e" : "transparent", border: i === 0 ? "none" : "1px solid #4a5060", marginTop: "6px", flexShrink: 0 }} />
                   <div>
-                    <div style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.7rem", color: i === 0 ? "#e2e4e9" : "#6b7280", letterSpacing: "0.04em", lineHeight: 1.3 }}>
+                    <div style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.7rem", color: i === 0 ? "#e2e4e9" : "#8b92a5", letterSpacing: "0.02em", 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 style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.6rem", letterSpacing: "0.1em", color: i === 0 ? "#c8a96e" : "#4a5060", textTransform: "uppercase", marginTop: "2px" }}>
+                      {exp.company}
                     </div>
                   </div>
                 </div>
@@ -326,71 +419,78 @@ export default function Hero({
             </div>
           </BentoCard>
 
-          {/* 04 — Education */}
-          <BentoCard num="04" label="Academic" href="#education" delay={800}>
+          {/* 04 — Education (Span 1x1) */}
+          <BentoCard num="04" label="Academic" href="#education" delay={700} className="bento-span-1x1">
             <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" }}>
+            <div style={{ display: "flex", flexDirection: "column", gap: "0.85rem", flex: 1 }}>
+              {education.slice(0, 2).map((edu, i) => (
+                <div key={edu.degree} style={{ borderLeft: i === 0 ? "2px solid #c8a96e" : "2px solid rgba(255,255,255,0.1)", paddingLeft: "0.75rem" }}>
+                  <div style={{ fontFamily: "var(--font-bebas), sans-serif", fontSize: "1rem", letterSpacing: "0.04em", color: i === 0 ? "#e2e4e9" : "#8b92a5", lineHeight: 1.2, 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 style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.6rem", letterSpacing: "0.08em", color: "#4a5060", textTransform: "uppercase" }}>
+                    {edu.school.split(" ").slice(-2).join(" ")}
                   </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" }}>
+          {/* 05 — Skills (Span 2x1) */}
+          <BentoCard num="05" label="Stack" href="#skills" delay={800} className="bento-span-2x1">
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: "1rem" }}>
+              <h3 style={{ fontFamily: "var(--font-bebas), sans-serif", fontSize: "2rem", letterSpacing: "0.04em", color: "#e2e4e9", lineHeight: 1, margin: 0 }}>
+                Arsenal
+              </h3>
+              <span style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.65rem", color: "#c8a96e", letterSpacing: "0.1em" }}>
+                {skills.length} TECHNOLOGIES
+              </span>
+            </div>
+            <div style={{ display: "flex", flexWrap: "wrap", gap: "0.5rem" }}>
               {topSkills.map((skill, i) => (
-                <span key={skill} className="tech-tag" style={{ opacity: 1 - i * 0.06, fontSize: i < 3 ? "0.68rem" : "0.6rem" }}>
+                <span key={skill} className="tech-tag" style={{ borderRadius: "6px", padding: "4px 10px", fontSize: "0.7rem", background: i < 3 ? "rgba(200,169,110,0.1)" : "rgba(255,255,255,0.03)", borderColor: i < 3 ? "rgba(200,169,110,0.3)" : "rgba(255,255,255,0.05)", color: i < 3 ? "#e8c887" : "#9ca3af" }}>
                   {skill}
                 </span>
               ))}
               {skills.length > 10 && (
-                <span className="tech-tag" style={{ color: "#c8a96e", borderColor: "#6b5730" }}>
-                  +{skills.length - 10}
+                <span className="tech-tag" style={{ borderRadius: "6px", padding: "4px 10px", fontSize: "0.7rem", background: "transparent", borderColor: "dashed 1px rgba(255,255,255,0.1)", color: "#4a5060" }}>
+                  +{skills.length - 10} more
                 </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
+          {/* 06 — About (Span 2x1) */}
+          <BentoCard num="06" label="Profile" href="#contact" accent delay={900} className="bento-span-2x1">
+            <h3 style={{ fontFamily: "var(--font-bebas), sans-serif", fontSize: "2rem", letterSpacing: "0.04em", color: "#e2e4e9", lineHeight: 1, marginBottom: "1.2rem" }}>
+              Beyond Code
             </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 style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1.5rem" }}>
+              <div>
+                <div style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.6rem", letterSpacing: "0.15em", color: "#6b7280", textTransform: "uppercase", marginBottom: "0.6rem" }}>
+                  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.65rem", padding: "3px 8px", borderRadius: "4px", background: `linear-gradient(90deg, ${levelColor(lang.level)}22, transparent)`, borderLeft: `2px solid ${levelColor(lang.level)}`, color: "#e2e4e9", letterSpacing: "0.04em" }}>
+                      {lang.name} <span style={{ color: levelColor(lang.level), opacity: 0.8 }}>{lang.level}</span>
+                    </span>
+                  ))}
+                </div>
               </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 style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.6rem", letterSpacing: "0.15em", color: "#6b7280", textTransform: "uppercase", marginBottom: "0.6rem" }}>
+                  Interests
+                </div>
+                <div style={{ display: "flex", flexWrap: "wrap", gap: "0.4rem" }}>
+                  {interests.map((interest) => (
+                    <span key={interest} style={{ fontFamily: "var(--font-lora), serif", fontSize: "0.85rem", fontStyle: "italic", color: "#8b92a5", background: "rgba(255,255,255,0.02)", padding: "2px 8px", borderRadius: "12px" }}>
+                      {interest}
+                    </span>
+                  ))}
+                </div>
               </div>
             </div>
           </BentoCard>
@@ -399,13 +499,13 @@ export default function Hero({
         {/* ── Scroll hint ───────────────────────────────────────────── */}
         <div
           className="animate-fade-up delay-6"
-          style={{ marginTop: "2rem", display: "flex", alignItems: "center", justifyContent: "center", gap: "0.75rem" }}
+          style={{ marginTop: "3rem", display: "flex", alignItems: "center", justifyContent: "center", gap: "1rem" }}
         >
-          <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" }}>
+          <div style={{ height: "1px", width: "40px", background: "linear-gradient(90deg, transparent, rgba(200,169,110,0.5))" }} />
+          <span style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.65rem", letterSpacing: "0.2em", color: "#c8a96e", textTransform: "uppercase", opacity: 0.8 }} className="scroll-indicator">
             Scroll to explore
           </span>
-          <div style={{ height: "1px", width: "40px", background: "#1c1f26" }} />
+          <div style={{ height: "1px", width: "40px", background: "linear-gradient(-90deg, transparent, rgba(200,169,110,0.5))" }} />
         </div>
       </div>
     </section>