Skip to content

Commit

Permalink
added animation on scrolling
Browse files Browse the repository at this point in the history
  • Loading branch information
@gamandeepsingh
gamandeepsingh committed Mar 27, 2024
1 parent 237940d commit dfae19e
Show file tree
Hide file tree
Showing 5 changed files with 175 additions and 99 deletions.
111 changes: 74 additions & 37 deletions src/components/About/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,102 @@
import './style.css';
import "./style.css";
import { BsHeadsetVr } from "react-icons/bs";
import { FaGlobeAmericas } from "react-icons/fa";
import 'aos/dist/aos.css'
import Aos from "aos";
import "aos/dist/aos.css";

// images
import algos from './img/algocs.png';
import gdsc from './img/gdsc.png';
import iosc from './img/iosc.png';

import {MIDDLE_SECTION} from '../../Module/General';
import algos from "./img/algocs.png";
import gdsc from "./img/gdsc.png";
import iosc from "./img/iosc.png";

import { MIDDLE_SECTION } from "../../Module/General";
import { useEffect } from "react";

function LogoSectionAbout() {
useEffect(() => {
Aos.init({ duration: 400 });
}, []);
return (
<div className="LogoSectionAbout" >
<div className="LogoSectionAbout" data-aos="fade-right">
{/* <BsHeadsetVr fontSize={200} className='arHeadset'/>
<FaGlobeAmericas fontSize={200} className='globe'/> */}
<h1>{MIDDLE_SECTION.TITLE}</h1>
<div>
<p className='long-desc'>

The largest code fest of Delhi-NCR is back! ⚡<br />
Join this 24-Hour Hackathon to hustle and shine through 5 amazing tracks, Embark on an Odyssey to learn new technologies, seek guidance from experienced mentors and engrave your name on the boards of our esteemed Judges.<br />
Witness prodigious Speakers of the Nation live! ✨<br />
Not just that, win huge prizes and hampers by brainstorming and creating the best hack!<br />
Be ready to sail through an amazing night of fun, code and much more on 28th & 29th April! 💫

</p>
<p className="long-desc">
The largest code fest of Delhi-NCR is back! ⚡<br />
Join this 24-Hour Hackathon to hustle and shine through 5 amazing
tracks, Embark on an Odyssey to learn new technologies, seek guidance
from experienced mentors and engrave your name on the boards of our
esteemed Judges.
<br />
Witness prodigious Speakers of the Nation live! ✨<br />
Not just that, win huge prizes and hampers by brainstorming and
creating the best hack!
<br />
Be ready to sail through an amazing night of fun, code and much more
on 28th & 29th April! 💫
</p>
</div>
</div>
);
}

function Logo() {
useEffect(() => {
Aos.init({ duration: 400 });
}, []);
return (
<img className="Logo-about" src={MIDDLE_SECTION.LOGO} alt="Innohacks" />
<img
data-aos="fade-left"
className="Logo-about"
src={MIDDLE_SECTION.LOGO}
alt="Innohacks"
/>
);
}

