Skip to content

Commit 7161958

Browse files
MarvelMatheshMarvelMathesh
committed
About: Enhance About and Speakers components
1 parent af70a17 commit 7161958

File tree

3 files changed

+150
-216
lines changed

3 files changed

+150
-216
lines changed

‎src/About.jsx

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
1-
import React, { useEffect } from 'react'
2-
import Speakers from './components/Speakers'
1+
import React, { useEffect } from "react";
2+
import Speakers from "./components/Speakers";
3+
import gsap from "gsap";
4+
import { ScrollTrigger } from "gsap/ScrollTrigger";
5+
6+
gsap.registerPlugin(ScrollTrigger);
37

48
const About = () => {
59
useEffect(() => {
6-
const hasReloaded = localStorage.getItem('hasReloaded')
7-
if (!hasReloaded) {
8-
localStorage.setItem('hasReloaded', 'true')
9-
setTimeout(() => {
10-
window.location.reload()
11-
}, 1000)
12-
}
13-
}, [])
10+
// Force GSAP animations to refresh when navigating to About page
11+
setTimeout(() => {
12+
ScrollTrigger.refresh();
13+
}, 500);
14+
}, []);
1415

1516
return (
1617
<div className="">
1718
<Speakers />
1819
</div>
19-
)
20-
}
20+
);
21+
};
2122

22-
export default About
23+
export default About;

‎src/components/Speaker.jsx

Lines changed: 72 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,138 +1,88 @@
1-
import React, { useRef } from 'react'
2-
import { useGSAP } from '@gsap/react'
3-
import gsap from 'gsap'
4-
import AnimatedText from './text'
1+
import React, { useRef, useEffect } from "react";
2+
import gsap from "gsap";
3+
import AnimatedText from "./text";
54

