About: Bringup New theme

src/About.jsx

@@ -1,22 +1,23 @@
-import React, { useEffect } from 'react'
-import Speakers from './components/Speakers'
+import React, { useEffect } from "react";
+import Speakers from "./components/Speakers";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+gsap.registerPlugin(ScrollTrigger);
 
 const About = () => {
   useEffect(() => {
-    const hasReloaded = localStorage.getItem('hasReloaded')
-    if (!hasReloaded) {
-      localStorage.setItem('hasReloaded', 'true')
-      setTimeout(() => {
-        window.location.reload()
-      }, 1000)
-    }
-  }, [])
+    // Force GSAP animations to refresh when navigating to About page
+    setTimeout(() => {
+      ScrollTrigger.refresh();
+    }, 500);
+  }, []);
 
   return (
     <div className="">
       <Speakers />
     </div>
-  )
-}
+  );
+};
 
-export default About
+export default About;

src/components/Speaker.jsx

@@ -1,138 +1,88 @@
-import React, { useRef } from 'react'
-import { useGSAP } from '@gsap/react'
-import gsap from 'gsap'
-import AnimatedText from './text'
+import React, { useRef, useEffect } from "react";
+import gsap from "gsap";
+import AnimatedText from "./text"; 
 
-function Speaker({
-  values = {},
-  name = 'Ankit Prasad',
-  subname = 'Mr. Prasad',
-  ct = '',
-  customaudio = '',
-  image
-}) {
-  const containerRef = useRef(null)
-  const rowRefs = useRef([])
-  const lineRefs = useRef([])
-  const valueRefs = useRef([])
+function Speaker({ values = {}, name, subname, ct = "", image, index }) {
+  const containerRef = useRef(null);
+  const valueRefs = useRef([]);
 
-  useGSAP(() => {
-    const timeline = gsap.timeline({
-      scrollTrigger: {
-        trigger: containerRef.current,
-        start: 'top center',
-        toggleActions: 'play reverse play reverse'
-      }
-    })
+  useEffect(() => {
+    const context = gsap.context(() => {
+      gsap.fromTo(
+        valueRefs.current,
+        { opacity: 0, y: 10 },
+        {
+          opacity: 1,
+          y: 0,
+          duration: 0.5,
+          ease: "power2.out",
+          stagger: 0.15,
+        }
+      );
+    }, containerRef);
 
-    timeline.fromTo(
-      lineRefs.current,
-      {
-        scaleX: 0,
-        transformOrigin: 'left'
-      },
-      {
-        scaleX: 1,
-        duration: 0.8,
-        ease: 'power3.out'
-      }
-    )
-
-    timeline.fromTo(
-      rowRefs.current,
-      {
-        x: '-100%'
-      },
-      {
-        x: 0,
-        duration: 0.3,
-        ease: 'power3.out'
-      },
-      '-=0.8'
-    )
-
-    timeline.fromTo(
-      valueRefs.current,
-      {
-        x: '-100%'
-      },
-      {
-        x: 0,
-        duration: 0.3,
-        ease: 'power3.out'
-      },
-      '-=0.8'
-    )
-
-    timeline.reverse(0.1)
-  }, [])
+    return () => context.revert();
+  }, []);
 
   return (
-    <div className="flex w-screen items-center justify-between px-10 pt-10">
-      <div className="flex w-full flex-nowrap gap-32 border-t-2 border-white">
-        <div className="font-neubit w-[40vw] text-left">
-          <AnimatedText
-            customText={ct}
-            text={name}
-            time={1}
-            className="text-left font-neuebit text-6xl uppercase text-white"
-            audioSrc={customaudio ? customaudio : '/sfx/type.wav'}
-          />
-          <br />
-          <AnimatedText
-            customText={ct}
-            text={subname}
-            time={1}
-            className="text-left font-neuebit text-5xl uppercase text-white"
-          />
+    <div
+      ref={containerRef}
+      className="flex flex-col lg:flex-row items-center justify-center w-full px-6 md:px-12 lg:px-20 py-10 gap-6 md:gap-12 lg:gap-16 bg-black text-yellow-500 border border-green-500 shadow-md rounded-lg transition-transform duration-300 hover:scale-[1.02]"
+    >
+      <div className="w-full lg:w-1/3 text-center lg:text-left flex flex-col items-center lg:items-start">
+        <AnimatedText
+          customText={`${index < 10 ? "0" : ""}${index}. `}
+          text={name}
+          time={1}
+          className="font-mono text-3xl md:text-4xl lg:text-5xl uppercase text-yellow-500 transition-all duration-300 hover:text-yellow-400 text-center lg:text-left"
+        />
+        <br />
+        <AnimatedText
+          text={subname}
+          time={1}
+          className="font-mono text-xl md:text-2xl lg:text-3xl uppercase text-gray-400 transition-all duration-300 hover:text-gray-300 text-center lg:text-left"
+        />
+
+        {image && (
           <img
             src={image}
-            alt=""
-            width="1024"
-            height="1024"
-            className="w-90 h-90 rounded-lg mix-blend-screen shadow-lg"
+            alt={name}
+            loading="lazy"
+            className="mt-6 w-[180px] md:w-[220px] lg:w-[250px] h-[180px] md:h-[220px] lg:h-[250px] object-cover rounded-lg shadow-lg border border-green-500 transition-transform duration-300 hover:scale-105"
           />
-        </div>
-
-        <div ref={containerRef} className="font-neubit mt-3 w-full text-white">
-          {Object.entries(values).map(([key, value], index) => (
-            <div key={key}>
-              <div className="flex flex-wrap items-center justify-start">
-                <div className="w-[25vw] overflow-hidden">
-                  <div ref={(el) => (rowRefs.current[index] = el)}>
-                    <AnimatedText
-                      text={key}
-                      time={1}
-                      className="w-full font-neuebit text-lg uppercase tracking-wider text-green-500"
-                    />
-                  </div>
-                </div>
+        )}
+      </div>
 
-                <div className="ml-4 flex-grow">
-                  <div className="overflow-hidden">
-                    <div ref={(el) => (valueRefs.current[index] = el)}>
-                      <AnimatedText
-                        text={value}
-                        time={0.2}
-                        className="w-full font-neuebit text-lg uppercase tracking-wider text-white"
-                      />
-                    </div>
-                  </div>
-                </div>
+      <div className="w-full lg:w-2/3 text-white">
+        {Object.entries(values).map(([key, value], idx) => (
+          <div key={key} className="mb-3 md:mb-4">
+            <div className="flex flex-wrap items-center justify-start">
+              <div className="w-[60%] md:w-[40%] lg:w-[25vw] overflow-hidden">
+                <AnimatedText
+                  text={`${idx + 1}. ${key}`}
+                  time={1}
+                  className="text-sm md:text-lg lg:text-xl font-semibold text-green-400 font-mono transition-all duration-300 hover:text-green-300"
+                />
+              </div>
 
-                <div className="w-full flex-grow py-3">
-                  <div
-                    ref={(el) => (lineRefs.current[index] = el)}
-                    className="h-[1px] w-full bg-white"
-                  />
-                </div>
+              <div
+                className="ml-4 flex-grow opacity-0"
+                ref={(el) => (valueRefs.current[idx] = el)}
+              >
+                <AnimatedText
+                  text={value}
+                  time={0.2}
+                  className="w-full text-sm md:text-lg text-white font-mono transition-all duration-300 hover:text-gray-300"
+                />
               </div>
             </div>
-          ))}
-        </div>
+
+            <div className="mt-2 h-[2px] w-full bg-green-500 opacity-50 hover:opacity-100 transition-opacity duration-300"></div>
+          </div>
+        ))}
       </div>
     </div>
-  )
+  );
 }
 