function CommunityPartner() {

return(
<div className="community-partner" >
<h1 className="title_community" >Community Partners</h1>
<div className="community_logo_container" >
<div className='logo-community' style={{color: 'white', textAlign: 'center', margin: "0 5% 2% 5%"}}>
<img src={iosc} className="iosc_logo" width="100%" alt="" />
<p >IOSC</p>
</div>
<div className='logo-community' style={{color: 'white', textAlign: 'center', margin: '0 5% 2% 5%'}}>
<img src={gdsc} className="iosc_logo" width="100%" alt=""/>
<p >GDSC-ABESEC</p>
useEffect(() => {
Aos.init({ duration: 400 });
}, []);
return (
<div className="community-partner">
<h1
className="title_community"
data-aos="zoom-in"
data-aos-anchor-placement="top-bottom"
data-aos-duaration="800"
>
Community Partners
</h1>
<div className="community_logo_container">
<div
className="logo-community"
data-aos="fade-up"
style={{ color: "white", textAlign: "center", margin: "0 5% 2% 5%" }}
>
<img src={iosc} className="iosc_logo" width="100%" alt="" />
<p>IOSC</p>
</div>
<div
className="logo-community"
data-aos="fade-up"
style={{ color: "white", textAlign: "center", margin: "0 5% 2% 5%" }}
>
<img src={gdsc} className="iosc_logo" width="100%" alt="" />
<p>GDSC-ABESEC</p>
</div>
<div
className="logo-community"
data-aos="fade-up"
style={{ color: "white", textAlign: "center", margin: "0 5% 2% 5%" }}
>
<img src={algos} className="iosc_logo" width="100%" alt="" />
<p>ALGOCS</p>
</div>
</div>
<div className='logo-community' style={{color: 'white', textAlign: 'center', margin: '0 5% 2% 5%'}}>
<img src={algos} className="iosc_logo" width="100%" alt=""/>
<p >ALGOCS</p>
</div>
</div>
</div>

);
}

export {Logo, LogoSectionAbout, CommunityPartner};
export { Logo, LogoSectionAbout, CommunityPartner };
13 changes: 12 additions & 1 deletion src/components/PastEdition/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import React, { useEffect, useState } from "react";
import Aos from "aos"
import "aos/dist/aos.css"
import "./style.scss";
import one from "./assets/2.jpg";
import two from "./assets/1.jpg";
Expand All @@ -17,6 +19,7 @@ function PastEdition() {
};

useEffect(() => {
Aos.init({duration:400})
const intervalId = setInterval(() => {
setMainImage(thumbnails[Math.floor(Math.random() * 6)]);
}, 5000);
Expand All @@ -26,7 +29,15 @@ function PastEdition() {

return (
<div className="past-edition-container">
<h1 className="past-heading" style={{fontWeight:900, marginTop:"100px",marginBottom:"20px"}}>Past Edition</h1>
<h1
data-aos="zoom-in"
data-aos-anchor-placement="top-bottom"
data-aos-duaration="800"
className="past-heading"
style={{ fontWeight: 900, marginTop: "100px", marginBottom: "20px" }}
>
Past Edition
</h1>
<img src={mainImage} id="main" />
<div id="thumbnails">
{thumbnails.map((thumbnail, index) => (
Expand Down
64 changes: 37 additions & 27 deletions src/components/Schedule/schedule.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,41 @@
import './schedule.css'


import "./schedule.css";
import Aos from "aos"
import "aos/dist/aos.css"
import { useEffect } from "react";
const Schedule = () => {
return(
<>

<div>
<h1
data-aos="zoom-in"
data-aos-duration="800"
id="prizes"
className="prize_heading"
style={{ fontFamily: "repo-bold", marginBottom: "10rem" }}
>
Schedule
</h1>
</div>

<div className="image-container">


<img src="https://s3.ap-south-1.amazonaws.com/innohacks3.0/mobileviewupdated.png" alt="" className="mobile-image"/>
<img src="https://s3.ap-south-1.amazonaws.com/innohacks3.0/Copy+of+Copy+of+Innohacks+3.0+brochure+(2)+(1).png" alt="" className="laptop-image"/>
</div>
</>
)
useEffect(()=>{
Aos.init({duration:400})
},[])
return (
<>
<div>
<h1
data-aos="zoom-in"
data-aos-duration="800"
id="prizes"
className="prize_heading"
style={{ fontFamily: "repo-bold", marginBottom: "10rem" }}
>
Schedule
</h1>
</div>

<div className="image-container">
<img
src="https://s3.ap-south-1.amazonaws.com/innohacks3.0/mobileviewupdated.png"
alt=""
className="mobile-image"
data-aos="fade-right"
/>
<img
src="https://s3.ap-south-1.amazonaws.com/innohacks3.0/Copy+of+Copy+of+Innohacks+3.0+brochure+(2)+(1).png"
alt=""
className="laptop-image"
data-aos="fade-right"
/>
</div>
</>
);
};

export default Schedule;
export default Schedule;
Loading

0 comments on commit dfae19e

Please sign in to comment.