Skip to content

Commit

Permalink
Merge branch 'feature' of https://github.com/ucsdds3/new-site into fe…
Browse files Browse the repository at this point in the history 
…ature
  • Loading branch information
@Jaerinx
Jaerinx committed Nov 24, 2024
2 parents 9ad2a57 + 77201c4 commit c875590
Show file tree
Hide file tree
Showing 2 changed files with 93 additions and 56 deletions.
57 changes: 37 additions & 20 deletions src/Pages/Home/AboutUs.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,44 @@
const AboutUs = () => {
return (
<div className="grid grid-cols-2 gap-24 max-w-[72vw] py-24">
<div className="flex-1 flex flex-col justify-between py-4">
<div className="flex flex-col gap-4">
<h3 className="text-xl text-gray-200">WHO WE ARE</h3>
<h2 className="text-3xl text-white">
We share a passion for data, technology, and problem-solving.
</h2>
<p>We are here to expand the horizons of data science as a community together</p>
<div className="flex flex-col items-center py-24 min-h-screen w-full">
<div className="grid gap-12 md:grid-cols-2 max-w-[90vw] w-full px-4">
{/* WHO WE ARE Section */}
<div className="flex flex-col justify-between gap-8 md:order-1">
<div className="flex flex-col gap-4">
<h3 className="text-xl text-gray-200">WHO WE ARE</h3>
<h2 className="text-3xl text-white">
We share a passion for data, technology, and problem-solving.
</h2>
<p>
We are here to expand the horizons of data science as a community
together.
</p>
</div>
<button className="w-1/2 text-white rounded-full border-2 border-white p-4">
ABOUT
</button>
</div>
<button className="w-1/2 text-white rounded-full border-2 border-white p-4">ABOUT</button>
</div>
<div className="bg-gray-300 w-[30vw] h-[20vw] rounded-lg" />
<div className="bg-gray-300 w-[30vw] h-[20vw] rounded-lg" />
<div className="flex-1 flex flex-col justify-between py-4">
<div className="flex flex-col gap-4">
<h3 className="text-xl text-gray-200">WHAT WE DO</h3>
<h2 className="text-3xl text-white">
Build technical skills, network, and gain practical experience in data science.
</h2>
<p>We are here to expand the horizons of data science as a community together</p>
{/* First Image */}
<div className="bg-gray-300 w-full aspect-video rounded-lg md:order-2" />
{/* Second Image */}
<div className="bg-gray-300 w-full aspect-video rounded-lg md:order-3 order-4" />
{/* WHAT WE DO Section */}
<div className="flex flex-col justify-between gap-8 md:order-last order-3">
<div className="flex flex-col gap-4">
<h3 className="text-xl text-gray-200">WHAT WE DO</h3>
<h2 className="text-3xl text-white">
Build technical skills, network, and gain practical experience in
data science.
</h2>
<p>
We are here to expand the horizons of data science as a community
together.
</p>
</div>
<button className="w-1/2 text-white rounded-full border-2 border-white p-4">
EVENTS
</button>
</div>
<button className="w-1/2 text-white rounded-full border-2 border-white p-4">EVENTS</button>
</div>
</div>
);
Expand Down
92 changes: 56 additions & 36 deletions src/Pages/Home/Stats.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,65 +11,85 @@ const Stats = () => {

const maxNumbers = [500, 78, 35, 28];

const [statsData, setStatsData] = useState([0, 0, 0, 0]);
const sectionRef = useRef(null);
const [statsData, setStatsData] = useState<number[]>([0, 0, 0, 0]);
const [animated, setAnimated] = useState<boolean[]>([
false,
false,
false,
false,
]);
const itemRefs = useRef<(HTMLDivElement | null)[]>([]);

const startCounting = () => {
const startCounting = (index: number): void => {
const interval = setInterval(() => {
setStatsData((prev) =>
prev.map((num, index) =>
Math.min(num + maxNumbers[index] / 15, maxNumbers[index])
)
);
setStatsData((prev) => {
const newStats = [...prev];
newStats[index] = Math.min(
newStats[index] + maxNumbers[index] / 15,
maxNumbers[index]
);
return newStats;
});
}, 50);

return () => clearInterval(interval);
};

useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
console.log("Intersection Observer callback triggered"); // Log every time the observer is triggered
console.log("Is intersecting:", entry.isIntersecting); // Log whether the section is intersecting or not
console.log("Intersection Ratio:", entry.intersectionRatio); // Log how much of the section is visible
const observers = itemRefs.current.map(
(ref, index): IntersectionObserver | null => {
if (!ref) return null;

if (entry.isIntersecting) {
console.log("Section is in view. Starting count-up!"); // Log when the count-up is about to start
startCounting();
}
},
{ threshold: 0.99 } // % of the section that must be visible
);
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting && !animated[index]) {
setAnimated((prev) => {
const updated = [...prev];
updated[index] = true;
return updated;
});
startCounting(index);
}
},
{ threshold: 0.4 }
);

if (sectionRef.current) {
console.log("Observing section:", sectionRef.current); // Log when the observer starts observing the section
observer.observe(sectionRef.current);
}
observer.observe(ref);
return observer;
}
);

return () => {
if (sectionRef.current) {
console.log("Unobserving section:", sectionRef.current); // Log when the observer stops observing the section
observer.unobserve(sectionRef.current);
}
observers.forEach((observer, index) => {
if (observer && itemRefs.current[index]) {
observer.unobserve(itemRefs.current[index]!);
}
});
};
}, []);
}, [animated]);

return (
<div className="flex flex-col items-center gap-10 justify-start text-white py-24 w-screen">
<div className="flex flex-col items-center justify-center gap-8 text-white py-24 h-screen w-screen mb-[4vw]">
<motion.h1
initial={{ y: -50, opacity: 0 }}
whileInView={{ y: 0, opacity: 1 }}
transition={{ duration: 1, ease: "easeOut" }}
viewport={{ once: true }}
className="title font-bold mb-10 text-5xl mt-10"
className="title font-bold mb-10 text-[4.75vw] mt-10"
>
Get Involved
</motion.h1>

<div ref={sectionRef} className="stats-list">
<div className="flex flex-col gap-10">
<div className="stats-list">
<div className="flex flex-col gap-8">
{statsData.map((stat, index) => (
<div key={index} className="stat-item flex items-center">
<div
key={index}
className="stat-item flex items-center"
ref={(el: HTMLDivElement | null) =>
(itemRefs.current[index] = el)
}
>
<motion.span
initial={{ x: -100, opacity: 0 }}
whileInView={{ x: -40, opacity: 1 }}
Expand All @@ -79,7 +99,7 @@ const Stats = () => {
ease: "easeOut",
}}
viewport={{ once: true }}
className="number text-7xl font-bold w-20 text-right text-white hero-text-shadow mr-20"
className="number text-[4.5vw] font-bold w-[2vw] text-right text-white hero-text-shadow mr-[8vw]"
>
{Math.round(stat) +
(Math.round(stat) === maxNumbers[index] ? "+" : "")}
Expand All @@ -93,7 +113,7 @@ const Stats = () => {
delay: index * 0.125,
ease: "easeOut",
}}
className="text-white text-2xl ml-20"
className="text-white text-[1.8vw] ml-[8vw]"
viewport={{ once: true }}
>
{descriptions[index]}
Expand Down

0 comments on commit c875590

Please sign in to comment.