171 lines
4.3 KiB
TypeScript
171 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
import SafeImage from "./SafeImage";
|
|
|
|
interface EducationItem {
|
|
degree: string;
|
|
school: string;
|
|
startDate: string;
|
|
endDate: string;
|
|
logo?: string;
|
|
}
|
|
|
|
interface EducationProps {
|
|
education: EducationItem[];
|
|
}
|
|
|
|
function EduCard({ item, index }: { item: EducationItem; index: number }) {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const el = ref.current;
|
|
if (!el) return;
|
|
const obs = new IntersectionObserver(
|
|
([entry]) => {
|
|
if (entry.isIntersecting) {
|
|
setTimeout(() => el.classList.add("visible"), index * 100);
|
|
obs.disconnect();
|
|
}
|
|
},
|
|
{ threshold: 0.1 }
|
|
);
|
|
obs.observe(el);
|
|
return () => obs.disconnect();
|
|
}, [index]);
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className="reveal"
|
|
style={{
|
|
border: "1px solid #1c1f26",
|
|
padding: "1.75rem",
|
|
background: "#0e1014",
|
|
position: "relative",
|
|
overflow: "hidden",
|
|
transition: "border-color 0.3s",
|
|
}}
|
|
onMouseEnter={(e) => (e.currentTarget.style.borderColor = "#6b5730")}
|
|
onMouseLeave={(e) => (e.currentTarget.style.borderColor = "#1c1f26")}
|
|
>
|
|
{/* Corner accent */}
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
top: 0,
|
|
right: 0,
|
|
width: "40px",
|
|
height: "40px",
|
|
borderLeft: "1px solid #1c1f26",
|
|
borderBottom: "1px solid #1c1f26",
|
|
}}
|
|
/>
|
|
|
|
<div
|
|
className="font-mono"
|
|
style={{
|
|
fontFamily: "var(--font-jetbrains), monospace",
|
|
fontSize: "0.62rem",
|
|
letterSpacing: "0.12em",
|
|
color: "#c8a96e",
|
|
marginBottom: "1rem",
|
|
}}
|
|
>
|
|
{item.startDate} — {item.endDate}
|
|
</div>
|
|
|
|
{item.logo && (
|
|
<div style={{ marginBottom: "1rem" }}>
|
|
<SafeImage
|
|
src={item.logo}
|
|
alt={item.school}
|
|
height={32}
|
|
style={{ height: "32px", objectFit: "contain", filter: "brightness(0.6) grayscale(0.5)" }}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<h3
|
|
className="font-display"
|
|
style={{
|
|
fontFamily: "var(--font-bebas), sans-serif",
|
|
fontSize: "1.3rem",
|
|
letterSpacing: "0.04em",
|
|
color: "#e2e4e9",
|
|
lineHeight: 1.2,
|
|
marginBottom: "0.5rem",
|
|
}}
|
|
>
|
|
{item.degree}
|
|
</h3>
|
|
<p
|
|
style={{
|
|
fontFamily: "var(--font-lora), serif",
|
|
fontSize: "0.85rem",
|
|
color: "#6b7280",
|
|
lineHeight: 1.5,
|
|
}}
|
|
>
|
|
{item.school}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function Education({ education }: EducationProps) {
|
|
const headingRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const el = headingRef.current;
|
|
if (!el) return;
|
|
const obs = new IntersectionObserver(
|
|
([entry]) => {
|
|
if (entry.isIntersecting) { el.classList.add("visible"); obs.disconnect(); }
|
|
},
|
|
{ threshold: 0.1 }
|
|
);
|
|
obs.observe(el);
|
|
return () => obs.disconnect();
|
|
}, []);
|
|
|
|
return (
|
|
<section id="education" style={{ padding: "8rem 2rem" }}>
|
|
<div style={{ maxWidth: "1200px", margin: "0 auto" }}>
|
|
<div ref={headingRef} className="reveal" style={{ marginBottom: "4rem" }}>
|
|
<div className="section-label" style={{ marginBottom: "0.75rem" }}>Academic Background</div>
|
|
<h2
|
|
className="font-display"
|
|
style={{
|
|
fontFamily: "var(--font-bebas), sans-serif",
|
|
fontSize: "clamp(2.5rem, 6vw, 5rem)",
|
|
letterSpacing: "0.04em",
|
|
color: "#e2e4e9",
|
|
lineHeight: 1,
|
|
}}
|
|
>
|
|
Education
|
|
</h2>
|
|
<div style={{ width: "48px", height: "1px", background: "#c8a96e", marginTop: "1rem" }} />
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
display: "grid",
|
|
gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, 340px), 1fr))",
|
|
gap: "1px",
|
|
background: "#1c1f26",
|
|
border: "1px solid #1c1f26",
|
|
}}
|
|
>
|
|
{education.map((item, i) => (
|
|
<div key={item.degree} style={{ background: "#07080a" }}>
|
|
<EduCard item={item} index={i} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|