feat: Initialize portfolio website with core sections, smooth scrolling, scroll reveal animations, and comprehensive SEO.

app/hooks/useScrollReveal.ts

@@ -0,0 +1,48 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+export function useScrollReveal(options?: {
+  y?: number;
+  duration?: number;
+  delay?: number;
+  ease?: string;
+  start?: string;
+  end?: string;
+  scrub?: boolean | number;
+}) {
+  const ref = useRef<HTMLElement>(null);
+  
+  useEffect(() => {
+    if (!ref.current) return;
+    
+    // Lazy registration to avoid Next.js hydration mismatch issues
+    gsap.registerPlugin(ScrollTrigger);
+
+    const ctx = gsap.context(() => {
+      gsap.fromTo(
+        ref.current,
+        { y: options?.y ?? 60, opacity: 0 },
+        {
+          y: 0,
+          opacity: 1,
+          duration: options?.duration ?? 0.9,
+          delay: options?.delay ?? 0,
+          ease: options?.ease ?? "power3.out",
+          scrollTrigger: {
+            trigger: ref.current,
+            start: options?.start ?? "top 85%",
+            end: options?.end ?? "top 50%",
+            scrub: options?.scrub ?? false,
+          },
+        }
+      );
+    }, ref);
+
+    return () => ctx.revert();
+  }, [options?.y, options?.duration, options?.delay, options?.ease, options?.start, options?.end, options?.scrub]);
+
+  return ref;
+}