diff --git a/components/Section.jsx b/components/Section.jsx new file mode 100644 index 0000000..9551ab7 --- /dev/null +++ b/components/Section.jsx @@ -0,0 +1,46 @@ +import FadeIn from "@/components/animations/FadeIn"; + +export default function Section({ + children, + title, + subtitle, + background = "", + className = "", + titleClassName = "", + animate = true, + animateTitle = true, +}) { + const bgClass = background === "grey" ? "bg-grey" : background; + + const content = ( +
+
+ {(title || subtitle) && ( +
+ {title && ( + animateTitle ? ( + +

{title}

+ + ) : ( +

{title}

+ ) + )} + {subtitle && ( + animateTitle ? ( + +

{subtitle}

+ + ) : ( +

{subtitle}

+ ) + )} +
+ )} + {children} +
+
+ ); + + return content; +} diff --git a/components/animations/FadeIn.jsx b/components/animations/FadeIn.jsx new file mode 100644 index 0000000..3587eac --- /dev/null +++ b/components/animations/FadeIn.jsx @@ -0,0 +1,42 @@ +"use client"; +import { motion, useInView } from "framer-motion"; +import { useRef } from "react"; + +const directionOffsets = { + up: { y: 40, x: 0 }, + down: { y: -40, x: 0 }, + left: { y: 0, x: 40 }, + right: { y: 0, x: -40 }, + none: { y: 0, x: 0 }, +}; + +export default function FadeIn({ + children, + direction = "up", + delay = 0, + duration = 0.5, + className = "", + once = true, + threshold = 0.1, +}) { + const ref = useRef(null); + const isInView = useInView(ref, { once, amount: threshold }); + + const offset = directionOffsets[direction] || directionOffsets.up; + + return ( + + {children} + + ); +} diff --git a/components/animations/StaggerContainer.jsx b/components/animations/StaggerContainer.jsx new file mode 100644 index 0000000..592f906 --- /dev/null +++ b/components/animations/StaggerContainer.jsx @@ -0,0 +1,53 @@ +"use client"; +import { motion, useInView } from "framer-motion"; +import { useRef, Children, isValidElement } from "react"; + +export default function StaggerContainer({ + children, + staggerDelay = 0.1, + initialDelay = 0, + duration = 0.5, + className = "", + once = true, + threshold = 0.1, + direction = "up", +}) { + const ref = useRef(null); + const isInView = useInView(ref, { once, amount: threshold }); + + const directionOffsets = { + up: { y: 40, x: 0 }, + down: { y: -40, x: 0 }, + left: { y: 0, x: 40 }, + right: { y: 0, x: -40 }, + none: { y: 0, x: 0 }, + }; + + const offset = directionOffsets[direction] || directionOffsets.up; + + return ( +
+ {Children.map(children, (child, index) => { + if (!isValidElement(child)) return child; + + return ( + + {child} + + ); + })} +
+ ); +} diff --git a/components/companyCard.jsx b/components/companyCard.jsx index 7d524b2..0b9f553 100644 --- a/components/companyCard.jsx +++ b/components/companyCard.jsx @@ -1,16 +1,13 @@ import Image from "next/image"; import Link from "next/link"; export default function CompanyCard({ json, basePath }) { - const style = "relative " + "h-28 w-28"; // larger: "h-48 w-48" return ( +
@@ -36,7 +36,7 @@ export default function ProjectCard({ project, basePath }) {
  • diff --git a/components/sponsorCard.jsx b/components/sponsorCard.jsx index 35dcfb4..3a86959 100644 --- a/components/sponsorCard.jsx +++ b/components/sponsorCard.jsx @@ -1,16 +1,15 @@ import Image from "next/image"; import Link from "next/link"; export default function SponsorCard({ type, json, basePath }) { - const style = "relative " + (type === "small" ? "h-28 w-28" : "h-48 w-48"); return ( -
    - -
    +
    +
    +
    -
    - + ); } - export async function getStaticProps() { const data = loadStaticData("links.json"); let calendarLink = data.find(obj => obj.name === "Calendar")?.href || "" return { props: { calendarLink } }; -} \ No newline at end of file +} diff --git a/pages/contact.jsx b/pages/contact.jsx index d87e6cf..0d76846 100644 --- a/pages/contact.jsx +++ b/pages/contact.jsx @@ -5,7 +5,7 @@ import Layout from "@/components/layout"; import loadStaticData from "@/shared/static"; import Link from "next/link"; -export default function Join({ data }) { +export default function Contact({ data }) { return ( -
    - {data.sources.map((source) => ( - -
    - -
    +
    +
    + {data.sources.map((source) => ( + +
    + +
    -

    {source.name}:

    -

    {source.link_text}

    - - ))} -
    -
    - {data.entries.map((entry, index) => ( -
    -

    {entry.heading}

    -

    {entry.text}

    -
    - ))} -
    +

    {source.name}:

    +

    {source.link_text}

    + + ))} +
    +
    + {data.entries.map((entry, index) => ( +
    +

    {entry.heading}

    +

    {entry.text}

    +
    + ))} +
    +     ); } diff --git a/pages/index.jsx b/pages/index.jsx index fe4c0e6..93de084 100644 --- a/pages/index.jsx +++ b/pages/index.jsx @@ -7,6 +7,9 @@ import SponsorSection from "@/components/sponsorSection"; import CompanySection from "@/components/companySection"; import Timeline from "@/components/timeline"; import CommunityImages from "@/components/communityImages"; +import FadeIn from "@/components/animations/FadeIn"; +import StaggerContainer from "@/components/animations/StaggerContainer"; +import Section from "@/components/Section"; import loadStaticData from "@/shared/static"; import Image from "next/image"; import Link from "next/link"; @@ -33,7 +36,7 @@ export default function Home({ />
    -
    +

    U-M's Premier Applied Data Science Club

    @@ -46,97 +49,106 @@ export default function Home({
    -
    - Dataframe of movie reviews and distribution + + + Dataframe of movie reviews and distribution +
    • -
    - {timeline.show_on_homepage && ( -
    -

    - {timeline.title} -

    - -
    - )} -
    -
    -
    -
    - - Michigan Data Science Team (MDST) - {" "} - is the largest data science club at the University of Michigan, - dedicated to equipping U-M students with the skills needed for - future data-driven careers. -
    -
    - We believe data science is for everyone. Each semester, MDST - runs team-based projects, allowing you to learn and practice - data science skills and their applications in a variety of - domains. -
    -
    - We also host guest talks, workshops, and socials - all - opportunities to meet and interact with the larger data science - community at the U-M and beyond. -
    -
    -
    -

    - All U-M students are welcome to join MDST.  - - Join now  - - -

    -
    -
    - - - +
    +
    + {timeline.show_on_homepage && ( + +

    + {timeline.title} +

    + +     + )} +
    +
    + +
    +
    + + Michigan Data Science Team (MDST) + {" "} + is the largest data science club at the University of Michigan, + dedicated to equipping U-M students with the skills needed for + future data-driven careers. +
    +
    + We believe data science is for everyone. Each semester, MDST + runs team-based projects, allowing you to learn and practice + data science skills and their applications in a variety of + domains. +
    +
    + We also host guest talks, workshops, and socials - all + opportunities to meet and interact with the larger data science + community at the U-M and beyond. +
    +
    +
    +

    + All U-M students are welcome to join MDST.  + + Join now  + + +

    +
    +     + + + + +
    -
    + -
    -

    - MDST is proudly supported by our sponsors -

    - - -
    -
    -

    Companies We Worked With:

    - -
    +
    + + + + + + +
    +
    + + + +
    ); } @@ -145,7 +157,7 @@ function ProjectCard({ json, basePath }) { return ( -
    -

    Recent Projects

    +
    + +

    Recent Projects

    +
    {projects.map((project, index) => ( - + + + ))}