Skip to content

Commit 4106a1a

Browse files
virajbhartiyaamandeeep02RahilKothari9Shreyaa-Mishraatkshsbcue
authored
Hack8 dev (#124)
* update: update gun rotation (#117) * fix: footer svg path * update: update hack8 with master (#111) * feat: add gun rotation * feat: add built files * fix: gun rotation logic --------- Co-authored-by: Rahil Kothari <kotharirahil9@gmail.com> * Page faq (#120) * feat: add FAQ page * Added Hyperlink and Updated FAQs * Added FAQs in the navbar * style: update FAQ styles for improved layout and readability; add divider image * style: enhance navigation and FAQ styles; adjust font sizes and add animation delays * style: improve FAQ layout and navigation spacing; enhance readability and visual appeal * fix: changes to faq.css for better view * style: enhance hero section parallax effect and improve FAQ styles for better readability --------- Co-authored-by: tkshsbcue <kumar.tanay@somaiya.edu> Co-authored-by: Viraj Bhartiya <vlbhartiya@gmail.com> * fix: FAQ question title * 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> * fix: FAQ position update (#123) * fix: footer svg path * update: update hack8 with master (#111) * feat: add gun rotation * feat: add built files * fix: gun rotation logic * add faq (#121) * update: update gun rotation (#117) * fix: footer svg path * update: update hack8 with master (#111) * feat: add gun rotation * feat: add built files * fix: gun rotation logic --------- Co-authored-by: Rahil Kothari <kotharirahil9@gmail.com> * Page faq (#120) * feat: add FAQ page * Added Hyperlink and Updated FAQs * Added FAQs in the navbar * style: update FAQ styles for improved layout and readability; add divider image * style: enhance navigation and FAQ styles; adjust font sizes and add animation delays * style: improve FAQ layout and navigation spacing; enhance readability and visual appeal * fix: changes to faq.css for better view * style: enhance hero section parallax effect and improve FAQ styles for better readability --------- Co-authored-by: tkshsbcue <kumar.tanay@somaiya.edu> Co-authored-by: Viraj Bhartiya <vlbhartiya@gmail.com> --------- Co-authored-by: Amandeep Singh <145058235+amandeeep02@users.noreply.github.com> Co-authored-by: Rahil Kothari <kotharirahil9@gmail.com> Co-authored-by: Shreyaa-Mishraa <143896824+Shreyaa-Mishraa@users.noreply.github.com> Co-authored-by: tkshsbcue <kumar.tanay@somaiya.edu> * fix: faq position --------- Co-authored-by: Rahil Kothari <kotharirahil9@gmail.com> Co-authored-by: Viraj Bhartiya <vlbhartiya@gmail.com> Co-authored-by: Shreyaa-Mishraa <143896824+Shreyaa-Mishraa@users.noreply.github.com> Co-authored-by: tkshsbcue <kumar.tanay@somaiya.edu> * fix: update FAQ questions for clarity and consistency --------- Co-authored-by: Amandeep Singh <145058235+amandeeep02@users.noreply.github.com> Co-authored-by: Rahil Kothari <kotharirahil9@gmail.com> Co-authored-by: Shreyaa-Mishraa <143896824+Shreyaa-Mishraa@users.noreply.github.com> Co-authored-by: tkshsbcue <kumar.tanay@somaiya.edu> Co-authored-by: spooodieman <168467734+spooodieman@users.noreply.github.com>
1 parent 84552c3 commit 4106a1a

17 files changed

Lines changed: 180 additions & 115 deletions

File tree

.DS_Store

2 KB
Binary file not shown.

.gitignore

Lines changed: 0 additions & 1 deletion
This file was deleted.

.vscode/settings.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"files.associations": {
3+
"iostream": "cpp"
4+
}
5+
}

2025/src/App.jsx

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,23 @@ import Sponsor from "./sections/sponsor/sponsor"
88
import StatsPage from "./sections/stats/stats.jsx"
99
import FAQ from "./sections/faq.jsx" // Change to uppercase
1010
import { clarity } from 'react-microsoft-clarity'
11+
import Aos from "aos"
1112

1213
function App() {
1314
clarity.init("qodrz4ajhs")
15+
Aos.init();
1416
return (
15-
<div className="main-container">
16-
<Hero />
17-
<About />
18-
<StatsPage/>
19-
<FlashBack />
20-
<FAQ/>
21-
<Prizes />
22-
<Sponsor />
23-
<Footer />
24-
</div>
17+
<div className="main-container">
18+
<Hero />
19+
<About />
20+
<StatsPage/>
21+
<FlashBack />
22+
<Prizes />
23+
<Sponsor />
24+
<FAQ />
25+
<Footer />
26+
</div>
2527
)
2628
}
2729

28-
export default App
30+
export default App;

2025/src/components/footer/footer.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -319,4 +319,4 @@ footer::before {
319319
.logo {
320320
padding-left: 0;
321321
}
322-
}
322+
}

