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

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>
+  );
+}