Implement achraf's portfolio

2026-03-31 00:28:00 +02:00
parent fcd8d3d986
commit a4ee12732d
20 changed files with 2734 additions and 87 deletions
--- a/components/Education.tsx
+++ b/components/Education.tsx
@@ -0,0 +1,170 @@
+"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>
+  );
+}