2025/src/components/footer/footer.jsx

Lines changed: 67 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,62 @@
1-
import React, { useEffect } from 'react';
1+
import React, { useState, useEffect, useCallback, useRef } from 'react';
22
import './footer.css';
33

4+
const ScrambleText = ({ text }) => {
5+
const [scrambledText, setScrambledText] = useState(text);
6+
const ref = useRef(null);
7+
const [isVisible, setIsVisible] = useState(false);
8+
const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
9+
10+
const scramble = useCallback(() => {
11+
let iterations = 0;
12+
const maxIterations = 10;
13+
const interval = setInterval(() => {
14+
setScrambledText(prev =>
15+
text.split('').map((char, index) => {
16+
if (char === " ") return " ";
17+
if (iterations > index) return char;
18+
return characters[Math.floor(Math.random() * characters.length)];
19+
}).join("")
20+
);
21+
22+
iterations += 1 / 3;
23+
if (iterations >= maxIterations) {
24+
clearInterval(interval);
25+
setScrambledText(text);
26+
}
27+
}, 30);
28+
29+
return () => clearInterval(interval);
30+
}, [text, characters]);
31+
32+
useEffect(() => {
33+
const observer = new IntersectionObserver(
34+
([entry]) => {
35+
setIsVisible(entry.isIntersecting);
36+
},
37+
{ threshold: 0.1 }
38+
);
39+
40+
if (ref.current) observer.observe(ref.current);
41+
42+
return () => {
43+
if (ref.current) observer.unobserve(ref.current);
44+
};
45+
}, []);
46+
47+
useEffect(() => {
48+
if (isVisible) {
49+
scramble();
50+
}
51+
}, [isVisible, scramble]);
52+
53+
return (
54+
<span ref={ref} className="scramble-text">
55+
{scrambledText}
56+
</span>
57+
);
58+
};
59+
460
const Footer = () => {
561
useEffect(() => {
662
const script = document.createElement('script')
@@ -17,23 +73,23 @@ const Footer = () => {
1773
<div className="outlaws">
1874
<div className="outlaws-image">
1975
<img src="./footer-images/no_outlaw-cropped.svg" alt="text" />
20-
<h1>Code The Journey</h1>
76+
<h1><ScrambleText text = "Code The Journey"/></h1>
2177
</div>
2278
</div>
23-
<div className="everything">
79+
<div className="everything" data-aos="fade-up" data-aos-once = "true" data-aos-duration = "300">
2480
<div className="M">
2581
<img src="./footer-images/MATURE_17.svg" alt="MATURE" />
2682
</div>
27-
<div className="logo">
28-
<div className="save-the-date">SAVE THE DATE</div>
29-
<div className="april-dates">APRIL 12 | 13</div>
83+
<div className="logo" >
84+
<div className="save-the-date" data-aos="fade-down" data-aos-duration = "500" data-aos-delay = "300">SAVE THE DATE</div>
85+
<div className="april-dates"data-aos="fade-up" data-aos-duration = "500" data-aos-delay = "450">APRIL 12 | 13</div>
3086

3187
<div
3288
className="apply-button"
3389
data-hackathon-slug="gajshield-kjsse-hack8"
3490
data-button-theme="dark-inverted"
3591
></div>
36-
<div className="social-icons">
92+
<div className="social-icons" data-aos = "zoom-up" data-aos-duration = "500" data-aos-delay = "300">
3793
<a href="https://www.facebook.com/kjscecodecell/" target="_blank" rel="noopener noreferrer">
3894
<img src="./footer-images/facebook.svg" alt="Facebook" style={{ width: '30px', height: '30px' }} />
3995
</a>
@@ -50,7 +106,10 @@ const Footer = () => {
50106
<img src="./footer-images/linkedin.svg" alt="LinkedIn" style={{ width: '30px', height: '30px' }} />
51107
</a>
52108
</div>
53-
<p>Made with <span>🤍</span> by <a href="https://www.kjssecodecell.com/" target="_blank" rel="noopener noreferrer">KJSSE CodeCell</a> </p>
109+
<div >
110+
<p>Made with <span>🤍</span> by <a href="https://www.kjssecodecell.com/" target="_blank" rel="noopener noreferrer">KJSSE CodeCell</a></p>
111+
</div>
112+
54113
</div>
55114
<div className="G">
56115
<img src="./footer-images/MATURE_17.svg" alt="MATURE" />

2025/src/sections/about.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ const About = () => {
77
<img src="/assets/AboutUsLeftStreak.svg" className="AboutUsLeftStreak"></img>
88

99
<header className="about-header">
10-
<h1 className="about-header-text">ABOUT</h1>
10+
<h1 data-aos="fade-down" data-aos-duration = "500" className="about-header-text">ABOUT</h1>
1111
</header>
12-
<div className="about-content">
12+
<div data-aos="fade-up" data-aos-delay = "500" data-aos-duration = "250" className="about-content">
1313
<p className="about-content-text">
1414
<b>Listen up, partner.</b><br />
1515
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 = () => {
2424
<div className="model">
2525
<model-viewer
2626
src="/model/gun-model.glb"
27-
alt="Arthur Morgan Hat"
27+
alt="Gun Model"
2828
auto-rotate
2929
disable-zoom
3030
camera-controls

2025/src/sections/faq.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,7 @@
246246
justify-content: flex-start;
247247
align-items: center;
248248
cursor: pointer;
249-
font-size: 1.6rem;
249+
font-size: 2.0rem;
250250
color: #fff;
251251
transition: none;
252252
position: relative;

2025/src/sections/faq.jsx

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,9 @@ const FAQ = () => {
66

77
const faqData = [
88
{
9-
question: "how will the tracks be decided?",
9+
question: "What are the 2 Problem Statements?",
1010
answer: (<div className="answer-text">The hackathon will have two tracks: GajShield Track and Mystery Track. Teams in the GajShield Track will receive their problem statement 3-4 days prior and can start working early, but a twist will be introduced on the competition day. <br />Meanwhile, teams in the Mystery Track will receive their problem statement on the day of the competition.</div>)
1111
},
12-
1312
{
1413
question: "How will the problem statements be, and how will the tracks be decided?",
1514
answer: (<div className="answer-text">The problem statements will be provided by the organizers. The tracks will be allotted to the teams by the organizers based on profile and resume fit.</div>)
@@ -32,25 +31,25 @@ const FAQ = () => {
3231
answer: (<div className="answer-text">All participants are required to carry their own laptops and college identity cards.</div>)
3332
},
3433
{
35-
question: "What do people normally make?",
36-
answer: (<div className="answer-text">Hacks can fall into categories such as Web Development, Blockchain, Android, iOS, AI/ML, AR/VR, and Game Development. Participants can combine any of these categories since this is an open innovation hackathon.</div>)
37-
},
38-
{
39-
question: "Where will the hackathon be held?",
40-
answer: (<div className="answer-text">The hackathon will be held at <a href ="https://maps.app.goo.gl/EX4KawzmC1qf9HG98" target="_blank" rel="noopener noreferrer">K.J. Somaiya College of Engineering, Vidyavihar, Mumbai.</a></div>)
41-
},
42-
{
43-
question: "What if I have never been to a hackathon before?",
44-
answer: (<div className="answer-text">Don't worry, we're open to students of all skill levels. We offer talks, and mentors to help you with your project. Hackathons are an excellent opportunity to learn new skills in a short amount of time. Just come with an eagerness to learn and enthusiasm to meet lots of awesome people.</div>)
45-
},
46-
{
47-
question: "What is the required team size?",
48-
answer: (<div className="answer-text">Teams of 1 - 4 members are allowed.</div>)
49-
},
50-
{
51-
question: "What is the Code of Conduct?",
52-
answer: (<div className="answer-text">The appropriate code of conduct is linked <a href="https://drive.google.com/file/d/1EDjvC7DpBDr_j6EsBHBwd-XgZ6KS4_Hi/view" target="_blank" rel="noopener noreferrer">here</a>.</div>)
53-
}
34+
question: "What do people normally make?",
35+
answer: (<div className="answer-text">Hacks can fall into categories such as Web Development, Blockchain, Android, iOS, AI/ML, AR/VR, and Game Development. Participants can combine any of these categories since this is an open innovation hackathon.</div>)
36+
},
37+
{
38+
question: "Where will the hackathon be held?",
39+
answer: (<div className="answer-text">The hackathon will be held at <a href="https://maps.app.goo.gl/EX4KawzmC1qf9HG98" target="_blank" rel="noopener noreferrer">K.J. Somaiya College of Engineering, Vidyavihar, Mumbai.</a></div>)
40+
},
41+
{
42+
question: "What if I have never been to a hackathon before?",
43+
answer: (<div className="answer-text">Don't worry, we're open to students of all skill levels. We offer talks, and mentors to help you with your project. Hackathons are an excellent opportunity to learn new skills in a short amount of time. Just come with an eagerness to learn and enthusiasm to meet lots of awesome people.</div>)
44+
},
45+
{
46+
question: "What is the required team size?",
47+
answer: (<div className="answer-text">Teams of 3 - 4 members are allowed.</div>)
48+
},
49+
{
50+
question: "What is the Code of Conduct?",
51+
answer: (<div className="answer-text">The appropriate code of conduct is linked <a href="https://drive.google.com/file/d/1EDjvC7DpBDr_j6EsBHBwd-XgZ6KS4_Hi/view" target="_blank" rel="noopener noreferrer">here</a>.</div>)
52+
}
5453
];
5554

5655
const toggleAccordion = (index) => {
@@ -64,16 +63,16 @@ const FAQ = () => {
6463
<img src="/assets/AboutUsLeftStreak.svg" className="AboutUsLeftStreak" />
6564

6665
<header className="flashback-header">
67-
<h1 className="flashback-header-text">FAQ</h1>
66+
<h1 data-aos="fade-down" data-aos-duration="500" className="flashback-header-text">FAQ</h1>
6867
</header>
69-
70-
<div className="faq-accordion">
68+
69+
<div data-aos="fade-up" data-aos-duration="500" data-aos-delay="250" className="faq-accordion">
7170
{faqData.map((item, index) => (
72-
<div
73-
key={index}
71+
<div
72+
key={index}
7473
className={`faq-item ${activeIndex === index ? 'active' : ''}`}
7574
>
76-
<div
75+
<div
7776
className="faq-question"
7877
onClick={() => toggleAccordion(index)}
7978
>

2025/src/sections/flashback.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ const FlashBack = () => {
1111
<img src="/assets/AboutUsLeftStreak.svg" className="AboutUsLeftStreak" />
1212

1313
<header className="flashback-header">
14-
<h1 className="flashback-header-text">FLASHBACK</h1>
14+
<h1 data-aos="fade-down" data-aos-duration = "500" className="flashback-header-text">FLASHBACK</h1>
1515
</header>
1616

17-
<div className="flashback-video">
17+
<div data-aos="fade-up" data-aos-duration = "500" data-aos-delay = "250" className="flashback-video">
1818
<div className="iframe-container">
1919
<iframe
2020
src="https://www.youtube.com/embed/MsIwzZziLfs"

0 commit comments

Comments
 (0)