6-
function Speaker({
7-
values = {},
8-
name = 'Ankit Prasad',
9-
subname = 'Mr. Prasad',
10-
ct = '',
11-
customaudio = '',
12-
image
13-
}) {
14-
const containerRef = useRef(null)
15-
const rowRefs = useRef([])
16-
const lineRefs = useRef([])
17-
const valueRefs = useRef([])
5+
function Speaker({ values = {}, name, subname, ct = "", image, index }) {
6+
const containerRef = useRef(null);
7+
const valueRefs = useRef([]);
188

19-
useGSAP(() => {
20-
const timeline = gsap.timeline({
21-
scrollTrigger: {
22-
trigger: containerRef.current,
23-
start: 'top center',
24-
toggleActions: 'play reverse play reverse'
25-
}
26-
})
9+
useEffect(() => {
10+
const context = gsap.context(() => {
11+
gsap.fromTo(
12+
valueRefs.current,
13+
{ opacity: 0, y: 10 },
14+
{
15+
opacity: 1,
16+
y: 0,
17+
duration: 0.5,
18+
ease: "power2.out",
19+
stagger: 0.15,
20+
}
21+
);
22+
}, containerRef);
2723

28-
timeline.fromTo(
29-
lineRefs.current,
30-
{
31-
scaleX: 0,
32-
transformOrigin: 'left'
33-
},
34-
{
35-
scaleX: 1,
36-
duration: 0.8,
37-
ease: 'power3.out'
38-
}
39-
)
40-
41-
timeline.fromTo(
42-
rowRefs.current,
43-
{
44-
x: '-100%'
45-
},
46-
{
47-
x: 0,
48-
duration: 0.3,
49-
ease: 'power3.out'
50-
},
51-
'-=0.8'
52-
)
53-
54-
timeline.fromTo(
55-
valueRefs.current,
56-
{
57-
x: '-100%'
58-
},
59-
{
60-
x: 0,
61-
duration: 0.3,
62-
ease: 'power3.out'
63-
},
64-
'-=0.8'
65-
)
66-
67-
timeline.reverse(0.1)
68-
}, [])
24+
return () => context.revert();
25+
}, []);
6926

7027
return (
71-
<div className="flex w-screen items-center justify-between px-10 pt-10">
72-
<div className="flex w-full flex-nowrap gap-32 border-t-2 border-white">
73-
<div className="font-neubit w-[40vw] text-left">
74-
<AnimatedText
75-
customText={ct}
76-
text={name}
77-
time={1}
78-
className="text-left font-neuebit text-6xl uppercase text-white"
79-
audioSrc={customaudio ? customaudio : '/sfx/type.wav'}
80-
/>
81-
<br />
82-
<AnimatedText
83-
customText={ct}
84-
text={subname}
85-
time={1}
86-
className="text-left font-neuebit text-5xl uppercase text-white"
87-
/>
28+
<div
29+
ref={containerRef}
30+
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]"
31+
>
32+
<div className="w-full lg:w-1/3 text-center lg:text-left flex flex-col items-center lg:items-start">
33+
<AnimatedText
34+
customText={`${index < 10 ? "0" : ""}${index}. `}
35+
text={name}
36+
time={1}
37+
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"
38+
/>
39+
<br />
40+
<AnimatedText
41+
text={subname}
42+
time={1}
43+
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"
44+
/>
45+
46+
{image && (
8847
<img
8948
src={image}
90-
alt=""
91-
width="1024"
92-
height="1024"
93-
className="w-90 h-90 rounded-lg mix-blend-screen shadow-lg"
49+
alt={name}
50+
loading="lazy"
51+
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"
9452
/>
95-
</div>
96-
97-
<div ref={containerRef} className="font-neubit mt-3 w-full text-white">
98-
{Object.entries(values).map(([key, value], index) => (
99-
<div key={key}>
100-
<div className="flex flex-wrap items-center justify-start">
101-
<div className="w-[25vw] overflow-hidden">
102-
<div ref={(el) => (rowRefs.current[index] = el)}>
103-
<AnimatedText
104-
text={key}
105-
time={1}
106-
className="w-full font-neuebit text-lg uppercase tracking-wider text-green-500"
107-
/>
108-
</div>
109-
</div>
53+
)}
54+
</div>
11055

111-
<div className="ml-4 flex-grow">
112-
<div className="overflow-hidden">
113-
<div ref={(el) => (valueRefs.current[index] = el)}>
114-
<AnimatedText
115-
text={value}
116-
time={0.2}
117-
className="w-full font-neuebit text-lg uppercase tracking-wider text-white"
118-
/>
119-
</div>
120-
</div>
121-
</div>
56+
<div className="w-full lg:w-2/3 text-white">
57+
{Object.entries(values).map(([key, value], idx) => (
58+
<div key={key} className="mb-3 md:mb-4">
59+
<div className="flex flex-wrap items-center justify-start">
60+
<div className="w-[60%] md:w-[40%] lg:w-[25vw] overflow-hidden">
61+
<AnimatedText
62+
text={`${idx + 1}. ${key}`}
63+
time={1}
64+
className="text-sm md:text-lg lg:text-xl font-semibold text-green-400 font-mono transition-all duration-300 hover:text-green-300"
65+
/>
66+
</div>
12267

123-
<div className="w-full flex-grow py-3">
124-
<div
125-
ref={(el) => (lineRefs.current[index] = el)}
126-
className="h-[1px] w-full bg-white"
127-
/>
128-
</div>
68+
<div
69+
className="ml-4 flex-grow opacity-0"
70+
ref={(el) => (valueRefs.current[idx] = el)}
71+
>
72+
<AnimatedText
73+
text={value}
74+
time={0.2}
75+
className="w-full text-sm md:text-lg text-white font-mono transition-all duration-300 hover:text-gray-300"
76+
/>
12977
</div>
13078
</div>
131-
))}
132-
</div>
79+
80+
<div className="mt-2 h-[2px] w-full bg-green-500 opacity-50 hover:opacity-100 transition-opacity duration-300"></div>
81+
</div>
82+
))}
13383
</div>
13484
</div>
135-
)
85+
);
13686
}
13787

138-
export default Speaker
88+
export default Speaker;

‎src/components/Speakers.jsx

Lines changed: 64 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,70 @@
1-
import React from 'react'
2-
import Speaker from './Speaker.jsx'
3-
import AnimatedText from './text.jsx'
1+
import React from "react";
2+
import Speaker from "./Speaker.jsx";
3+
import AnimatedText from "./text.jsx";
44

