Test

Code-For-All/package.json

@@ -18,17 +18,19 @@
     "@fortawesome/free-brands-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
+    "@nextui-org/react": "^2.6.11",
     "axios": "^1.7.5",
     "bootstrap": "^5.3.3",
-    "framer-motion": "^11.7.0",
+    "framer-motion": "^11.16.1",
     "lottie-web": "^5.12.2",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.4",
     "react-dom": "^18.2.0",
     "react-icons": "^5.3.0",
-    "react-lottie": "^1.2.4",
+    "react-lottie": "^1.2.10",
     "react-multi-carousel": "^2.8.5",
-    "react-router-hash-link": "^2.4.3"
+    "react-router-hash-link": "^2.4.3",
+    "swiper": "^11.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

Code-For-All/src/App.jsx

@@ -3,12 +3,14 @@ import Header from "./HomeComponents/Header";
 import Hero from "./HomeComponents/Hero";
 import Board from "./HomeComponents/Board";
 import Social from "./HomeComponents/Social";
-import PastEvent from "./HomeComponents/PastEvent";
+import AnimationWrapper from "./HomeComponents/AnimationWrapper";
 import LottieAnimation from "./HomeComponents/LottieAnimation";
 import purpleblender from "./assets/background blender purple.png";
-import { ChakraProvider } from "@chakra-ui/react"; // Import ChakraProvider
+import { ChakraProvider } from "@chakra-ui/react";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import Leaderboard from "./components/Leaderboard";
+import Projects from "./HomeComponents/Projects";
+import Events from "./HomeComponents/Events";
 
 function App() {
   return (
@@ -20,16 +22,18 @@ function App() {
             path="/"
             element={
               <>
-                <div className="">
+                <div className="relative overflow-hidden">
                   <LottieAnimation />
+
+                  <div id="home">
+                    <Header />
+                  </div>
+                  <Hero className="mb-20" />
+                  <div id="about"></div>
                 </div>
-                <div id="home">
-                  <Header />
-                </div>
-                <Hero className="mb-20" />
-                <div id="about">{/* About section content */}</div>
+
                 <div id="board" className="relative">
-                  <div className="absolute inset-x-0 -bottom-20 flex z-10 opacity-40 pointer-events-none">
+                  <div className="absolute inset-x-0 -bottom-20 flex -z-1 opacity-40 pointer-events-none">
                     <img
                       src={purpleblender}
                       alt="Purple Blender"
@@ -46,8 +50,12 @@ function App() {
                       className="w-screen"
                     />
                   </div>
-                  <PastEvent />
+                  <AnimationWrapper>
+                    <Events />
+                    <Projects />
+                  </AnimationWrapper>
                 </div>
+
                 <div id="contact">
                   <Social />
                 </div>

Code-For-All/src/BoardInfo.jsx

@@ -1,147 +1,147 @@
-import Justin from './assets/justin.jpg';
-import Thomas from './assets/thomas.jpeg';
-import Jonnathan from './assets/Jonnathan.jpg'
-import Romel from './assets/Romel.jpg'
-import Mike from './assets/mike.jpeg'
-import Eric from './assets/eric_img.jpeg'
-import Amart from './assets/amart.jpg'
-import Sophia from './assets/sophia.png'
-import Daniel from './assets/daniel.jpg'
-import Rakib from './assets/rakib.jpg'
-import Yonghao from './assets/yonghao.png'
-import Lauren from './assets/lauren.jpg'
-import Feng from './assets/feng.jpeg'
-import Shaine from './assets/shaine.jpeg'
-import Dennis from './assets/dennis.jpeg'
-import Oliver from './assets/oliver.jpg'
-import Athor from './assets/athor.png'
-import Matt from './assets/matt.jpg'
+import Justin from "./assets/justin.jpg";
+import Thomas from "./assets/thomas.jpeg";
+import Jonnathan from "./assets/Jonnathan.jpg";
+import Romel from "./assets/Romel.jpg";
+import Mike from "./assets/mike.jpeg";
+import Eric from "./assets/eric_img.jpeg";
+import Amart from "./assets/amart.jpg";
+import Sophia from "./assets/sophia.png";
+import Daniel from "./assets/daniel.jpg";
+import Rakib from "./assets/rakib.jpg";
+import Lauren from "./assets/lauren.jpg";
+import Feng from "./assets/feng.jpeg";
+import Shaine from "./assets/shaine.jpeg";
+import Dennis from "./assets/dennis.jpeg";
+import Oliver from "./assets/oliver.jpg";
+import Athor from "./assets/athor.png";
+import Matt from "./assets/matt.jpg";
 
 export const BOARDINFO = [
-    {
-        image: Justin,
-        name:"Justin Espinal",
-        role: "President & Founder",
-        description: "I love to collect figures!",
-        link: "https://www.linkedin.com/in/justinespinal/"
-    },
-    {
-        image: Thomas,
-        name: "Thomas Soupionis",
-        role: "Vice-President",
-        description: "I like buying sneakers",
-        link: "https://www.linkedin.com/in/thomas-soupionis/"
-    },
-    {
-        image: Eric,
-        name: "Eric Salazar",
-        role: "Treasurer",
-        description: "I have an orange cat named bibi",
-        link: "https://www.linkedin.com/in/eric-salazar04/"
-    },
-    {
-        image: Amart, 
-        name: "Andrew Martin",
-        role: "Secretary & Advisor",
-        description: "I used to study theatre",
-        link: "https://www.linkedin.com/in/andrew-martin72/"
-    },
-    {
-        image:Jonnathan,
-        name: "Jonnathan Saavedra",
-        role: "Event Manager",
-        description: "I love to watch Justin collect figures!",
-        link: "https://www.linkedin.com/in/jonnathan-saavedra/"
-    },
-    {
-        image: Sophia, 
-        name: "Sophia Yau",
-        role: "Event Manager & Tutor", 
-        description: "I love cats", 
-        link: "https://www.linkedin.com/in/sophiayau/"
-    },
-    {
-        image: Mike,
-        name: "Ye Htut Maung", 
-        role: "Workshop Developer",
-        description: "I like Japanese BBQ",
-        link: "https://www.linkedin.com/in/ye-htut-maung/"
-    },
-    {
-        image: Romel, 
-        name: "Vishal Romel Charran", 
-        role: "Workshop Developer", 
-        description: "What No Internships Look Like!", 
-        link: "https://www.linkedin.com/in/vishal-charran-36b1221bb/"
-    },
-    {
-        image: Daniel, 
-        name: "Daniel Jackson", 
-        role: "Workshop Developer", 
-        description: "Like to travel, Gym, skateboard", 
-        link: "https://www.linkedin.com/in/danieljac/"
-    },
-    {
-        image: Rakib, 
-        name: "Rakib Shahid", 
-        role: "Workshop Developer & Tutor", 
-        description: "I like playing guitar and watching F1",
-        link: "https://www.linkedin.com/in/rakib-shahid/"
-    },
-    {
-        image:Yonghao,
-        name: "Yonghao Lin", 
-        role: "Tutor",
-        description: "I like cats, crocheting, video games (Minecraft), and the gym", 
-        link: "https://www.linkedin.com/in/yonghao-lin-b6027b242/"
-    },
-    {
-        image: Feng, 
-        name: "Fengsheng Chen", 
-        role: "Tutor", 
-        description: "Souls game enjoyer",
-        link: "https://www.linkedin.com/in/fengsheng-chen/"
-    },
-    {
-        image: Matt,
-        name: "Matthew Odinsky",
-        role: "Tutor", 
-        description: "I love to cook",
-        link: "https://www.linkedin.com/in/matthew-odinsky/"
-    },
-    {
-        image: Lauren,
-        name: "Lauren Mistretta", 
-        role: "Advisor", 
-        description:"I enjoy playing video games and drawing!", 
-        link: "https://www.linkedin.com/in/lauren-mistretta-9027aa253/"
-    },
-    {
-        image: Shaine,
-        name: "Shaine Lomenario",
-        role: "Marketing",
-        description: "I like to play video games and the piano", 
-        link: "https://www.linkedin.com/in/shaine-lomenario-955168216/"
-    },
-    {
-        image: Dennis, 
-        name: "Dennis Do", 
-        role: "Marketing", 
-        description: "I love working out, playing sports, and meeting new people", 
-        link: "https://www.linkedin.com/in/dennis-do-coding/"
-    },
-    {
-        image: Athor, 
-        name: "Andrew Thoral",
-        role: "Marketing", 
-        description: "I love jolibee",
-        link: "https://www.linkedin.com/company/code-for-all-qc"
-    },
-    {
-        image: Oliver, 
-        name: "Oliver", 
-        role: "Mascot",
-        description: "Meow",
-        link: "https://www.linkedin.com/company/code-for-all-qc"
-    },
-];
+  {
+    image: Justin,
+    name: "Justin Espinal",
+    role: "President & Founder",
+    description: "I love to collect figures!",
+    link: "https://www.linkedin.com/in/justinespinal/",
+  },
+  {
+    image: Thomas,
+    name: "Thomas Soupionis",
+    role: "Vice-President",
+    description: "I like buying sneakers",
+    link: "https://www.linkedin.com/in/thomas-soupionis/",
+  },
+  {
+    image: Eric,
+    name: "Eric Salazar",
+    role: "Treasurer",
+    description: "I have an orange cat named bibi",
+    link: "https://www.linkedin.com/in/eric-salazar04/",
+  },
+  {
+    image: Amart,
+    name: "Andrew Martin",
+    role: "Secretary & Advisor",
+    description: "I used to study theatre",
+    link: "https://www.linkedin.com/in/andrew-martin72/",
+  },
+  {
+    image: Jonnathan,
+    name: "Jonnathan Saavedra",
+    role: "Event Manager",
+    description: "I love to watch Justin collect figures!",
+    link: "https://www.linkedin.com/in/jonnathan-saavedra/",
+  },
+  {
+    image: Sophia,
+    name: "Sophia Yau",
+    role: "Event Manager & Tutor",
+    description: "I love cats",
+    link: "https://www.linkedin.com/in/sophiayau/",
+  },
+  {
+    image: Mike,
+    name: "Ye Htut Maung",
+    role: "Workshop Developer",
+    description: "I like Japanese BBQ",
+    link: "https://www.linkedin.com/in/ye-htut-maung/",
+  },
+  {
+    image: Romel,
+    name: "Vishal Romel Charran",
+    role: "Workshop Developer",
+    description: "What No Internships Look Like!",
+    link: "https://www.linkedin.com/in/vishal-charran-36b1221bb/",
+  },
+  {
+    image: Daniel,
+    name: "Daniel Jackson",
+    role: "Workshop Developer",
+    description: "Like to travel, Gym, skateboard",
+    link: "https://www.linkedin.com/in/danieljac/",
+  },
+  {
+    image: Rakib,
+    name: "Rakib Shahid",
+    role: "Workshop Developer & Tutor",
+    description: "I like playing guitar and watching F1",
+    link: "https://www.linkedin.com/in/rakib-shahid/",
+  },
+  {
+    image: "https://i.imgur.com/a350HHm.png",
+    name: "Yonghao Lin",
+    role: "Tutor",
+    description:
+      "I like cats, crocheting, video games (Minecraft), and the gym",
+    link: "https://www.linkedin.com/in/yonghao-lin-b6027b242/",
+  },
+  {
+    image: Feng,
+    name: "Fengsheng Chen",
+    role: "Tutor",
+    description: "Souls game enjoyer",
+    link: "https://www.linkedin.com/in/fengsheng-chen/",
+  },
+  {
+    image: Matt,
+    name: "Matthew Odinsky",
+    role: "Tutor",
+    description: "I love to cook",
+    link: "https://www.linkedin.com/in/matthew-odinsky/",
+  },
+  {
+    image: Lauren,
+    name: "Lauren Mistretta",
+    role: "Advisor",
+    description: "I enjoy playing video games and drawing!",
+    link: "https://www.linkedin.com/in/lauren-mistretta-9027aa253/",
+  },
+  {
+    image: Shaine,
+    name: "Shaine Lomenario",
+    role: "Marketing",
+    description: "I like to play video games and the piano",
+    link: "https://www.linkedin.com/in/shaine-lomenario-955168216/",
+  },
+  {
+    image: Dennis,
+    name: "Dennis Do",
+    role: "Marketing",
+    description: "I love working out, playing sports, and meeting new people",
+    link: "https://www.linkedin.com/in/dennis-do-coding/",
+  },
+  {
+    image: Athor,
+    name: "Andrew Thoral",
+    role: "Marketing",
+    description: "I love jolibee",
+    link: "https://www.linkedin.com/company/code-for-all-qc",
+  },
+  {
+    image: Oliver,
+    name: "Oliver",
+    role: "Mascot",
+    description: "Meow",
+    link: "https://www.linkedin.com/company/code-for-all-qc",
+  },
+];