Merge all the pages into main from develop

app/animations/heroAnimations.ts

@@ -0,0 +1,41 @@
+import { gsap } from "gsap";
+
+export const initHeroAnimations = (
+  logoRef: React.RefObject<HTMLElement | null>,
+  titleRef: React.RefObject<HTMLElement | null>,
+  skylineRef: React.RefObject<HTMLElement | null>,
+  setSkylineVisible: (visible: boolean) => void
+) => {
+  const tl = gsap.timeline();
+
+  tl.fromTo(logoRef.current,
+    { scale: 0, rotation: -180, opacity: 0 },
+    { scale: 1, rotation: 0, opacity: 1, duration: 1.2, ease: "back.out(1.7)" }
+  );
+
+  tl.to(skylineRef.current, {
+    y: 0,
+    opacity: 1,
+    duration: 0.6,
+    ease: "power3.out",
+    onComplete: () => setSkylineVisible(true)
+  }, "-=0.8"); 
+
+  tl.fromTo(titleRef.current,
+    { x: -100, opacity: 0, scale: 0.8 },
+    { x: 0, opacity: 1, scale: 1, duration: 1, ease: "power3.out" }
+  );
+
+  tl.fromTo(".animate-twinkle",
+    { scale: 0, opacity: 0 },
+    { scale: 1, opacity: 1, duration: 2, stagger: 0.1, ease: "power2.out" }
+  );
+  gsap.to(logoRef.current, {
+    y: -10,
+    duration: 2,
+    ease: "power2.inOut",
+    yoyo: true,
+    repeat: -1,
+    delay: 5 
+  });
+};

app/animations/introAnimations.ts

@@ -0,0 +1,181 @@
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(ScrollTrigger);
+}
+
+
+
+export const initIntroAnimations = (
+  topRowRef: React.RefObject<HTMLElement | null>,
+  bottomRowRef: React.RefObject<HTMLElement | null>,
+  titleRefs: React.RefObject<HTMLHeadingElement | null>[],
+  textRefs: React.RefObject<HTMLParagraphElement | null>[],
+  imageRefs: React.RefObject<HTMLDivElement | null>[],
+  magneticRefs: React.RefObject<HTMLDivElement | null>[]
+) => {
+
+  const titles = titleRefs.map(ref => ref.current).filter(Boolean) as HTMLElement[];
+  const texts = textRefs.map(ref => ref.current).filter(Boolean) as HTMLElement[];
+  const images = imageRefs.map(ref => ref.current).filter(Boolean) as HTMLElement[];
+  const magneticElements = magneticRefs.map(ref => ref.current).filter(Boolean) as HTMLElement[];
+
+
+  console.log('Animation elements found:', {
+    titles: titles.length,
+    texts: texts.length,
+    images: images.length,
+    magneticElements: magneticElements.length
+  });
+
+  if (titles.length === 0 && texts.length === 0 && images.length === 0) {
+    console.log('No elements found for animation');
+    return;
+  }
+
+
+  gsap.set([titles, texts, images], {
+    opacity: 0,
+    y: 50,
+  });
+
+
+
+  const topRowTl = gsap.timeline({
+    scrollTrigger: {
+      trigger: topRowRef.current,
+      start: "top 80%",
+      end: "bottom 20%",
+      toggleActions: "play none none reverse",
+    },
+  });
+
+  topRowTl
+    .to(titles[0], {
+      opacity: 1,
+      y: 0,
+      duration: 0.8,
+      ease: "power3.out",
+    })
+    .to(texts.slice(0, 2), {
+      opacity: 1,
+      y: 0,
+      duration: 0.6,
+      stagger: 0.2,
+      ease: "power2.out",
+    }, "-=0.4")
+    .to(images[0], {
+      opacity: 1,
+      y: 0,
+      duration: 0.8,
+      ease: "power3.out",
+    }, "-=0.6");
+
+
+  const bottomRowTl = gsap.timeline({
+    scrollTrigger: {
+      trigger: bottomRowRef.current,
+      start: "top 80%",
+      end: "bottom 20%",
+      toggleActions: "play none none reverse",
+    },
+  });
+
+  bottomRowTl
+    .to(images[1], {
+      opacity: 1,
+      y: 0,
+      duration: 0.8,
+      ease: "power3.out",
+    })
+    .to(titles[1], {
+      opacity: 1,
+      y: 0,
+      duration: 0.8,
+      ease: "power3.out",
+    }, "-=0.4")
+    .to(texts.slice(2, 4), {
+      opacity: 1,
+      y: 0,
+      duration: 0.6,
+      stagger: 0.2,
+      ease: "power2.out",
+    }, "-=0.4");
+
+
+
+
+  titles.forEach((title) => {
+    const chars = title.textContent?.split('') || [];
+    title.innerHTML = chars.map(char => 
+      char === ' ' ? ' ' : `<span class="char">${char}</span>`
+    ).join('');
+
+    const charSpans = title.querySelectorAll('.char');
+    gsap.set(charSpans, { opacity: 0, y: 20 });
+
+    gsap.to(charSpans, {
+      opacity: 1,
+      y: 0,
+      duration: 0.5,
+      stagger: 0.03,
+      ease: "back.out(1.7)",
+      scrollTrigger: {
+        trigger: title,
+        start: "top 85%",
+        toggleActions: "play none none reverse",
+      },
+    });
+  });
+
+
+  magneticElements.forEach((element) => {
+    const handleMouseMove = (e: MouseEvent) => {
+      const rect = element.getBoundingClientRect();
+      const x = e.clientX - rect.left - rect.width / 2;
+      const y = e.clientY - rect.top - rect.height / 2;
+
+      const distance = Math.sqrt(x * x + y * y);
+      const maxDistance = Math.sqrt(rect.width * rect.width + rect.height * rect.height) / 2;
+      const strength = Math.max(0, 1 - distance / maxDistance);
+
+      const moveX = x * strength * 0.3;
+      const moveY = y * strength * 0.3;
+
+      gsap.to(element, {
+        x: moveX,
+        y: moveY,
+        scale: 1 + strength * 0.05,
+        duration: 0.3,
+        ease: "power2.out",
+      });
+    };
+
+    const handleMouseLeave = () => {
+      gsap.to(element, {
+        x: 0,
+        y: 0,
+        scale: 1,
+        duration: 0.5,
+        ease: "elastic.out(1, 0.3)",
+      });
+    };
+
+    element.addEventListener('mousemove', handleMouseMove);
+    element.addEventListener('mouseleave', handleMouseLeave);
+
+
+    return () => {
+      element.removeEventListener('mousemove', handleMouseMove);
+      element.removeEventListener('mouseleave', handleMouseLeave);
+    };
+  });
+
+
+  return () => {
+    ScrollTrigger.getAll().forEach(trigger => trigger.kill());
+  };
+};
+

