514 lines
23 KiB
TypeScript
514 lines
23 KiB
TypeScript
"use client";
|
|
|
|
import { useRef, useState } from "react";
|
|
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,
|
|
className = "",
|
|
style = {},
|
|
onClick,
|
|
}: {
|
|
num: string;
|
|
label: string;
|
|
href: string;
|
|
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",
|
|
animationTimingFunction: "ease",
|
|
animationFillMode: "both",
|
|
animationDelay: `${delay}ms`,
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
padding: "1.75rem",
|
|
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.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
|
|
style={{
|
|
position: "absolute",
|
|
inset: 0,
|
|
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={{ 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 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: "1.25rem", flex: 1, position: "relative", zIndex: 1, display: "flex", flexDirection: "column" }}>{children}</div>
|
|
</a>
|
|
);
|
|
}
|
|
|
|
// ─── 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 (
|
|
<section
|
|
id="hero"
|
|
className="hero-section"
|
|
style={{ minHeight: "100vh", position: "relative", zIndex: 10 }}
|
|
>
|
|
<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
|
|
className="animate-fade-up delay-1"
|
|
style={{ marginBottom: "2.5rem" }}
|
|
>
|
|
<h1
|
|
style={{
|
|
fontFamily: "var(--font-lora), Georgia, serif",
|
|
fontStyle: "italic",
|
|
fontWeight: 400,
|
|
fontSize: "clamp(3rem, 7vw, 7.5rem)",
|
|
lineHeight: 1.05,
|
|
letterSpacing: "-0.02em",
|
|
color: "#e2e4e9",
|
|
margin: 0,
|
|
userSelect: "none",
|
|
}}
|
|
>
|
|
Let's bend
|
|
<br />
|
|
<span style={{ color: "#c8a96e" }} className="glow-text">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.8rem, 4.5vw, 3.5rem)",
|
|
letterSpacing: "0.04em",
|
|
color: "#6b7280",
|
|
lineHeight: 1,
|
|
}}
|
|
>
|
|
{name}{" "}
|
|
<span style={{ color: "#4a5060" }}>{lastName}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<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.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>
|
|
</div>
|
|
|
|
{/* ── Divider ───────────────────────────────────────────────── */}
|
|
<div
|
|
className="animate-fade-up delay-3"
|
|
style={{ height: "1px", background: "linear-gradient(90deg, rgba(200,169,110,0.5) 0%, transparent 100%)", marginBottom: "3rem", opacity: 0.3 }}
|
|
/>
|
|
|
|
{/* ── Creative Bento grid ──────────────────────────────────────── */}
|
|
<div className="creative-bento-grid">
|
|
|
|
{/* 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 && (
|
|
<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>
|
|
)}
|
|
<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: "1rem", lineHeight: 1.7, color: "#9ca3af", marginBottom: "1.5rem" }}>
|
|
{feat1.description}
|
|
</p>
|
|
|
|
<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: "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>
|
|
))}
|
|
</div>
|
|
)}
|
|
</BentoCard>
|
|
|
|
{/* 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: "24px", height: "24px", objectFit: "contain", filter: "brightness(0.9) grayscale(0.2)" }}
|
|
/>
|
|
)}
|
|
<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.85rem", lineHeight: 1.65, color: "#8b92a5", marginBottom: "1rem", flex: 1 }}>
|
|
{feat2.description}
|
|
</p>
|
|
<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>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</BentoCard>
|
|
|
|
{/* 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.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" : "#8b92a5", letterSpacing: "0.02em", lineHeight: 1.3 }}>
|
|
{exp.position}
|
|
</div>
|
|
<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>
|
|
))}
|
|
</div>
|
|
</BentoCard>
|
|
|
|
{/* 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", 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.6rem", letterSpacing: "0.08em", color: "#4a5060", textTransform: "uppercase" }}>
|
|
{edu.school.split(" ").slice(-2).join(" ")}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</BentoCard>
|
|
|
|
{/* 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={{ 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={{ 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 (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={{ 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>
|
|
<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>
|
|
</div>
|
|
|
|
{/* ── Scroll hint ───────────────────────────────────────────── */}
|
|
<div
|
|
className="animate-fade-up delay-6"
|
|
style={{ marginTop: "3rem", display: "flex", alignItems: "center", justifyContent: "center", gap: "1rem" }}
|
|
>
|
|
<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: "linear-gradient(-90deg, transparent, rgba(200,169,110,0.5))" }} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|