From 74e55de8e79e1de553af495aa66b509ca954cc79 Mon Sep 17 00:00:00 2001 From: Hieu Date: Thu, 21 Nov 2024 02:03:19 -0800 Subject: [PATCH 01/14] Fix: Stars no longer show on top of text #15 --- src/Components/Landing/LandingVariants.tsx | 29 +++++++++ src/Components/Landing/Star.tsx | 70 ++++++++++++++++++++++ src/Components/Landing/Stars.tsx | 59 ++---------------- src/Components/Landing/TextArea.tsx | 14 +---- src/Pages/Home/Landing.tsx | 12 +++- 5 files changed, 118 insertions(+), 66 deletions(-) create mode 100644 src/Components/Landing/LandingVariants.tsx create mode 100644 src/Components/Landing/Star.tsx diff --git a/src/Components/Landing/LandingVariants.tsx b/src/Components/Landing/LandingVariants.tsx new file mode 100644 index 0000000..6529ff5 --- /dev/null +++ b/src/Components/Landing/LandingVariants.tsx @@ -0,0 +1,29 @@ +export const buttonVariants = { + initial: { + y: 0 + }, + hover: { + y: "0.5rem" + } +}; +export const starVariants = { + initial: { + rotate: 0 + }, + animate: { + rotate: Array.from({ length: 360 }, (_, i) => i + 10) + } +}; + +export const AppearingVariants = { + initial: { + opacity: 0 + }, + animate: { + opacity: 1, + transition: { + staggerChildren: 0.1, + delayChildren: 0.5 + } + } +}; diff --git a/src/Components/Landing/Star.tsx b/src/Components/Landing/Star.tsx new file mode 100644 index 0000000..5239a3c --- /dev/null +++ b/src/Components/Landing/Star.tsx @@ -0,0 +1,70 @@ +import { motion } from "framer-motion"; +import { AppearingVariants, starVariants } from "./LandingVariants"; +import { useEffect, useRef, useState } from "react"; +import star from "../../Assets/Images/Star.svg"; +const Star = ({ + index, + rect +}: { + index: number; + rect: React.RefObject; +}) => { + const [x, setX] = useState(Math.floor(Math.random() * 100)); + const [y, setY] = useState(10 + Math.floor(Math.random() * 70)); + const [w, setW] = useState(3 + Math.floor(Math.random() * 7)); + const starref = useRef(null); + const overlap = (rect1: DOMRect, rect2: DOMRect) => { + return !( + rect1.right < rect2.left || + rect1.left > rect2.right || + rect1.bottom < rect2.top || + rect1.top > rect2.bottom + ); + }; + useEffect(() => { + if (rect.current && starref.current) + if ( + overlap( + rect.current?.getBoundingClientRect(), + starref.current?.getBoundingClientRect() + ) + ) { + setX(Math.floor(Math.random() * 100)); + setY(10 + Math.floor(Math.random() * 70)); + setW(3 + Math.floor(Math.random() * 7)); + } + }); + return ( + <> + +
+ +
+ + + ); +}; + +export default Star; diff --git a/src/Components/Landing/Stars.tsx b/src/Components/Landing/Stars.tsx index 46e1be7..d5ef1d6 100644 --- a/src/Components/Landing/Stars.tsx +++ b/src/Components/Landing/Stars.tsx @@ -1,29 +1,9 @@ import { motion } from "framer-motion"; -import star from "/src/Assets/Images/Star.svg"; +import { AppearingVariants } from "./LandingVariants"; +import Star from "./Star"; +import { RefObject } from "react"; -const starVariants = { - initial: { - rotate: 0 - }, - animate: { - rotate: Array.from({ length: 360 }, (_, i) => i + 10) - } -}; - -const AppearingVariants = { - initial: { - opacity: 0 - }, - animate: { - opacity: 1, - transition: { - staggerChildren: 0.1, - delayChildren: 0.5 - } - } -}; - -const Stars = () => { +const Stars = ({ rect }: { rect: RefObject }) => { return ( { animate="animate" className="z-[-10]" > - {Array.from({ length: 10 }, (_, index) => { - const randomX = 10 + Math.floor(Math.random() * 80); - const randomY = 5 + Math.floor(Math.random() * 80); - return ( - - - - ); + {Array.from({ length: 12 }, (_, index) => { + return ; })} ); diff --git a/src/Components/Landing/TextArea.tsx b/src/Components/Landing/TextArea.tsx index 9164ab3..35844aa 100644 --- a/src/Components/Landing/TextArea.tsx +++ b/src/Components/Landing/TextArea.tsx @@ -1,17 +1,9 @@ import { motion } from "framer-motion"; - -const buttonVariants = { - initial: { - y: 0 - }, - hover: { - y: "0.5rem" - } -}; +import { buttonVariants } from "./LandingVariants"; const Text = () => { return ( -
+
DS3
@@ -19,7 +11,7 @@ const Text = () => {
Build
,
Innovate
, With Data
-
+
We are here to expand the horizons of data science as a community together.
diff --git a/src/Pages/Home/Landing.tsx b/src/Pages/Home/Landing.tsx index fca9bd8..b7a3f26 100644 --- a/src/Pages/Home/Landing.tsx +++ b/src/Pages/Home/Landing.tsx @@ -2,12 +2,20 @@ import { motion } from "framer-motion"; import dino from "/src/Assets/Images/Dino.svg"; import TextArea from "../../Components/Landing/TextArea"; import Stars from "../../Components/Landing/Stars"; +import { useEffect, useRef, useState } from "react"; const Landing = () => { + const [rendered, setRendered] = useState(false); + const TextAreaRef = useRef(null); + useEffect(() => { + setRendered(true); + }, []); return (
- -