Skip to content

Commit 5e6273e

Browse files
TheBoyRoy05TheBoyRoy05
authored
Merge pull request #16 from ucsdds3/feature
Feature
2 parents f54a7ec + c875590 commit 5e6273e

File tree

17 files changed

+420
-336
lines changed

17 files changed

+420
-336
lines changed

‎src/Assets/Images/Star.svg‎

Lines changed: 12 additions & 1 deletion
Loading

‎src/Components/Button.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { motion } from "framer-motion";
2+
export const buttonVariants = {
3+
initial: {
4+
y: 0,
5+
},
6+
hover: {
7+
y: "0.5vw",
8+
},
9+
};
10+
const Button = ({
11+
onclick,
12+
contents,
13+
}: {
14+
onclick: () => void;
15+
contents: string;
16+
}) => {
17+
return (
18+
<div
19+
className="relative md:w-[10vw] md:h-[3vw] w-[25vw] h-[7vw] mt-4"
20+
onClick={onclick}
21+
>
22+
<motion.button
23+
className="absolute top-0 w-full h-full border-2 rounded-full p-[0.5vw] bg-black text-white md:text-[1.2vw] text-[4vw]"
24+
variants={buttonVariants}
25+
initial="initial"
26+
animate="initial"
27+
whileHover="hover"
28+
>
29+
{contents}
30+
</motion.button>
31+
<div className="absolute top-0 translate-y-[1.2vw] md:translate-y-[0.5vw] border-2 w-full h-full rounded-full bg-white z-[-1]"></div>
32+
</div>
33+
);
34+
};
35+
export default Button;

‎src/Components/Landing/LandingVariants.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
2+
export const starVariants = {
3+
initial: {
4+
rotate: 0,
5+
scale: 1,
6+
},
7+
animate: {
8+
rotate: Array.from({ length: 360 }, (_, i) => i + 10),
9+
scale: [1, 1.1, 0.9, 1],
10+
},
11+
};
12+
13+
export const AppearingVariants = {
14+
initial: {
15+
opacity: 0,
16+
},
17+
animate: {
18+
opacity: 1,
19+
transition: {
20+
staggerChildren: 0.1,
21+
delayChildren: 0.5,
22+
},
23+
},
24+
};

‎src/Components/Landing/Star.tsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { motion } from "framer-motion";
2+
import { AppearingVariants, starVariants } from "./LandingVariants";
3+
import { useEffect, useRef, useState } from "react";
4+
import star from "../../Assets/Images/Star.svg";
5+
6+
const Star = ({
7+
index,
8+
rect,
9+
}: {
10+
index: number;
11+
rect: React.RefObject<HTMLDivElement>;
12+
}) => {
13+
const [x, setX] = useState(Math.floor(Math.random() * 100));
14+
const [y, setY] = useState(10 + Math.floor(Math.random() * 70));
15+
const [w, setW] = useState((5 + Math.random() * 5) / 5);
16+
const [overlap, setOverlap] = useState(false);
17+
const starref = useRef<HTMLDivElement>(null);
18+
const check_overlap = (
19+
rect1: DOMRect | undefined,
20+
rect2: DOMRect | undefined
21+
) => {
22+
if (!rect1 || !rect2) return false;
23+
return !(
24+
rect1.right < rect2.left ||
25+
rect1.left > rect2.right ||
26+
rect1.bottom < rect2.top ||
27+
rect1.top > rect2.bottom
28+
);
29+
};
30+
31+
useEffect(() => {
32+
setOverlap(
33+
check_overlap(
34+
rect.current?.getBoundingClientRect(),
35+
starref.current?.getBoundingClientRect()
36+
)
37+
);
38+
if (overlap) {
39+
setX(Math.floor(Math.random() * 100));
40+
setY(10 + Math.floor(Math.random() * 70));
41+
setW((5 + Math.random() * 5) / 5);
42+
}
43+
});
44+
return (
45+
<>
46+
<motion.div
47+
variants={AppearingVariants}
48+
key={index}
49+
className="m-4"
50+
style={{
51+
top: `${y}%`,
52+
left: `${x}%`,
53+
position: "absolute",
54+
// boxShadow: "0px 0px 40px 20px #ffffff"
55+
}}
56+
>
57+
<div ref={starref}>
58+
<motion.img
59+
src={star}
60+
alt=""
61+
variants={starVariants}
62+
initial="initial"
63+
animate="animate"
64+
transition={{
65+
delay: index * 0.1,
66+
duration: 8 + Math.floor(Math.random() * 4),
67+
repeat: Infinity,
68+
}}
69+
style={{
70+
width: `${w}vw`,
71+
opacity: 0.4,
72+
filter: "drop-shadow(0px 0px 8px white)",
73+
}}
74+
/>
75+
</div>
76+
</motion.div>
77+
</>
78+
);
79+
};
80+
81+
export default Star;