55
function Speakers() {
6+
const speakersData = [
7+
{
8+
name: "Yeyati Prasher",
9+
image: "/cool-peeps/yeyati.jpg",
10+
subname: "Linux Basics",
11+
values: {
12+
"Introduction to Linux": "Understanding the basics",
13+
"Command Line Tools": "Essential CLI utilities",
14+
"File System": "Navigating and managing files",
15+
"Networking": "Linux network fundamentals",
16+
},
17+
},
18+
{
19+
name: "Sid Karnam",
20+
image: "/cool-peeps/sid.jpg",
21+
subname: "Binary Exploitation",
22+
values: {
23+
"OSINT Basics": "What is Open Source Intelligence?",
24+
"Finding Information": "Techniques and tools",
25+
"Data Analysis": "Extracting insights",
26+
"Social Engineering": "How OSINT aids in cybersecurity",
27+
},
28+
},
29+
{
30+
name: "Goutham Rajeev",
31+
image: "/cool-peeps/goutham.jpg",
32+
subname: "Web Security",
33+
values: {
34+
"Web Vulnerabilities": "XSS, CSRF, SQL Injection",
35+
"Penetration Testing": "Tools and techniques",
36+
"Exploiting Web Apps": "Fixing security loopholes",
37+
},
38+
},
39+
{
40+
name: "Preetham Pemmasani",
41+
image: "/cool-peeps/preetham.jpg",
42+
subname: "OSINT",
43+
values: {
44+
"OSINT Basics": "What is Open Source Intelligence?",
45+
"Finding Information": "Techniques and tools",
46+
"Data Analysis": "Extracting insights",
47+
"Social Engineering": "How OSINT aids in cybersecurity",
48+
},
49+
},
50+
];
51+
652
return (
7-
<>
8-
<div className="z-20 px-10 text-left">
9-
<AnimatedText
10-
text="SPEAKERS"
11-
className="lg:9xl z-50 w-screen cursor-pointer text-left font-neuebit text-6xl uppercase md:text-8xl"
12-
customText="_-"
13-
time={2}
14-
preStyle="font-neuebit uppercase text-6xl md:text-8xl lg:9xl text-yellow-500 z-50 cursor-pointer text-left"
15-
/>
53+
<div className="px-6 lg:px-20 py-10 text-left bg-black text-yellow-500 border border-green-500 shadow-lg rounded-lg">
54+
<AnimatedText
55+
text="SPEAKERS"
56+
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"
57+
customText="_-"
58+
time={2}
59+
/>
60+
61+
<div className="mt-10 space-y-16 flex flex-col items-center">
62+
{speakersData.map((speaker, index) => (
63+
<Speaker key={index} index={index + 1} {...speaker} />
64+
))}
1665
</div>
17-
<Speaker
18-
name="Yeyati Prasher"
19-
subname="Linux Basics"
20-
image="/cool-peeps/yeyati.jpg"
21-
values={{
22-
'Command Line Interface':
23-
'Master navigation, file manipulation, and shell fundamentals.',
24-
'Bash Scripting': 'Automate tasks using Bash commands and scripts.',
25-
'File System Hierarchy': 'Understand Linux directory structure.',
26-
'User & Group Management': 'Handle users and permissions.',
27-
'File Permissions': 'Control access with chmod and chown.'
28-
}}
29-
></Speaker>
30-
<Speaker
31-
ct="👶"
32-
name="Sid Karnam"
33-
image="/cool-peeps/sid.jpg"
34-
subname="Binary Exploitation"
35-
values={{
36-
'Basics of Binary Exploitation':
37-
'Understanding and exploiting binary vulnerabilities',
38-
'Basic Tools for Analysis':
39-
'Using gdb, checksec, readelf, and ROPgadget',
40-
'Analyzing a Binary': 'Extracting insights using security tools',
41-
Overflows: 'Exploiting buffer, integer, and stack overflows',
42-
'Formatting Vulnerabilities':
43-
'Attacking printf-style format string bugs',
44-
'ROP & GOT Basics': 'Bypassing protections using ROP and GOT'
45-
}}
46-
></Speaker>
47-
<Speaker
48-
ct="🦜"
49-
name="Goutham Rajeev"
50-
subname="Web"
51-
image="/cool-peeps/goutham.jpg"
52-
values={{
53-
'SQL Injection using OR/And Clause':
54-
'Bypass auth using OR/AND logic.',
55-
'Exploiting Where conditions': 'Manipulate WHERE to leak data.',
56-
'Union attacks': 'Merge queries using UNION.',
57-
'XSS Reflected attack': 'Immediate script reflection.',
58-
'XSS Stored attack': 'Stored scripts compromise users.',
59-
'XSS DOM attack': 'Inject scripts via DOM.',
60-
'File Upload Vulnerabilities': 'Weak upload checks risk systems.',
61-
'Uploading web shells': 'Hide scripts as files.',
62-
'Bypassing file restrictions': 'Circumvent file validations.',
63-
'Path traversal via File Upload': 'Exploit directory traversal.'
64-
}}
65-
customaudio="/sfx/parrots.wav"
66-
></Speaker>
67-
<Speaker
68-
ct="🧏🤫"
69-
name="Preetham Pemmasani"
70-
image="/cool-peeps/preetham.jpg"
71-
subname="OSINT"
72-
values={{
73-
topic1: 'description1',
74-
topic2: 'description2',
75-
topic3: 'description3',
76-
topic4: 'description4',
77-
topic5: 'description5',
78-
topic6: 'description6',
79-
topic7: 'description7',
80-
topic8: 'description8'
81-
}}
82-
></Speaker>
83-
</>
84-
)
66+
</div>
67+
);
8568
}
8669

87-
export default Speakers
70+
export default Speakers;

0 commit comments

Comments
 (0)