Aos Added (#122)

* Added AOS for hack8-2025

* Refine AOS, fix package-json

* More AOS Changes

* AOS change and refinement

* Scramble on Footer and Extra AoS

* Footer AOS improvement

* add build files

---------

Co-authored-by: Viraj Bhartiya <vlbhartiya@gmail.com>

Author: spooodieman

.DS_Store

@@ -0,0 +1,5 @@
+{
+    "files.associations": {
+        "iostream": "cpp"
+    }
+}

.gitignore

@@ -8,20 +8,22 @@ import Sponsor from "./sections/sponsor/sponsor"
 import StatsPage from "./sections/stats/stats.jsx"
 import FAQ from "./sections/faq.jsx" // Change to uppercase
 import { clarity } from 'react-microsoft-clarity'
+import Aos from "aos"
 
 function App() {
   clarity.init("qodrz4ajhs")
+  Aos.init();
   return (
-    <div className="main-container">
-      <Hero />   
-      <About />
-      <StatsPage/>
-      <FlashBack />
-      <FAQ/> 
-      <Prizes />
-      <Sponsor />
-      <Footer />
-    </div>
+      <div className="main-container">
+        <Hero />   
+        <About />
+        <StatsPage/>
+        <FlashBack />
+        <Prizes />
+        <Sponsor />
+        <FAQ />
+        <Footer />
+      </div>
   )
 }
 

.vscode/settings.json

@@ -319,4 +319,4 @@ footer::before {
   .logo {
     padding-left: 0;
   }
-}
+}

2025/src/App.jsx

@@ -1,6 +1,62 @@
-import React, { useEffect } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import './footer.css';
 
