From d241d4eced479cb30ae168d7bc06348b40e88ae1 Mon Sep 17 00:00:00 2001 From: LuaanNguyen Date: Mon, 1 Jul 2024 21:16:10 -0700 Subject: [PATCH 1/3] Got the Animated Stats to Work. --- src/assets/events.json | 224 +++++++++++++++++++++++++ src/assets/teams.json | 124 ++++++++++++++ src/components/Hero.jsx | 151 +++++++++-------- src/components/logic/AnimatedNumber.js | 29 ++++ src/pages/Home.jsx | 6 +- src/styles/index.css | 30 +++- 6 files changed, 481 insertions(+), 83 deletions(-) create mode 100644 src/assets/events.json create mode 100644 src/assets/teams.json create mode 100644 src/components/logic/AnimatedNumber.js diff --git a/src/assets/events.json b/src/assets/events.json new file mode 100644 index 0000000..1eccc8b --- /dev/null +++ b/src/assets/events.json @@ -0,0 +1,224 @@ +{ + "events": [ + { + "title": "What is SoDA and can I drink it?", + "sponsor": "", + "showEndTime": false, + "start": { + "year": 2021, + "month": 7, + "day": 31, + "hour": 19, + "minute": 0 + }, + "end": { + "year": 2021, + "month": 7, + "day": 31, + "hour": 21, + "minute": 0 + }, + "description": "Kick off the beginning of the year with a welcome back from SoDA! Join us for our info session, we will be going over what you can look forward to in SoDA this semester!", + "location": "CAVC 351", + "RSVP_link": "https://docs.google.com/forms/d/e/1FAIpQLSedNgM8U_MNclP3gJUklXdJOd1xPEyHsDBEd_G3EtHgsCKnUQ/viewform" + }, + { + "title": "Resume Reviews", + "sponsor": "", + "showEndTime": false, + "start": { + "year": 2021, + "month": 8, + "day": 7, + "hour": 19, + "minute": 0 + }, + "end": { + "year": 2021, + "month": 8, + "day": 7, + "hour": 21, + "minute": 0 + }, + "description": "Bring your resume to SoDA to learn the best tips and tricks on making a great resume! Don’t have one? Come learn about the fundamentals and build one from the ground up!", + "location": "CAVC 351", + "RSVP_link": "https://docs.google.com/forms/d/e/1FAIpQLSeW1kswuZePy-wMSnJZN7ZsMqwNhU34FnVFglEmIWkDux7YTA/viewform" + }, + { + "title": "A Day in the Life with Walmart", + "sponsor": "", + "showEndTime": false, + "start": { + "year": 2021, + "month": 8, + "day": 14, + "hour": 19, + "minute": 0 + }, + "end": { + "year": 2021, + "month": 8, + "day": 14, + "hour": 21, + "minute": 0 + }, + "description": "Learn about opportunities at Walmart and what it is like to work there!", + "location": "CAVC 351", + "RSVP_link": "https://docs.google.com/forms/d/e/1FAIpQLSd7a7SuaV3t1Zj6rw2VXhbQ8YmDCzJJEuYRGYvbCAgb6EJiMw/viewform" + }, + { + "title": "Technical Interview Prep", + "sponsor": "", + "showEndTime": false, + "start": { + "year": 2021, + "month": 8, + "day": 21, + "hour": 19, + "minute": 0 + }, + "end": { + "year": 2021, + "month": 8, + "day": 21, + "hour": 21, + "minute": 0 + }, + "description": "Learn all about technical interviews at this week's meeting where we will go over the basics and how you can ace them!", + "location": "CAVC 351", + "RSVP_link": "https://docs.google.com/forms/d/e/1FAIpQLSfrL4D-L5r88P8efyR0Fe0aYqLjbm5iok7BHmuNEB289IHgtA/viewform" + }, + { + "title": "Behavioral Interview Workshop", + "sponsor": "", + "showEndTime": false, + "start": { + "year": 2021, + "month": 8, + "day": 28, + "hour": 19, + "minute": 0 + }, + "end": { + "year": 2021, + "month": 8, + "day": 28, + "hour": 21, + "minute": 0 + }, + "description": "Learn about behavioral interviews at this week’s meeting where we will go over how to approach interview questions and practice answering them too!", + "location": "CAVC Third Floor Atrium", + "RSVP_link": "https://docs.google.com/forms/d/e/1FAIpQLScrejpiPM-FPfjaJWEE91mLPTZpV-pAGDT-lOL1AQOQzQ-gKA/viewform" + }, + { + "title": "Amazon Networking and Information Session", + "sponsor": "", + "showEndTime": false, + "start": { + "year": 2021, + "month": 9, + "day": 5, + "hour": 19, + "minute": 0 + }, + "end": { + "year": 2021, + "month": 9, + "day": 5, + "hour": 21, + "minute": 0 + }, + "description": "Join us in this week’s event to learn about opportunities at Amazon and network with their representatives!", + "location": "CAVC Third Floor Atrium", + "RSVP_link": "https://docs.google.com/forms/d/e/1FAIpQLScltB7ulbb8YzYRJYMKZvCbfKY75UaDzWQeRAAm_E6Q7-jOdg/viewform" + }, + { + "title": "Card Games Social", + "sponsor": "", + "showEndTime": false, + "start": { + "year": 2021, + "month": 9, + "day": 26, + "hour": 19, + "minute": 0 + }, + "end": { + "year": 2021, + "month": 9, + "day": 26, + "hour": 21, + "minute": 0 + }, + "description": "Come by and spend some time at the SoDA social playing some card games! Enjoy food and hang out with SoDA Officers and Members!", + "location": "CAVC 351", + "RSVP_link": "https://docs.google.com/forms/d/e/1FAIpQLSf5DmmiIlHNOjg35nWldkniKKUEgcgNzKwJGnypEqPAHcGtwQ/viewform" + }, + { + "title": "Git Basics", + "sponsor": "", + "showEndTime": false, + "start": { + "year": 2021, + "month": 10, + "day": 16, + "hour": 19, + "minute": 0 + }, + "end": { + "year": 2021, + "month": 10, + "day": 16, + "hour": 21, + "minute": 0 + }, + "description": "Come by this week’s meeting to learn about one of the most essential tools in software engineering! We’ll be going over the basics you need to help yourself stand out!", + "location": "CAVC 351", + "RSVP_link": "https://docs.google.com/forms/d/e/1FAIpQLSffL6QHUzeO3Hgx2volzFg9IzQqYnU2C0pPOa-UEfQexzlDUg/viewform" + }, + { + "title": "How to Prepare for the Spring Semester", + "sponsor": "", + "showEndTime": false, + "start": { + "year": 2021, + "month": 10, + "day": 23, + "hour": 19, + "minute": 0 + }, + "end": { + "year": 2021, + "month": 10, + "day": 23, + "hour": 21, + "minute": 0 + }, + "description": "Come to this week’s meeting to learn how to best prepare yourself for an upcoming internship or what to do if you didn’t get one.", + "location": "CAVC 351", + "RSVP_link": "https://docs.google.com/forms/d/e/1FAIpQLSd4tMxIRo7HdEu3P0Y0IBqSgNXvVael0O-YFKyJa8MyGddNhw/viewform" + }, + { + "title": "Zelle Offensive Security Talks", + "sponsor": "", + "showEndTime": false, + "start": { + "year": 2022, + "month": 2, + "day": 15, + "hour": 19, + "minute": 30 + }, + "end": { + "year": 2022, + "month": 2, + "day": 15, + "hour": 21, + "minute": 0 + }, + "description": "Join us in this Tuesday’s meeting to learn about cracking passwords with Michael Gallagher, Director of Offensive Security at Zelle!", + "location": "CAVC 351", + "RSVP_link": "https://docs.google.com/forms/d/e/1FAIpQLSd8vfK058Qsww1e7NtrvgVA7n0Wea2G_R49nF1e5zApMd664g/viewform" + } + ] +} diff --git a/src/assets/teams.json b/src/assets/teams.json new file mode 100644 index 0000000..84a29bb --- /dev/null +++ b/src/assets/teams.json @@ -0,0 +1,124 @@ +{ + "advisors": [ + { + "name": "Yoshihiro Kobayashi", + "role": "Faculty Advisor", + "email": "ykobaya@asu.edu" + }, + { + "name": "Neel Madhav", + "role": "Student Advisor", + "email": "ndogra2@asu.edu" + } + ], + "teams": { + "leadership": [ + { + "name": "Palak Jain", + "role": "President", + "email": "pjain89@asu.edu" + }, + { + "name": "Ayush Shejwal", + "role": "Vice President, Operations", + "email": "ashejwal@asu.edu" + }, + { + "name": "Anushka Singh", + "role": "Vice President, Finance", + "email": "asing534@asu.edu" + }, + { + "name": "Naman Gandhi", + "role": "Treasurer", + "email": "ngandh14@asu.edu" + } + ], + "industry relations": [ + { + "name": "Nicklaus Lewis", + "role": "Director, Industry Relations", + "email": "nalewis3@asu.edu" + }, + { + "name": "Nishant Dhongadi", + "role": "Assistant Director, Industry Relations", + "email": "ndhongad@asu.edu" + }, + { + "name": "Elizabeth Pardhe", + "role": "Industry Relations Specialist", + "email": "epardhe@asu.edu" + }, + { + "name": "Saharsh Goenka", + "role": "Industry Relations Specialist", + "email": "sgoenka1@asu.edu" + }, + { + "name": "Apoorv Singh", + "role": "Industry Relations Specialist", + "email": "asing512@asu.edu" + } + ], + "technology": [ + { + "name": "Ryan Woo", + "role": "Director, Technology", + "email": "rtwoo@asu.edu" + }, + { + "name": "Shubh Khandelwal", + "role": "Associate Director, Technology", + "email": "skhand15@asu.edu@asu.edu" + }, + { + "name": "Aarya Mathreja", + "role": "Technology Officer", + "email": "amathrej@asu.edu" + }, + { + "name": "Ben Juntilla", + "role": "Technology Officer", + "email": "cjuntill@asu.edu" + }, + { + "name": "Avery Powers", + "role": "Technology Officer", + "email": "aapower3@asu.edu" + }, + { + "name": "Tanay Upreti", + "role": "Technology Officer", + "email": "tupreti@asu.edu" + }, + { + "name": "Dhanush Vardhan", + "role": "Technology Officer", + "email": "dkalaise@asu.edu" + } + ], + "community outreach": [ + { + "name": "Nandini Singh", + "role": "Director, Community Outreach", + "email": "nsingh67@asu.edu" + }, + { + "name": "David Koplik", + "role": "Community Outreach Officer", + "email": "dkoplik@asu.edu" + }, + { + "name": "Chelsea Lianne Gomez", + "role": "Community Outreach Officer", + "email": "ctgomez@asu.edu" + }, + { + "name": "Navya Gangrade", + "role": "Community Outreach Officer", + "email": "ngangrad@asu.edu" + } + ] + } +} diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx index e87f217..4ce75a5 100644 --- a/src/components/Hero.jsx +++ b/src/components/Hero.jsx @@ -1,81 +1,86 @@ +import AnimatedNumber from "./logic/AnimatedNumber"; +import { Statistic } from "semantic-ui-react"; + +import teamsData from "../assets/teams.json"; + +const dollarFormatter = new Intl.NumberFormat("US", { + style: "currency", + currency: "USD", +}); +const teams = teamsData.teams; +const advisors = teamsData.advisors; + +const statistics = [ + { + key: "pizza", + label: "worth of pizza served", + value: 22500, + steps: 50, + formatter: (x) => dollarFormatter.format(x), + }, + { + key: "sponsors", + label: "Sponsors", + value: 12, + steps: 1, + formatter: (x) => x, + }, + { + key: "teams", + label: "Committees", + value: Object.keys(teams).length, + steps: 1, + formatter: (x) => x, + }, + { + key: "officers", + label: "Officers", + value: Object.values(teams).reduce((total, team) => { + return total + team.length; + }, 0), + steps: 1, + formatter: (x) => x, + }, + { + key: "advisors", + label: "Advisors", + value: Object.keys(advisors).length, + steps: 1, + formatter: (x) => x, + }, +]; + function Hero() { return ( -
-
-
-

./SoDA

-

The Software Developers Association

-

- The premiere software development club for university students at Arizona State University +

+
+
+

+ The Software Developers Association +

+

+ The premiere software development club for Arizona State University + students.

- +
+ {statistics.map(({ key, label, value, steps, formatter }) => ( + +
+ + + + {label} +
+ + ))} +
-
+ ); } diff --git a/src/components/logic/AnimatedNumber.js b/src/components/logic/AnimatedNumber.js new file mode 100644 index 0000000..3fd9aa6 --- /dev/null +++ b/src/components/logic/AnimatedNumber.js @@ -0,0 +1,29 @@ +import { useState, useEffect } from "react"; + +const AnimatedNumber = ({ number, steps, formatter }) => { + const [animatedNumber, setAnimatedNumber] = useState(0); + + // Placeholder model function. Replace with actual logic. + const model = (nextNumber, step) => { + // Example logic: delay increases as the number gets closer to the target + const baseDelay = 50; // Base delay in milliseconds + const delayFactor = Math.abs(number - nextNumber) / step; + return baseDelay * delayFactor; + }; + + useEffect(() => { + const animateNumber = () => { + if (animatedNumber < number) { + const nextNumber = Math.min(animatedNumber + steps, number); + const timeoutDelay = model(nextNumber, steps); + setTimeout(() => setAnimatedNumber(nextNumber), timeoutDelay); + } + }; + + animateNumber(); + }, [animatedNumber, number, steps]); + + return formatter(animatedNumber); +}; + +export default AnimatedNumber; diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index f4379dd..592dcfb 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,11 +1,13 @@ import InfoCards from "../components/Info/InfoCards"; import MemberCards from "../components/Team/TeamCards"; +import Hero from "../components/Hero"; function Home() { return (
- - + {/* + */} +
); } diff --git a/src/styles/index.css b/src/styles/index.css index 442dcdd..1dcbbbc 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -14,16 +14,21 @@ body { @apply hover:text-xl transition ease-in-out; } -/* --------- BUTTON --------- */ -.btn { - @apply px-3 py-1 bg-soda-red rounded-lg; +.statistics { + @apply bg-soda-white text-soda-black flex flex-row gap-5 p-5 justify-center flex-wrap rounded-full; } -.btn-text { - @apply font-bold; +/* --------- HERO --------- */ + +.hero { + @apply my-[20vh] mx-[5vw]; +} + +.hero-container { + @apply mx-auto flex flex-col md:flex-row items-center justify-between; } -/* --------- NAVIGATION SECTION --------- */ +/* --------- NAVIGATION --------- */ .navigation { @apply w-full fixed z-10 bg-soda-black; } @@ -32,13 +37,13 @@ body { @apply w-full justify-between hidden sm:flex py-4 px-6; } -/* --------- HOME SECTION --------- */ +/* --------- HOME --------- */ .home { @apply min-h-screen bg-soda-black; } -/* --------- FOOTER SECTION --------- */ +/* --------- FOOTER --------- */ footer { @apply w-full; } @@ -51,3 +56,12 @@ footer { .social-media-links { @apply flex gap-4 text-3xl bg-soda-white rounded-full p-4 text-soda-black justify-center max-w-80; } + +/* --------- BUTTON --------- */ +.btn { + @apply px-3 py-1 bg-soda-red rounded-lg; +} + +.btn-text { + @apply font-bold; +} From 3a41f796e2e379ee79746456a0a085a071c242d1 Mon Sep 17 00:00:00 2001 From: LuaanNguyen Date: Mon, 1 Jul 2024 21:58:03 -0700 Subject: [PATCH 2/3] Added social media links, buttons, etc. --- .../{Button.jsx => Button/RegularButton.jsx} | 8 +- src/components/Button/RoundedButton.jsx | 15 ++++ src/components/Hero.jsx | 73 ++----------------- src/components/Navbar.jsx | 4 +- src/components/Stats/Statistics.jsx | 71 ++++++++++++++++++ src/components/Stats/Statistics.module.css | 7 ++ src/styles/index.css | 24 +++++- 7 files changed, 124 insertions(+), 78 deletions(-) rename src/components/{Button.jsx => Button/RegularButton.jsx} (52%) create mode 100644 src/components/Button/RoundedButton.jsx create mode 100644 src/components/Stats/Statistics.jsx create mode 100644 src/components/Stats/Statistics.module.css diff --git a/src/components/Button.jsx b/src/components/Button/RegularButton.jsx similarity index 52% rename from src/components/Button.jsx rename to src/components/Button/RegularButton.jsx index eaeff5c..7d57a8f 100644 --- a/src/components/Button.jsx +++ b/src/components/Button/RegularButton.jsx @@ -1,15 +1,15 @@ import PropTypes from "prop-types"; -function Button({ name }) { +function RegularButton({ name }) { return ( - ); } -export default Button; +export default RegularButton; -Button.propTypes = { +RegularButton.propTypes = { name: PropTypes.string.isRequired, }; diff --git a/src/components/Button/RoundedButton.jsx b/src/components/Button/RoundedButton.jsx new file mode 100644 index 0000000..8bb4703 --- /dev/null +++ b/src/components/Button/RoundedButton.jsx @@ -0,0 +1,15 @@ +import PropTypes from "prop-types"; + +function RoundedButton({ name }) { + return ( + + ); +} + +export default RoundedButton; + +RoundedButton.propTypes = { + name: PropTypes.string.isRequired, +}; diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx index 4ce75a5..680d72f 100644 --- a/src/components/Hero.jsx +++ b/src/components/Hero.jsx @@ -1,60 +1,11 @@ -import AnimatedNumber from "./logic/AnimatedNumber"; -import { Statistic } from "semantic-ui-react"; - -import teamsData from "../assets/teams.json"; - -const dollarFormatter = new Intl.NumberFormat("US", { - style: "currency", - currency: "USD", -}); -const teams = teamsData.teams; -const advisors = teamsData.advisors; - -const statistics = [ - { - key: "pizza", - label: "worth of pizza served", - value: 22500, - steps: 50, - formatter: (x) => dollarFormatter.format(x), - }, - { - key: "sponsors", - label: "Sponsors", - value: 12, - steps: 1, - formatter: (x) => x, - }, - { - key: "teams", - label: "Committees", - value: Object.keys(teams).length, - steps: 1, - formatter: (x) => x, - }, - { - key: "officers", - label: "Officers", - value: Object.values(teams).reduce((total, team) => { - return total + team.length; - }, 0), - steps: 1, - formatter: (x) => x, - }, - { - key: "advisors", - label: "Advisors", - value: Object.keys(advisors).length, - steps: 1, - formatter: (x) => x, - }, -]; +import Statistics from "./Stats/Statistics"; +import SocialMediaLinks from "./SocialMediaLinks"; function Hero() { return (
-
+

The Software Developers Association

@@ -62,22 +13,8 @@ function Hero() { The premiere software development club for Arizona State University students.

-
- {statistics.map(({ key, label, value, steps, formatter }) => ( - -
- - - - {label} -
- - ))} -
+ +
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index cc6aadd..64aeb98 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,7 +1,7 @@ import { useState } from "react"; -import Button from "./Button"; import OpenedMobileNav from "./Mobile/OpenedMobileNav"; import MobileNav from "./Mobile/MobileNav"; +import RoundedButton from "./Button/RoundedButton"; function Navbar() { const [isOpen, setIsOpen] = useState(false); @@ -30,7 +30,7 @@ function Navbar() { -