‎src/Components/Landing/Stars.tsx‎

Lines changed: 6 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,18 @@
11
import { motion } from "framer-motion";
2-
import star from "/src/Assets/Images/Star.svg";
2+
import { AppearingVariants } from "./LandingVariants";
3+
import Star from "./Star";
4+
import { RefObject } from "react";
35

4-
const starVariants = {
5-
initial: {
6-
rotate: 0
7-
},
8-
animate: {
9-
rotate: Array.from({ length: 360 }, (_, i) => i + 10)
10-
}
11-
};
12-
13-
const AppearingVariants = {
14-
initial: {
15-
opacity: 0
16-
},
17-
animate: {
18-
opacity: 1,
19-
transition: {
20-
staggerChildren: 0.1,
21-
delayChildren: 0.5
22-
}
23-
}
24-
};
25-
26-
const Stars = () => {
6+
const Stars = ({ rect }: { rect: RefObject<HTMLDivElement> }) => {
277
return (
288
<motion.div
299
variants={AppearingVariants}
3010
initial="initial"
3111
animate="animate"
3212
className="z-[-10]"
3313
>
34-
{Array.from({ length: 10 }, (_, index) => {
35-
const randomX = 10 + Math.floor(Math.random() * 80);
36-
const randomY = 5 + Math.floor(Math.random() * 80);
37-
return (
38-
<motion.div
39-
variants={AppearingVariants}
40-
key={index}
41-
style={{
42-
top: `${randomY}%`,
43-
left: `${randomX}%`,
44-
position: "absolute",
45-
opacity: 0.2
46-
}}
47-
>
48-
<motion.img
49-
src={star}
50-
alt=""
51-
className="w-[20%]"
52-
variants={starVariants}
53-
initial="initial"
54-
animate="animate"
55-
transition={{
56-
delay: index * 0.1,
57-
duration: 10,
58-
repeat: Infinity
59-
}}
60-
/>
61-
</motion.div>
62-
);
14+
{Array.from({ length: 12 }, (_, index) => {
15+
return <Star index={index} rect={rect} key={index} />;
6316
})}
6417
</motion.div>
6518
);

‎src/Components/Landing/TextArea.tsx‎

Lines changed: 13 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,26 @@
1-
import { motion } from "framer-motion";
2-
3-
const buttonVariants = {
4-
initial: {
5-
y: 0
6-
},
7-
hover: {
8-
y: "0.5rem"
9-
}
10-
};
11-
12-
const Text = () => {
1+
import { forwardRef, LegacyRef } from "react";
2+
import Button from "../Button";
3+
const Text = forwardRef((_props, ref: LegacyRef<HTMLDivElement>) => {
134
return (
14-
<div className="flex flex-col justify-center mt-[20vh]">
5+
<div
6+
className="flex flex-col justify-center mt-[20vh]"
7+
id="textarea"
8+
ref={ref}
9+
>
1510
<div className="">
16-
<div className="text-[4vh] text-white">DS3</div>
17-
<div className="flex text-white text-[5vw] leading-[4vw] ml-[-0.1rem]">
11+
<div className=" lg:text-[4vw] text-[7vw] text-white">DS3</div>
12+
<div className="flex text-white lg:text-[5vw] leading-[4vw] ml-[-0.1rem] text-[6vw]">
1813
<div className="text-[#F58134]">Learn</div>,
1914
<div className="text-[#19B5CA] ml-[0.5rem]">Build</div>,
2015
<div className="text-[#A9A9A9] ml-[0.5rem]">Innovate</div>, With Data
2116
</div>
22-
<div className="mt-4">
17+
<div className="mt-4 md:text-[1.5vw] text-[4vw] sm:text-[3vw]">
2318
We are here to expand the horizons of data science as a community
2419
together.
2520
</div>
26-
<motion.button
27-
className="mt-10 w-40 h-14 border-2 rounded-full bg-black text-white text-lg"
28-
variants={buttonVariants}
29-
initial="initial"
30-
animate="initial"
31-
whileHover="hover"
32-
>
33-
Join Us
34-
</motion.button>
35-
<div className="mt-[-3rem] w-40 h-14 border-2 rounded-full bg-white z-[-1]"></div>
21+
<Button contents="JOIN US" onclick={() => {}} />
3622
</div>
3723
</div>
3824
);
39-
};
25+
});
4026
export default Text;

‎src/Components/Page/Footer.tsx‎

Lines changed: 9 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,22 @@
1-
import { FaDiscord, FaGithub, FaLinkedinIn } from "react-icons/fa6";
2-
import { SiGmail } from "react-icons/si";
31
import { baseURL } from "../../Utils/info";
2+
import SocialMedia from "./SocialMedia";
3+
import Sponsers from "./Sponsers";
44

55
const Footer = () => {
6-
const btnClass =
7-
"btn rounded-full text-white text-lg w-12 p-0 border-none bg-[#202020] hover:bg-[#282828] glow";
8-
96
return (
107
<div className="border-t border-[--border-color] flex py-8 bg-[#181818]">
118
<div className="flex flex-col flex-1 gap-3 items-center">
12-
<img src={`${baseURL}/src/Assets/Images/big-logo-light.png`} alt="DS3 Logo" className="w-40" />
9+
<img
10+
src={`${baseURL}/src/Assets/Images/big-logo-light.png`}
11+
alt="DS3 Logo"
12+
className="w-40"
13+
/>
1314
<div className="flex flex-col gap-2 items-center text-sm font-medium">
1415
<span>© 2024 Data Science Student Society, All Rights Reserved</span>
1516
</div>
1617
</div>
17-
<div
18-
id="quick-link"
19-
className="flex flex-1 justify-center gap-x-20 border-x border-[--border-color]"
20-
>
21-
<div className="flex flex-col gap-y-2 justify-center">
22-
<h4 className="text-lg font-bold mb-2 text-white">Information</h4>
23-
<a href="" className="hover:underline">
24-
About
25-
</a>
26-
<a href="" className="hover:underline">
27-
Events
28-
</a>
29-
</div>
30-
<div className="flex flex-col gap-y-2 justify-center">
31-
<h4 className="text-lg font-bold mb-2 text-white">Get Involved</h4>
32-
<a href="" className="hover:underline">
33-
Projects
34-
</a>
35-
<a href="" className="hover:underline">
36-
Consulting
37-
</a>
38-
</div>
39-
</div>
40-
<div
41-
id="social-media-links"
42-
className="flex flex-col flex-1 items-center justify-center gap-y-8"
43-
>
44-
<h4 className="text-lg font-bold text-white">Social Links</h4>
45-
<div className="flex items-center w-[20vw] justify-evenly">
46-
<button
47-
onClick={() => window.open("https://discord.gg/fbnAP848V9", "_blank")}
48-
className={btnClass}
49-
title={"Discord"}
50-
>
51-
<FaDiscord />
52-
</button>
53-
<button
54-
onClick={() => window.open("mailto:[email protected]", "_blank")}
55-
className={btnClass}
56-
title={"Mail"}
57-
>
58-
<SiGmail />
59-
</button>
60-
<button
61-
onClick={() => window.open("https://github.com/TheBoyRoy05/", "_blank")}
62-
className={btnClass}
63-
title={"Github"}
64-
>
65-
<FaGithub />
66-
</button>
67-
<button
68-
onClick={() => window.open("https://www.linkedin.com/in/issacroy/", "_blank")}
69-
className={btnClass}
70-
title={"LinkedIn"}
71-
>
72-
<FaLinkedinIn />
73-
</button>
74-
</div>
75-
</div>
18+
<Sponsers />
19+
<SocialMedia />
7620
</div>
7721
);
7822
};

0 commit comments

Comments
 (0)