diff --git a/src/app/pages/Designathons/Designathon24/Designathon24.js b/src/app/pages/Designathons/Designathon24/Designathon24.js new file mode 100644 index 00000000..dbb4d9d8 --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/Designathon24.js @@ -0,0 +1,149 @@ +import { Icon, Section } from "app/Symbols"; +import { Text } from "app/components"; +import EVENTS_2024 from "assets/data/designathon/2024/events.json"; +import WINNERS_2024 from "assets/data/designathon/2024/winners.json"; +import TIMER_2024 from "assets/data/designathon/2024/timer.json"; +import JUDGES_2024 from "assets/data/designathon/2024/judges.json"; +import KEYNOTE_2024 from "assets/data/designathon/2024/keynote.json"; +import PRIZES_2024 from "assets/data/designathon/2024/prizes.json"; +import WORKSHOP_HOSTS_2024 from "assets/data/designathon/2024/workshop-hosts.json"; +import RULES_2024 from "assets/data/designathon/2024/rules.json"; +import cn from "./Designathon24.module.scss"; +import FOF from "./assets/FOF.png"; +import notion from "./assets/notion.png"; +import balsamiq from "./assets/balsamiq.png"; +import { + Profile, + Prizes, + SectionNavigation, + FAQ, + Rules, + Timer, + WinnerShowcase, +} from "./components"; +import Schedule from "./components/Schedule"; +import { Splash } from "./components/Splash"; + +const Designathon24 = () => ( +
+
+
+ +
+
+ {/* */} + + True to You + +
+ +
+
+
+ + + + +
+
+

About

+

+ Design-a-thon is a 3 day long hybrid event where you or a team design + a product focused on the theme: community and inclusivity. It takes + place on February 24, starting at 5:30 pm and ends February 26, 8:00 + pm PST. +

+

+ Design at UCI is the premier student-run organization at UCI for + anything graphic design, UI/UX design, product design, and more. + Started in 2016, we foster a special community for all digital + designers to connect, learn, and innovate. +

+

+ Design at UCI’s designathon is the largest collegiate designathon in + Orange County. Each year, we bring together hundreds of student + designers nationwide to define, develop, and pitch a product built + from scratch. We hope that this experience can help you acquire and + grow both your soft and hard skills in empathizing with your users, + defining a set of goals and needs, developing your product, and + improving your confidence and creativity as a human-centric designer. +

+
+
+ +
+
+
+

Keynote Speaker

+ {KEYNOTE_2024.map((speaker) => ( + + ))} +
+
+

Judges

+ {JUDGES_2024.map((judge) => ( + + ))} +
+
+

Workshop Hosts

+ {WORKSHOP_HOSTS_2024.map((host) => ( + + ))} +
+
+
+ + + +
+ +
+ + + + + +
+
+

Sponsors

+
+
+ + Friends of Figma + +
+ +
+ + balsamiq + +
+
+
+
+
+); + +export default Designathon24; diff --git a/src/app/pages/Designathons/Designathon24/Designathon24.module.scss b/src/app/pages/Designathons/Designathon24/Designathon24.module.scss new file mode 100644 index 00000000..f55fc11a --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/Designathon24.module.scss @@ -0,0 +1,172 @@ +.container { + --des24-pink: #ff75a4; + --des24-hot-pink: #f84e72; + --des24-peach: #ff6969; + --des24-cream: #fff5e0; + --des24-black: #242424; + + & > .hero { + height: 100vh; + width: 100%; + background-color: black; + display: grid; + overflow: hidden; + place-content: center; + + & > img { + width: 100%; + max-width: 100%; + max-height: 100%; + transform: rotate(0deg) scale(0); + object-fit: contain; + animation: rotate linear 10s infinite forwards; + will-change: transform; + } + + & > .title { + position: absolute; + height: 100%; + width: 100%; + top: 0; + left: 0; + display: grid; + place-content: center; + color: var(--yellow); + z-index: 100; + text-align: center; + padding-top: 140px; + + & .icon { + margin: 0 auto; + } + } + } + + & > .about { + padding: 10px; + background-color: var(--des24-cream); + color: var(--des24-black); + font-size: 1em; + + & h2 { + font-size: 2em; + font-weight: bold; + } + + & p { + font-size: 1.2em; + line-height: 1.5em; + } + + & .aboutHeading { + color: var(--des24-hot-pink); + } + + @media screen and (min-width: 1100px) { + padding-bottom: 80px; + + & h2 { + font-size: 3em; + } + + & p { + font-size: 1.3em; + line-height: 1.4em; + } + } + } + + & > .prizes { + background-color: white; + } + + & > .people { + color: white; + background-color: black; + padding: 0px; + + & h1 { + font-size: 2em; + font-weight: bold; + } + + @media screen and (min-width: 700px) { + padding: 20px; + + & h1 { + font-size: 3em; + } + } + + @media screen and (min-width: 900px) { + padding: 40px; + + & h1 { + font-size: 3em; + } + } + + & .section { + display: grid; + column-gap: 20px; + row-gap: 20px; + grid-template-columns: repeat(2, 1fr); + padding: 20px 0; + + & > h2 { + color: var(--yellow); + grid-column: 1 / -1; + font-size: 2em; + font-weight: bold; + + @media screen and (min-width: 1000px) { + font-size: 3em; + } + } + + @media screen and (min-width: 1000px) { + grid-template-columns: repeat(3, 1fr); + gap: 20px; + } + + @media screen and (min-width: 1200px) { + grid-template-columns: repeat(4, 1fr); + gap: 40px; + } + } + } + + & .sponsors { + background-color: var(--silver); + + & h2 { + font-size: 2em; + } + + & .logos { + padding-top: 60px; + display: grid; + column-gap: 80px; + row-gap: 80px; + width: 100%; + grid-template-columns: repeat(1, 1fr); + place-content: center; + + @media screen and (min-width: 800px) { + max-height: none; + grid-template-columns: repeat(3, 1fr); + } + + & > div { + display: grid; + place-content: center; + } + + & img { + max-height: 200px; + width: 100%; + object-fit: contain; + } + } + } +} diff --git a/src/app/pages/Designathons/Designathon24/assets/FOF.png b/src/app/pages/Designathons/Designathon24/assets/FOF.png new file mode 100644 index 00000000..d6ce4981 Binary files /dev/null and b/src/app/pages/Designathons/Designathon24/assets/FOF.png differ diff --git a/src/app/pages/Designathons/Designathon24/assets/balsamiq.png b/src/app/pages/Designathons/Designathon24/assets/balsamiq.png new file mode 100644 index 00000000..f09e1f06 Binary files /dev/null and b/src/app/pages/Designathons/Designathon24/assets/balsamiq.png differ diff --git a/src/app/pages/Designathons/Designathon24/assets/hero.png b/src/app/pages/Designathons/Designathon24/assets/hero.png new file mode 100644 index 00000000..62802581 Binary files /dev/null and b/src/app/pages/Designathons/Designathon24/assets/hero.png differ diff --git a/src/app/pages/Designathons/Designathon24/assets/notion.png b/src/app/pages/Designathons/Designathon24/assets/notion.png new file mode 100644 index 00000000..e8d828c3 Binary files /dev/null and b/src/app/pages/Designathons/Designathon24/assets/notion.png differ diff --git a/src/app/pages/Designathons/Designathon24/components/FAQ/FAQ.module.scss b/src/app/pages/Designathons/Designathon24/components/FAQ/FAQ.module.scss new file mode 100644 index 00000000..deabbb8a --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/components/FAQ/FAQ.module.scss @@ -0,0 +1,32 @@ +.container { + display: grid; + grid-template-columns: 1fr; + gap: 40px; + + @media screen and (min-width: 900px) { + grid-template-columns: 240px 1fr; + } + + @media screen and (min-width: 1000px) { + grid-template-columns: 300px 1fr; + } + + & .question { + display: grid; + cursor: pointer; + grid-template-columns: auto 1fr; + margin: 8px; + padding: 24px; + border-radius: 12px; + background-color: white; + transition: background-color 250ms; + + &.opened { + border: 2px solid var(--silver); + } + + &:hover { + background-color: var(--silver); + } + } +} diff --git a/src/app/pages/Designathons/Designathon24/components/FAQ/index.jsx b/src/app/pages/Designathons/Designathon24/components/FAQ/index.jsx new file mode 100644 index 00000000..9b2dc2e5 --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/components/FAQ/index.jsx @@ -0,0 +1,260 @@ +import { Text } from 'app/components'; +import { Section, Icon } from 'app/Symbols'; +import clsx from 'clsx'; +import { useCallback, useState } from 'react'; +import cn from './FAQ.module.scss'; + +const FAQ = () => { + return ( +
+ FAQ +
+
+ + Join the live conversation on the{' '} + + You Belong Here 2023 Discord + {' '} + for more help! + +
+
+ {[ + { + q: 'Why should I join?', + a: 'Creating an aesthetically pleasing, functional product is not only what a designer does; it is to listen to what our world needs, empathize people’s gain and pain points, and produce a solution that specifically targets what our world is lacking. We hope that this event can be a platform where you can practice your design thinking—a process of ideation, research, analysis, developing, and testing—to provide a better means to our world.', + }, + { + q: 'Who can attend?', + a: ( + + Any undergraduate student within the United + States (with an associated institutional + email) is able to{' '} + + sign up + {' '} + and attend. If you do not qualify, you will + not be allowed to participate in the event. + + ), + }, + { + q: 'How do I sign up?', + a: ( + + Apply through our{' '} + + Participant Sign-up Form. + + + ), + }, + { + q: 'I don’t have prior knowledge in design. Can I still participate?', + a: 'Of course! Design is all around us. We will provide opportunities and resources for beginners to get started, such as workshops, mentor office hours, and more.', + }, + { + q: 'How much does it cost?', + a: 'You Belong Here requires no cost to participate. All you need is a working device with Zoom, Discord, and an open mind. ', + }, + { + q: 'When is the registration deadline?', + a: ( + + Our{' '} + + participant sign-up form + {' '} + has been extended until February 19th at 11:59pm (PST) + + ), + }, + { + q: 'How do I prepare?', + a: ( + + During the event, we will be hosting + workshops for anyone new to design thinking + or the design process. We highly encourage + getting the hang of Figma, Sketch, Adobe XD, + or the prototyping tool of your choice. You + are also free to look through our Design at + UCI{' '} + + Resources + {' '} + page for extra information. Want to go the + extra mile? Show your excitement by turning + on your camera and adding our{' '} + + You Belong Here Zoom backgrounds. + + + ), + }, + { + q: 'How do teams work?', + a: ( + + You have the option to (1) go solo, or (2) + form a team of up to 4 people total. You may + list your team members in the sign-up form, + but it’s okay if plans change! Take + advantage of our #find-a-team{' '} + + Discord channel + {' '} + to meet potential team members. We will + consider your final team members to be the + ones indicated when submitting your project. + + ), + }, + { + q: 'What if I don’t have a team?', + a: ( + + Our #find-a-team Discord channel is the + perfect place for anyone looking for a team + at our Designathon. If you haven’t already, + join our You Belong Here{' '} + + Discord channel + {' '} + . Solo participants are also allowed. + + ), + }, + { + q: 'Where do I submit my project?', + a: ( + + You will submit your final, working + prototype to the{' '} + + Submission Form + {' '} + (opens during event). Only one person on + your team should submit a form, which will + be on behalf of all contributors. + + ), + }, + ].map(item => { + return ( + +

{item.q}

+
+ } + opened={ +
+

{item.q}

+ + {item.a} + +
+ } + /> + ); + })} +
+ +
+ ); +}; + +const Toggle = ({ opened, closed }) => { + const [open, setOpen] = useState(false); + + const toggleExpand = useCallback(() => { + setOpen(p => !p); + }, []); + + return ( +
+ + {open ? opened : closed} +
+ ); +}; + +export { FAQ }; diff --git a/src/app/pages/Designathons/Designathon24/components/Prizes/Prizes.module.scss b/src/app/pages/Designathons/Designathon24/components/Prizes/Prizes.module.scss new file mode 100644 index 00000000..5ac915ab --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/components/Prizes/Prizes.module.scss @@ -0,0 +1,43 @@ +.title { + color: black; + font-size: 3em; + font-weight: bold; +} + +.container { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 80px; + padding-bottom: 80px; + + @media screen and (max-width: 1200px) { + grid-template-columns: repeat(3, 1fr); + } + + @media screen and (max-width: 950px) { + grid-template-columns: repeat(2, 1fr); + } + @media screen and (max-width: 640px) { + grid-template-columns: repeat(1, 1fr); + } + + & > .item { + &:nth-child(even) { + & h3 { + color: var(--yellow); + } + } + + & p { + color: black; + line-height: 1.4em; + } + } + + & h3 { + font-weight: bold; + margin: 20px 0; + font-size: 1.5em; + color: var(--blue); + } +} diff --git a/src/app/pages/Designathons/Designathon24/components/Prizes/index.jsx b/src/app/pages/Designathons/Designathon24/components/Prizes/index.jsx new file mode 100644 index 00000000..a63d6b03 --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/components/Prizes/index.jsx @@ -0,0 +1,24 @@ +import { Section } from 'app/Symbols'; +import cn from './Prizes.module.scss'; + +const Prizes = ({ list }) => { + return ( +
+

Prizes

+
+ {list.map(item => ( +
+

{item.label}

+
+ {item.prizes.map(prize => ( +

{prize}

+ ))} +
+
+ ))} +
+
+ ); +}; + +export { Prizes }; diff --git a/src/app/pages/Designathons/Designathon24/components/Profile/Modal/Modal.module.scss b/src/app/pages/Designathons/Designathon24/components/Profile/Modal/Modal.module.scss new file mode 100644 index 00000000..7dc3e1dc --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/components/Profile/Modal/Modal.module.scss @@ -0,0 +1,106 @@ +.modal { + position: fixed; + top: 0; + left: 0; + height: 100vh; + width: 100vw; + display: grid; + place-content: center; + background-color: #00000088; + transition: opacity 250ms; + z-index: 10; + + & > .container { + background-color: black; + padding: 40px; + border-radius: 20px; + border: 2px solid var(--gray); + width: 800px; + max-width: calc(100vw - 40px); + row-gap: 10px; + display: grid; + grid-template-columns: auto 1fr; + + & > .profile { + position: relative; + display: grid; + text-align: left; + padding: 20px; + border-radius: 20px; + row-gap: 20px; + + & h3 { + color: var(--yellow); + } + + & > .pronouns { + color: var(--gray); + font-size: 1.5em; + margin: 0; + } + & > .role { + font-size: 1.8em; + font-weight: bold; + } + } + + & > .content { + grid-column: 1 / -1; + + & > h4 { + font-size: 1.5em; + margin: 20px 0 10px; + font-weight: bold; + color: var(--gray); + } + + & > p { + line-height: 1.3em; + } + } + + & h3 { + font-weight: bold; + font-size: 3em; + } + + & p { + text-align: left; + + & > span { + color: gray; + } + } + + & > img { + margin: 0 auto; + border-radius: 8px; + height: 200px; + width: 200px; + object-fit: cover; + cursor: pointer; + @media screen and (max-width: 800px) { + border-radius: 12px; + + width: 100%; + height: auto; + object-fit: contain; + } + } + + &:hover { + border: 2px solid var(--gray); + } + + @media screen and (max-width: 800px) { + grid-template-columns: 1fr; + overflow-y: scroll; + padding: 20px; + max-height: calc(100vh - 240px); + + & > .profile { + padding: 0px; + } + } + } +} diff --git a/src/app/pages/Designathons/Designathon24/components/Profile/Modal/index.jsx b/src/app/pages/Designathons/Designathon24/components/Profile/Modal/index.jsx new file mode 100644 index 00000000..43847100 --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/components/Profile/Modal/index.jsx @@ -0,0 +1,31 @@ +import clsx from 'clsx'; +import cn from './Modal.module.scss'; + +export const Modal = ({ + toggleProfile, + photo, + name, + role, + about, + funFact, + pronouns, +}) => { + return ( +
+
+ {name} +
+

{name}

+

{pronouns}

+

{role}

+
+
+

About Me:

+

{about}

+

Fun Fact:

+

{funFact}

+
+
+
+ ); +}; diff --git a/src/app/pages/Designathons/Designathon24/components/Profile/Profile.module.scss b/src/app/pages/Designathons/Designathon24/components/Profile/Profile.module.scss new file mode 100644 index 00000000..b069acf0 --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/components/Profile/Profile.module.scss @@ -0,0 +1,68 @@ +.container { + display: grid; + text-align: center; + border: 2px solid transparent; + padding: 20px; + border-radius: 20px; + transition: border-color 250ms; + cursor: pointer; + + &:hover { + border: 2px solid var(--gray); + } + + & > img { + margin: 0 auto; + border-radius: 50%; + height: 100px; + width: 100px; + object-fit: cover; + cursor: pointer; + } + + & > p { + font-size: 1em; + line-height: 1.4em; + font-weight: bold; + margin: 8px 0; + cursor: pointer; + } + + & > span { + color: grey; + cursor: pointer; + font-size: 0.9em; + line-height: 1.2em; + } + + @media screen and (min-width: 900px) { + & > img { + border-radius: 50%; + height: 150px; + width: 150px; + } + + & > p { + font-size: 1.4em; + } + + & > span { + font-size: 1.2em; + } + } + @media screen and (min-width: 1350px) { + & > img { + height: 200px; + width: 200px; + } + + & > p { + font-size: 1.8em; + margin: 10px 0; + } + + & > span { + font-size: 1.3em; + } + } +} diff --git a/src/app/pages/Designathons/Designathon24/components/Profile/index.jsx b/src/app/pages/Designathons/Designathon24/components/Profile/index.jsx new file mode 100644 index 00000000..2573c84f --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/components/Profile/index.jsx @@ -0,0 +1,22 @@ +import { useCallback, useState } from 'react'; +import cn from './Profile.module.scss'; +import { Modal } from './Modal'; + +const Profile = ({ name, photo, role, ...rest }) => { + const [open, setOpen] = useState(false); + + const toggleProfile = useCallback(() => setOpen(p => !p), []); + + return ( + <> +
+ {name} +

{name}

+ {role} +
+ {open && } + + ); +}; + +export { Profile }; diff --git a/src/app/pages/Designathons/Designathon24/components/Rules/Rules.module.scss b/src/app/pages/Designathons/Designathon24/components/Rules/Rules.module.scss new file mode 100644 index 00000000..a13c5862 --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/components/Rules/Rules.module.scss @@ -0,0 +1,9 @@ +.container { + background-color: var(--silver); + + & h2 { + padding-bottom: 20px; + font-size: 3em; + font-weight: bold; + } +} diff --git a/src/app/pages/Designathons/Designathon24/components/Rules/index.jsx b/src/app/pages/Designathons/Designathon24/components/Rules/index.jsx new file mode 100644 index 00000000..b9161b65 --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/components/Rules/index.jsx @@ -0,0 +1,32 @@ +import { Text } from 'app/components'; +import { Section } from 'app/Symbols'; +import cn from './Rules.module.scss'; + +const Rules = ({ rules }) => { + return ( +
+

Rules

+ {rules.map((rule, i) => ( +
+ + {i + 1} + + {rule} +
+ ))} +
+ ); +}; + +export { Rules }; diff --git a/src/app/pages/Designathons/Designathon24/components/Schedule/Schedule.module.scss b/src/app/pages/Designathons/Designathon24/components/Schedule/Schedule.module.scss new file mode 100644 index 00000000..12d67d2e --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/components/Schedule/Schedule.module.scss @@ -0,0 +1,86 @@ +.container { + background-color: black; + color: white; + + & .note { + color: var(--gray); + font-size: 1.2em; + line-height: 1.3em; + } + + & .title { + font-size: 3em; + font-weight: bold; + padding-bottom: 20px; + } + + a { + text-decoration: underline; + transition: color 350ms; + + &:hover { + color: white; + } + } + + & h2 { + color: var(--blue); + font-weight: bold; + } + + & .list { + display: grid; + row-gap: 20px; + + & > .event { + display: grid; + grid-template-columns: auto 1fr; + column-gap: 20px; + padding-bottom: 20px; + border-bottom: 2px solid var(--gray); + + @media screen and (min-width: 950px) { + grid-template-columns: 150px 1fr 1fr; + } + + & > .title { + font-size: 1.4em; + font-weight: bold; + text-align: right; + + &.special { + color: var(--yellow); + } + + &.highlight { + color: var(--blue); + } + } + + & > .time { + font-size: 1.3em; + display: grid; + row-gap: 8px; + } + + & > .description { + padding-top: 20px; + color: var(--gray); + grid-column: 1 / 3; + font-size: 1.1em; + line-height: 1.2em; + display: grid; + row-gap: 20px; + + & > p { + line-height: 1.2em; + } + + @media screen and (min-width: 950px) { + padding-top: 0px; + grid-column: 3 / 4; + } + } + } + } +} diff --git a/src/app/pages/Designathons/Designathon24/components/Schedule/index.jsx b/src/app/pages/Designathons/Designathon24/components/Schedule/index.jsx new file mode 100644 index 00000000..a46052f3 --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/components/Schedule/index.jsx @@ -0,0 +1,49 @@ +import React from "react"; +import { Section } from "app/Symbols"; +import clsx from "clsx"; +import cn from "./Schedule.module.scss"; + +function Schedule({ schedule }) { + return ( +
+
+

Schedule

+ + In-person events are marked with (IP) and are open to UCI students + only. + + + {schedule.map((day) => ( + +

{day.date}

+
+ {day.events.map((event, index) => ( +
+
+ {event.time} {event.endTime} +
+
+ {event.title} +
+
+ {event.description.map((paragraph, pIndex) => ( +

{paragraph}

+ ))} +
+
+ ))} +
+
+ ))} +
+
+ ); +} + +export default Schedule; diff --git a/src/app/pages/Designathons/Designathon24/components/SectionNavigation/SectionNavigation.module.scss b/src/app/pages/Designathons/Designathon24/components/SectionNavigation/SectionNavigation.module.scss new file mode 100644 index 00000000..631b510e --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/components/SectionNavigation/SectionNavigation.module.scss @@ -0,0 +1,70 @@ +.container { + z-index: 100; + position: sticky; + top: 0; + right: 0; + left: 0; + max-width: 100%; + height: 88px; + padding: 0 16px; + box-shadow: 0 0 8px #0002; + background-color: var(--des24-black); + color: var(--des24-cream); + + display: flex; + justify-content: space-between; + align-items: center; + gap: 10px; + + overflow: hidden; + overflow-x: scroll; + + & div > .item { + font-size: 0.8em; + padding: 8px 12px; + cursor: pointer; + border-radius: 999px; + background-color: transparent; + transition: background-color 250ms; + + &:hover { + background-color: var(--des24-pink); + color: var(--des24-black); + } + & > p { + white-space: nowrap; + } + } + + & .navButtons { + display: flex; + flex-wrap: nowrap; + gap: 10px; + } + + & .linkButtons { + display: grid; + grid-auto-flow: column; + column-gap: 20px; + height: fit-content; + width: fit-content; + } + + @media screen and (min-width: 800px) { + padding: 0 32px; + + & div > .item { + font-size: 1em; + padding: 12px 24px; + cursor: pointer; + border-radius: 999px; + background-color: transparent; + transition: background-color 250ms, color 250ms; + + &:hover { + background-color: var(--des24-pink); + color: var(--des24-black); + } + } + } +} diff --git a/src/app/pages/Designathons/Designathon24/components/SectionNavigation/index.jsx b/src/app/pages/Designathons/Designathon24/components/SectionNavigation/index.jsx new file mode 100644 index 00000000..e700582f --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/components/SectionNavigation/index.jsx @@ -0,0 +1,79 @@ +import { useEffect, useState } from "react"; +import cn from "./SectionNavigation.module.scss"; + +const SectionNavigation = () => { + const [currentTime, setCurrentTime] = useState(() => new Date().getTime()); + + useEffect(() => { + const timer = setInterval(() => { + setCurrentTime(new Date().getTime()); + }, 1000); + + return () => clearInterval(timer); + }, []); + + const scrollToSection = (id) => { + window.scrollTo({ + behavior: "smooth", + top: document.getElementById(id).offsetTop - 80, + }); + }; + + return ( +
+
+ {[ + { label: "About", id: "s-about" }, + { label: "Judges & Speakers", id: "s-people" }, + { label: "Rules", id: "s-rules" }, + { label: "Prizes", id: "s-prizes" }, + { label: "Schedule", id: "s-schedule" }, + { label: "FAQ", id: "s-faq" }, + { label: "Sponsors", id: "s-sponsors" }, + ].map((item) => ( + { + scrollToSection(item.id); + }} + > +

{item.label}

+
+ ))} +
+ +
+ {currentTime > + new Date( + "Feb 24 2023 19:00:00 GMT-0800 (Pacific Standard Time)" + ).getTime() && ( + +

Challenge Brief

+
+ )} + +