app/animations/openSourceAnimations.ts

@@ -0,0 +1,68 @@
+import type { MutableRefObject } from "react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+gsap.registerPlugin(ScrollTrigger);
+
+type El<T> = MutableRefObject<T | null>;
+type Els<T> = MutableRefObject<T[]>;
+
+export function initOpenSourceAnimations(
+  sectionRef: El<HTMLElement>,
+  headerRef: El<HTMLDivElement>,
+  titleRef: El<HTMLHeadingElement>,
+  subtitleRef: El<HTMLParagraphElement>,
+  projectsRef: El<HTMLDivElement>,
+  projectCardRefs: Els<HTMLDivElement>,
+  _projectImageRefs: Els<HTMLDivElement>,
+  _projectTitleRefs: Els<HTMLHeadingElement>,
+  _projectDescRefs: Els<HTMLParagraphElement>
+) {
+  if (typeof window === "undefined") return () => {};
+
+  const sectionEl = sectionRef.current;
+  const headerEl = headerRef.current;
+  const titleEl = titleRef.current;
+  const subtitleEl = subtitleRef.current;
+  const projectsEl = projectsRef.current;
+  const cardEls = projectCardRefs.current.filter(Boolean);
+
+  if (!sectionEl) return () => {};
+
+  const ctx = gsap.context(() => {
+    gsap.set([headerEl, titleEl, subtitleEl], {
+      clearProps: "all",
+      opacity: 1,
+      visibility: "visible",
+      display: "block",
+    });
+
+    const intro = gsap.timeline({ defaults: { ease: "power2.out" } });
+    if (headerEl) intro.from(headerEl, { y: 16, duration: 0.4, immediateRender: false }, 0);
+    if (titleEl) intro.from(titleEl, { y: 10, duration: 0.35, immediateRender: false }, 0.05);
+    if (subtitleEl) intro.from(subtitleEl, { y: 10, duration: 0.35, immediateRender: false }, 0.12);
+
+    if (projectsEl && cardEls.length) {
+      gsap.from(cardEls, {
+        y: 24,
+        autoAlpha: 0,
+        duration: 0.5,
+        stagger: 0.08,
+        ease: "power2.out",
+        immediateRender: false,
+        scrollTrigger: {
+          trigger: projectsEl,
+          start: "top 80%",
+          once: true,
+        },
+      });
+    }
+
+    ScrollTrigger.refresh();
+  }, sectionEl);
+
+  return () => {
+    ctx.revert();
+    [headerEl, titleEl, subtitleEl].forEach((el) => el && gsap.set(el, { clearProps: "all" }));
+  };
+}

app/animations/pastHackathonsAnimations.ts

@@ -0,0 +1,69 @@
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(ScrollTrigger);
+}
+
+export const initPastHackathonsAnimations = (
+  sectionRef: React.RefObject<HTMLDivElement | null>,
+  trackRef: React.RefObject<HTMLDivElement | null>
+) => {
+  const section = sectionRef.current;
+  const track = trackRef.current;
+  if (!section || !track) return;
+
+
+  try {
+    ScrollTrigger.normalizeScroll?.(true);
+  } catch {}
+
+  const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const isDesktop = () => window.innerWidth >= 1024;
+  let tween: gsap.core.Tween | null = null;
+
+  const setup = () => {
+    if (prefersReduced || !isDesktop()) return;
+
+    const getAmount = () => track.scrollWidth - window.innerWidth;
+
+    tween = gsap.to(track, {
+      x: () => -getAmount(),
+      ease: 'none',
+      scrollTrigger: {
+        trigger: section,
+        start: 'top top',
+        end: () => '+=' + getAmount(),
+        scrub: 0.1, 
+        pin: true,
+        anticipatePin: 1,
+        invalidateOnRefresh: true,
+      },
+    });
+  };
+
+  setup();
+
+
+  const refresh = () => ScrollTrigger.refresh();
+  const imgs = track.querySelectorAll('img');
+  imgs.forEach((img) => {
+    if (!img.complete) img.addEventListener('load', refresh, { once: true });
+  });
+
+  const onResize = () => {
+    ScrollTrigger.refresh();
+    if (!tween && isDesktop() && !prefersReduced) setup();
+  };
+  window.addEventListener('resize', onResize);
+
+
+  return () => {
+    window.removeEventListener('resize', onResize);
+    if (tween) {
+      tween.scrollTrigger?.kill();
+      tween.kill();
+    }
+    ScrollTrigger.getAll().forEach((st) => st.kill());
+  };
+};