-export default Speaker
+export default Speaker;

src/components/Speakers.jsx

@@ -1,87 +1,70 @@
-import React from 'react'
-import Speaker from './Speaker.jsx'
-import AnimatedText from './text.jsx'
+import React from "react";
+import Speaker from "./Speaker.jsx";
+import AnimatedText from "./text.jsx";
 
 function Speakers() {
+  const speakersData = [
+    {
+      name: "Yeyati Prasher",
+      image: "/cool-peeps/yeyati.jpg",
+      subname: "Linux Basics",
+      values: {
+        "Introduction to Linux": "Understanding the basics",
+        "Command Line Tools": "Essential CLI utilities",
+        "File System": "Navigating and managing files",
+        "Networking": "Linux network fundamentals",
+      },
+    },
+    {
+      name: "Sid Karnam",
+      image: "/cool-peeps/sid.jpg",
+      subname: "Binary Exploitation",
+      values: {
+        "OSINT Basics": "What is Open Source Intelligence?",
+        "Finding Information": "Techniques and tools",
+        "Data Analysis": "Extracting insights",
+        "Social Engineering": "How OSINT aids in cybersecurity",
+      },
+    },
+    {
+      name: "Goutham Rajeev",
+      image: "/cool-peeps/goutham.jpg",
+      subname: "Web Security",
+      values: {
+        "Web Vulnerabilities": "XSS, CSRF, SQL Injection",
+        "Penetration Testing": "Tools and techniques",
+        "Exploiting Web Apps": "Fixing security loopholes",
+      },
+    },
+    {
+      name: "Preetham Pemmasani",
+      image: "/cool-peeps/preetham.jpg",
+      subname: "OSINT",
+      values: {
+        "OSINT Basics": "What is Open Source Intelligence?",
+        "Finding Information": "Techniques and tools",
+        "Data Analysis": "Extracting insights",
+        "Social Engineering": "How OSINT aids in cybersecurity",
+      },
+    },
+  ];
+
   return (
-    <>
-      <div className="z-20 px-10 text-left">
-        <AnimatedText
-          text="SPEAKERS"
-          className="lg:9xl z-50 w-screen cursor-pointer text-left font-neuebit text-6xl uppercase md:text-8xl"
-          customText="_-"
-          time={2}
-          preStyle="font-neuebit uppercase text-6xl md:text-8xl lg:9xl text-yellow-500 z-50 cursor-pointer text-left"
-        />
+    <div className="px-6 lg:px-20 py-10 text-left bg-black text-yellow-500 border border-green-500 shadow-lg rounded-lg">
+      <AnimatedText
+        text="SPEAKERS"
+        className="w-full font-mono text-5xl md:text-7xl lg:text-9xl uppercase text-yellow-500 transition-all duration-300 hover:text-yellow-500"
+        customText="_-"
+        time={2}
+      />
+
+      <div className="mt-10 space-y-16 flex flex-col items-center">
+        {speakersData.map((speaker, index) => (
+          <Speaker key={index} index={index + 1} {...speaker} />
+        ))}
       </div>
-      <Speaker
-        name="Yeyati Prasher"
-        subname="Linux Basics"
-        image="/cool-peeps/yeyati.jpg"
-        values={{
-          'Command Line Interface':
-            'Master navigation, file manipulation, and shell fundamentals.',
-          'Bash Scripting': 'Automate tasks using Bash commands and scripts.',
-          'File System Hierarchy': 'Understand Linux directory structure.',
-          'User & Group Management': 'Handle users and permissions.',
-          'File Permissions': 'Control access with chmod and chown.'
-        }}
-      ></Speaker>
-      <Speaker
-        ct="👶"
-        name="Sid Karnam"
-        image="/cool-peeps/sid.jpg"
-        subname="Binary Exploitation"
-        values={{
-          'Basics of Binary Exploitation':
-            'Understanding and exploiting binary vulnerabilities',
-          'Basic Tools for Analysis':
-            'Using gdb, checksec, readelf, and ROPgadget',
-          'Analyzing a Binary': 'Extracting insights using security tools',
-          Overflows: 'Exploiting buffer, integer, and stack overflows',
-          'Formatting Vulnerabilities':
-            'Attacking printf-style format string bugs',
-          'ROP & GOT Basics': 'Bypassing protections using ROP and GOT'
-        }}
-      ></Speaker>
-      <Speaker
-        ct="🦜"
-        name="Goutham Rajeev"
-        subname="Web"
-        image="/cool-peeps/goutham.jpg"
-        values={{
-          'SQL Injection using OR/And Clause':
-            'Bypass auth using OR/AND logic.',
-          'Exploiting Where conditions': 'Manipulate WHERE to leak data.',
-          'Union attacks': 'Merge queries using UNION.',
-          'XSS Reflected attack': 'Immediate script reflection.',
-          'XSS Stored attack': 'Stored scripts compromise users.',
-          'XSS DOM attack': 'Inject scripts via DOM.',
-          'File Upload Vulnerabilities': 'Weak upload checks risk systems.',
-          'Uploading web shells': 'Hide scripts as files.',
-          'Bypassing file restrictions': 'Circumvent file validations.',
-          'Path traversal via File Upload': 'Exploit directory traversal.'
-        }}
-        customaudio="/sfx/parrots.wav"
-      ></Speaker>
-      <Speaker
-        ct="🧏🤫"
-        name="Preetham Pemmasani"
-        image="/cool-peeps/preetham.jpg"
-        subname="OSINT"
-        values={{
-          topic1: 'description1',
-          topic2: 'description2',
-          topic3: 'description3',
-          topic4: 'description4',
-          topic5: 'description5',
-          topic6: 'description6',
-          topic7: 'description7',
-          topic8: 'description8'
-        }}
-      ></Speaker>
-    </>
-  )
+    </div>
+  );
 }
 
-export default Speakers
+export default Speakers;