Submission Form

+
+
+
+ ); +}; + +export { SectionNavigation }; diff --git a/src/app/pages/Designathons/Designathon24/components/Splash/index.jsx b/src/app/pages/Designathons/Designathon24/components/Splash/index.jsx new file mode 100644 index 00000000..54172f75 --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/components/Splash/index.jsx @@ -0,0 +1,9 @@ +import { memo } from "react"; + +const Splash = memo(() => { + return ( +
+ ); +}); + +export { Splash }; diff --git a/src/app/pages/Designathons/Designathon24/components/Timer/Timer.module.scss b/src/app/pages/Designathons/Designathon24/components/Timer/Timer.module.scss new file mode 100644 index 00000000..15aa76cb --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/components/Timer/Timer.module.scss @@ -0,0 +1,44 @@ +.container { + & .text { + color: var(--des24-pink); + text-align: center; + font-size: 1em; + margin: 20px; + + @media screen and (min-width: 900px) { + font-size: 2em; + } + } + + & .row { + display: grid; + grid-template-columns: repeat(4, 55px); + margin: 0 auto; + column-gap: 10px; + place-content: center; + + @media screen and (min-width: 900px) { + column-gap: 20px; + grid-template-columns: repeat(4, 100px); + } + } + + & .block { + border-radius: 16px; + background-color: var(--blue); + place-content: center; + text-align: center; + padding: 10px; + color: white; + font-size: 0.6em; + + & h3 { + font-size: 2.5em; + } + + @media screen and (min-width: 900px) { + font-size: 1em; + padding: 15px; + } + } +} diff --git a/src/app/pages/Designathons/Designathon24/components/Timer/index.jsx b/src/app/pages/Designathons/Designathon24/components/Timer/index.jsx new file mode 100644 index 00000000..acc4e14b --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/components/Timer/index.jsx @@ -0,0 +1,59 @@ +import { useEffect, useState } from "react"; +import cn from "./Timer.module.scss"; + +const Timer = ({ breakpoints }) => { + const [timeLeft, setTimeLeft] = useState([]); + const [text, setText] = useState(null); + + useEffect(() => { + const countdown = setInterval(() => { + const { date, text } = breakpoints.find( + (breakpoint) => + breakpoint.date === "end" || + new Date().getTime() < new Date(breakpoint.date).getTime() + ); + + setText(text); + if (date === "end") return setTimeLeft([]); + + const timeBuilder = []; + let timeDiff = new Date(date).getTime() - new Date().getTime(); + timeDiff /= 1000; + timeBuilder.unshift({ + time: parseInt(timeDiff % 60), + text: "seconds", + }); + timeDiff /= 60; + timeBuilder.unshift({ + time: parseInt(timeDiff % 60), + text: "minutes", + }); + timeDiff /= 60; + timeBuilder.unshift({ + time: parseInt(timeDiff % 24), + text: "hours", + }); + timeDiff /= 24; + timeBuilder.unshift({ time: parseInt(timeDiff), text: "days" }); + + setTimeLeft(timeBuilder); + }, 500); + + return () => clearImmediate(countdown); + }, [breakpoints]); + + return ( +
+
{text}
+
+ {timeLeft.map(({ time, text }) => ( +
+

{time}

{text}

+
+ ))} +
+
+ ); +}; + +export { Timer }; diff --git a/src/app/pages/Designathons/Designathon24/components/WinnerShowcase/WinnerShowcase.module.scss b/src/app/pages/Designathons/Designathon24/components/WinnerShowcase/WinnerShowcase.module.scss new file mode 100644 index 00000000..d2559349 --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/components/WinnerShowcase/WinnerShowcase.module.scss @@ -0,0 +1,95 @@ +.container { + background-color: var(--des24-black); + color: white; + + .heading { + font-weight: 700; + color: var(--des24-peach); + } + + .winnerContainer { + display: flex; + column-gap: 150px; + color: var(--des24-cream); + + border-top: 2px dotted var(--des24-cream); + margin-bottom: 64px; + + .winnerInfo { + display: flex; + flex-direction: column; + text-align: left; + gap: 20px; + min-width: 400px; + + .winnerPlace { + margin-top: 20px; + + font-weight: 700; + font-size: 48px; + } + + .winnerTeam { + font-weight: 400; + font-size: 32px; + } + + .winnerTeamMembers { + display: flex; + flex-direction: column; + gap: 10px; + + font-weight: 400; + font-size: 24px; + } + } + + .winnerProject { + display: flex; + flex-direction: column; + text-align: left; + gap: 20px; + + .winnerProjectName { + margin-top: 20px; + + font-weight: 700; + font-size: 48px; + } + + .winnerProjectDescription { + font-weight: 400; + font-size: 24px; + } + } + } +} + +@media only screen and (max-width: 1280px) { + .container { + .winnerContainer { + flex-direction: column; + row-gap: 32px; + } + } +} + +@media only screen and (max-width: 900px) { + .container { + .heading { + font-size: 36px; + } + + .winnerContainer { + .winnerInfo { + min-width: unset; + } + + .winnerProject { + .winnerProjectDescription { + font-size: 18px; + } + } + } + } +} diff --git a/src/app/pages/Designathons/Designathon24/components/WinnerShowcase/index.jsx b/src/app/pages/Designathons/Designathon24/components/WinnerShowcase/index.jsx new file mode 100644 index 00000000..e0e3a72d --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/components/WinnerShowcase/index.jsx @@ -0,0 +1,51 @@ +import { Text } from "app/components"; +import { Section } from "app/Symbols"; +import cn from "./WinnerShowcase.module.scss"; +import clsx from "clsx"; + +const WinnerShowcase = ({ winners }) => { + if (!winners || winners.length === 0) { + return null; + } + + return ( +
+
+
+ + Congratulation to the winners! + + + {winners.map((item) => ( +
+
+ {item.place} + Team {item.team} +
+ {item.members.map((item, i) => { + return ( + + {item.name} + - {item.school} + - @instagram {item.instagram} + + ); + })} +
+
+ +
+ {item.project} + + {item.description} + +
+
+ ))} +
+
+
+ ); +}; + +export { WinnerShowcase }; diff --git a/src/app/pages/Designathons/Designathon24/components/index.js b/src/app/pages/Designathons/Designathon24/components/index.js new file mode 100644 index 00000000..862b1321 --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/components/index.js @@ -0,0 +1,7 @@ +export * from "./Profile"; +export * from "./Prizes"; +export * from "./SectionNavigation"; +export * from "./FAQ"; +export * from "./Rules"; +export * from "./Timer"; +export * from "./WinnerShowcase"; diff --git a/src/app/pages/Designathons/index.js b/src/app/pages/Designathons/index.js index 7c89eb88..e8e73adc 100644 --- a/src/app/pages/Designathons/index.js +++ b/src/app/pages/Designathons/index.js @@ -1,17 +1,21 @@ -import { Route, Routes } from 'react-router-dom'; -import Designathon22 from './Designathon22'; -import Designathon23 from './Designathon23'; -import Home from './Home'; +import { Route, Routes } from "react-router-dom"; +import Designathon22 from "./Designathon22"; +import Designathon23 from "./Designathon23"; +import Home from "./Home"; +import Designathon24 from "./Designathon24/Designathon24"; const Designathon = () => { return ( } /> - } /> - } /> + } /> + } /> - } /> - } /> + } /> + } /> + + } /> + } /> ); }; diff --git a/src/assets/data/designathon/2024/assets/portrait/Alexandria_Wang.jpeg b/src/assets/data/designathon/2024/assets/portrait/Alexandria_Wang.jpeg new file mode 100644 index 00000000..009174f2 Binary files /dev/null and b/src/assets/data/designathon/2024/assets/portrait/Alexandria_Wang.jpeg differ diff --git a/src/assets/data/designathon/2024/assets/portrait/Amanda_Hausmann.jpg b/src/assets/data/designathon/2024/assets/portrait/Amanda_Hausmann.jpg new file mode 100644 index 00000000..1e6f03a6 Binary files /dev/null and b/src/assets/data/designathon/2024/assets/portrait/Amanda_Hausmann.jpg differ diff --git a/src/assets/data/designathon/2024/assets/portrait/Antonio_Flamenco.jpg b/src/assets/data/designathon/2024/assets/portrait/Antonio_Flamenco.jpg new file mode 100644 index 00000000..1a300fa3 Binary files /dev/null and b/src/assets/data/designathon/2024/assets/portrait/Antonio_Flamenco.jpg differ diff --git a/src/assets/data/designathon/2024/assets/portrait/Duong_Vu.png b/src/assets/data/designathon/2024/assets/portrait/Duong_Vu.png new file mode 100644 index 00000000..f7f3010d Binary files /dev/null and b/src/assets/data/designathon/2024/assets/portrait/Duong_Vu.png differ diff --git a/src/assets/data/designathon/2024/assets/portrait/Hang_Cao.png b/src/assets/data/designathon/2024/assets/portrait/Hang_Cao.png new file mode 100644 index 00000000..73c03599 Binary files /dev/null and b/src/assets/data/designathon/2024/assets/portrait/Hang_Cao.png differ diff --git a/src/assets/data/designathon/2024/assets/portrait/Harrison_Wheeler.jpg b/src/assets/data/designathon/2024/assets/portrait/Harrison_Wheeler.jpg new file mode 100644 index 00000000..33ecc29f Binary files /dev/null and b/src/assets/data/designathon/2024/assets/portrait/Harrison_Wheeler.jpg differ diff --git a/src/assets/data/designathon/2024/assets/portrait/Jeremy_Marusek.jpeg b/src/assets/data/designathon/2024/assets/portrait/Jeremy_Marusek.jpeg new file mode 100644 index 00000000..459fc87d Binary files /dev/null and b/src/assets/data/designathon/2024/assets/portrait/Jeremy_Marusek.jpeg differ diff --git a/src/assets/data/designathon/2024/assets/portrait/Joe_Cahill.jpg b/src/assets/data/designathon/2024/assets/portrait/Joe_Cahill.jpg new file mode 100644 index 00000000..58cb8015 Binary files /dev/null and b/src/assets/data/designathon/2024/assets/portrait/Joe_Cahill.jpg differ diff --git a/src/assets/data/designathon/2024/assets/portrait/Meghna_Kaligotla.jpeg b/src/assets/data/designathon/2024/assets/portrait/Meghna_Kaligotla.jpeg new file mode 100644 index 00000000..8c73457a Binary files /dev/null and b/src/assets/data/designathon/2024/assets/portrait/Meghna_Kaligotla.jpeg differ diff --git a/src/assets/data/designathon/2024/assets/portrait/Minjun_Chen.jpeg b/src/assets/data/designathon/2024/assets/portrait/Minjun_Chen.jpeg new file mode 100644 index 00000000..902c48e5 Binary files /dev/null and b/src/assets/data/designathon/2024/assets/portrait/Minjun_Chen.jpeg differ diff --git a/src/assets/data/designathon/2024/assets/portrait/Mosope_Adebowale.jpg b/src/assets/data/designathon/2024/assets/portrait/Mosope_Adebowale.jpg new file mode 100644 index 00000000..d742700d Binary files /dev/null and b/src/assets/data/designathon/2024/assets/portrait/Mosope_Adebowale.jpg differ diff --git a/src/assets/data/designathon/2024/assets/portrait/Ryan_Yang.jpg b/src/assets/data/designathon/2024/assets/portrait/Ryan_Yang.jpg new file mode 100644 index 00000000..fa0329da Binary files /dev/null and b/src/assets/data/designathon/2024/assets/portrait/Ryan_Yang.jpg differ diff --git a/src/assets/data/designathon/2024/assets/portrait/Victoria_Wu.jpg b/src/assets/data/designathon/2024/assets/portrait/Victoria_Wu.jpg new file mode 100644 index 00000000..a72ffd09 Binary files /dev/null and b/src/assets/data/designathon/2024/assets/portrait/Victoria_Wu.jpg differ diff --git a/src/assets/data/designathon/2024/assets/portrait/Yiming_Wang.jpeg b/src/assets/data/designathon/2024/assets/portrait/Yiming_Wang.jpeg new file mode 100644 index 00000000..33cfc6ad Binary files /dev/null and b/src/assets/data/designathon/2024/assets/portrait/Yiming_Wang.jpeg differ diff --git a/src/assets/data/designathon/2024/events.json b/src/assets/data/designathon/2024/events.json new file mode 100644 index 00000000..0bd4479d --- /dev/null +++ b/src/assets/data/designathon/2024/events.json @@ -0,0 +1,261 @@ +[ + { + "date": "Friday - Feb. 24, 2023", + "events": [ + { + "time": "5:30 pm", + "title": "Opening Ceremony", + "isHighlight": true, + "description": [ + "Join us on our Zoom.", + "Led by Design at UCI’s Designathon Director, Hannah." + ] + }, + { + "time": "5:35 pm", + "title": "Judges Introduction", + "description": [ + "Judges share their design background and journey.", + "Introducing our judges: Minjun Chen, Jeremy Marusek, Antonio Flamenco, Mosope Adebowale, and Yiming Wang." + ] + }, + { + "time": "6:00 pm", + "title": "Keynote speech", + "description": ["Led by Keynote Speaker: Harrison Wheeler"] + }, + { + "time": "6:35 pm", + "title": "Challenge Brief and Q&A", + "isSpecial": true, + "description": ["Announcing Challenge Brief and opening Q&A."] + }, + { + "time": "7:00 pm", + "endTime": "7:05 pm", + "title": "Closing", + "description": [ + "Designathon Director, Hannah, ends the Opening Ceremony." + ] + }, + { + "time": "7:30 pm", + "endTime": "8:15 pm", + "title": "Workshop: Design for Gender Inclusivity", + "description": [ + "Led by WICS (Duong Vu & Amanda Hausmann)", + "In celebration of Inclusivity, we invite you to the talk about gender inclusivity in designs hosted by WiCS (Women in Computer Sciences). Gender inclusivity includes practicing awareness and using good design practice that avoids bias towards a particular sex or gender. We hope to see you there!", + "Location: Zoom" + ] + }, + { + "time": "8:00 pm", + "endTime": "10:00 pm", + "title": "Work session (IP)", + "description": [ + "*UCI Students ONLY*", + "Teams can work together in-person at our designated work rooms. Designathon mentors and event coordinators will be available to answer any questions! Food is provided (while supplies last, vegetarian options available).", + "Location: DBH 3011 & DBH 4011" + ] + }, + { + "time": "8:45 pm", + "endTime": "9:30 pm", + "title": "Workshop: Intro to Figma", + "description": [ + "Led by Victoria Wu", + "New to UX Design and curious about the tools UX Designers use? Join the Intro to Figma workshop to learn the basics of this powerful prototyping and designing tool. This workshop is an introductory course, perfect for those who have little to no experience with Figma!", + "Location: Zoom" + ] + }, + { + "time": "11:00 pm", + "endTime": "12:00 am", + "title": "Mentor Office Hours", + "description": [ + "Need help or advice? Come speak with our mentors in the #mentor-office-hours channel on Discord! Ping the channel with your questions or requests. Mentors in the server will respond to your message and hop on a voice chat with you.", + "Location: Discord" + ] + } + ] + }, + { + "date": "Saturday - Feb. 25, 2023", + "events": [ + { + "time": "10:00 am", + "endTime": "10:45 am", + "title": "Workshop: Designing for Diversity", + "description": [ + "Led by Mosope Adebowale", + "Do you envision yourself designing for products that will be used by billions of people across the globe? Join Mosope to learn about designing with an inclusive mind.", + "Location: Zoom" + ] + }, + { + "time": "11:00 am", + "endTime": "12:00 pm", + "title": "Mentor Office Hours", + "description": [ + "Need help or advice? Come speak with our mentors in the #mentor-office-hours channel on Discord! Ping the channel with your questions or requests. Mentors in the server will respond to your message and hop on a voice chat with you.", + "Location: Discord" + ] + }, + { + "time": "12:00 pm", + "endTime": "12:45 pm", + "title": "Workshop: Be F#$%ing Authentic", + "description": [ + "Led by Joe Cahill", + "When you are in college we are told to fit in this box of being a professional, we are told to hold back or you won’t get the job. Well they are so damn wrong! Learn to let go and be yourself is one of the keys to success in any career but no more than in design we have to sell our work, sell ourselves and allow ourselves to shine through.", + "Location: Zoom" + ] + }, + { + "time": "1:00 pm", + "endTime": "3:00 pm", + "title": "Work session (IP)", + "description": [ + "*UCI Students ONLY*", + "Teams can work together in-person at our designated work rooms. Designathon mentors and event coordinators will be available to answer any questions! Food is provided (while supplies last, vegetarian options available).", + "Location: DBH 3011 & DBH 4011" + ] + }, + { + "time": "2:00 pm", + "endTime": "3:00 pm", + "title": "Social", + "description": [ + "Led by Design at UCI", + "Game Extravaganza", + "Join our virtual social, where we’ll be playing a series of online games including Gartic Phone, Spyfall, Codenames, and many others!", + "Location: #game-extravaganza-social channel in our Discord" + ] + }, + { + "time": "3:00 pm", + "endTime": "3:45 pm", + "title": "Workshop: Creating UX Case Studies", + "description": [ + "Led by CTC (Alexandria (Alex) Wang & Meghna Kaligotla)", + "Are you interested in learning how to create case studies for your UX projects? Join Commit the Change as we discuss how to tackle structuring a case study, portfolio storytelling, and presenting design projects!", + "Location: Zoom" + ] + }, + { + "time": "4:00 pm", + "endTime": "5:00 pm", + "title": "Social (IP)", + "description": [ + "*UCI Students ONLY*", + "Led by Design at UCI", + "Event: DIY Designathon Zines", + "Join us for an in-person social and get the chance to create custom “zines” about yourself or related to the Designathon theme. Showcase your zines at the end of the event!", + "Location: DBH 3011" + ] + }, + { + "time": "5:00 pm", + "endTime": "5:45 pm", + "title": "Workshop: Leveraging Accessibility in Design", + "description": [ + "Led by Antonio Flamenco", + "Accessible design should be universal design and yet most digital products out there lack basic accessibility standards. Most designers focus too heavily on how something looks rather than how everyone has to interact with it. Join Antonio in learning what accessibility means for design and how to make all your designs accessible moving forward!", + "Location: Zoom" + ] + }, + { + "time": "5:00 pm", + "endTime": "7:00 pm", + "title": "Work session (IP)", + "description": [ + "*UCI Students ONLY*", + "Teams can work together in-person at our designated work rooms. Designathon mentors and event coordinators will be available to answer any questions! Food is provided (while supplies last, vegetarian options available).", + "Location: DBH 3011 & DBH 4011" + ] + }, + { + "time": "8:00 pm", + "endTime": "9:00 pm", + "title": "Mentor Office Hours", + "description": [ + "Need help or advice? Come speak with our mentors in the #mentor-office-hours channel on Discord! Ping the channel with your questions or requests. Mentors in the server will respond to your message and hop on a voice chat with you.", + "Location: Discord" + ] + } + ] + }, + { + "date": "Sunday - Feb. 26, 2023", + "events": [ + { + "time": "8:00 am", + "title": "Submission Deadline", + "isSpecial": true, + "description": [ + "Submit your working prototype through our Submission Form." + ] + }, + { + "time": "1:10 pm", + "title": "Announcing 10 finalists", + "description": [ + "Our team will reach out to the email provided in the Submission Form to let the team know. Make sure to check your spam! These teams will move forward to and present their case study during the final round of the judging panel." + ] + }, + { + "time": "1:10 pm", + "endTime": "4:00 pm", + "title": "Work on Case Study", + "description": [ + "For all the 10 finalists, make sure to prepare your presentation so that it clearly elaborates your target user base, user research, and decision making process. Please refer to the rubric or ask questions on our Discord channel for more information and clarification." + ] + }, + { + "time": "4:00 pm", + "endTime": "5:30 pm", + "title": "Presentations", + "isHighlight": true, + "description": [ + "Join us on our Zoom. Each finalist team—there will be 10 in total—will have 8 minutes to present their case study. Anyone can attend." + ] + }, + { + "time": "5:30 pm", + "endTime": "6:15 pm", + "title": "Judging Panel", + "description": [ + "Judges decide the Top 3 teams, as well as the winners for these additional awards:", + "• Best presentation & story-telling", + "• Most creative & innovative", + "• Honorable mention" + ] + }, + { + "time": "7:00 pm", + "endTime": "7:40 pm", + "title": "Closing Ceremony", + "isHighlight": true, + "description": [ + "Join us on our Zoom. Designathon Director, Hannah, announces the winners and asks them to share their experience." + ] + }, + { + "time": "7:40 pm", + "endTime": "7:50 pm", + "title": "Raffle Draw", + "description": [ + "Led by Design-a-thon Director, Hannah. Raffle winners will be chosen." + ] + }, + { + "time": "7:50 pm", + "endTime": "8:00 pm", + "title": "Q&A and Closing", + "description": [ + "During the final Q&A session, attendees can ask anything related to the event. Design at UCI will give final thanks and acknowledgments, then close out the event." + ] + } + ] + } +] diff --git a/src/assets/data/designathon/2024/judges.json b/src/assets/data/designathon/2024/judges.json new file mode 100644 index 00000000..687d8b2e --- /dev/null +++ b/src/assets/data/designathon/2024/judges.json @@ -0,0 +1,42 @@ +[ + { + "name": "Antonio Flamenco", + "photo": "data/designathon/2023/assets/portrait/Antonio_Flamenco.jpg", + "role": "Product Designer @ Workday", + "pronouns": "he/him", + "about": "Antonio is a bay area based UX designer with a love of complex domain areas and problem solving. He has worked for many places throughout his career such as Stanford, Adobe and Workday leading design centered solutions for thousands of customers across multiple industries. When it comes to the UX design field, Antonio believes in always guiding design decisions through the user and that effective communication is the key to team success. In his free time Antonio is an ultimate frisbee player, photographer and runner.", + "funFact": "Antonio has never traveled outside of North America in his life." + }, + { + "name": "Mosope Adebowale", + "photo": "data/designathon/2023/assets/portrait/Mosope_Adebowale.jpg", + "role": "Product Designer @ Meta", + "pronouns": "he/him", + "about": "Mosope is a user experience designer fascinated by the relationship between human interaction and technology. Much of his work has been dedicated to designing better product user experiences. His long-term goal is to make technology easy to use and accessible to everyone. He has mentored more than 200 designers from 18 countries across the world. When Mosope is not designing, you can find him doing some DIY projects, watching anime and exploring the country.", + "funFact": "Mosope actually studied Geology at the university. He pivoted from Geology to graphic design and then to product design." + }, + { + "name": "Minjun Chen", + "photo": "data/designathon/2023/assets/portrait/Minjun_Chen.jpeg", + "role": "Product Designer @ Spotify", + "pronouns": "she/her/hers", + "about": "Minjun is currently a product designer at Spotify, building business tools for advertisers. Before she joined Spotify, Minjun worked at a variety of tech companies in the United States and Canada, including Wayfair, Amazon and Microsoft. This saw her work on products for supply chain, subscription and productivity tools. ", + "funFact": "Minjun cannot live without 3 cups of coffee every day, and she can even drink espresso/latte before going to sleep at night." + }, + { + "name": "Yiming Wang", + "photo": "data/designathon/2023/assets/portrait/Yiming_Wang.jpeg", + "role": "Experience Designer @ VMLY&R", + "pronouns": "she/her", + "about": "Yiming is a UX designer with an engineering and science background. While working in these fields, she discovered her true passion for improving user experience and decided to pursue a new career in UX design, adapting her previous methodologies to this field. Her goal is to make people's lives easier by providing the best user experience possible, and she approaches the design process from a multidisciplinary and multi-cultural perspective in order to foster innovation and inclusivity. She has worked on website, mobile, and emerging technology initiatives for start-ups as well as industry leaders like Google, Deloitte, and T-Mobile. She is particularly dedicated to improving accessibility for individuals in need and designing games and apps that promote physical and mental wellness. In her spare time, she enjoys working on interactive installation projects.", + "funFact": "Yiming has been cooking for 9 years and still makes terrible dishes." + }, + { + "name": "Jeremy Marusek", + "photo": "data/designathon/2023/assets/portrait/Jeremy_Marusek.jpeg", + "role": "Senior Manager, UX @ Amazon", + "pronouns": "he/him", + "about": "Jeremy Marusek is a design leader with Amazon Prime Video and resides in Pasadena, CA. He began his career in design working in the music industry designing album covers and websites for independent artists. After moving to Los Angeles he freelanced for film and television productions and then worked in tech at Disney for 14 years until joining Amazon in 2022.", + "funFact": "Jeremy was a touring musician through the 90’s and got into design by doing album covers." + } +] diff --git a/src/assets/data/designathon/2024/keynote.json b/src/assets/data/designathon/2024/keynote.json new file mode 100644 index 00000000..c761ed9f --- /dev/null +++ b/src/assets/data/designathon/2024/keynote.json @@ -0,0 +1,10 @@ +[ + { + "name": "Harrison Wheeler", + "photo": "data/designathon/2023/assets/portrait/Harrison_Wheeler.jpg", + "role": "Senior Product Design Manager @ LinkedIn", + "pronouns": "he/him", + "about": "Harrison Wheeler is the host and creator of Technically Speaking. He first learned to code and build websites when he was 12 years old. While at the University of Iowa, he set off on a mission to combine design and technology with his other passions, bringing his skills to student government, football, and the Black Student Union. He then co-founded Live Weekend, an independent concert production and promotions company, where he learned that design can take you anywhere. Now, Harrison has a decade of experience leading, managing, and scaling teams. He established design practices and worked in the silicon valley big and small, building strategic visions and developing cross-platform experiences on desktop and mobile. As a strategic partner, leader, and designer, Harrison is known for his growth mindset, producing high-quality, scalable solutions, and building interpersonal relationships that inspire trust and long-term success.", + "funFact": "Harrison has a stock photo that's been on Billboards, Bus Stops, Blogs, and Dating Apps." + } +] diff --git a/src/assets/data/designathon/2024/prizes.json b/src/assets/data/designathon/2024/prizes.json new file mode 100644 index 00000000..8ae432fb --- /dev/null +++ b/src/assets/data/designathon/2024/prizes.json @@ -0,0 +1,76 @@ +[ + { + "symbol": "1st", + "label": "First place", + "prizes": [ + "Each member of the first place team will receive a $50 Visa gift card. Prize will be emailed as a link.", + "A 1-on-team remote mentorship meeting with a judge of your choice. You can utilize this session for portfolio reviews, career conversation, etc.", + "A feature on the Design at UCI website", + "Merch from companies such as Figma, Adobe, and Notion (subject to change). Prize will be sent via mail." + ] + }, + { + "symbol": "2nd", + "label": "Second place", + "prizes": [ + "Each member of the second place team will receive a $20 Visa gift card. Prize will be emailed as a link.", + "A 1-on-team remote mentorship meeting with a judge of your choice. You can utilize this session for portfolio reviews, career conversation, etc.", + "A feature on the Design at UCI website", + "Merch from companies such as Figma, Adobe, and Notion (subject to change). Prize will be sent via mail." + ] + }, + { + "symbol": "3rd", + "label": "Third place", + "prizes": [ + "Each member of the third place team will receive a $10 Visa gift card. Prize will be emailed as a link.", + "A 1-on-team remote mentorship meeting with a judge of your choice. You can utilize this session for portfolio reviews, career conversation, etc.", + "A feature on the Design at UCI website", + "Merch from companies such as Figma, Adobe, and Notion (subject to change). Prize will be sent via mail." + ] + }, + { + "symbol": "Raffle", + "label": "Raffle", + "prizes": [ + "Five lucky participants will receive free merch bundles from our sponsors, Figma and Notion, as well as Adobe. All participants who submit a working prototype according to the submission requirement and prompt AND complete at least 1 entry are eligible to win. See below for ways to enter.", + "• Participate in our #just-for-fun Discord challenge = 1 entry", + "• Attend a social = 1 entry", + "• Attend a workshop = 1 entry" + ] + }, + { + "symbol": "Presentation", + "label": "Best presentation & story-telling", + "prizes": [ + "Each member of the winning team will receive a limited edition Design at UCI sticker pack.", + "A feature on the Design at UCI website", + "Merch from companies such as Figma, Adobe, and Notion (subject to change). Prize will be sent via mail." + ] + }, + { + "symbol": "Creative", + "label": "Most creative & innovative", + "prizes": [ + "Each member of the winning team will receive a limited edition Design at UCI sticker pack.", + "A feature on the Design at UCI website", + "Merch from companies such as Figma, Adobe, and Notion (subject to change). Prize will be sent via mail." + ] + }, + { + "symbol": "Honorable", + "label": "Honorable Mention", + "prizes": [ + "Each member of the winning team will receive a limited edition Design at UCI sticker pack.", + "A feature on the Design at UCI website", + "Merch from companies such as Figma, Adobe, and Notion (subject to change). Prize will be sent via mail." + ] + }, + { + "symbol": "Extras", + "label": "All participants", + "prizes": [ + "All participants will receive a 90-day extended trial promo code for Balsamiq Cloud." + ] + } +] diff --git a/src/assets/data/designathon/2024/rules.json b/src/assets/data/designathon/2024/rules.json new file mode 100644 index 00000000..30604314 --- /dev/null +++ b/src/assets/data/designathon/2024/rules.json @@ -0,0 +1,9 @@ +[ + "All members of your team must be an undergraduate college student with an associated institutional email.", + "Teams must not exceed 4 people total.", + "Each team may only submit one (1) submission which will be submitted on behalf of all other contributors.", + "All work submitted to You Belong Here must be original work. Any submissions with plagiarized work will be disqualified.", + "You may not submit work previously designed before You Belong Here. All designs must be made between the dates of February 24th, 2023 to February 26th, 2023.", + "Late submissions will not be accepted.", + "If there are any adjustments made to your prototype after Sunday Feb 26th 8:00 am PST, you (and your team) will be penalized." +] diff --git a/src/assets/data/designathon/2024/timer.json b/src/assets/data/designathon/2024/timer.json new file mode 100644 index 00000000..3b0f6f03 --- /dev/null +++ b/src/assets/data/designathon/2024/timer.json @@ -0,0 +1,26 @@ +[ + { + "date": "Jan 26 2023 00:00:00 GMT-0800 (Pacific Standard Time)", + "text": "Registration opens in" + }, + { + "date": "Feb 15 2023 00:00:00 GMT-0800 (Pacific Standard Time)", + "text": "Registration closes in" + }, + { + "date": "Feb 20 2023 00:00:00 GMT-0800 (Pacific Standard Time)", + "text": "Registration extended until" + }, + { + "date": "Feb 24 2023 17:30:00 GMT-0800 (Pacific Standard Time)", + "text": "Event begins in" + }, + { + "date": "Feb 26 2023 08:00:00 GMT-0800 (Pacific Standard Time)", + "text": "Submissions due in" + }, + { + "date": "end", + "text": "Event has ended. Thank you for joining us!" + } +] diff --git a/src/assets/data/designathon/2024/winners.json b/src/assets/data/designathon/2024/winners.json new file mode 100644 index 00000000..5f7bed98 --- /dev/null +++ b/src/assets/data/designathon/2024/winners.json @@ -0,0 +1,54 @@ +[ + { + "place": "1st Place", + "team": "Colorful", + "members": [ + { + "name": "William Han", + "school": "USC" + }, + { + "name": "Megan Phi", + "school": "USC" + }, + { + "name": "Jayden Kang", + "school": "USC" + }, + { + "name": "Amy La", + "school": "USC" + } + ], + "project": "Colorful", + "description": "Colorful is a platform that aims to democratize access to the arts and arts education for younger children with special needs. Colorful encourages creative expression with doodling tools, develops communication skills through digital galleries, and promotes art therapy with introspective daily challenge prompts." + }, + { + "place": "2nd Place", + "team": "Team MLH", + "members": [ + { + "name": "Mandy Wu", + "school": "University of Washington, Seattle" + }, + { + "name": "Lea Hidaka", + "school": "University of Washington, Seattle" + } + ], + "project": "Honeycomb", + "description": "Honeycomb is an app that aims to bridge the gap between parents and their children’s education by providing a convenient and accessible platform for all parents to stay informed and involved. The main features are to keep parents updated on the school district’s latest news, foster connection amongst families through community channels, and encourage self advocacy and inclusive decision making." + }, + { + "place": "3rd Place", + "team": "Jackie", + "members": [ + { + "name": "Hue Quan (Jackie) Vu", + "school": "School of the Art " + } + ], + "project": "Connec", + "description": "An inclusive social platform that connects veterans to the civilian workforce by better representing the veterans’ invaluable working experiences from the military, linking them with civilians who share their career interests, and bringing the veterans to communities of people who understand and thrive with them." + } +] diff --git a/src/assets/data/designathon/2024/workshop-hosts.json b/src/assets/data/designathon/2024/workshop-hosts.json new file mode 100644 index 00000000..614b32a6 --- /dev/null +++ b/src/assets/data/designathon/2024/workshop-hosts.json @@ -0,0 +1,67 @@ +[ + { + "name": "Antonio Flamenco", + "photo": "data/designathon/2023/assets/portrait/Antonio_Flamenco.jpg", + "role": "Product Designer @ Workday", + "pronouns": "he/him", + "about": "Antonio is a bay area based UX designer with a love of complex domain areas and problem solving. He has worked for many places throughout his career such as Stanford, Adobe and Workday leading design centered solutions for thousands of customers across multiple industries. When it comes to the UX design field, Antonio believes in always guiding design decisions through the user and that effective communication is the key to team success. In his free time Antonio is an ultimate frisbee player, photographer and runner.", + "funFact": "Antonio has never traveled outside of North America in his life." + }, + { + "name": "Mosope Adebowale", + "photo": "data/designathon/2023/assets/portrait/Mosope_Adebowale.jpg", + "role": "Product Designer @ Meta", + "pronouns": "he/him", + "about": "Mosope is a user experience designer fascinated by the relationship between human interaction and technology. Much of his work has been dedicated to designing better product user experiences. His long-term goal is to make technology easy to use and accessible to everyone. He has mentored more than 200 designers from 18 countries across the world. When Mosope is not designing, you can find him doing some DIY projects, watching anime and exploring the country.", + "funFact": " Mosope actually studied Geology at the university. He pivoted from Geology to graphic design and then to product design." + }, + { + "name": "Victoria Wu", + "photo": "data/designathon/2023/assets/portrait/Victoria_Wu.jpg", + "role": "Product Designer @ LinkedIn", + "pronouns": "she/her", + "about": "Victoria is a product designer at LinkedIn, currently designing profiles! Previously she studied architecture at UC Berkeley and has worked at design agencies, startups, and architecture firms. She’s from Orange County but is currently living in San Francisco. ", + "funFact": "Victoria is an ENFP (Myers-Briggs Personality Type). + she has a bichon-poodle named Miso!." + }, + { + "name": "Meghna Kaligotla", + "photo": "data/designathon/2023/assets/portrait/Meghna_Kaligotla.jpeg", + "role": "External Vice President @ CTC", + "pronouns": "she/her", + "about": "Meghna is a 4th year Informatics major and the current External Vice President (EVP) of CTC, an organization that creates software for nonprofits. As EVP, she’s in charge of choosing their nonprofit projects, collaborating with other organizations, and cultivating their club’s vision and status. Within the field of design, Meghna prioritizes designing for social good, accessibility, and affordability. She’s also passionate about bringing product design to the forefront of tech conversations and giving designers a voice within the industry.", + "funFact": "Meghna studied opera and musical theater for 12 years!" + }, + { + "name": "Alexandria (Alex) Wang", + "photo": "data/designathon/2023/assets/portrait/Alexandria_Wang.jpeg", + "role": "Design Director @ CTC", + "pronouns": "she/her", + "about": "Alex is a 4th year informatics major and one of the design directors this year in CTC. Her main goal as design director is to support and advocate for the design leads and designers in the club and highlight the importance of UI/UX design in producing tech for our nonprofits. Alex’s favorite part about being a designer is using research, creativity, and problem solving to produce products that make people happy!", + "funFact": "Alex used to be a boba barista 😄" + }, + { + "name": "Duong Vu", + "photo": "data/designathon/2023/assets/portrait/Duong_Vu.png", + "role": "Outreach Co-chair @ WICS", + "pronouns": "she/her", + "about": "Duong is a third year CS major. She first joined WICS in freshman year and it has helped her a lot in the COVID online period. Afterwards, she joined the WICS committee and this year she is Outreach Co-chair. In her free time, she mostly hangs out with friends. She also loves checking out new food and boba and her favorite sport is badminton.", + "funFact": "Duong prefers cereals with yogurt over milk." + }, + { + "name": "Amanda Hausmann", + "photo": "data/designathon/2023/assets/portrait/Amanda_Hausmann.jpg", + "role": "Community Outreach Committee Member @ WICS", + "pronouns": "she/her", + "about": "Amanda is currently a second year Computer Science major and Archaeology minor. She joined WICS at the beginning of her second year and immediately loved being a part of the intelligent and welcoming community. Thus, Amanda joined WICS's mentorship program in October and the Community Outreach Committee in November. While her major, minor, and club memberships are unrelated to design, digital design has been a hobby of hers for years.", + "funFact": "Amanda has three cats!" + }, + + { + "name": "Joe Cahill", + "photo": "data/designathon/2023/assets/portrait/Joe_Cahill.jpg", + "role": "Experience Design Manager @ Unqork", + "pronouns": "he/him", + "about": "With over 20 years of experience, an infectious smile, and a big presence, Joe Cahill is one of the most passionate designers you will meet. His experience has led him to successfully design and build products across a range of industries, and has also helped many Fortune 50 teams restructure their product development team operations to successfully create and deploy products more effectively. His passion for the customer and excitement for design has left a rippling impact on the industry, and he continues to spend his time learning about how people experience, interact with and use digital products in this constantly evolving industry.", + "funFact": "Joe has officiated." + } +]