Initial portfolio commit (Next.js + Docker + Gitea integration)

components/architecture-breakdown.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import * as React from "react";
+import { Reveal } from "@/components/reveal";
+
+export type ArchitectureLayer = {
+  title: string;
+  subtitle?: string;
+  bullets: string[];
+};
+
+export type ArchitectureInterface = {
+  label: string;
+  detail: string;
+};
+
+export type ArchitectureBreakdownData = {
+  title?: string;
+  subtitle?: string;
+  layers: ArchitectureLayer[];
+  flow: Array<{ from: string; to: string; note?: string }>;
+  interfaces: ArchitectureInterface[];
+};
+
+export function ArchitectureBreakdown({
+  title = "Architecture",
+  subtitle = "How the system is structured and how state moves through it.",
+  data,
+}: {
+  title?: string;
+  subtitle?: string;
+  data: ArchitectureBreakdownData;
+}) {
+  return (
+    <section className="relative overflow-hidden">
+      <div className="glass-strong noise-overlay rounded-3xl p-6 sm:p-8 shadow-sm relative overflow-hidden">
+        <div className="flex flex-col gap-2">
+          <h2 className="text-xl sm:text-2xl font-semibold tracking-tight">
+            {title}
+          </h2>
+          <p className="text-sm sm:text-[15px] text-black/60 max-w-3xl">
+            {subtitle}
+          </p>
+        </div>
+
+        {/* Layers */}
+        <div className="mt-6 sm:mt-8 grid gap-4 lg:grid-cols-3">
+          {data.layers.map((layer, idx) => (
+            <Reveal key={`${layer.title}-${idx}`}>
+              <div className="glass rounded-3xl p-5 sm:p-6 h-full">
+                <div className="flex items-start justify-between gap-3">
+                  <div className="min-w-0">
+                    <div className="text-[11px] uppercase tracking-[0.18em] text-black/45">
+                      Layer {String(idx + 1).padStart(2, "0")}
+                    </div>
+                    <h3 className="mt-2 text-base sm:text-lg font-semibold tracking-tight">
+                      {layer.title}
+                    </h3>
+                    {layer.subtitle ? (
+                      <p className="mt-1 text-sm text-black/60">
+                        {layer.subtitle}
+                      </p>
+                    ) : null}
+                  </div>
+
+                  <div className="shrink-0">
+                    <span className="glass px-2.5 py-1 rounded-full text-[11px] text-black/55 tabular-nums">
+                      {String(idx + 1).padStart(2, "0")}/03
+                    </span>
+                  </div>
+                </div>
+
+                <ul className="mt-4 grid gap-2 text-sm text-black/70">
+                  {layer.bullets.map((b, bi) => (
+                    <li key={`${layer.title}-b-${bi}`} className="flex gap-2">
+                      <span className="mt-[7px] h-1.5 w-1.5 rounded-full bg-black/25" />
+                      <span className="min-w-0">{b}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </Reveal>
+          ))}
+        </div>
+
+        {/* Flow */}
+        <div className="mt-6 sm:mt-8">
+          <Reveal>
+            <div className="glass rounded-3xl p-5 sm:p-6">
+              <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-2">
+                <div>
+                  <div className="text-[11px] uppercase tracking-[0.18em] text-black/45">
+                    Data flow
+                  </div>
+                  <h3 className="mt-2 text-base sm:text-lg font-semibold tracking-tight">
+                    State moves as a pipeline
+                  </h3>
+                  <p className="mt-1 text-sm text-black/60 max-w-3xl">
+                    Configuration is authored on desktop, executed deterministically, then mirrored back as
+                    LED feedback so the device stays readable at a glance.
+                  </p>
+                </div>
+              </div>
+
+              <div className="mt-5 grid gap-3">
+                {data.flow.map((step, i) => (
+                  <div
+                    key={`${step.from}-${step.to}-${i}`}
+                    className="glass rounded-2xl px-4 py-3"
+                  >
+                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+                      <div className="min-w-0">
+                        <div className="text-sm text-black/75">
+                          <span className="font-semibold">{step.from}</span>
+                          <span className="mx-2 text-black/30">→</span>
+                          <span className="font-semibold">{step.to}</span>
+                        </div>
+                        {step.note ? (
+                          <div className="mt-1 text-[13px] text-black/60">
+                            {step.note}
+                          </div>
+                        ) : null}
+                      </div>
+                      <div className="shrink-0 text-[12px] text-black/45 tabular-nums">
+                        Step {String(i + 1).padStart(2, "0")}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </Reveal>
+        </div>
+
+        {/* Interfaces */}
+        <div className="mt-6 sm:mt-8">
+          <Reveal>
+            <div className="glass rounded-3xl p-5 sm:p-6">
+              <div className="text-[11px] uppercase tracking-[0.18em] text-black/45">
+                Interfaces
+              </div>
+              <h3 className="mt-2 text-base sm:text-lg font-semibold tracking-tight">
+                Stable contracts between modules
+              </h3>
+              <p className="mt-1 text-sm text-black/60 max-w-3xl">
+                The system stays maintainable because boundaries are explicit and small.
+              </p>
+
+              <div className="mt-5 grid gap-3 sm:grid-cols-2">
+                {data.interfaces.map((it, idx) => (
+                  <div
+                    key={`${it.label}-${idx}`}
+                    className="glass rounded-2xl p-4"
+                  >
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="min-w-0">
+                        <div className="text-sm font-semibold text-black/75">
+                          {it.label}
+                        </div>
+                        <div className="mt-1 text-sm text-black/60">
+                          {it.detail}
+                        </div>
+                      </div>
+                      <span className="glass px-2.5 py-1 rounded-full text-[11px] text-black/50 tabular-nums">
+                        {String(idx + 1).padStart(2, "0")}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </Reveal>
+        </div>
+
+        {/* Specular highlight */}
+        <div className="pointer-events-none specular absolute -top-24 -right-24 h-64 w-64 rounded-full opacity-50 blur-2xl" />
+      </div>
+    </section>
+  );
+}

components/desktop-ui-showcase.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import Image from "next/image";
+import { motion } from "framer-motion";
+import { Reveal } from "@/components/reveal";
+
+export type UIScreenshot = {
+  src: string;
+  title: string;
+  description?: string;
+};
+
+export function DesktopUIShowcase({
+  title = "Desktop Interface",
+  subtitle = "Control surface software designed for clarity and speed.",
+  screenshots,
+}: {
+  title?: string;
+  subtitle?: string;
+  screenshots: UIScreenshot[];
+}) {
+  return (
+    <section className="relative overflow-hidden">
+      <div className="glass-strong noise-overlay rounded-3xl p-6 sm:p-8 shadow-sm relative overflow-hidden">
+        {/* Header */}
+        <div className="flex flex-col gap-2">
+          <h2 className="text-xl sm:text-2xl font-semibold tracking-tight">
+            {title}
+          </h2>
+          <p className="text-sm sm:text-[15px] text-black/60 max-w-3xl">
+            {subtitle}
+          </p>
+        </div>
+
+        {/* Grid */}
+        <div className="mt-6 sm:mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
+          {screenshots.map((shot, i) => (
+            <Reveal key={shot.src}>
+              <motion.div
+                whileHover={{ y: -6 }}
+                transition={{ type: "spring", stiffness: 160, damping: 18 }}
+                className="glass rounded-3xl overflow-hidden group"
+              >
+                {/* Image */}
+                <div className="relative aspect-[16/10] w-full overflow-hidden">
+                  <Image
+                    src={shot.src}
+                    alt={shot.title}
+                    fill
+                    className="object-cover transition duration-500 group-hover:scale-[1.04]"
+                  />
+                </div>
+
+                {/* Caption */}
+                <div className="p-4">
+                  <div className="text-sm font-semibold text-black/75">
+                    {shot.title}
+                  </div>
+                  {shot.description ? (
+                    <div className="mt-1 text-sm text-black/60 leading-relaxed">
+                      {shot.description}
+                    </div>
+                  ) : null}
+                </div>
+              </motion.div>
+            </Reveal>
+          ))}
+        </div>
+
+        {/* Specular highlight */}
+        <div className="pointer-events-none specular absolute -top-24 -right-24 h-64 w-64 rounded-full opacity-50 blur-2xl" />
+      </div>
+    </section>
+  );
+}

components/featured-projects.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import Image from "next/image";
+import { motion } from "framer-motion";
+import { projects } from "@/app/_data/projects";
+
+
+function Badge({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="inline-flex items-center rounded-full border border-black/10 bg-white/60 px-2.5 py-1 text-[11px] text-black/65">
+      {children}
+    </span>
+  );
+}
+
+export default function FeaturedProjects() {
+  return (
+    <section>
+      <div className="flex items-end justify-between gap-6">
+        <div>
+          <h2 className="text-3xl md:text-4xl font-semibold tracking-tight text-black/90">
+            Featured projects
+          </h2>
+          <p className="mt-2 text-black/75 max-w-2xl leading-relaxed">
+            Infrastructure, software, and lab-adjacent builds — minimal UI with
+            real systems behind it.
+          </p>
+        </div>
+      </div>
+
+      <div className="mt-7 grid grid-cols-1 md:grid-cols-2 gap-5">
+        {projects.map((p, i) => (
+          <motion.a
+            key={p.title}
+            href={p.href}
+            initial={{ opacity: 0, y: 12 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, amount: 0.35 }}
+            transition={{ duration: 0.45, delay: i * 0.05 }}
+            className="group rounded-3xl glass specular overflow-hidden transition will-change-transform hover:translate-y-[-2px]"
+          >
+            {/* image */}
+            <div className="relative h-56 w-full">
+              <Image
+                src={p.image}
+                alt={p.title}
+                fill
+                className="object-cover transition duration-700 ease-out group-hover:scale-[1.03]"
+                priority={i === 0}
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/20 via-black/0 to-transparent pointer-events-none" />
+            </div>
+
+            {/* content */}
+            <div className="p-5">
+              <div className="flex items-center justify-between gap-3">
+                <div className="text-xs text-black/60">{p.tag}</div>
+                {p.status && <Badge>{p.status}</Badge>}
+              </div>
+
+              <div className="mt-2 text-xl font-semibold tracking-tight text-black/90">
+                {p.title}
+              </div>
+
+              <div className="mt-2 text-sm text-black/75 leading-relaxed">
+                {p.description}
+              </div>
+
+              <div className="mt-4 flex flex-wrap gap-2">
+                {p.year && <Badge>{p.year}</Badge>}
+                {(p.stack ?? []).slice(0, 4).map((s) => (
+                  <Badge key={s}>{s}</Badge>
+                ))}
+              </div>
+
+              <div className="mt-5 text-sm font-medium text-black/70 group-hover:text-black/90 transition">
+                View →
+              </div>
+            </div>
+          </motion.a>
+        ))}
+      </div>
+    </section>
+  );
+}

components/footer.tsx

@@ -0,0 +1,22 @@
+export default function Footer() {
+  return (
+    <footer className="border-t border-black/10 pt-8 pb-10">
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+        <div className="text-sm text-black/60">
+          © {new Date().getFullYear()} Brian De Winne
+        </div>
+        <div className="flex gap-4 text-sm">
+          <a className="text-black/60 hover:text-black transition" href="/lab">
+            Lab
+          </a>
+          <a
+            className="text-black/60 hover:text-black transition"
+            href="mailto:website+dewinnebrian@gmail.com"
+          >
+            Email
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+}

components/gallery-carousel.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import Image from "next/image";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+type Props = {
+  images: string[];
+  title?: string;
+  autoPlay?: boolean;
+  intervalMs?: number;
+};
+
+export default function GalleryCarousel({
+  images,
+  title = "Gallery",
+  autoPlay = true,
+  intervalMs = 4500,
+}: Props) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const [active, setActive] = useState(0);
+  const [paused, setPaused] = useState(false);
+
+  const safeImages = useMemo(() => images.filter(Boolean), [images]);
+
+  function clampIndex(i: number) {
+    const n = safeImages.length;
+    if (n === 0) return 0;
+    return (i + n) % n;
+  }
+
+  function scrollToIndex(i: number) {
+  const idx = clampIndex(i);
+  setActive(idx);
+
+  const track = containerRef.current;
+  const el = itemRefs.current[idx];
+  if (!track || !el) return;
+
+  const trackRect = track.getBoundingClientRect();
+  const elRect = el.getBoundingClientRect();
+
+  const target =
+    track.scrollLeft +
+    (elRect.left + elRect.width / 2) -
+    (trackRect.left + trackRect.width / 2);
+
+  track.scrollTo({ left: target, behavior: "smooth" });
+}
+
+
+  // Auto-advance
+  useEffect(() => {
+    if (!autoPlay || paused || safeImages.length <= 1) return;
+    const t = setInterval(() => scrollToIndex(active + 1), intervalMs);
+    return () => clearInterval(t);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoPlay, paused, active, intervalMs, safeImages.length]);
+
+  // Keep active in sync when user swipes/scrolls
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el || safeImages.length <= 1) return;
+
+    let raf = 0;
+
+    const onScroll = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        const rect = el.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+
+        let bestIdx = active;
+        let bestDist = Number.POSITIVE_INFINITY;
+
+        for (let i = 0; i < safeImages.length; i++) {
+          const item = itemRefs.current[i];
+          if (!item) continue;
+          const r = item.getBoundingClientRect();
+          const itemCenter = r.left + r.width / 2;
+          const d = Math.abs(itemCenter - centerX);
+          if (d < bestDist) {
+            bestDist = d;
+            bestIdx = i;
+          }
+        }
+
+        if (bestIdx !== active) setActive(bestIdx);
+      });
+    };
+
+    el.addEventListener("scroll", onScroll, { passive: true });
+    return () => {
+      el.removeEventListener("scroll", onScroll);
+      cancelAnimationFrame(raf);
+    };
+  }, [active, safeImages.length]);
+
+  if (safeImages.length === 0) return null;
+
+  return (
+    <section className="mt-10">
+      <div className="flex items-center justify-between gap-4">
+        <h2 className="text-xl font-semibold tracking-tight text-black/90">
+          {title}
+        </h2>
+
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={() => scrollToIndex(active - 1)}
+            className="rounded-full border border-black/10 bg-white/70 px-3 py-2 text-sm text-black/70 hover:text-black hover:border-black/25 transition"
+            aria-label="Previous"
+          >
+            ←
+          </button>
+          <button
+            type="button"
+            onClick={() => scrollToIndex(active + 1)}
+            className="rounded-full border border-black/10 bg-white/70 px-3 py-2 text-sm text-black/70 hover:text-black hover:border-black/25 transition"
+            aria-label="Next"
+          >
+            →
+          </button>
+        </div>
+      </div>
+
+      {/* Track */}
+      <div
+        ref={containerRef}
+        onMouseEnter={() => setPaused(true)}
+        onMouseLeave={() => setPaused(false)}
+        className="mt-4 flex w-full max-w-full gap-4 overflow-x-auto overflow-y-hidden overscroll-x-contain pb-3 scrollbar-hide px-2"
+        style={{ scrollSnapType: "x mandatory" }}
+      >
+        {safeImages.map((img, i) => (
+          <button
+            key={`${img}-${i}`}
+            ref={(el) => {
+              itemRefs.current[i] = el;
+            }}
+            type="button"
+            onClick={() => scrollToIndex(i)}
+            className={[
+              "relative shrink-0 rounded-3xl glass-strong specular overflow-hidden",
+              "min-w-[320px] md:min-w-[520px] h-[220px] md:h-[320px]",
+              "transition will-change-transform",
+              "focus:outline-none focus:ring-2 focus:ring-black/20",
+              i === active ? "scale-[1.00]" : "scale-[0.97] opacity-90 hover:opacity-100",
+            ].join(" ")}
+            style={{ scrollSnapAlign: "center" }}
+            aria-label={`Select image ${i + 1}`}
+          >
+            <Image
+              src={img}
+              alt={`Gallery image ${i + 1}`}
+              fill
+              className="object-cover"
+              priority={i === 0}
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-black/10 to-transparent pointer-events-none" />
+          </button>
+        ))}
+      </div>
+
+      {/* Dots */}
+      {safeImages.length > 1 && (
+        <div className="mt-3 flex items-center justify-center gap-2">
+          {safeImages.map((_, i) => (
+            <button
+              key={i}
+              type="button"
+              onClick={() => scrollToIndex(i)}
+              className={[
+                "h-2.5 w-2.5 rounded-full transition",
+                i === active ? "bg-black/50" : "bg-black/15 hover:bg-black/30",
+              ].join(" ")}
+              aria-label={`Go to slide ${i + 1}`}
+            />
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}

components/hero.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export default function Hero() {
+  return (
+    <section className="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
+      <motion.div
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.45 }}
+      >
+
+        <h1 className="mt-3 text-5xl md:text-6xl font-semibold tracking-tight text-black/90 leading-[1.05]">
+          Brian De Winne.
+          <br />
+          <span className="text-black/65">Clean systems, clean UI.</span>
+        </h1>
+
+        <p className="mt-6 text-base md:text-lg text-black/70 leading-relaxed max-w-xl">
+          Portfolio + lab dashboard hosted on Unraid behind Cloudflare Tunnel and
+          Nginx Proxy Manager. Minimal design, hardened routing, real visibility.
+        </p>
+
+        <div className="mt-8 flex flex-wrap gap-3">
+          <a
+            href="#projects"
+            className="rounded-3xl bg-black text-white px-5 py-3 text-sm font-medium shadow-[0_10px_30px_rgba(0,0,0,0.15)] transition hover:translate-y-[-1px]"
+          >
+            View projects
+          </a>
+
+          <a
+            href="/lab"
+            className="rounded-3xl border border-black/15 px-5 py-3 text-sm font-medium transition hover:border-black/30"
+          >
+            Lab dashboard
+          </a>
+
+          <a
+            href="mailto:website+dewinnebrian@gmail.com"
+            className="rounded-3xl border border-black/15 px-5 py-3 text-sm font-medium transition hover:border-black/30"
+          >
+            Contact
+          </a>
+        </div>
+
+        <div className="mt-8 flex flex-wrap items-center gap-3 text-xs text-black/55">
+          <span className="inline-flex items-center gap-2 rounded-3xl border border-black/10 px-3 py-2 bg-white/60">
+            <span className="h-2 w-2 rounded-full bg-black/30" />
+            Belgium
+          </span>
+          <span className="inline-flex items-center gap-2 rounded-3xl border border-black/10 px-3 py-2 bg-white/60">
+            <span className="h-2 w-2 rounded-full bg-black/30" />
+            Unraid • Docker • CF Tunnel
+          </span>
+        </div>
+      </motion.div>
+
+      <motion.div
+        initial={{ opacity: 0, y: 12 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.55, delay: 0.05 }}
+        className="relative"
+      >
+        <div className="rounded-3xl glass-strong specular overflow-hidden">
+          <div className="px-5 py-4 border-b border-black/10 flex items-center justify-between">
+            <div className="text-sm font-semibold text-black/85">
+              System Snapshot
+            </div>
+            <div className="text-xs text-black/55">dewinnebrian.com</div>
+          </div>
+
+          <div className="p-5">
+            <div className="grid grid-cols-3 gap-3">
+              <MiniStat label="Containers" value="—" />
+              <MiniStat label="Running" value="—" />
+              <MiniStat label="Networks" value="—" />
+            </div>
+
+            <div className="mt-5 rounded-3xl border border-black/10 p-4 bg-white/60">
+              <div className="text-xs text-black/55">Status</div>
+              <div className="mt-2 text-sm font-medium text-black/85">
+                Reverse-proxied through NPM, tunneled via Cloudflare.
+              </div>
+              <div className="mt-3 text-xs text-black/60 leading-relaxed">
+                The lab dashboard will surface container inventory, networks, and
+                exposure—while hiding IP/ports by default.
+              </div>
+            </div>
+
+            <div className="mt-5 grid grid-cols-2 gap-3">
+              <div className="rounded-3xl border border-black/10 p-4 bg-white/60">
+                <div className="text-xs text-black/55">Design</div>
+                <div className="mt-2 text-sm font-medium text-black/85">
+                  Liquid glass
+                </div>
+              </div>
+              <div className="rounded-3xl border border-black/10 p-4 bg-white/60">
+                <div className="text-xs text-black/55">Deploy</div>
+                <div className="mt-2 text-sm font-medium text-black/85">
+                  Next.js container
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="pointer-events-none absolute -z-10 inset-0 blur-3xl opacity-40">
+          <div className="absolute right-10 top-10 h-48 w-48 rounded-full bg-black/10" />
+          <div className="absolute left-10 bottom-10 h-56 w-56 rounded-full bg-black/10" />
+        </div>
+      </motion.div>
+    </section>
+  );
+}
+
+function MiniStat({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="rounded-3xl border border-black/10 bg-white/70 p-4">
+      <div className="text-xs text-black/55">{label}</div>
+      <div className="mt-1 text-2xl font-semibold tracking-tight text-black/90">
+        {value}
+      </div>
+    </div>
+  );
+}

components/navbar.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+
+export default function Navbar() {
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const handler = () => setScrolled(window.scrollY > 8);
+    window.addEventListener("scroll", handler);
+    return () => window.removeEventListener("scroll", handler);
+  }, []);
+
+  return (
+    <motion.header
+      initial={{ opacity: 0, y: -12 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.45 }}
+      className={`sticky top-0 z-50 transition-all duration-300 ${
+        scrolled ? "glass border-b border-black/10" : "bg-transparent"
+      }`}
+    >
+      <div className="mx-auto max-w-6xl px-6 h-16 flex items-center justify-between">
+        <a
+          href="/"
+          className="text-sm font-semibold tracking-tight text-black/85 transition hover:text-black"
+        >
+          dewinnebrian
+        </a>
+
+        <nav className="flex items-center gap-8 text-sm text-black/65">
+          <a href="/#projects" className="transition hover:text-black">
+            Projects
+          </a>
+          <a href="/lab" className="transition hover:text-black">
+            Lab
+          </a>
+          <a
+            href="mailto:website+dewinnebrian@gmail.com"
+            className="transition hover:text-black"
+          >
+            Contact
+          </a>
+        </nav>
+      </div>
+
+      {scrolled && (
+        <div className="absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent via-black/10 to-transparent" />
+      )}
+    </motion.header>
+  );
+}

components/reveal.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export function Reveal({
+  children,
+  delay = 0,
+}: {
+  children: React.ReactNode;
+  delay?: number;
+}) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 14 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, amount: 0.25 }}
+      transition={{ duration: 0.45, ease: "easeOut", delay }}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+export function Stagger({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <motion.div
+      initial="hidden"
+      whileInView="show"
+      viewport={{ once: true, amount: 0.2 }}
+      variants={{
+        hidden: {},
+        show: { transition: { staggerChildren: 0.06 } },
+      }}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+export function StaggerItem({ children }: { children: React.ReactNode }) {
+  return (
+    <motion.div
+      variants={{
+        hidden: { opacity: 0, y: 14 },
+        show: {
+          opacity: 1,
+          y: 0,
+          transition: { duration: 0.42, ease: "easeOut" },
+        },
+      }}
+    >
+      {children}
+    </motion.div>
+  );
+}

components/roadmap-timeline.tsx

@@ -0,0 +1,212 @@
+"use client";
+
+import * as React from "react";
+import { motion } from "framer-motion";
+import { Reveal } from "@/components/reveal";
+
+export type RoadmapStatus = "done" | "in-progress" | "next" | "planned";
+
+export type RoadmapItem = {
+  title: string;
+  description?: string;
+  status: RoadmapStatus;
+  date?: string;
+  bullets?: string[];
+};
+
+function statusLabel(status: RoadmapStatus) {
+  switch (status) {
+    case "done":
+      return "Shipped";
+    case "in-progress":
+      return "In progress";
+    case "next":
+      return "Next up";
+    case "planned":
+      return "Planned";
+  }
+}
+
+function statusWeight(status: RoadmapStatus) {
+  // Progress-style weighting:
+  // done = 1.0, in-progress = 0.6, next = 0.25, planned = 0.0
+  switch (status) {
+    case "done":
+      return 1.0;
+    case "in-progress":
+      return 0.6;
+    case "next":
+      return 0.25;
+    case "planned":
+      return 0.0;
+  }
+}
+
+function statusDotClass(status: RoadmapStatus) {
+  // Keep neutral, glassy, specular (no hard colors).
+  // Use opacity + ring + subtle fill to communicate state.
+  switch (status) {
+    case "done":
+      return "bg-white/80 ring-1 ring-white/40 shadow-sm";
+    case "in-progress":
+      return "bg-white/60 ring-1 ring-white/30 shadow-sm";
+    case "next":
+      return "bg-white/35 ring-1 ring-white/25";
+    case "planned":
+      return "bg-white/20 ring-1 ring-white/20";
+  }
+}
+
+function statusPillClass(status: RoadmapStatus) {
+  switch (status) {
+    case "done":
+      return "glass px-2.5 py-1 text-[11px] tracking-wide text-black/70";
+    case "in-progress":
+      return "glass px-2.5 py-1 text-[11px] tracking-wide text-black/70";
+    case "next":
+      return "glass px-2.5 py-1 text-[11px] tracking-wide text-black/60";
+    case "planned":
+      return "glass px-2.5 py-1 text-[11px] tracking-wide text-black/55";
+  }
+}
+
+export function RoadmapTimeline({
+  title = "Roadmap",
+  subtitle = "Build plan and delivery cadence for this system.",
+  items,
+}: {
+  title?: string;
+  subtitle?: string;
+  items: RoadmapItem[];
+}) {
+  const total = Math.max(items.length, 1);
+  const progress =
+    Math.min(
+      1,
+      Math.max(
+        0,
+        items.reduce((acc, it) => acc + statusWeight(it.status), 0) / total
+      )
+    ) || 0;
+
+  const progressPct = Math.round(progress * 100);
+
+  return (
+    <section className="relative overflow-hidden">
+      <div className="glass-strong noise-overlay rounded-3xl p-6 sm:p-8 shadow-sm">
+        <div className="flex flex-col gap-2">
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <h2 className="text-xl sm:text-2xl font-semibold tracking-tight">
+                {title}
+              </h2>
+              <p className="mt-1 text-sm sm:text-[15px] text-black/60">
+                {subtitle}
+              </p>
+            </div>
+
+            <div className="shrink-0 text-right">
+              <div className="text-[11px] uppercase tracking-[0.18em] text-black/45">
+                Progress
+              </div>
+              <div className="mt-1 text-lg font-semibold tabular-nums">
+                {progressPct}%
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-3">
+            <div className="glass rounded-2xl p-3">
+              <div className="flex items-center justify-between text-[12px] text-black/55">
+                <span>Planned → Shipped</span>
+                <span className="tabular-nums">{progressPct}%</span>
+              </div>
+
+              <div className="mt-2 h-2 overflow-hidden rounded-full bg-black/[0.06]">
+                <motion.div
+                  className="h-full rounded-full bg-white/70"
+                  initial={{ width: 0 }}
+                  whileInView={{ width: `${progressPct}%` }}
+                  viewport={{ once: true, margin: "-20% 0px -20% 0px" }}
+                  transition={{ type: "spring", stiffness: 80, damping: 18 }}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-6 sm:mt-8">
+          <div className="relative">
+            {/* Timeline spine */}
+            <div className="pointer-events-none absolute left-[11px] top-1 bottom-1 w-px bg-black/10" />
+
+            <div className="flex flex-col gap-4">
+              {items.map((it, idx) => (
+                <Reveal key={`${it.title}-${idx}`}>
+                  <div className="relative pl-10">
+                    <div
+                      className={[
+                        "absolute left-[2px] top-[10px] h-[18px] w-[18px] rounded-full",
+                        statusDotClass(it.status),
+                      ].join(" ")}
+                    />
+
+                    <div className="glass rounded-3xl p-4 sm:p-5">
+                      <div className="flex flex-wrap items-center justify-between gap-3">
+                        <div className="min-w-0">
+                          <div className="flex flex-wrap items-center gap-2">
+                            <h3 className="text-[15px] sm:text-base font-semibold tracking-tight">
+                              {it.title}
+                            </h3>
+                            <span
+                              className={[
+                                "rounded-full",
+                                statusPillClass(it.status),
+                              ].join(" ")}
+                            >
+                              {statusLabel(it.status)}
+                            </span>
+                          </div>
+
+                          {(it.date || it.description) && (
+                            <div className="mt-1 text-sm text-black/60">
+                              {it.date ? (
+                                <span className="tabular-nums">{it.date}</span>
+                              ) : null}
+                              {it.date && it.description ? (
+                                <span className="mx-2 text-black/25">•</span>
+                              ) : null}
+                              {it.description ? <span>{it.description}</span> : null}
+                            </div>
+                          )}
+                        </div>
+
+                        <div className="shrink-0 text-[12px] text-black/45 tabular-nums">
+                          {String(idx + 1).padStart(2, "0")}/{String(items.length).padStart(2, "0")}
+                        </div>
+                      </div>
+
+                      {it.bullets?.length ? (
+                        <ul className="mt-3 grid gap-2 text-sm text-black/70">
+                          {it.bullets.map((b, bi) => (
+                            <li key={`${it.title}-b-${bi}`} className="flex gap-2">
+                              <span className="mt-[7px] h-1.5 w-1.5 rounded-full bg-black/25" />
+                              <span className="min-w-0">{b}</span>
+                            </li>
+                          ))}
+                        </ul>
+                      ) : null}
+                    </div>
+                  </div>
+                </Reveal>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Specular highlight */}
+        <div className="pointer-events-none specular absolute -top-24 -right-24 h-64 w-64 rounded-full opacity-50 blur-2xl" />
+      </div>
+    </section>
+  );
+}

components/scroll-hero.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import Image from "next/image";
+import { motion, useScroll, useTransform } from "framer-motion";
+import { useRef } from "react";
+
+export default function ScrollHero({
+  src,
+  alt,
+}: {
+  src: string;
+  alt: string;
+}) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ["start start", "end start"],
+  });
+
+  // Tech-style: slightly more noticeable than Apple A, but still classy
+  const scale = useTransform(scrollYProgress, [0, 1], [1.05, 1.0]);
+  const y = useTransform(scrollYProgress, [0, 1], [0, 18]);
+
+  return (
+    <div ref={ref} className="rounded-3xl glass-strong specular overflow-hidden">
+      <div className="relative h-[320px] md:h-[420px] w-full">
+        <motion.div style={{ scale, y }} className="absolute inset-0">
+          <Image
+            src={src}
+            alt={alt}
+            fill
+            className="object-cover"
+            priority
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-black/15 via-black/0 to-transparent pointer-events-none" />
+        </motion.div>
+      </div>
+    </div>
+  );
+}