+const ScrambleText = ({ text }) => {
+  const [scrambledText, setScrambledText] = useState(text);
+  const ref = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+
+  const scramble = useCallback(() => {
+      let iterations = 0;
+      const maxIterations = 10;
+      const interval = setInterval(() => {
+          setScrambledText(prev =>
+              text.split('').map((char, index) => {
+                  if (char === " ") return " ";
+                  if (iterations > index) return char;
+                  return characters[Math.floor(Math.random() * characters.length)];
+              }).join("")
+          );
+
+          iterations += 1 / 3;
+          if (iterations >= maxIterations) {
+              clearInterval(interval);
+              setScrambledText(text);
+          }
+      }, 30);
+
+      return () => clearInterval(interval);
+  }, [text, characters]);
+
+  useEffect(() => {
+      const observer = new IntersectionObserver(
+          ([entry]) => {
+              setIsVisible(entry.isIntersecting);
+          },
+          { threshold: 0.1 }
+      );
+
+      if (ref.current) observer.observe(ref.current);
+
+      return () => {
+          if (ref.current) observer.unobserve(ref.current);
+      };
+  }, []);
+
+  useEffect(() => {
+      if (isVisible) {
+          scramble();
+      }
+  }, [isVisible, scramble]);
+
+  return (
+      <span ref={ref} className="scramble-text">
+          {scrambledText}
+      </span>
+  );
+};
+
 const Footer = () => {
   useEffect(() => {
     const script = document.createElement('script')
@@ -17,23 +73,23 @@ const Footer = () => {
       <div className="outlaws">
         <div className="outlaws-image">
           <img src="./footer-images/no_outlaw-cropped.svg" alt="text" />
-          <h1>Code The Journey</h1>
+            <h1><ScrambleText text = "Code The Journey"/></h1>
         </div>
       </div>
-      <div className="everything">
+      <div className="everything" data-aos="fade-up" data-aos-once = "true" data-aos-duration = "300">
         <div className="M">
           <img src="./footer-images/MATURE_17.svg" alt="MATURE" />
         </div>
-        <div className="logo">
-          <div className="save-the-date">SAVE THE DATE</div>
-          <div className="april-dates">APRIL 12 | 13</div>
+        <div className="logo" >
+          <div className="save-the-date" data-aos="fade-down" data-aos-duration = "500" data-aos-delay = "300">SAVE THE DATE</div>
+          <div className="april-dates"data-aos="fade-up" data-aos-duration = "500" data-aos-delay = "450">APRIL 12 | 13</div>
 
           <div
             className="apply-button"
             data-hackathon-slug="gajshield-kjsse-hack8"
             data-button-theme="dark-inverted"
           ></div>
-          <div className="social-icons">
+          <div className="social-icons" data-aos = "zoom-up" data-aos-duration = "500" data-aos-delay = "300">
             <a href="https://www.facebook.com/kjscecodecell/" target="_blank" rel="noopener noreferrer">
               <img src="./footer-images/facebook.svg" alt="Facebook" style={{ width: '30px', height: '30px' }} />
             </a>
@@ -50,7 +106,10 @@ const Footer = () => {
               <img src="./footer-images/linkedin.svg" alt="LinkedIn" style={{ width: '30px', height: '30px' }} />
             </a>
           </div>
-          <p>Made with <span>🤍</span> by <a href="https://www.kjssecodecell.com/" target="_blank" rel="noopener noreferrer">KJSSE CodeCell</a> </p>
+          <div >
+            <p>Made with <span>🤍</span> by <a href="https://www.kjssecodecell.com/" target="_blank" rel="noopener noreferrer">KJSSE CodeCell</a></p>
+          </div>
+
         </div>
         <div className="G">
           <img src="./footer-images/MATURE_17.svg" alt="MATURE" />

2025/src/components/footer/footer.css

@@ -7,9 +7,9 @@ const About = () => {
       <img src="/assets/AboutUsLeftStreak.svg" className="AboutUsLeftStreak"></img>
 
       <header className="about-header">
-        <h1 className="about-header-text">ABOUT</h1>
+        <h1 data-aos="fade-down" data-aos-duration = "500" className="about-header-text">ABOUT</h1>
       </header>
-      <div className="about-content">
+      <div data-aos="fade-up" data-aos-delay = "500" data-aos-duration = "250" className="about-content">
         <p className="about-content-text">
           <b>Listen up, partner.</b><br />
           KJSSE CodeCell's 24-hour hackin’ showdown is comin’ up, on the 12th and 13th of April and it ain't for the faint of heart. No screens between ya, no hiding behind a keyboard—this here’s the real deal, face to face.<br /><br />
@@ -24,7 +24,7 @@ const About = () => {
         <div className="model">
           <model-viewer
           src="/model/gun-model.glb"
-          alt="Arthur Morgan Hat"
+          alt="Gun Model"
           auto-rotate
           disable-zoom
           camera-controls

2025/src/components/footer/footer.jsx

@@ -246,7 +246,7 @@
     justify-content: flex-start;
     align-items: center;
     cursor: pointer;
-    font-size: 1.6rem;
+    font-size: 2.0rem;
     color: #fff;
     transition: none;
     position: relative;

2025/src/sections/about.jsx

@@ -64,10 +64,10 @@ const FAQ = () => {
         <img src="/assets/AboutUsLeftStreak.svg" className="AboutUsLeftStreak" />
 
         <header className="flashback-header">
-          <h1 className="flashback-header-text">FAQ</h1>
+          <h1 data-aos= "fade-down" data-aos-duration = "500" className="flashback-header-text">FAQ</h1>
         </header>
 
-        <div className="faq-accordion">
+        <div data-aos= "fade-up" data-aos-duration = "500" data-aos-delay = "250" className="faq-accordion">
           {faqData.map((item, index) => (
             <div 
               key={index} 

2025/src/sections/faq.css

@@ -11,10 +11,10 @@ const FlashBack = () => {
       <img src="/assets/AboutUsLeftStreak.svg" className="AboutUsLeftStreak" />
 
       <header className="flashback-header">
-        <h1 className="flashback-header-text">FLASHBACK</h1>
+        <h1 data-aos="fade-down" data-aos-duration = "500" className="flashback-header-text">FLASHBACK</h1>
       </header>
 
-      <div className="flashback-video">
+      <div data-aos="fade-up" data-aos-duration = "500" data-aos-delay = "250" className="flashback-video">
         <div className="iframe-container">
           <iframe
             src="https://www.youtube.com/embed/MsIwzZziLfs"