From 13f60d27d8d6c7d6f8b9ff8de3731193929ddda5 Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Wed, 13 Mar 2024 15:22:41 -0700 Subject: [PATCH] chore: run prettier (#60) --- .prettierignore | 3 + .prettierrc | 4 +- README.md | 40 ++- jsconfig.json | 10 +- package.json | 3 +- public/index.html | 142 ++++---- public/manifest.json | 22 +- src/app/Symbols.js | 102 +++--- src/app/components/Banner/index.js | 2 +- src/app/components/EmailForm/EmailForm.js | 128 +++---- .../EmailForm/EmailForm.module.scss | 2 - src/app/components/EmailForm/index.js | 2 +- src/app/components/Footer/Footer.js | 111 +++--- src/app/components/Footer/Footer.module.scss | 2 +- src/app/components/Footer/index.js | 3 +- src/app/components/Nav/Nav.js | 107 +++--- src/app/components/Nav/Nav.scss | 265 +++++++------- src/app/components/Nav/index.js | 3 +- src/app/components/Text/Text.js | 8 +- src/app/components/Text/Text.module.scss | 280 +++++++-------- src/app/components/Text/index.js | 3 +- src/app/components/WordBreak/WordBreak.jsx | 9 +- .../WordBreak/WordBreak.module.scss | 2 - src/app/components/WordBreak/index.js | 3 +- src/app/controllers/index.js | 6 +- src/app/controllers/useScroll.js | 22 +- src/app/index.js | 2 +- src/app/pages/About/About.scss | 156 +++++---- .../components/Profile/Profile.module.scss | 82 ++--- .../pages/About/components/Profile/index.js | 3 +- src/app/pages/About/index.js | 2 +- src/app/pages/Brand/Brand.js | 177 +++++----- src/app/pages/Brand/index.js | 2 +- src/app/pages/Contact/Contact.js | 62 ++-- src/app/pages/Contact/index.js | 2 +- src/app/pages/Designathons/Designathon22.js | 6 +- .../Designathon23/Designathon23.module.scss | 314 +++++++++-------- .../components/FAQ/FAQ.module.scss | 51 ++- .../components/Prizes/Prizes.module.scss | 66 ++-- .../Profile/Modal/Modal.module.scss | 211 ++++++----- .../components/Profile/Modal/index.jsx | 4 +- .../components/Profile/Profile.module.scss | 125 ++++--- .../components/Profile/index.jsx | 19 +- .../components/Rules/Rules.module.scss | 12 +- .../Designathon23/components/Rules/index.jsx | 23 +- .../components/Schedule/Schedule.module.scss | 142 ++++---- .../SectionNavigation.module.scss | 98 +++--- .../components/Timer/Timer.module.scss | 75 ++-- .../Designathon23/components/Timer/index.jsx | 25 +- .../Designathon23/components/index.js | 12 +- .../components/Profile/Modal/index.jsx | 4 +- .../components/Profile/index.jsx | 19 +- .../Designathon24/components/Rules/index.jsx | 23 +- .../components/Schedule/index.jsx | 2 +- .../SectionNavigation.module.scss | 4 +- .../components/SectionNavigation/index.jsx | 2 +- .../Designathon24/components/Timer/index.jsx | 2 +- .../Designathons/Home/components/index.jsx | 2 +- .../components/Judges/Judges.module.scss | 4 +- .../Designathons/components/Judges/index.jsx | 32 +- .../Designathons/components/Program/index.jsx | 58 ++- .../Designathons/components/Rules/index.jsx | 23 +- .../SectionNavigation.module.scss | 50 +-- .../components/Workshop/Hosts.jsx | 24 +- .../pages/Designathons/components/index.jsx | 12 +- src/app/pages/Events/Events.js | 283 +++++++-------- src/app/pages/Events/Events.module.scss | 2 - src/app/pages/Events/EventsAll.js | 29 +- .../Events/components/EventCard/EventCard.js | 44 ++- .../EventCard/EventCard.module.scss | 2 - .../Events/components/EventCard/index.js | 2 +- src/app/pages/Events/components/index.js | 6 +- .../pages/Events/controllers/formateDate.js | 4 +- src/app/pages/Hey.js | 98 +++--- src/app/pages/Home/Home.js | 247 +++++++------ src/app/pages/Home/Home.module.scss | 18 +- src/app/pages/Home/index.js | 3 +- src/app/pages/Houses/sections/FAQ.js | 2 +- src/app/pages/Houses/sections/FAQ.module.scss | 4 +- src/app/pages/Join/Join.js | 65 ++-- src/app/pages/Join/Join.module.scss | 10 +- src/app/pages/Join/index.js | 3 +- src/app/pages/Mentorship/Mentorship.js | 51 ++- .../pages/Mentorship/Mentorship.module.scss | 1 - src/app/pages/Merch/Merch.js | 25 +- src/app/pages/Merch/Merch.module.scss | 54 +-- .../MerchDropListing/MerchDropListing.js | 36 +- .../MerchDropListing.module.scss | 6 +- .../components/MerchDropListing/index.js | 2 +- .../Merch/components/MerchItem/MerchItem.js | 14 +- .../MerchItem/MerchItem.module.scss | 64 ++-- .../pages/Merch/components/MerchItem/index.js | 2 +- src/app/pages/Merch/components/index.js | 4 +- src/app/pages/Merch/index.js | 2 +- src/app/pages/Merch/pages/Shirt22/Shirt22.js | 61 ++-- .../Merch/pages/Shirt22/Shirt22.module.scss | 133 ++++--- src/app/pages/Merch/pages/Shirt22/index.js | 2 +- src/app/pages/NotFound/NotFound.js | 45 ++- src/app/pages/NotFound/NotFound.module.scss | 2 - src/app/pages/NotFound/index.js | 3 +- src/app/pages/ProjectTeams/ProjectTeams.js | 46 ++- src/app/pages/ProjectTeams/index.js | 2 +- src/app/pages/Resources/Resources.js | 35 +- src/app/pages/Resources/Resources.module.scss | 6 +- src/app/pages/Resources/index.js | 2 +- .../ResourcesFeatured/ResourcesFeatured.js | 146 ++++---- .../ResourcesFeatured.module.scss | 6 +- src/app/pages/ResourcesFeatured/index.js | 2 +- src/app/pages/temp.json | 329 ++++++++++-------- src/app/styles/colors.scss | 2 +- src/app/styles/components.scss | 6 +- src/app/styles/forms.scss | 6 +- src/app/styles/global.scss | 9 +- src/app/styles/layout.scss | 2 +- src/assets/data/designathon/2022/judges.json | 59 ++-- src/assets/data/designathon/2022/rules.json | 12 +- .../data/designathon/2022/workshop-hosts.json | 85 ++--- src/assets/data/designathon/2023/keynote.json | 18 +- src/assets/data/designathon/2023/rules.json | 14 +- src/assets/data/designathon/2023/timer.json | 48 +-- src/assets/data/designathon/2023/winners.json | 104 +++--- .../data/designathon/2023/workshop-hosts.json | 129 +++---- src/assets/data/designathon/overall.json | 104 +++--- src/index.js | 10 +- 124 files changed, 2838 insertions(+), 2889 deletions(-) create mode 100644 .prettierignore diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..5f0d66e0 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,3 @@ +build +public/static +node_modules \ No newline at end of file diff --git a/.prettierrc b/.prettierrc index e510c85c..4776cefb 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,6 @@ { "useTabs": true, - "semi": true + "tabWidth": 4, + "semi": true, + "singleQuote": false } diff --git a/README.md b/README.md index 500429b0..444baa4f 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,11 @@ # Design @ UCI main site + ![homepage](./assets//home.png) + ## Running the app This app is built on CRA without any custom webpack configs and utilizes the default react scripts. To run the app, first download the source code from the github and install all the dependencies. If you're using a unix based terminal, you can run the following commands (assuming you already have node/npm installed): + ```bash $ pwd /path/to/place/you/want/to/put/the/code @@ -11,7 +14,7 @@ $ git clone https://github.com/designatuci/DUCI-website.git Cloning into 'DUCI-website'... ...other install messages -$ ls +$ ls DUCI-website ...other files in this directory @@ -29,11 +32,12 @@ $ npm start and you can open up your app on [http://localhost:3000](http://localhost:3000) (or another port if you know what you're doing). ## Understanding the file structure + ```bash DUCI-website ├── assets (images for this README) │ └── ... -├── public +├── public │ ├── static │ │ └── ...various assets │ └── index.html @@ -47,21 +51,20 @@ DUCI-website │ ├── resources.json │ └── socials.json ├── .gitignore -├── package.json +├── package.json └── README.md ``` #### Basic list of important files and what they do -| Files | Description | Used in | -| --- | --- | --- | -| alumniBoard.json | information of all alumni board members | `src/app/pages/About` | -| currentBoard.json | information of all current board members | `src/app/pages/About` | -| merchList.json | list of all historical merch data (currently only has stickers) | `src/app/pages/Merch` | -| resources.json | all design resources for club members | `src/app/pages/Resources`, `src/app/pages/ResourcesFeatured` | -| socials.json | social media links for DUCI | `src/app/pages/Contact`, `src/app/components/Nav`, `src/app/components/Footer` | -| short_socials.json | full social media icon-links for DUCI | `src/app/pages/Join`, `src/app/pages/Hey` | - +| Files | Description | Used in | +| ------------------ | --------------------------------------------------------------- | ------------------------------------------------------------------------------ | +| alumniBoard.json | information of all alumni board members | `src/app/pages/About` | +| currentBoard.json | information of all current board members | `src/app/pages/About` | +| merchList.json | list of all historical merch data (currently only has stickers) | `src/app/pages/Merch` | +| resources.json | all design resources for club members | `src/app/pages/Resources`, `src/app/pages/ResourcesFeatured` | +| socials.json | social media links for DUCI | `src/app/pages/Contact`, `src/app/components/Nav`, `src/app/components/Footer` | +| short_socials.json | full social media icon-links for DUCI | `src/app/pages/Join`, `src/app/pages/Hey` | #### Architecture @@ -69,9 +72,10 @@ Similar to Gatsby and Next.js, all page components are stored in the `app/pages` All individual components that are not pages belong in the `app/components` folder and pure JS logic / React hooks are in the `app/controllers` folder. The exception for this are components that are used exclusively within a certain page. In these cases, the page itself will have its own set of `controllers` and `components` folders. -React is designed with a top-down unidirectional data flow. When deciding where to place state, for example, the general rule of thumb is to place it as low level as possible. We follow this type practice with the file structure as well where we place the React components as low level as possible. +React is designed with a top-down unidirectional data flow. When deciding where to place state, for example, the general rule of thumb is to place it as low level as possible. We follow this type practice with the file structure as well where we place the React components as low level as possible. Example of a nested structure using this practice: + ```bash └── pages ├── ..other pages @@ -117,15 +121,13 @@ Currently, the final build size is about 50kb which isn't nearly big enough to w ### Immediate improvements to be made -* i18n? -* a11y - mouse hover interaction (fields - text, buttons - pointer), semantic html (text component for example should be switched to various h tags) -* pagination for events list -* A lot of styling still needs to be refactored - +- i18n? +- a11y - mouse hover interaction (fields - text, buttons - pointer), semantic html (text component for example should be switched to various h tags) +- pagination for events list +- A lot of styling still needs to be refactored ### Later planned updates: Would like to rewrite the way designathons are currently structured. Since the designathon is over and the next one isn't for a while, there are no immediate plans to make these changes (especially since it's a fat >3k sloc file) but ideally we have a history of previous designathon websites. Up to us on whether we want to keep the same format for every year and only change the data or have a new design format like most hackathon websites. - diff --git a/jsconfig.json b/jsconfig.json index 4be81082..8e0442c4 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -1,7 +1,7 @@ { - "compilerOptions": { - "jsx": "react", - "baseUrl": "src" - }, - "include": ["src"] + "compilerOptions": { + "jsx": "react", + "baseUrl": "src" + }, + "include": ["src"] } diff --git a/package.json b/package.json index acfb9c1d..c33d3131 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,8 @@ "build": "react-scripts build", "postbuild": "cp build/index.html build/404.html", "test": "react-scripts test", - "eject": "react-scripts eject" + "eject": "react-scripts eject", + "format": "npx prettier --write ." }, "eslintConfig": { "extends": [ diff --git a/public/index.html b/public/index.html index 551f4e38..8859c382 100644 --- a/public/index.html +++ b/public/index.html @@ -1,63 +1,87 @@ - + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - Design at UCI - - - - - - - - - -
- - - + + + + + + + + + + + + + + + Design at UCI + + + + + + + + + +
+ + + diff --git a/public/manifest.json b/public/manifest.json index afa22c68..ca6bd384 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,13 +1,13 @@ { - "short_name": "D@UCI", - "name": "Design at UCI", - "icons": [ - { - "src": "favicon.png" - } - ], - "start_url": ".", - "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" + "short_name": "D@UCI", + "name": "Design at UCI", + "icons": [ + { + "src": "favicon.png" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" } diff --git a/src/app/Symbols.js b/src/app/Symbols.js index b122a6af..e96587f1 100644 --- a/src/app/Symbols.js +++ b/src/app/Symbols.js @@ -1,21 +1,17 @@ -import clsx from 'clsx'; -import { useState, useEffect } from 'react'; +import clsx from "clsx"; +import { useState, useEffect } from "react"; -const Icon = props => { +const Icon = (props) => { let style = { - width: props.w + 'px', - height: props.h + 'px', + width: props.w + "px", + height: props.h + "px", backgroundImage: `url(/static/icon/${props.src})`, ...props.style, }; return (
{props.children} @@ -23,7 +19,7 @@ const Icon = props => { ); }; -const Photo = props => { +const Photo = (props) => { const [photoData, setphotoData] = useState(null); let style = { backgroundImage: photoData, @@ -35,7 +31,7 @@ const Photo = props => { () => { setphotoData(`url(/static/photo/${props.src})`); }, - props?.lazy ? 500 : 0 + props?.lazy ? 500 : 0, ); }, [props.lazy, props.src]); @@ -47,8 +43,8 @@ const Photo = props => { }; const Section = ({ children, className, wrapperClass, ...props }) => ( -
-
{children}
+
+
{children}
); @@ -56,19 +52,15 @@ export { Icon, Photo, Section }; export function Space({ block, ...props }) { let style = { - width: props.w + 'px', - height: props.h + 'px', + width: props.w + "px", + height: props.h + "px", ...props.style, }; if (block) { - style.display = 'block'; + style.display = "block"; } return ( -
+
); } @@ -76,33 +68,33 @@ export function LoadingD(props) { return (
- -
- Symbols - Click to download + +
+ Symbols + Click to download
-
+
{[ - { name: 'logo.svg' }, - { name: 'logo-silhouette.svg' }, - { name: 'logo-white.svg' }, - { name: 'logo-minimal.svg' }, - { name: 'logo-circle-profile.svg' }, - { name: 'industry-logo.svg' }, - { name: 'designathon-logo.svg' }, - { name: 'pt-logo.svg' }, - { name: 'pt-logo-outline.svg' }, - { name: 'workshop-icon.svg' }, - { name: 'social-icon.svg' }, + { name: "logo.svg" }, + { name: "logo-silhouette.svg" }, + { name: "logo-white.svg" }, + { name: "logo-minimal.svg" }, + { name: "logo-circle-profile.svg" }, + { name: "industry-logo.svg" }, + { name: "designathon-logo.svg" }, + { name: "pt-logo.svg" }, + { name: "pt-logo-outline.svg" }, + { name: "workshop-icon.svg" }, + { name: "social-icon.svg" }, ].map((item, i) => { return ( - + - -
- Font - + +
+ Font + Italics allowed, use stylistic sets when possible.
-
-
- DM Sans Medium +
+
+ DM Sans Medium - - Google Fonts{' '} - + + Google Fonts{" "} + - Use stylistic Set 2 - Use stylistic Set 3 + Use stylistic Set 2 + Use stylistic Set 3
-
- +
+ DM Sans Bold - - Google Fonts{' '} - + + Google Fonts{" "} + - Use stylistic Set 2 - Use stylistic Set 3 + Use stylistic Set 2 + Use stylistic Set 3
diff --git a/src/app/pages/Brand/index.js b/src/app/pages/Brand/index.js index f5e9e41b..e2c0e906 100644 --- a/src/app/pages/Brand/index.js +++ b/src/app/pages/Brand/index.js @@ -1,3 +1,3 @@ -import Brand from './Brand'; +import Brand from "./Brand"; export default Brand; diff --git a/src/app/pages/Contact/Contact.js b/src/app/pages/Contact/Contact.js index cecb963a..bb406de9 100644 --- a/src/app/pages/Contact/Contact.js +++ b/src/app/pages/Contact/Contact.js @@ -1,59 +1,57 @@ -import { Helmet } from 'react-helmet'; +import { Helmet } from "react-helmet"; -import { Text } from 'app/components'; -import { Section, Space, Icon } from 'app/Symbols.js'; -import socials from 'assets/data/socials.json'; +import { Text } from "app/components"; +import { Section, Space, Icon } from "app/Symbols.js"; +import socials from "assets/data/socials.json"; const Contact = () => ( <> Contact – Design at UCI -
-
-
+
+
+
- hello@designatuci.com + hello@designatuci.com - - - Do you have a question, comment, or feedback for us? - Don't hesitate to send us an email. + + + Do you have a question, comment, or feedback for us? Don't hesitate + to send us an email.
-
+
- contact@designatuci.com + contact@designatuci.com - - - Want to collaborate with Design at UCI? You can reach - the campus' design community easily through us. + + + Want to collaborate with Design at UCI? You can reach the campus' + design community easily through us.
- +
- - Reach out to us on social media - - -
+ Reach out to us on social media + +
{socials.map(({ name, link, icons }) => ( - + ))}
diff --git a/src/app/pages/Contact/index.js b/src/app/pages/Contact/index.js index 95f64208..6d3c30fb 100644 --- a/src/app/pages/Contact/index.js +++ b/src/app/pages/Contact/index.js @@ -1,3 +1,3 @@ -import Contact from './Contact.js'; +import Contact from "./Contact.js"; export default Contact; diff --git a/src/app/pages/Designathons/Designathon22.js b/src/app/pages/Designathons/Designathon22.js index 64a0d958..d06cb2af 100644 --- a/src/app/pages/Designathons/Designathon22.js +++ b/src/app/pages/Designathons/Designathon22.js @@ -2294,10 +2294,10 @@ function frame() { } function resize() { Main.target.view.w = Math.ceil( - view.getBoundingClientRect().width * RESOLUTION + view.getBoundingClientRect().width * RESOLUTION, ); Main.target.view.h = Math.ceil( - view.getBoundingClientRect().height * RESOLUTION + view.getBoundingClientRect().height * RESOLUTION, ); view.width = Main.target.view.w; @@ -2351,7 +2351,7 @@ class Program { gl.FLOAT, gl.FALSE, 2 * Float32Array.BYTES_PER_ELEMENT, - 0 + 0, ); gl.enableVertexAttribArray(positionAttribLocation); diff --git a/src/app/pages/Designathons/Designathon23/Designathon23.module.scss b/src/app/pages/Designathons/Designathon23/Designathon23.module.scss index a1d865b9..30a990dc 100644 --- a/src/app/pages/Designathons/Designathon23/Designathon23.module.scss +++ b/src/app/pages/Designathons/Designathon23/Designathon23.module.scss @@ -1,160 +1,156 @@ .container { - &>.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: #E4E4E6; - font-size: 1em; - - & h1 { - font-size: 2em; - font-weight: bold; - } - - & p { - font-size: 1.2em; - line-height: 1.5em; - } - - @media screen and (min-width: 1100px) { - padding-bottom: 80px; - - & h1 { - 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); - - & .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; - } - } - } -} \ No newline at end of file + & > .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: #e4e4e6; + font-size: 1em; + + & h1 { + font-size: 2em; + font-weight: bold; + } + + & p { + font-size: 1.2em; + line-height: 1.5em; + } + + @media screen and (min-width: 1100px) { + padding-bottom: 80px; + + & h1 { + 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); + + & .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/Designathon23/components/FAQ/FAQ.module.scss b/src/app/pages/Designathons/Designathon23/components/FAQ/FAQ.module.scss index fe0bc0c4..deabbb8a 100644 --- a/src/app/pages/Designathons/Designathon23/components/FAQ/FAQ.module.scss +++ b/src/app/pages/Designathons/Designathon23/components/FAQ/FAQ.module.scss @@ -1,33 +1,32 @@ .container { - display: grid; - grid-template-columns: 1fr; - gap: 40px; + display: grid; + grid-template-columns: 1fr; + gap: 40px; - @media screen and (min-width: 900px) { - grid-template-columns: 240px 1fr; - } + @media screen and (min-width: 900px) { + grid-template-columns: 240px 1fr; + } - @media screen and (min-width: 1000px) { - grid-template-columns: 300px 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; - & .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); + } - &.opened { - border: 2px solid var(--silver); - } - - &:hover { - background-color: var(--silver); - } - } + &:hover { + background-color: var(--silver); + } + } } diff --git a/src/app/pages/Designathons/Designathon23/components/Prizes/Prizes.module.scss b/src/app/pages/Designathons/Designathon23/components/Prizes/Prizes.module.scss index 8f56931b..5ac915ab 100644 --- a/src/app/pages/Designathons/Designathon23/components/Prizes/Prizes.module.scss +++ b/src/app/pages/Designathons/Designathon23/components/Prizes/Prizes.module.scss @@ -1,43 +1,43 @@ .title { - color: black; - font-size: 3em; - font-weight: bold; + color: black; + font-size: 3em; + font-weight: bold; } .container { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 80px; - padding-bottom: 80px; + 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: 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); - } + @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); - } - } + & > .item { + &:nth-child(even) { + & h3 { + color: var(--yellow); + } + } - & p { - color: black; - line-height: 1.4em; - } - } + & p { + color: black; + line-height: 1.4em; + } + } - & h3 { - font-weight: bold; - margin: 20px 0; - font-size: 1.5em; - color: var(--blue); - } + & h3 { + font-weight: bold; + margin: 20px 0; + font-size: 1.5em; + color: var(--blue); + } } diff --git a/src/app/pages/Designathons/Designathon23/components/Profile/Modal/Modal.module.scss b/src/app/pages/Designathons/Designathon23/components/Profile/Modal/Modal.module.scss index 822429fb..7dc3e1dc 100644 --- a/src/app/pages/Designathons/Designathon23/components/Profile/Modal/Modal.module.scss +++ b/src/app/pages/Designathons/Designathon23/components/Profile/Modal/Modal.module.scss @@ -1,109 +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; - } - } - } - + 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/Designathon23/components/Profile/Modal/index.jsx b/src/app/pages/Designathons/Designathon23/components/Profile/Modal/index.jsx index 43847100..93182220 100644 --- a/src/app/pages/Designathons/Designathon23/components/Profile/Modal/index.jsx +++ b/src/app/pages/Designathons/Designathon23/components/Profile/Modal/index.jsx @@ -1,5 +1,5 @@ -import clsx from 'clsx'; -import cn from './Modal.module.scss'; +import clsx from "clsx"; +import cn from "./Modal.module.scss"; export const Modal = ({ toggleProfile, diff --git a/src/app/pages/Designathons/Designathon23/components/Profile/Profile.module.scss b/src/app/pages/Designathons/Designathon23/components/Profile/Profile.module.scss index a1b4160e..b069acf0 100644 --- a/src/app/pages/Designathons/Designathon23/components/Profile/Profile.module.scss +++ b/src/app/pages/Designathons/Designathon23/components/Profile/Profile.module.scss @@ -1,71 +1,68 @@ -.container { - display: grid; - text-align: center; - border: 2px solid transparent; - padding: 20px; - border-radius: 20px; - transition: border-color 250ms; - cursor: pointer; +.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); - } + &:hover { + border: 2px solid var(--gray); + } - &>img { - margin: 0 auto; - border-radius: 50%; - height: 100px; - width: 100px; - object-fit: cover; - cursor: pointer; - } + & > 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; - } - + & > p { + font-size: 1em; + line-height: 1.4em; + font-weight: bold; + margin: 8px 0; + cursor: pointer; + } - @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; - } - } + & > 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/Designathon23/components/Profile/index.jsx b/src/app/pages/Designathons/Designathon23/components/Profile/index.jsx index 2573c84f..e270cc00 100644 --- a/src/app/pages/Designathons/Designathon23/components/Profile/index.jsx +++ b/src/app/pages/Designathons/Designathon23/components/Profile/index.jsx @@ -1,11 +1,11 @@ -import { useCallback, useState } from 'react'; -import cn from './Profile.module.scss'; -import { Modal } from './Modal'; +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), []); + const toggleProfile = useCallback(() => setOpen((p) => !p), []); return ( <> @@ -14,7 +14,16 @@ const Profile = ({ name, photo, role, ...rest }) => {

{name}

{role}
- {open && } + {open && ( + + )} ); }; diff --git a/src/app/pages/Designathons/Designathon23/components/Rules/Rules.module.scss b/src/app/pages/Designathons/Designathon23/components/Rules/Rules.module.scss index 576f7570..a13c5862 100644 --- a/src/app/pages/Designathons/Designathon23/components/Rules/Rules.module.scss +++ b/src/app/pages/Designathons/Designathon23/components/Rules/Rules.module.scss @@ -1,9 +1,9 @@ .container { - background-color: var(--silver); + background-color: var(--silver); - & h2 { - padding-bottom: 20px; - font-size: 3em; - font-weight: bold; - } + & h2 { + padding-bottom: 20px; + font-size: 3em; + font-weight: bold; + } } diff --git a/src/app/pages/Designathons/Designathon23/components/Rules/index.jsx b/src/app/pages/Designathons/Designathon23/components/Rules/index.jsx index b9161b65..37bf73d7 100644 --- a/src/app/pages/Designathons/Designathon23/components/Rules/index.jsx +++ b/src/app/pages/Designathons/Designathon23/components/Rules/index.jsx @@ -1,23 +1,20 @@ -import { Text } from 'app/components'; -import { Section } from 'app/Symbols'; -import cn from './Rules.module.scss'; +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} diff --git a/src/app/pages/Designathons/Designathon23/components/Schedule/Schedule.module.scss b/src/app/pages/Designathons/Designathon23/components/Schedule/Schedule.module.scss index f11b898f..0082c332 100644 --- a/src/app/pages/Designathons/Designathon23/components/Schedule/Schedule.module.scss +++ b/src/app/pages/Designathons/Designathon23/components/Schedule/Schedule.module.scss @@ -1,87 +1,85 @@ .container { - background-color: black; - color: white; + background-color: black; + color: white; - & .note { - color: var(--gray); - font-size: 1.2em; - line-height: 1.3em; - } + & .note { + color: var(--gray); + font-size: 1.2em; + line-height: 1.3em; + } - & .title { - font-size: 3em; - font-weight: bold; - padding-bottom: 20px; - } + & .title { + font-size: 3em; + font-weight: bold; + padding-bottom: 20px; + } - a { - text-decoration: underline; - transition: color 350ms; + a { + text-decoration: underline; + transition: color 350ms; - &:hover { - color: white; - } - } - & h2 { - color: var(--blue); - font-weight: bold; - } + &:hover { + color: white; + } + } + & h2 { + color: var(--blue); + font-weight: bold; + } - & .list { - display: grid; - row-gap: 20px; + & .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); + & > .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; - } + @media screen and (min-width: 950px) { + grid-template-columns: 150px 1fr 1fr; + } - &>.title { - font-size: 1.4em; - font-weight: bold; - text-align: right; + & > .title { + font-size: 1.4em; + font-weight: bold; + text-align: right; - &.special { - color: var(--yellow); - } + &.special { + color: var(--yellow); + } - &.highlight { - color: var(--blue); - } - } - - &>.time { - font-size: 1.3em; - display: grid; - row-gap: 8px; - } + &.highlight { + color: var(--blue); + } + } - &>.description { - padding-top: 20px; - color: var(--gray); - grid-column: 1 / 3; - font-size: 1.1em; - line-height: 1.2em; - display: grid; - row-gap: 20px; + & > .time { + font-size: 1.3em; + display: grid; + row-gap: 8px; + } - &>p { - line-height: 1.2em; - } + & > .description { + padding-top: 20px; + color: var(--gray); + grid-column: 1 / 3; + font-size: 1.1em; + line-height: 1.2em; + display: grid; + row-gap: 20px; - @media screen and (min-width: 950px) { - padding-top: 0px; - grid-column: 3 / 4; - } - } - } - } - -} + & > 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/Designathon23/components/SectionNavigation/SectionNavigation.module.scss b/src/app/pages/Designathons/Designathon23/components/SectionNavigation/SectionNavigation.module.scss index e7d47182..99b378ff 100644 --- a/src/app/pages/Designathons/Designathon23/components/SectionNavigation/SectionNavigation.module.scss +++ b/src/app/pages/Designathons/Designathon23/components/SectionNavigation/SectionNavigation.module.scss @@ -1,55 +1,57 @@ .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: black; - color: white; + 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: black; + color: white; - display: grid; - place-content: center start; - column-gap: 10px; - grid-auto-flow: column; - overflow: hidden; - overflow-x: scroll; + display: grid; + place-content: center start; + column-gap: 10px; + grid-auto-flow: column; + overflow: hidden; + overflow-x: scroll; - &>.item { - font-size: 0.8em; - padding: 8px 12px; - cursor: pointer; - border-radius: 999px; - background-color: transparent; - transition: background-color 250ms; + & > .item { + font-size: 0.8em; + padding: 8px 12px; + cursor: pointer; + border-radius: 999px; + background-color: transparent; + transition: background-color 250ms; - &:hover { - background-color: #5B4DE1; - color: black; - } - &>p { - white-space: nowrap; - } - } + &:hover { + background-color: #5b4de1; + color: black; + } + & > p { + white-space: nowrap; + } + } - @media screen and (min-width: 800px) { - padding: 0 32px; + @media screen and (min-width: 800px) { + padding: 0 32px; - &>.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(--blue); - color: black; - } - } - } + & > .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(--blue); + color: black; + } + } + } } diff --git a/src/app/pages/Designathons/Designathon23/components/Timer/Timer.module.scss b/src/app/pages/Designathons/Designathon23/components/Timer/Timer.module.scss index d92db5e2..5a06e1d8 100644 --- a/src/app/pages/Designathons/Designathon23/components/Timer/Timer.module.scss +++ b/src/app/pages/Designathons/Designathon23/components/Timer/Timer.module.scss @@ -1,44 +1,43 @@ .container { + & .text { + color: var(--white); + text-align: center; + font-size: 1em; + margin: 20px; - & .text { - color: var(--white); - text-align: center; - font-size: 1em; - margin: 20px; + @media screen and (min-width: 900px) { + font-size: 2em; + } + } - @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; - & .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; + @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; - } + & h3 { + font-size: 2.5em; + } - @media screen and (min-width: 900px) { - font-size: 1em; - padding: 15px; - } - } -} \ No newline at end of file + @media screen and (min-width: 900px) { + font-size: 1em; + padding: 15px; + } + } +} diff --git a/src/app/pages/Designathons/Designathon23/components/Timer/index.jsx b/src/app/pages/Designathons/Designathon23/components/Timer/index.jsx index 166f5719..6cacd338 100644 --- a/src/app/pages/Designathons/Designathon23/components/Timer/index.jsx +++ b/src/app/pages/Designathons/Designathon23/components/Timer/index.jsx @@ -1,45 +1,42 @@ -import { useEffect, useState } from 'react'; -import cn from './Timer.module.scss'; +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() + const { date, text } = breakpoints.find( + (breakpoint) => + breakpoint.date === "end" || + new Date().getTime() < new Date(breakpoint.date).getTime(), ); setText(text); - if(date === 'end') return setTimeLeft([]); + 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', + text: "seconds", }); timeDiff /= 60; timeBuilder.unshift({ time: parseInt(timeDiff % 60), - text: 'minutes', + text: "minutes", }); timeDiff /= 60; timeBuilder.unshift({ time: parseInt(timeDiff % 24), - text: 'hours', + text: "hours", }); timeDiff /= 24; - timeBuilder.unshift({ time: parseInt(timeDiff), text: 'days' }); + timeBuilder.unshift({ time: parseInt(timeDiff), text: "days" }); setTimeLeft(timeBuilder); - - }, 500); return () => clearImmediate(countdown); diff --git a/src/app/pages/Designathons/Designathon23/components/index.js b/src/app/pages/Designathons/Designathon23/components/index.js index b114bd10..fd749d7b 100644 --- a/src/app/pages/Designathons/Designathon23/components/index.js +++ b/src/app/pages/Designathons/Designathon23/components/index.js @@ -1,6 +1,6 @@ -export * from './Profile'; -export * from './Prizes'; -export * from './SectionNavigation'; -export * from './FAQ'; -export * from './Rules'; -export * from './Timer'; +export * from "./Profile"; +export * from "./Prizes"; +export * from "./SectionNavigation"; +export * from "./FAQ"; +export * from "./Rules"; +export * from "./Timer"; diff --git a/src/app/pages/Designathons/Designathon24/components/Profile/Modal/index.jsx b/src/app/pages/Designathons/Designathon24/components/Profile/Modal/index.jsx index 43847100..93182220 100644 --- a/src/app/pages/Designathons/Designathon24/components/Profile/Modal/index.jsx +++ b/src/app/pages/Designathons/Designathon24/components/Profile/Modal/index.jsx @@ -1,5 +1,5 @@ -import clsx from 'clsx'; -import cn from './Modal.module.scss'; +import clsx from "clsx"; +import cn from "./Modal.module.scss"; export const Modal = ({ toggleProfile, diff --git a/src/app/pages/Designathons/Designathon24/components/Profile/index.jsx b/src/app/pages/Designathons/Designathon24/components/Profile/index.jsx index 2573c84f..e270cc00 100644 --- a/src/app/pages/Designathons/Designathon24/components/Profile/index.jsx +++ b/src/app/pages/Designathons/Designathon24/components/Profile/index.jsx @@ -1,11 +1,11 @@ -import { useCallback, useState } from 'react'; -import cn from './Profile.module.scss'; -import { Modal } from './Modal'; +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), []); + const toggleProfile = useCallback(() => setOpen((p) => !p), []); return ( <> @@ -14,7 +14,16 @@ const Profile = ({ name, photo, role, ...rest }) => {

{name}

{role}
- {open && } + {open && ( + + )} ); }; diff --git a/src/app/pages/Designathons/Designathon24/components/Rules/index.jsx b/src/app/pages/Designathons/Designathon24/components/Rules/index.jsx index b9161b65..37bf73d7 100644 --- a/src/app/pages/Designathons/Designathon24/components/Rules/index.jsx +++ b/src/app/pages/Designathons/Designathon24/components/Rules/index.jsx @@ -1,23 +1,20 @@ -import { Text } from 'app/components'; -import { Section } from 'app/Symbols'; -import cn from './Rules.module.scss'; +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} diff --git a/src/app/pages/Designathons/Designathon24/components/Schedule/index.jsx b/src/app/pages/Designathons/Designathon24/components/Schedule/index.jsx index a46052f3..3f9f6cce 100644 --- a/src/app/pages/Designathons/Designathon24/components/Schedule/index.jsx +++ b/src/app/pages/Designathons/Designathon24/components/Schedule/index.jsx @@ -26,7 +26,7 @@ function Schedule({ schedule }) { className={clsx( cn.title, event.isHighlight && cn.highlight, - event.isSpecial && cn.special + event.isSpecial && cn.special, )} > {event.title} diff --git a/src/app/pages/Designathons/Designathon24/components/SectionNavigation/SectionNavigation.module.scss b/src/app/pages/Designathons/Designathon24/components/SectionNavigation/SectionNavigation.module.scss index 631b510e..2539055a 100644 --- a/src/app/pages/Designathons/Designathon24/components/SectionNavigation/SectionNavigation.module.scss +++ b/src/app/pages/Designathons/Designathon24/components/SectionNavigation/SectionNavigation.module.scss @@ -59,7 +59,9 @@ cursor: pointer; border-radius: 999px; background-color: transparent; - transition: background-color 250ms, color 250ms; + transition: + background-color 250ms, + color 250ms; &:hover { background-color: var(--des24-pink); diff --git a/src/app/pages/Designathons/Designathon24/components/SectionNavigation/index.jsx b/src/app/pages/Designathons/Designathon24/components/SectionNavigation/index.jsx index cb914597..46e39f62 100644 --- a/src/app/pages/Designathons/Designathon24/components/SectionNavigation/index.jsx +++ b/src/app/pages/Designathons/Designathon24/components/SectionNavigation/index.jsx @@ -47,7 +47,7 @@ const SectionNavigation = () => {
{currentTime > new Date( - "Feb 24 2023 19:00:00 GMT-0800 (Pacific Standard Time)" + "Feb 24 2023 19:00:00 GMT-0800 (Pacific Standard Time)", ).getTime() && ( { const { date, text } = breakpoints.find( (breakpoint) => breakpoint.date === "end" || - new Date().getTime() < new Date(breakpoint.date).getTime() + new Date().getTime() < new Date(breakpoint.date).getTime(), ); setText(text); diff --git a/src/app/pages/Designathons/Home/components/index.jsx b/src/app/pages/Designathons/Home/components/index.jsx index 232b9ee5..27ac722f 100644 --- a/src/app/pages/Designathons/Home/components/index.jsx +++ b/src/app/pages/Designathons/Home/components/index.jsx @@ -1 +1 @@ -export { EventListing } from './EventListing'; +export { EventListing } from "./EventListing"; diff --git a/src/app/pages/Designathons/components/Judges/Judges.module.scss b/src/app/pages/Designathons/components/Judges/Judges.module.scss index 0cb5ce80..aa09fe95 100644 --- a/src/app/pages/Designathons/components/Judges/Judges.module.scss +++ b/src/app/pages/Designathons/components/Judges/Judges.module.scss @@ -1,4 +1,4 @@ .container { - margin: 32px 0; - padding: 0; + margin: 32px 0; + padding: 0; } diff --git a/src/app/pages/Designathons/components/Judges/index.jsx b/src/app/pages/Designathons/components/Judges/index.jsx index 5978e689..4870d263 100644 --- a/src/app/pages/Designathons/components/Judges/index.jsx +++ b/src/app/pages/Designathons/components/Judges/index.jsx @@ -1,29 +1,29 @@ -import { Text } from 'app/components'; -import { Section } from 'app/Symbols'; -import clsx from 'clsx'; -import cn from './Judges.module.scss'; +import { Text } from "app/components"; +import { Section } from "app/Symbols"; +import clsx from "clsx"; +import cn from "./Judges.module.scss"; const Judges = ({ profiles }) => { return ( -
- Judges -
- {profiles.map(item => ( -
+
+ Judges +
+ {profiles.map((item) => ( +
{'headshot'} {/* {item.pronouns} */} - {item.name} + {item.name} {item.role} - {item.about} + {item.about}
))}
diff --git a/src/app/pages/Designathons/components/Program/index.jsx b/src/app/pages/Designathons/components/Program/index.jsx index 742c90b2..f757e80d 100644 --- a/src/app/pages/Designathons/components/Program/index.jsx +++ b/src/app/pages/Designathons/components/Program/index.jsx @@ -1,4 +1,3 @@ - // // Animation // @@ -6,16 +5,16 @@ var view, gl; var Main = {}; const RESOLUTION = window.devicePixelRatio; function initialize() { - view = document.getElementById('view'); + view = document.getElementById("view"); // gl = view.getContext("webgl2", {antialias: false, preserveDrawingBuffer: true, premultipliedAlpha: false }) - gl = view.getContext('webgl', { + gl = view.getContext("webgl", { antialias: false, preserveDrawingBuffer: true, premultipliedAlpha: false, }); - window.addEventListener('resize', resize); - window.addEventListener('scroll', scroll); + window.addEventListener("resize", resize); + window.addEventListener("scroll", scroll); Main.target = {}; Main.target.view = { @@ -50,24 +49,24 @@ function frame() { } Main.prog.render.prepareDraw(); - Main.prog.render.setUniform['u_T'](T + 0.5); + Main.prog.render.setUniform["u_T"](T + 0.5); Main.prog.render.draw(); if (run) requestAnimationFrame(frame); } function resize() { Main.target.view.w = Math.ceil( - view.getBoundingClientRect().width * RESOLUTION + view.getBoundingClientRect().width * RESOLUTION, ); Main.target.view.h = Math.ceil( - view.getBoundingClientRect().height * RESOLUTION + view.getBoundingClientRect().height * RESOLUTION, ); view.width = Main.target.view.w; view.height = Main.target.view.h; - Main.prog.render.setUniform['aspect']( - Main.target.view.w / Main.target.view.h + Main.prog.render.setUniform["aspect"]( + Main.target.view.w / Main.target.view.h, ); } function scroll() { @@ -108,52 +107,47 @@ class Program { const vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, Verticies, gl.STATIC_DRAW); - const positionAttribLocation = gl.getAttribLocation( - this.program, - 'vertex' - ); + const positionAttribLocation = gl.getAttribLocation(this.program, "vertex"); gl.vertexAttribPointer( positionAttribLocation, 2, gl.FLOAT, gl.FALSE, 2 * Float32Array.BYTES_PER_ELEMENT, - 0 + 0, ); gl.enableVertexAttribArray(positionAttribLocation); // Generate uniform setters this.setUniform = {}; this.uLocation = {}; - let uniformArgs = (vertCode + fragCode).matchAll( - 'uniform +(.+) +(.+);' - ); + let uniformArgs = (vertCode + fragCode).matchAll("uniform +(.+) +(.+);"); for (let i of uniformArgs) { let location = gl.getUniformLocation(this.program, i[2]); this.uLocation[i[2]] = location; - let setFuncName = 'uniform'; - if (!['sampler2D'].includes(i[1])) { + let setFuncName = "uniform"; + if (!["sampler2D"].includes(i[1])) { switch (i[1]) { - case 'float': - setFuncName += '1f'; + case "float": + setFuncName += "1f"; break; - case 'vec2': - setFuncName += '2fv'; + case "vec2": + setFuncName += "2fv"; break; - case 'vec3': - setFuncName += '3fv'; + case "vec3": + setFuncName += "3fv"; break; - case 'vec4': - setFuncName += '4fv'; + case "vec4": + setFuncName += "4fv"; break; - case 'int': - setFuncName += '1i'; + case "int": + setFuncName += "1i"; break; default: - alert('Undefined uniform type'); + alert("Undefined uniform type"); break; } - this.setUniform[i[2]] = value => { + this.setUniform[i[2]] = (value) => { gl.useProgram(this.program); gl[setFuncName](location, value); }; diff --git a/src/app/pages/Designathons/components/Rules/index.jsx b/src/app/pages/Designathons/components/Rules/index.jsx index 6ffee4d5..48e4f40e 100644 --- a/src/app/pages/Designathons/components/Rules/index.jsx +++ b/src/app/pages/Designathons/components/Rules/index.jsx @@ -1,21 +1,18 @@ -import { Text } from 'app/components'; -import { Section } from 'app/Symbols'; +import { Text } from "app/components"; +import { Section } from "app/Symbols"; const Rules = ({ rules }) => { return ( -
- Rules +
+ Rules {rules.map((rule, i) => ( -
+
{i + 1} @@ -27,4 +24,4 @@ const Rules = ({ rules }) => { ); }; -export { Rules} ; +export { Rules }; diff --git a/src/app/pages/Designathons/components/SectionNavigation/SectionNavigation.module.scss b/src/app/pages/Designathons/components/SectionNavigation/SectionNavigation.module.scss index c0b52600..93d9bc92 100644 --- a/src/app/pages/Designathons/components/SectionNavigation/SectionNavigation.module.scss +++ b/src/app/pages/Designathons/components/SectionNavigation/SectionNavigation.module.scss @@ -1,30 +1,30 @@ .container { - z-index: 100; - position: sticky; - top: 0; - right: 0; - left: 0; - width: 100%; - height: 88px; - padding: 0 32px; - box-shadow: 0 0 8px #0002; - background-color: black; - color: white; + z-index: 100; + position: sticky; + top: 0; + right: 0; + left: 0; + width: 100%; + height: 88px; + padding: 0 32px; + box-shadow: 0 0 8px #0002; + background-color: black; + color: white; - display: grid; - place-content: center start; - grid-auto-flow: column; + display: grid; + place-content: center start; + grid-auto-flow: column; - &>.item { - padding: 12px 24px; - cursor: pointer; - border-radius: 999px; - background-color: transparent; - transition: background-color 250ms; + & > .item { + padding: 12px 24px; + cursor: pointer; + border-radius: 999px; + background-color: transparent; + transition: background-color 250ms; - &:hover { - background-color: var(--sky); - color: black; - } - } + &:hover { + background-color: var(--sky); + color: black; + } + } } diff --git a/src/app/pages/Designathons/components/Workshop/Hosts.jsx b/src/app/pages/Designathons/components/Workshop/Hosts.jsx index 2066824f..612b2814 100644 --- a/src/app/pages/Designathons/components/Workshop/Hosts.jsx +++ b/src/app/pages/Designathons/components/Workshop/Hosts.jsx @@ -1,25 +1,25 @@ -import { Text } from 'app/components'; -import { Section } from 'app/Symbols'; +import { Text } from "app/components"; +import { Section } from "app/Symbols"; const Hosts = ({ profiles }) => (
- Workshop Hosts -
- {profiles.map(item => ( -
+ Workshop Hosts +
+ {profiles.map((item) => ( +
headshots - {item.name} + {item.name} {item.role} - {item.about} + {item.about}
))}
diff --git a/src/app/pages/Designathons/components/index.jsx b/src/app/pages/Designathons/components/index.jsx index cdb02b72..14597111 100644 --- a/src/app/pages/Designathons/components/index.jsx +++ b/src/app/pages/Designathons/components/index.jsx @@ -1,9 +1,9 @@ -import SectionNavigation from './SectionNavigation'; +import SectionNavigation from "./SectionNavigation"; -export { WinnerShowcase } from './WinnerShowcase'; -export { Judges } from './Judges'; -export { Prizes } from './Prizes'; -export { Rules } from './Rules'; -export { Hosts as WorkshopHosts } from './Workshop/Hosts'; +export { WinnerShowcase } from "./WinnerShowcase"; +export { Judges } from "./Judges"; +export { Prizes } from "./Prizes"; +export { Rules } from "./Rules"; +export { Hosts as WorkshopHosts } from "./Workshop/Hosts"; export { SectionNavigation }; diff --git a/src/app/pages/Events/Events.js b/src/app/pages/Events/Events.js index 719a2b11..81c3790c 100644 --- a/src/app/pages/Events/Events.js +++ b/src/app/pages/Events/Events.js @@ -1,12 +1,12 @@ -import { useState, useEffect } from 'react'; -import { Helmet } from 'react-helmet'; -import { Link } from 'react-router-dom'; +import { useState, useEffect } from "react"; +import { Helmet } from "react-helmet"; +import { Link } from "react-router-dom"; -import { Text } from 'app/components'; -import { Section, Space, Icon, LoadingD, PageIcon } from 'app/Symbols.js'; -import EVENT_DATA from 'assets/data/events/all.json'; +import { Text } from "app/components"; +import { Section, Space, Icon, LoadingD, PageIcon } from "app/Symbols.js"; +import EVENT_DATA from "assets/data/events/all.json"; -import EventCard from './components/EventCard/EventCard.js'; +import EventCard from "./components/EventCard/EventCard.js"; const Events = () => { const [eventData, setEventData] = useState(null); @@ -19,7 +19,7 @@ const Events = () => { let now = new Date(); for (let event of EVENT_DATA) { let time = new Date( - new Date(event.time).getTime() + event.duration * 60000 + new Date(event.time).getTime() + event.duration * 60000, ); if (now < time) { eventData.next = event; @@ -38,144 +38,122 @@ const Events = () => {
{eventData == null ? ( // Loading animation - + ) : // Large next event card eventData.next == null ? ( -
- - +
+ + Stay Tuned - + There are currently no upcoming events. - - - Be sure to{' '} - - join us - {' '} - for notifications. + + + Be sure to join us for notifications.
) : new Date(eventData.next.time) > new Date() ? ( <> -
- - - +
+ + + Upcoming Event
- + {formatRelativeDate(eventData.next.time)} ) : ( <> -
- - - +
+ + + Live Now
- + )}
{eventData != null && eventData.upcoming.length > 0 && ( <>
- + Next Upcoming Event - {eventData.upcoming.length > 1 ? 's' : ''} + {eventData.upcoming.length > 1 ? "s" : ""}
-
-
+
+
{eventData.upcoming.map((event, i) => { - return ( - - ); + return ; })}
)}
- Past Events + Past Events
-
-
+
+
{eventData != null && eventData.past .slice(0, 12) - .map(event => ( - + .map((event) => ( + ))}
- - View all events + + View all events
-
+
- - - We host events with a wide range of topics about each - week during the academic quarter. + + + We host events with a wide range of topics about each week during + the academic quarter. - - Including UX design concepts, graphic design techniques, - interactive advice from industry speakers, social - events, and more. + + Including UX design concepts, graphic design techniques, interactive + advice from industry speakers, social events, and more. - + Have a suggestion of something you would like to see?
- Submit your feedback to{' '} - - hello@designatuci.com - - . + Submit your feedback to{" "} + hello@designatuci.com.
@@ -185,50 +163,51 @@ const Events = () => { function LargeEvent(props) { return ( -
- +
+ {props.event.title} -
-
- - - - {formatDate(props.event.time)} - +
+
+ + + {formatDate(props.event.time)}
-
- ); } @@ -286,14 +265,14 @@ export default Events; function formatDate(date) { let time = new Date(date); - let str = ''; - str += mapDay(time.getDay()) + ', '; - str += mapMonth(time.getMonth()) + ' '; - str += time.getDate() + ' at '; - str += getHour(time.getHours()) + ':'; - str += getMinutes(time.getMinutes()) + ' '; + let str = ""; + str += mapDay(time.getDay()) + ", "; + str += mapMonth(time.getMonth()) + " "; + str += time.getDate() + " at "; + str += getHour(time.getHours()) + ":"; + str += getMinutes(time.getMinutes()) + " "; str += getPeriod(time.getHours()); - str += ' your time'; + str += " your time"; return str; } function formatRelativeDate(date) { @@ -351,9 +330,9 @@ function formatRelativeDate(date) { return `${months} months ago`; } } else if (days < 365) { - return 'Several months ago'; + return "Several months ago"; } else { - return 'Over a year ago'; + return "Over a year ago"; } } } @@ -366,42 +345,42 @@ function getHour(h) { } function getMinutes(m) { if (m < 10) { - return '0' + m; + return "0" + m; } else { return m; } } function getPeriod(h) { if (h >= 12) { - return 'PM'; + return "PM"; } else { - return 'AM'; + return "AM"; } } const days = [ - 'Sunday', - 'Monday', - 'Tuesday', - 'Wednesday', - 'Thursday', - 'Friday', - 'Saturday', + "Sunday", + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", ]; const months = [ - 'Jan', - 'Feb', - 'Mar', - 'Apr', - 'May', - 'Jun', - 'Jul', - 'Aug', - 'Sep', - 'Oct', - 'Nov', - 'Dec', + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", ]; -const mapDay = n => days[n]; -const mapMonth = n => months[n]; +const mapDay = (n) => days[n]; +const mapMonth = (n) => months[n]; diff --git a/src/app/pages/Events/Events.module.scss b/src/app/pages/Events/Events.module.scss index a2a82e9d..48514080 100644 --- a/src/app/pages/Events/Events.module.scss +++ b/src/app/pages/Events/Events.module.scss @@ -1,4 +1,2 @@ .container { - } - diff --git a/src/app/pages/Events/EventsAll.js b/src/app/pages/Events/EventsAll.js index 4b6cf752..5b6db043 100644 --- a/src/app/pages/Events/EventsAll.js +++ b/src/app/pages/Events/EventsAll.js @@ -1,10 +1,10 @@ -import { Helmet } from 'react-helmet'; +import { Helmet } from "react-helmet"; -import { Text } from 'app/components'; -import { Section, LoadingD } from 'app/Symbols.js'; -import EVENT_DATA from 'assets/data/events/all.json'; +import { Text } from "app/components"; +import { Section, LoadingD } from "app/Symbols.js"; +import EVENT_DATA from "assets/data/events/all.json"; -import { EventCard } from './components'; +import { EventCard } from "./components"; const EventsAll = () => { return ( @@ -12,24 +12,21 @@ const EventsAll = () => { Event Archive – Design at UCI -
- All Events +
+ All Events
-
+
{EVENT_DATA == null ? ( // Loading animation - + ) : ( // Large next event card
- {EVENT_DATA.map(event => ( - + {EVENT_DATA.map((event) => ( + ))}
)} diff --git a/src/app/pages/Events/components/EventCard/EventCard.js b/src/app/pages/Events/components/EventCard/EventCard.js index a2b9ea1c..b2765e69 100644 --- a/src/app/pages/Events/components/EventCard/EventCard.js +++ b/src/app/pages/Events/components/EventCard/EventCard.js @@ -1,55 +1,51 @@ -import clsx from 'clsx'; +import clsx from "clsx"; -import { Text } from 'app/components'; -import { PageIcon } from 'app/Symbols'; +import { Text } from "app/components"; +import { PageIcon } from "app/Symbols"; -import formatRelativeDate from '../../controllers/formateDate'; +import formatRelativeDate from "../../controllers/formateDate"; -import cn from './EventCard.module.scss'; +import cn from "./EventCard.module.scss"; const EventCard = ({ ...event }) => ( diff --git a/src/app/pages/Events/components/EventCard/EventCard.module.scss b/src/app/pages/Events/components/EventCard/EventCard.module.scss index a2a82e9d..48514080 100644 --- a/src/app/pages/Events/components/EventCard/EventCard.module.scss +++ b/src/app/pages/Events/components/EventCard/EventCard.module.scss @@ -1,4 +1,2 @@ .container { - } - diff --git a/src/app/pages/Events/components/EventCard/index.js b/src/app/pages/Events/components/EventCard/index.js index 002bc8ca..feef0f30 100644 --- a/src/app/pages/Events/components/EventCard/index.js +++ b/src/app/pages/Events/components/EventCard/index.js @@ -1,3 +1,3 @@ -import EventCard from './EventCard.js'; +import EventCard from "./EventCard.js"; export default EventCard; diff --git a/src/app/pages/Events/components/index.js b/src/app/pages/Events/components/index.js index 898247f5..584e9ad9 100644 --- a/src/app/pages/Events/components/index.js +++ b/src/app/pages/Events/components/index.js @@ -1,5 +1,3 @@ -import EventCard from './EventCard'; +import EventCard from "./EventCard"; -export { - EventCard, -} +export { EventCard }; diff --git a/src/app/pages/Events/controllers/formateDate.js b/src/app/pages/Events/controllers/formateDate.js index 595d8c93..f3da1a76 100644 --- a/src/app/pages/Events/controllers/formateDate.js +++ b/src/app/pages/Events/controllers/formateDate.js @@ -42,9 +42,9 @@ function formatRelativeDate(date) { return `${months} months ago`; } } else if (days < 365) { - return 'Several months ago'; + return "Several months ago"; } else { - return 'Over a year ago'; + return "Over a year ago"; } } } diff --git a/src/app/pages/Hey.js b/src/app/pages/Hey.js index ccd2f68f..95097e70 100644 --- a/src/app/pages/Hey.js +++ b/src/app/pages/Hey.js @@ -1,101 +1,101 @@ -import { Helmet } from 'react-helmet'; -import { Link } from 'react-router-dom'; +import { Helmet } from "react-helmet"; +import { Link } from "react-router-dom"; -import { EmailForm, Text } from 'app/components'; -import { Section, Space, Icon, PageIcon } from 'app/Symbols.js'; -import SHORT_SOCIALS from 'assets/data/shortSocials.json'; +import { EmailForm, Text } from "app/components"; +import { Section, Space, Icon, PageIcon } from "app/Symbols.js"; +import SHORT_SOCIALS from "assets/data/shortSocials.json"; const Hey = () => ( <> Hey – Design at UCI -
- +
+ Hello, there - - - + + + Website - - designatuci.com + + designatuci.com -
- {SHORT_SOCIALS.map(social => ( +
- + Newsletter Sign-up
- + Sticker Order Form - - Ways to Help the BLM Movement{' '} + + Ways to Help the BLM Movement{" "} diff --git a/src/app/pages/Home/Home.js b/src/app/pages/Home/Home.js index 5335c7c3..894f2811 100644 --- a/src/app/pages/Home/Home.js +++ b/src/app/pages/Home/Home.js @@ -1,38 +1,38 @@ -import clsx from 'clsx'; -import { Helmet } from 'react-helmet'; -import { Link } from 'react-router-dom'; +import clsx from "clsx"; +import { Helmet } from "react-helmet"; +import { Link } from "react-router-dom"; -import { Text } from 'app/components'; -import { Section, Icon, Space, Photo } from 'app/Symbols.js'; +import { Text } from "app/components"; +import { Section, Icon, Space, Photo } from "app/Symbols.js"; -import cn from './Home.module.scss'; +import cn from "./Home.module.scss"; const Home = () => (
Welcome – Design at UCI -
-
- - - +
+
+ + + Design at UCI
- {'A community for all digital designers to connect, learn, and innovate' - .split(' ') + {"A community for all digital designers to connect, learn, and innovate" + .split(" ") .map((word, i) => ( {word} @@ -40,156 +40,150 @@ const Home = () => ( ))} - - The club for UI, UX, and graphic design at the University of - California Irvine. + + The club for UI, UX, and graphic design at the University of California + Irvine. -
- - +
+ + Get involved
-
+
-
-
+
+
-
- - Learn more about{' '} - +
+ + Learn more about{" "} + Graphic Design, - {' '} - + {" "} + UX Design, - {' '} - + {" "} + Creative Software, - {' '} - + {" "} + and much more in our live and interactive workshops. - - - Hosted nearly every week during the academic quarter, - you'll get the chance to level up your design game and - make new friends with fellow designers. + + + Hosted nearly every week during the academic quarter, you'll get the + chance to level up your design game and make new friends with fellow + designers. - - - + + + Found in our events
- -
+ +
-
- - Listen to{' '} - +
+ + Listen to{" "} + professional designers - {' '} - - working at the top companies, and get exclusive - insight to - {' '} - + {" "} + + working at the top companies, and get exclusive insight to + {" "} + industry practices. - - + + We feature speakers across all fields. Get a chance to ask your questions and receive a professional's advice. - - - + + + Found in our events
- -
+ +
-
- - Get involved in our special programs, like{' '} - +
+ + Get involved in our special programs, like{" "} + Design-a-thon - {' '} - + {" "} + or - {' '} - + {" "} + Project Teams, - {' '} - + {" "} + for a fun and valuable experience. - - - Meet other designers, get exclusive perks, and expand - your portfolio with fresh new work. + + + Meet other designers, get exclusive perks, and expand your portfolio + with fresh new work. - - - + + + See our resources
-
- -
+
+ +
{"Do you love design? Let's keep in touch." - .split(' ') + .split(" ") .map((word, i) => ( {word} @@ -197,40 +191,37 @@ const Home = () => ( ))} - - - + + + Join Design at UCI
-
+
- +
-
-
- - We're focused on building a friendly community that helps - striving designers. +
+
+ + We're focused on building a friendly community that helps striving + designers. - - + + Learn more about us diff --git a/src/app/pages/Home/Home.module.scss b/src/app/pages/Home/Home.module.scss index 438ff257..8356a4ba 100644 --- a/src/app/pages/Home/Home.module.scss +++ b/src/app/pages/Home/Home.module.scss @@ -1,9 +1,13 @@ .container { - .hero { - margin-bottom: 0; - z-index: 0; - position: absolute; - left: 0; right: 0; bottom: 0; top: 0; - background: url('https://designatuci.com/static/photo/hero.png') bottom / calc(768px + 38vw) no-repeat; - } + .hero { + margin-bottom: 0; + z-index: 0; + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 0; + background: url("https://designatuci.com/static/photo/hero.png") bottom / + calc(768px + 38vw) no-repeat; + } } diff --git a/src/app/pages/Home/index.js b/src/app/pages/Home/index.js index 69df3b87..211cc9a4 100644 --- a/src/app/pages/Home/index.js +++ b/src/app/pages/Home/index.js @@ -1,4 +1,3 @@ -import Home from './Home.js'; +import Home from "./Home.js"; export default Home; - diff --git a/src/app/pages/Houses/sections/FAQ.js b/src/app/pages/Houses/sections/FAQ.js index dc93197a..1cc5c90d 100644 --- a/src/app/pages/Houses/sections/FAQ.js +++ b/src/app/pages/Houses/sections/FAQ.js @@ -34,7 +34,7 @@ function FAQ() { closed={
diff --git a/src/app/pages/Houses/sections/FAQ.module.scss b/src/app/pages/Houses/sections/FAQ.module.scss index a8399233..4c1ac48f 100644 --- a/src/app/pages/Houses/sections/FAQ.module.scss +++ b/src/app/pages/Houses/sections/FAQ.module.scss @@ -5,7 +5,9 @@ display: grid; grid-template-columns: auto 1fr; border: 2px solid transparent; - transition: border-color 250ms, background-color 250ms; + transition: + border-color 250ms, + background-color 250ms; &.opened { border: 2px solid var(--silver); diff --git a/src/app/pages/Join/Join.js b/src/app/pages/Join/Join.js index 46e22d70..bd7abb51 100644 --- a/src/app/pages/Join/Join.js +++ b/src/app/pages/Join/Join.js @@ -1,76 +1,73 @@ -import { Helmet } from 'react-helmet'; -import { Link } from 'react-router-dom'; +import { Helmet } from "react-helmet"; +import { Link } from "react-router-dom"; -import { EmailForm, Text } from 'app/components'; -import { Section, Icon, PageIcon } from 'app/Symbols.js'; -import SHORT_SOCIALS from 'assets/data/shortSocials.json'; +import { EmailForm, Text } from "app/components"; +import { Section, Icon, PageIcon } from "app/Symbols.js"; +import SHORT_SOCIALS from "assets/data/shortSocials.json"; -import cn from './Join.module.scss'; +import cn from "./Join.module.scss"; const Join = () => ( <> Join – Design at UCI -
- - +
+ + Get Involved - + Design at UCI is free for everyone - - Join our newsletter and follow our social media to get notifications about - what's happening. + + Join our newsletter and follow our social media to get notifications + about what's happening.
Then get involved with what interests you!
-
+
- + Newsletter Sign-up
-
- {SHORT_SOCIALS.map(social => ( +
+ {SHORT_SOCIALS.map((social) => ( - - - + + + {social.name} ))}
-
- +
+ We can't wait to see you at our next event! - - + + Check out our events tab - - + + Explore our other resources diff --git a/src/app/pages/Join/Join.module.scss b/src/app/pages/Join/Join.module.scss index 02bbfd9e..a0e5fdcd 100644 --- a/src/app/pages/Join/Join.module.scss +++ b/src/app/pages/Join/Join.module.scss @@ -1,7 +1,7 @@ .icon { - width: 32px; - height: 32px; - position: absolute; - top: 32px; - right: 32px; + width: 32px; + height: 32px; + position: absolute; + top: 32px; + right: 32px; } diff --git a/src/app/pages/Join/index.js b/src/app/pages/Join/index.js index acf1d628..c1a86d1d 100644 --- a/src/app/pages/Join/index.js +++ b/src/app/pages/Join/index.js @@ -1,4 +1,3 @@ -import Join from './Join'; +import Join from "./Join"; export default Join; - diff --git a/src/app/pages/Mentorship/Mentorship.js b/src/app/pages/Mentorship/Mentorship.js index c49a47c9..b6b0049d 100644 --- a/src/app/pages/Mentorship/Mentorship.js +++ b/src/app/pages/Mentorship/Mentorship.js @@ -1,9 +1,9 @@ -import { Helmet } from 'react-helmet'; +import { Helmet } from "react-helmet"; -import { Text } from 'app/components'; -import { Icon, Section, Space } from 'app/Symbols.js'; +import { Text } from "app/components"; +import { Icon, Section, Space } from "app/Symbols.js"; -import { Link } from 'react-router-dom'; +import { Link } from "react-router-dom"; const Merch = () => { return ( @@ -11,40 +11,35 @@ const Merch = () => { Mentorship – Design at UCI -
- - +
+ + Mentorship - +
- + Design at UCI Mentorship Applications are now closed. - - Those who applied should expect an email during Week 8 regarding mentorship fams! + + Those who applied should expect an email during Week 8 regarding + mentorship fams!
- What is the Mentorship Program? - - Our new mentorship program aims to increase design - community bonds, elevate and support our emerging - designers, and allow our members to form more - personalized connections within the club. Mentees are - placed into a family with a design mentor, matched by - their design interests, experience, and personality. + What is the Mentorship Program? + + Our new mentorship program aims to increase design community bonds, + elevate and support our emerging designers, and allow our members to + form more personalized connections within the club. Mentees are + placed into a family with a design mentor, matched by their design + interests, experience, and personality. - - To get involved, join us to get + + To get involved, join us to get notifications about when the next applications come out!
diff --git a/src/app/pages/Mentorship/Mentorship.module.scss b/src/app/pages/Mentorship/Mentorship.module.scss index 11be4b36..48514080 100644 --- a/src/app/pages/Mentorship/Mentorship.module.scss +++ b/src/app/pages/Mentorship/Mentorship.module.scss @@ -1,3 +1,2 @@ .container { - } diff --git a/src/app/pages/Merch/Merch.js b/src/app/pages/Merch/Merch.js index d8f5ae62..e73f7fba 100644 --- a/src/app/pages/Merch/Merch.js +++ b/src/app/pages/Merch/Merch.js @@ -1,32 +1,29 @@ -import clsx from 'clsx'; -import { Helmet } from 'react-helmet'; +import clsx from "clsx"; +import { Helmet } from "react-helmet"; -import { Text } from 'app/components'; -import { Section } from 'app/Symbols.js'; -import MERCH_LIST from 'assets/data/merchList.json'; +import { Text } from "app/components"; +import { Section } from "app/Symbols.js"; +import MERCH_LIST from "assets/data/merchList.json"; -import { MerchDropListing } from './components'; +import { MerchDropListing } from "./components"; -import cn from './Merch.module.scss'; +import cn from "./Merch.module.scss"; const Merch = () => ( <> Merch – Design at UCI -
- +
+ Merchandise - + Help support Design at UCI — so we can continue to host our free programs and events.
- {MERCH_LIST.map(release => ( + {MERCH_LIST.map((release) => ( ))} diff --git a/src/app/pages/Merch/Merch.module.scss b/src/app/pages/Merch/Merch.module.scss index e38481bf..4d28bfcc 100644 --- a/src/app/pages/Merch/Merch.module.scss +++ b/src/app/pages/Merch/Merch.module.scss @@ -1,43 +1,43 @@ -@import 'app/styles/variables'; +@import "app/styles/variables"; .holo-effect1, .holo-effect2 { - opacity: 0; - height: 100%; - mix-blend-mode: darken; - filter: saturate(3); - animation: effect-pulse 2s cubic-bezier(.62, .01, .51, 1) infinite; + opacity: 0; + height: 100%; + mix-blend-mode: darken; + filter: saturate(3); + animation: effect-pulse 2s cubic-bezier(0.62, 0.01, 0.51, 1) infinite; } .holo-effect2 { - animation: effect-pulse 2s 0.2s cubic-bezier(.62, .01, .51, 1) infinite; + animation: effect-pulse 2s 0.2s cubic-bezier(0.62, 0.01, 0.51, 1) infinite; } @keyframes effect-pulse { - 0% { - opacity: 0; - filter: saturate(3) hue-rotate(0deg); - } - - 40% { - opacity: 0.38; - filter: saturate(3) hue-rotate(-360deg); - } - - 80% { - opacity: 0; - filter: saturate(3) hue-rotate(0); - } + 0% { + opacity: 0; + filter: saturate(3) hue-rotate(0deg); + } + + 40% { + opacity: 0.38; + filter: saturate(3) hue-rotate(-360deg); + } + + 80% { + opacity: 0; + filter: saturate(3) hue-rotate(0); + } } -.split4>div>div { - height: unset; +.split4 > div > div { + height: unset; } .header { - background: linear-gradient(10deg, $silver -50%, $green); + background: linear-gradient(10deg, $silver -50%, $green); - &>.text { - text-shadow: 0 8px 16px $green; - } + & > .text { + text-shadow: 0 8px 16px $green; + } } diff --git a/src/app/pages/Merch/components/MerchDropListing/MerchDropListing.js b/src/app/pages/Merch/components/MerchDropListing/MerchDropListing.js index d5cdeb1d..7b3ddea2 100644 --- a/src/app/pages/Merch/components/MerchDropListing/MerchDropListing.js +++ b/src/app/pages/Merch/components/MerchDropListing/MerchDropListing.js @@ -1,11 +1,11 @@ -import clsx from 'clsx'; +import clsx from "clsx"; -import { Text } from 'app/components'; -import { Section, Space } from 'app/Symbols'; +import { Text } from "app/components"; +import { Section, Space } from "app/Symbols"; -import MerchItem from '../MerchItem'; +import MerchItem from "../MerchItem"; -import cn from './MerchDropListing.module.scss'; +import cn from "./MerchDropListing.module.scss"; const MerchDropListing = ({ name, @@ -15,32 +15,32 @@ const MerchDropListing = ({ items, path, }) => ( -
-
- {name} -
+
+
+ {name} +
{inStock ? ( <> - Limited Stock + Limited Stock Buy Here ) : ( - Sold out + Sold out )} - {description} + {description}
- -
- {items.map(item => ( + +
+ {items.map((item) => ( ))}
diff --git a/src/app/pages/Merch/components/MerchDropListing/MerchDropListing.module.scss b/src/app/pages/Merch/components/MerchDropListing/MerchDropListing.module.scss index 54e06d75..d2484f5e 100644 --- a/src/app/pages/Merch/components/MerchDropListing/MerchDropListing.module.scss +++ b/src/app/pages/Merch/components/MerchDropListing/MerchDropListing.module.scss @@ -1,5 +1,5 @@ .container { - & a.link:hover { - text-decoration: underline; - } + & a.link:hover { + text-decoration: underline; + } } diff --git a/src/app/pages/Merch/components/MerchDropListing/index.js b/src/app/pages/Merch/components/MerchDropListing/index.js index 91b7cfe0..dcb85383 100644 --- a/src/app/pages/Merch/components/MerchDropListing/index.js +++ b/src/app/pages/Merch/components/MerchDropListing/index.js @@ -1,3 +1,3 @@ -import MerchDropListing from './MerchDropListing'; +import MerchDropListing from "./MerchDropListing"; export default MerchDropListing; diff --git a/src/app/pages/Merch/components/MerchItem/MerchItem.js b/src/app/pages/Merch/components/MerchItem/MerchItem.js index 4406ad63..9f6c7f1c 100644 --- a/src/app/pages/Merch/components/MerchItem/MerchItem.js +++ b/src/app/pages/Merch/components/MerchItem/MerchItem.js @@ -1,8 +1,8 @@ -import { Link } from 'react-router-dom'; +import { Link } from "react-router-dom"; -import { Text } from 'app/components'; +import { Text } from "app/components"; -import cn from './MerchItem.module.scss'; +import cn from "./MerchItem.module.scss"; const MerchItem = ({ path, ...item }) => (
@@ -28,12 +28,12 @@ const MerchItem = ({ path, ...item }) => ( )} */}
{item?.name} - {item?.note?.type === 'link' ? ( - - {item.note.content} + {item?.note?.type === "link" ? ( + + {item.note.content} ) : ( - {item?.note} + {item?.note} )}
diff --git a/src/app/pages/Merch/components/MerchItem/MerchItem.module.scss b/src/app/pages/Merch/components/MerchItem/MerchItem.module.scss index 64f44786..2938d09e 100644 --- a/src/app/pages/Merch/components/MerchItem/MerchItem.module.scss +++ b/src/app/pages/Merch/components/MerchItem/MerchItem.module.scss @@ -1,35 +1,39 @@ .container { - width: 100%; - display: grid; - grid-auto-flow: row; - row-gap: 16px; - height: max-content; + width: 100%; + display: grid; + grid-auto-flow: row; + row-gap: 16px; + height: max-content; - &>.aspect { - border-radius: 8px; - position: relative; - width: 100%; - padding-bottom: 100%; - overflow: hidden; - background: rgb(240, 240, 240); - background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(227, 227, 232, 1) 92%); + & > .aspect { + border-radius: 8px; + position: relative; + width: 100%; + padding-bottom: 100%; + overflow: hidden; + background: rgb(240, 240, 240); + background: linear-gradient( + 0deg, + rgba(240, 240, 240, 1) 0%, + rgba(227, 227, 232, 1) 92% + ); - &>img.photo { - box-sizing: border-box; - position: absolute; - width: 100%; - top: 50%; - transform: translate(0%, -50%); - background-position: center; - background-size: cover; - border-radius: 12px; - overflow: hidden; - } - } + & > img.photo { + box-sizing: border-box; + position: absolute; + width: 100%; + top: 50%; + transform: translate(0%, -50%); + background-position: center; + background-size: cover; + border-radius: 12px; + overflow: hidden; + } + } - &>.content { - padding: 0 5px; - display: grid; - row-gap: 16px; - } + & > .content { + padding: 0 5px; + display: grid; + row-gap: 16px; + } } diff --git a/src/app/pages/Merch/components/MerchItem/index.js b/src/app/pages/Merch/components/MerchItem/index.js index d737b64b..53285e9d 100644 --- a/src/app/pages/Merch/components/MerchItem/index.js +++ b/src/app/pages/Merch/components/MerchItem/index.js @@ -1,3 +1,3 @@ -import MerchItem from './MerchItem'; +import MerchItem from "./MerchItem"; export default MerchItem; diff --git a/src/app/pages/Merch/components/index.js b/src/app/pages/Merch/components/index.js index 9ec49595..1d428b0e 100644 --- a/src/app/pages/Merch/components/index.js +++ b/src/app/pages/Merch/components/index.js @@ -1,4 +1,4 @@ -import MerchDropListing from './MerchDropListing'; -import MerchItem from './MerchItem'; +import MerchDropListing from "./MerchDropListing"; +import MerchItem from "./MerchItem"; export { MerchDropListing, MerchItem }; diff --git a/src/app/pages/Merch/index.js b/src/app/pages/Merch/index.js index 6a0ff615..2bda6267 100644 --- a/src/app/pages/Merch/index.js +++ b/src/app/pages/Merch/index.js @@ -1,3 +1,3 @@ -import Merch from './Merch'; +import Merch from "./Merch"; export default Merch; diff --git a/src/app/pages/Merch/pages/Shirt22/Shirt22.js b/src/app/pages/Merch/pages/Shirt22/Shirt22.js index 1534dce8..b961e0a5 100644 --- a/src/app/pages/Merch/pages/Shirt22/Shirt22.js +++ b/src/app/pages/Merch/pages/Shirt22/Shirt22.js @@ -1,23 +1,23 @@ -import clsx from 'clsx'; -import { Helmet } from 'react-helmet'; -import PhotoAlbum from 'react-photo-album'; -import { Link } from 'react-router-dom'; +import clsx from "clsx"; +import { Helmet } from "react-helmet"; +import PhotoAlbum from "react-photo-album"; +import { Link } from "react-router-dom"; -import { Section } from 'app/Symbols.js'; +import { Section } from "app/Symbols.js"; -import IMG1 from './assets/1.jpg'; -import IMG2 from './assets/2.jpg'; -import IMG3 from './assets/3.jpg'; -import IMG4 from './assets/4.jpg'; -import IMG5 from './assets/5.jpg'; -import IMG6 from './assets/6.jpeg'; -import IMG7 from './assets/7.jpeg'; -import IMG9 from './assets/9.png'; -import IMG10 from './assets/10.png'; +import IMG1 from "./assets/1.jpg"; +import IMG2 from "./assets/2.jpg"; +import IMG3 from "./assets/3.jpg"; +import IMG4 from "./assets/4.jpg"; +import IMG5 from "./assets/5.jpg"; +import IMG6 from "./assets/6.jpeg"; +import IMG7 from "./assets/7.jpeg"; +import IMG9 from "./assets/9.png"; +import IMG10 from "./assets/10.png"; // import IMG11 from './assets/11.png'; // import IMG8 from './assets/8.jpeg'; -import cn from './Shirt22.module.scss'; +import cn from "./Shirt22.module.scss"; const Shirt22 = () => { const photos = [ @@ -68,34 +68,33 @@ const Shirt22 = () => { Merch – Spring '22 Shirt -
+
- Merch {'>'} + Merch {">"} Spring '22 Shirt

Spring '22 Shirt

- $20 •{' '} + $20 •{" "} - Out of Stock{' '} + Out of Stock{" "}

- Support Design at UCI with style by purchasing our - limited-edition embroidered t-shirts! Rock your UC - Irvine pride and our club's colors — comes in unisex - Small, Medium, and Large. + Support Design at UCI with style by purchasing our limited-edition + embroidered t-shirts! Rock your UC Irvine pride and our club's + colors — comes in unisex Small, Medium, and Large.

{/* {
{/* shirt with embroidered uci logo */} - shirt with embroidered uci logo + shirt with embroidered uci logo
-

+

More Photos

- +
diff --git a/src/app/pages/Merch/pages/Shirt22/Shirt22.module.scss b/src/app/pages/Merch/pages/Shirt22/Shirt22.module.scss index 6c74d487..24e9cfd9 100644 --- a/src/app/pages/Merch/pages/Shirt22/Shirt22.module.scss +++ b/src/app/pages/Merch/pages/Shirt22/Shirt22.module.scss @@ -1,81 +1,78 @@ .container { - margin: 100px 0 300px; + margin: 100px 0 300px; - @media screen and (max-width: 700px) { - margin: 0px 0 50px; + @media screen and (max-width: 700px) { + margin: 0px 0 50px; - & .gallery { - &>h1 { - display: none; - } - } + & .gallery { + & > h1 { + display: none; + } + } + } - } + & .twofold { + display: grid; + grid-template-columns: min(40vw, 600px) 1fr; - & .twofold { - display: grid; - grid-template-columns: min(40vw, 600px) 1fr; + @media screen and (max-width: 700px) { + grid-template-columns: 1fr; + font-size: 0.8em; + & .image img { + display: none; + } + } - @media screen and (max-width: 700px) { - grid-template-columns: 1fr; - font-size: 0.8em; - & .image img { - display: none; - } - } + & .breadcrumb { + margin: 20px 0px 40px; + display: grid; + grid-template-columns: auto auto auto auto 1fr; + column-gap: 10px; + } - & .breadcrumb { - margin: 20px 0px 40px; - display: grid; - grid-template-columns: auto auto auto auto 1fr; - column-gap: 10px; - } + & .label { + margin-left: -4px; + font-size: 4em; + font-weight: bold; + } - & .label { - margin-left: -4px; - font-size: 4em; - font-weight: bold; - } + & p.description { + font-size: 1.1em; + line-height: 1.5em; + margin: 40px 0; + } - & p.description { - font-size: 1.1em; - line-height: 1.5em; - margin: 40px 0; - } + & .buy { + // border-radius: 30px; + // background-color: var(--blue); + // color: white; + // padding: 15px 30px; + font-weight: bold; + } - & .buy { - // border-radius: 30px; - // background-color: var(--blue); - // color: white; - // padding: 15px 30px; - font-weight: bold; - } + & > .image { + position: relative; + display: grid; + place-content: center right; + & > img { + max-width: 400px; + object-fit: contain; + object-position: center; + height: auto; + width: 100%; + box-shadow: 0 0 5px 1px #00000088; + border-radius: 2px; + // transform: rotateZ(5deg); - &>.image { - position: relative; - display: grid; - place-content: center right; - - &>img { - max-width: 400px; - object-fit: contain; - object-position: center; - height: auto; - width: 100%; - box-shadow: 0 0 5px 1px #00000088; - border-radius: 2px; - // transform: rotateZ(5deg); - - - &.behind { - z-index: 100; - position: absolute; - top: 0vh; - right: 8vw; - transform: rotateZ(-10deg); - } - } - } - } + &.behind { + z-index: 100; + position: absolute; + top: 0vh; + right: 8vw; + transform: rotateZ(-10deg); + } + } + } + } } diff --git a/src/app/pages/Merch/pages/Shirt22/index.js b/src/app/pages/Merch/pages/Shirt22/index.js index 85541aef..6494e9ab 100644 --- a/src/app/pages/Merch/pages/Shirt22/index.js +++ b/src/app/pages/Merch/pages/Shirt22/index.js @@ -1,3 +1,3 @@ -import Shirt22 from './Shirt22'; +import Shirt22 from "./Shirt22"; export default Shirt22; diff --git a/src/app/pages/NotFound/NotFound.js b/src/app/pages/NotFound/NotFound.js index 6f250a01..be4ee1d5 100644 --- a/src/app/pages/NotFound/NotFound.js +++ b/src/app/pages/NotFound/NotFound.js @@ -1,52 +1,47 @@ -import { Helmet } from 'react-helmet'; -import { Link } from 'react-router-dom'; +import { Helmet } from "react-helmet"; +import { Link } from "react-router-dom"; -import { Text } from 'app/components'; -import { Section, Space } from 'app/Symbols.js'; +import { Text } from "app/components"; +import { Section, Space } from "app/Symbols.js"; const NotFound = () => { - return ( <> 404 – Design at UCI -
-
-
+
+
+
404 - + Page Not Found
- - + + The URL - - {window.location.hostname + - window.location.pathname} + + {window.location.hostname + window.location.pathname} does not exist. - - If you believe this is a mistake, please{' '} - - contact us - - . + + If you believe this is a mistake, please{" "} + contact us.
- Sitemap Directory + Sitemap Directory
); diff --git a/src/app/pages/NotFound/NotFound.module.scss b/src/app/pages/NotFound/NotFound.module.scss index a2a82e9d..48514080 100644 --- a/src/app/pages/NotFound/NotFound.module.scss +++ b/src/app/pages/NotFound/NotFound.module.scss @@ -1,4 +1,2 @@ .container { - } - diff --git a/src/app/pages/NotFound/index.js b/src/app/pages/NotFound/index.js index 1dac7e49..a3727b7b 100644 --- a/src/app/pages/NotFound/index.js +++ b/src/app/pages/NotFound/index.js @@ -1,4 +1,3 @@ -import NotFound from './NotFound'; +import NotFound from "./NotFound"; export default NotFound; - diff --git a/src/app/pages/ProjectTeams/ProjectTeams.js b/src/app/pages/ProjectTeams/ProjectTeams.js index dcc85f4c..da2a66a4 100644 --- a/src/app/pages/ProjectTeams/ProjectTeams.js +++ b/src/app/pages/ProjectTeams/ProjectTeams.js @@ -1,8 +1,8 @@ -import { Helmet } from 'react-helmet'; -import { Link } from 'react-router-dom'; +import { Helmet } from "react-helmet"; +import { Link } from "react-router-dom"; -import { Text } from 'app/components'; -import { Section, Space, Icon } from 'app/Symbols.js'; +import { Text } from "app/components"; +import { Section, Space, Icon } from "app/Symbols.js"; export const PROJECT_TEAMS_GOOGLE_FORM = "https://forms.gle/QTFb9v7HMrEyyspS9"; const REGISTRATION_OPEN = true; @@ -23,14 +23,10 @@ function ProjectTeams() { ); const registrationMessage = ( - - To participate, complete the{' '} - - + + To participate, complete the{" "} + + project teams registration form {" "} @@ -39,11 +35,11 @@ function ProjectTeams() { ); const joinMessage = ( - - To get involved,{' '} - - join our newsletter - {' '} + + To get involved,{" "} + + join our newsletter + {" "} for notifications about when the next applications come out! ); @@ -53,22 +49,22 @@ function ProjectTeams() { Project Teams – Design at UCI -
- - +
+ + Project Teams - +
{REGISTRATION_OPEN ? openMessage : closedMessage} {REGISTRATION_OPEN ? registrationMessage : joinMessage}
- What are Project Teams? - + What are Project Teams? + Project Teams is a quarterly program that provides students with design experience in a collaborative setting. Each quarter, students form teams and work on a design project of their choice (e.g. UI/UX diff --git a/src/app/pages/ProjectTeams/index.js b/src/app/pages/ProjectTeams/index.js index f0bd8a16..bbc5eef2 100644 --- a/src/app/pages/ProjectTeams/index.js +++ b/src/app/pages/ProjectTeams/index.js @@ -1,3 +1,3 @@ -import ProjectTeams from './ProjectTeams'; +import ProjectTeams from "./ProjectTeams"; export default ProjectTeams; diff --git a/src/app/pages/Resources/Resources.js b/src/app/pages/Resources/Resources.js index d3d50fbf..fdc9e6f6 100644 --- a/src/app/pages/Resources/Resources.js +++ b/src/app/pages/Resources/Resources.js @@ -1,15 +1,15 @@ -import { Helmet } from 'react-helmet'; -import { Link } from 'react-router-dom'; +import { Helmet } from "react-helmet"; +import { Link } from "react-router-dom"; -import { Text } from 'app/components'; -import { Section, Icon, Space } from 'app/Symbols.js'; -import RESOURCES from 'assets/data/resources.json'; +import { Text } from "app/components"; +import { Section, Icon, Space } from "app/Symbols.js"; +import RESOURCES from "assets/data/resources.json"; -import cn from './Resources.module.scss'; +import cn from "./Resources.module.scss"; const TabComponent = ({ newTab, link, children, ...props }) => newTab ? ( - + {children} ) : ( @@ -24,9 +24,9 @@ const Resources = () => ( Resources – Design at UCI -
- -
+
+ +
{RESOURCES.map(({ newTab, ...card }) => ( ( style={{ background: card.background, }} - className='wait dx show card flex left fill sky spaceChildrenSmall' + className="wait dx show card flex left fill sky spaceChildrenSmall" > - - + + {card.title} - - {card.desc} - + {card.desc} ))}
diff --git a/src/app/pages/Resources/Resources.module.scss b/src/app/pages/Resources/Resources.module.scss index 8a5c9a07..7741e89f 100644 --- a/src/app/pages/Resources/Resources.module.scss +++ b/src/app/pages/Resources/Resources.module.scss @@ -1,5 +1,5 @@ .icon { - margin-top: -32px; - margin: -16px; - margin-bottom: 0; + margin-top: -32px; + margin: -16px; + margin-bottom: 0; } diff --git a/src/app/pages/Resources/index.js b/src/app/pages/Resources/index.js index 080bf4ab..a64e8051 100644 --- a/src/app/pages/Resources/index.js +++ b/src/app/pages/Resources/index.js @@ -1,3 +1,3 @@ -import Resources from './Resources.js'; +import Resources from "./Resources.js"; export default Resources; diff --git a/src/app/pages/ResourcesFeatured/ResourcesFeatured.js b/src/app/pages/ResourcesFeatured/ResourcesFeatured.js index dfab7121..5fcfc3ce 100644 --- a/src/app/pages/ResourcesFeatured/ResourcesFeatured.js +++ b/src/app/pages/ResourcesFeatured/ResourcesFeatured.js @@ -1,7 +1,7 @@ -import { useState } from 'react'; -import { Helmet } from 'react-helmet'; +import { useState } from "react"; +import { Helmet } from "react-helmet"; -import { Text } from 'app/components'; +import { Text } from "app/components"; import { Section, Icon, @@ -10,32 +10,32 @@ import { LoadingD, PageIcon, CheckIcon, -} from 'app/Symbols.js'; -import RESOURCE_LIST from 'assets/data/resourceList.json'; +} from "app/Symbols.js"; +import RESOURCE_LIST from "assets/data/resourceList.json"; -import cn from './ResourcesFeatured.module.scss'; +import cn from "./ResourcesFeatured.module.scss"; function mapTypeColor(type) { switch (type) { - case 'Tool': - return 'orange'; - case 'Inspiration': - return 'blue'; - case 'Guide': - return 'green'; + case "Tool": + return "orange"; + case "Inspiration": + return "blue"; + case "Guide": + return "green"; default: - return 'gray'; + return "gray"; } } -const ResourcesFeatured = props => { +const ResourcesFeatured = (props) => { const [filterMode, setFilterMode] = useState({ orange: true, blue: true, green: true, gray: true, }); - const toggleFilter = filter => { + const toggleFilter = (filter) => { let newFilter = filterMode; newFilter[filter] = !newFilter[filter]; setFilterMode({ ...newFilter }); @@ -45,117 +45,111 @@ const ResourcesFeatured = props => { Featured Resources – Design at UCI -
-
+
+
- + Featured Resources - - A curated list of helpful tools, guides, and more—to - help you practice your skills. + + A curated list of helpful tools, guides, and more—to help you + practice your skills.
-
-
+
+
{[ { - title: 'Tools', - color: 'orange', - fill: 'var(--orange)', + title: "Tools", + color: "orange", + fill: "var(--orange)", }, { - title: 'Guides', - color: 'green', - fill: 'var(--green)', + title: "Guides", + color: "green", + fill: "var(--green)", }, { - title: 'Inspiration', - color: 'blue', - fill: 'var(--blue)', + title: "Inspiration", + color: "blue", + fill: "var(--blue)", }, - { title: 'Other', color: 'gray', fill: 'var(--gray)' }, - ].map(item => ( - ))}
-
+
{RESOURCE_LIST == null ? ( -
- +
+
) : ( -
+
{RESOURCE_LIST.resources - .filter(e => filterMode[mapTypeColor(e.type)]) - .map(card => ( + .filter((e) => filterMode[mapTypeColor(e.type)]) + .map((card) => (
{card.type}
- + - + {card.title} - - {card.desc} - + {card.desc} ))}
diff --git a/src/app/pages/ResourcesFeatured/ResourcesFeatured.module.scss b/src/app/pages/ResourcesFeatured/ResourcesFeatured.module.scss index 2ee0de75..2d926f54 100644 --- a/src/app/pages/ResourcesFeatured/ResourcesFeatured.module.scss +++ b/src/app/pages/ResourcesFeatured/ResourcesFeatured.module.scss @@ -1,4 +1,4 @@ button.toggle { - border: none; - background-color: transparent; -} \ No newline at end of file + border: none; + background-color: transparent; +} diff --git a/src/app/pages/ResourcesFeatured/index.js b/src/app/pages/ResourcesFeatured/index.js index b8932661..e02b6446 100644 --- a/src/app/pages/ResourcesFeatured/index.js +++ b/src/app/pages/ResourcesFeatured/index.js @@ -1,3 +1,3 @@ -import ResourcesFeatured from './ResourcesFeatured'; +import ResourcesFeatured from "./ResourcesFeatured"; export default ResourcesFeatured; diff --git a/src/app/pages/temp.json b/src/app/pages/temp.json index c9db8812..84f24b35 100644 --- a/src/app/pages/temp.json +++ b/src/app/pages/temp.json @@ -1,146 +1,187 @@ { "events": [ - { - "title": "Live Event", - "time": "9/19/2021 10:00 AM", - "duration": "60", - "type": "Industry Speaker", - "desc": "Aliquam finibus, tellus rutrum tincidunt ullamcorper, elit est congue lacus, in euismod dolor nisl sit amet libero. Mauris ac tempor odio. Cras in pulvinar enim, vitae commodo justo. In ex erat, accumsan quis mi id, tempus bibendum est. In mollis elementum lorem sit amet dictum. Aliquam pretium semper tellus, ut sodales orci fringilla eget.", - "place": "Online", - "links": [{ - "label": "Zoom Link", - "link": "https://uci.zoom.us/j/5080955339" - }] - }, - { - "title": "Far Field Date Design", - "time": "8/24/2021 6:00 PM", - "type": "Workshop", - "desc": "Aliquam finibus, tellus rutrum tincidunt ullamcorper, elit est congue lacus, in euismod dolor nisl sit amet libero. Mauris ac tempor odio. Cras in pulvinar enim, vitae commodo justo. In ex erat, accumsan quis mi id, tempus bibendum est. In mollis elementum lorem sit amet dictum. Aliquam pretium semper tellus, ut sodales orci fringilla eget.", - "place": "Online", - "links": [{ - "label": "Zoom Link", - "link": "https://uci.zoom.us/j/5080955339" - }] - }, { - "title": "Future Event Detection", - "time": "8/12/2021 6:00 PM", - "type": "Workshop", - "desc": "Curabitur rutrum, mauris a condimentum ullamcorper, est ligula consequat turpis, a sagittis nisl arcu non risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In dignissim arcu risus, at interdum neque dapibus cursus. Vestibulum in quam at sem accumsan commodo vitae vel augue.", - "place": "Online", - "links": [{ - "label": "Zoom Link", - "link": "https://uci.zoom.us/j/5080955339" - }] - }, { - "title": "Project Teams Presentations", - "time": "5/28/2021 6:00 PM", - "type": "Project Teams", - "desc": "It's almost the end of Spring Quarter! You know what that means... Project Teams Presentations! The theme was open-ended so participants were allowed to go creative with their projects. Attend the meeting this Friday to see what our teams have made!", - "place": "Online", - "links": [{ - "label": "Zoom Link", - "link": "https://uci.zoom.us/j/5080955339" - }] - }, { - "title": "Game Night Social", - "time": "5/14/2021 6:00 PM", - "type": "Social Event", - "desc": "This week we will be having a game night social. Come hang out with peers and board as we play some virtual games together. This event will take place on Discord at 6PM so join our server by this Friday! Let's have some fun!", - "place": "Online", - "links": [{ - "label": "Discord Link", - "link": "https://discord.com/invite/MBVrKe9" - }] - }, { - "title": "Social Media Marketing", - "time": "5/7/2021 6:00 PM", - "type": "Workshop", - "desc": "Are you a board member of a campus organization that’s struggling with marketing? Join Design at UCI’s crash course on marketing specifically for student organizations! We’ll be going over some basic aspects of branding such as logo, flyer, and web design that you can utilize to attract more attention on campus. As a design based organization, we’ll also be sharing some of our own marketing tips and tricks that have been effective for our club!", - "place": "Online", - "links": [{ - "label": "Zoom Link", - "link": "https://uci.zoom.us/j/5080955339" - }] - }, { - "title": "Happy Hour Social", - "time": "4/23/2021 6:00 PM", - "type": "Social Event", - "desc": "This week, we will have a happy hour to chill after classes, bond with one another, and relax with your favorite drink (non-alcoholic drinks for anyone underage ofc ;). We will also have a live tutorial on how to make a Mojito 🥴. The event will be hosted over Discord at 6pm, so let's meet, make drinks, and chat with videos on! We can always switch to playing games or wherever the night leads.", - "place": "Online", - "links": [{ - "label": "Zoom Link", - "link": "https://uci.zoom.us/j/5080955339" - }] - }, { - "title": "Something in Common", - "time": "4/12/2021 7:00 PM", - "type": "Social Event", - "desc": "Get to know your fellow designers better! We’ll put participants into groups and they'll work together to find something in common in several different rounds. More limitations will be added each round to increase difficulty.", - "place": "Online", - "links": [{ - "label": "Zoom Link", - "link": "https://uci.zoom.us/j/5080955339" - }] - }, { - "title": "How to Conduct User Iterviews", - "time": "4/12/2021 6:00 PM", - "type": "Workshop", - "desc": "UX designers utilize user interviews early in the design process to understand the audience they are designing for. How do you organize a user interview? We'll be going over the basics in this workshop so you'll be ready to conduct user interviews for your own projects! We will also be hosting an after-event social, 'Something in Common', so stick around to the end and get to know each other!", - "place": "Online", - "links": [{ - "label": "Zoom Link", - "link": "https://uci.zoom.us/j/5080955339" - }] - }, { - "title": "Ask Me Anything: Student Intern Panel", - "time": "4/9/2021 6:00 PM", - "type": "AMA", - "desc": "Join us for an \"ask-me-anything\" panel from fellow UCI students on how they've landed design internships and roles! We'll be discussing personal tips from our own job application processes, so come prepared with questions or just come chat for a chill time!", - "place": "Online", - "links": [{ - "label": "Zoom Link", - "link": "https://uci.zoom.us/j/5080955339" - }] - }, { - "title": "Persuasive Design with Marketing Association", - "time": "4/8/2021 6:30 PM", - "type": "Workshop", - "desc": "Join us for this exciting collab workshop with Marketing Association as we explore persuasive design: design principles based on human behavior and psychology! How do these principles influence decision-making, and how can both designers and marketers use this knowledge to their advantage to create better user experiences and increased conversions? Don’t miss out on this special cross-subject deep dive into the effects of persuasive design in guiding users towards marketing goals!", - "place": "Online", - "links": [{ - "label": "Zoom Link", - "link": "https://uci.zoom.us/j/5080955339" - }] - }, { - "title": "The Basics of UX Recruiting", - "time": "4/2/2021 6:00 PM", - "type": "Workshop", - "desc": "Portfolios? Resumes? What's a whiteboard challenge? Are you interested in applying for UI/UX roles, but don't know what to expect? We'll be going over the different kinds of UX jobs, tips on the job application process, and how to position yourself for a design role no matter your major.", - "place": "Online", - "links": [{ - "label": "Zoom Link", - "link": "https://uci.zoom.us/j/5080955339" - }] - }, { - "title": "Introduction to UX with Jane Chang", - "time": "3/12/2021 6:00 PM", - "type": "Industry Speaker", - "desc": "Jane is a Product Design Lead at Google in Irvine/Seattle. Before Google, she worked for Walt Disney, Universal Pictures, Toyota/Lexus, Apple, Volkswagen AG and led product design in the cybersecurity space. She started her career in the agency world at Saatchi & Saatchi and RPA, and led design at TBWA/Chiat/Day. She studied Graphic Design at NYU and received her Master's in Visual Communication from Johns Hopkins University. Jane currently lives in Irvine with her husband and 6-year-old son.", - "place": "Online", - "links": [{ - "label": "Zoom Link", - "link": "https://uci.zoom.us/j/5080955339" - }] - }, { - "title": "How to Nail your UX Interview with Chris Ota", - "time": "2/26/2021 6:00 PM", - "type": "Industry Speaker", - "desc": "Originally from Hawaii, Chris Ota started off designing and building websites after graduating community college 13 years ago. He packed his bags in 2015 and moved to San Francisco with no job lined up, looking for a new chapter in his life. Starting from the bottom as a product designer, Chris has been at Lyft for about 3.5 years now, focused on patient transportation to and from their appointments. Besides his day to day, he helps with interviewing full time and intern candidates, does design mentorship at work, and is an active mentor with ADPList.", - "place": "Online", - "links": [{ - "label": "Zoom Link", - "link": "https://uci.zoom.us/j/5080955339" - }] - }] -} \ No newline at end of file + { + "title": "Live Event", + "time": "9/19/2021 10:00 AM", + "duration": "60", + "type": "Industry Speaker", + "desc": "Aliquam finibus, tellus rutrum tincidunt ullamcorper, elit est congue lacus, in euismod dolor nisl sit amet libero. Mauris ac tempor odio. Cras in pulvinar enim, vitae commodo justo. In ex erat, accumsan quis mi id, tempus bibendum est. In mollis elementum lorem sit amet dictum. Aliquam pretium semper tellus, ut sodales orci fringilla eget.", + "place": "Online", + "links": [ + { + "label": "Zoom Link", + "link": "https://uci.zoom.us/j/5080955339" + } + ] + }, + { + "title": "Far Field Date Design", + "time": "8/24/2021 6:00 PM", + "type": "Workshop", + "desc": "Aliquam finibus, tellus rutrum tincidunt ullamcorper, elit est congue lacus, in euismod dolor nisl sit amet libero. Mauris ac tempor odio. Cras in pulvinar enim, vitae commodo justo. In ex erat, accumsan quis mi id, tempus bibendum est. In mollis elementum lorem sit amet dictum. Aliquam pretium semper tellus, ut sodales orci fringilla eget.", + "place": "Online", + "links": [ + { + "label": "Zoom Link", + "link": "https://uci.zoom.us/j/5080955339" + } + ] + }, + { + "title": "Future Event Detection", + "time": "8/12/2021 6:00 PM", + "type": "Workshop", + "desc": "Curabitur rutrum, mauris a condimentum ullamcorper, est ligula consequat turpis, a sagittis nisl arcu non risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In dignissim arcu risus, at interdum neque dapibus cursus. Vestibulum in quam at sem accumsan commodo vitae vel augue.", + "place": "Online", + "links": [ + { + "label": "Zoom Link", + "link": "https://uci.zoom.us/j/5080955339" + } + ] + }, + { + "title": "Project Teams Presentations", + "time": "5/28/2021 6:00 PM", + "type": "Project Teams", + "desc": "It's almost the end of Spring Quarter! You know what that means... Project Teams Presentations! The theme was open-ended so participants were allowed to go creative with their projects. Attend the meeting this Friday to see what our teams have made!", + "place": "Online", + "links": [ + { + "label": "Zoom Link", + "link": "https://uci.zoom.us/j/5080955339" + } + ] + }, + { + "title": "Game Night Social", + "time": "5/14/2021 6:00 PM", + "type": "Social Event", + "desc": "This week we will be having a game night social. Come hang out with peers and board as we play some virtual games together. This event will take place on Discord at 6PM so join our server by this Friday! Let's have some fun!", + "place": "Online", + "links": [ + { + "label": "Discord Link", + "link": "https://discord.com/invite/MBVrKe9" + } + ] + }, + { + "title": "Social Media Marketing", + "time": "5/7/2021 6:00 PM", + "type": "Workshop", + "desc": "Are you a board member of a campus organization that’s struggling with marketing? Join Design at UCI’s crash course on marketing specifically for student organizations! We’ll be going over some basic aspects of branding such as logo, flyer, and web design that you can utilize to attract more attention on campus. As a design based organization, we’ll also be sharing some of our own marketing tips and tricks that have been effective for our club!", + "place": "Online", + "links": [ + { + "label": "Zoom Link", + "link": "https://uci.zoom.us/j/5080955339" + } + ] + }, + { + "title": "Happy Hour Social", + "time": "4/23/2021 6:00 PM", + "type": "Social Event", + "desc": "This week, we will have a happy hour to chill after classes, bond with one another, and relax with your favorite drink (non-alcoholic drinks for anyone underage ofc ;). We will also have a live tutorial on how to make a Mojito 🥴. The event will be hosted over Discord at 6pm, so let's meet, make drinks, and chat with videos on! We can always switch to playing games or wherever the night leads.", + "place": "Online", + "links": [ + { + "label": "Zoom Link", + "link": "https://uci.zoom.us/j/5080955339" + } + ] + }, + { + "title": "Something in Common", + "time": "4/12/2021 7:00 PM", + "type": "Social Event", + "desc": "Get to know your fellow designers better! We’ll put participants into groups and they'll work together to find something in common in several different rounds. More limitations will be added each round to increase difficulty.", + "place": "Online", + "links": [ + { + "label": "Zoom Link", + "link": "https://uci.zoom.us/j/5080955339" + } + ] + }, + { + "title": "How to Conduct User Iterviews", + "time": "4/12/2021 6:00 PM", + "type": "Workshop", + "desc": "UX designers utilize user interviews early in the design process to understand the audience they are designing for. How do you organize a user interview? We'll be going over the basics in this workshop so you'll be ready to conduct user interviews for your own projects! We will also be hosting an after-event social, 'Something in Common', so stick around to the end and get to know each other!", + "place": "Online", + "links": [ + { + "label": "Zoom Link", + "link": "https://uci.zoom.us/j/5080955339" + } + ] + }, + { + "title": "Ask Me Anything: Student Intern Panel", + "time": "4/9/2021 6:00 PM", + "type": "AMA", + "desc": "Join us for an \"ask-me-anything\" panel from fellow UCI students on how they've landed design internships and roles! We'll be discussing personal tips from our own job application processes, so come prepared with questions or just come chat for a chill time!", + "place": "Online", + "links": [ + { + "label": "Zoom Link", + "link": "https://uci.zoom.us/j/5080955339" + } + ] + }, + { + "title": "Persuasive Design with Marketing Association", + "time": "4/8/2021 6:30 PM", + "type": "Workshop", + "desc": "Join us for this exciting collab workshop with Marketing Association as we explore persuasive design: design principles based on human behavior and psychology! How do these principles influence decision-making, and how can both designers and marketers use this knowledge to their advantage to create better user experiences and increased conversions? Don’t miss out on this special cross-subject deep dive into the effects of persuasive design in guiding users towards marketing goals!", + "place": "Online", + "links": [ + { + "label": "Zoom Link", + "link": "https://uci.zoom.us/j/5080955339" + } + ] + }, + { + "title": "The Basics of UX Recruiting", + "time": "4/2/2021 6:00 PM", + "type": "Workshop", + "desc": "Portfolios? Resumes? What's a whiteboard challenge? Are you interested in applying for UI/UX roles, but don't know what to expect? We'll be going over the different kinds of UX jobs, tips on the job application process, and how to position yourself for a design role no matter your major.", + "place": "Online", + "links": [ + { + "label": "Zoom Link", + "link": "https://uci.zoom.us/j/5080955339" + } + ] + }, + { + "title": "Introduction to UX with Jane Chang", + "time": "3/12/2021 6:00 PM", + "type": "Industry Speaker", + "desc": "Jane is a Product Design Lead at Google in Irvine/Seattle. Before Google, she worked for Walt Disney, Universal Pictures, Toyota/Lexus, Apple, Volkswagen AG and led product design in the cybersecurity space. She started her career in the agency world at Saatchi & Saatchi and RPA, and led design at TBWA/Chiat/Day. She studied Graphic Design at NYU and received her Master's in Visual Communication from Johns Hopkins University. Jane currently lives in Irvine with her husband and 6-year-old son.", + "place": "Online", + "links": [ + { + "label": "Zoom Link", + "link": "https://uci.zoom.us/j/5080955339" + } + ] + }, + { + "title": "How to Nail your UX Interview with Chris Ota", + "time": "2/26/2021 6:00 PM", + "type": "Industry Speaker", + "desc": "Originally from Hawaii, Chris Ota started off designing and building websites after graduating community college 13 years ago. He packed his bags in 2015 and moved to San Francisco with no job lined up, looking for a new chapter in his life. Starting from the bottom as a product designer, Chris has been at Lyft for about 3.5 years now, focused on patient transportation to and from their appointments. Besides his day to day, he helps with interviewing full time and intern candidates, does design mentorship at work, and is an active mentor with ADPList.", + "place": "Online", + "links": [ + { + "label": "Zoom Link", + "link": "https://uci.zoom.us/j/5080955339" + } + ] + } + ] +} diff --git a/src/app/styles/colors.scss b/src/app/styles/colors.scss index 4d152fa4..2fc5717e 100644 --- a/src/app/styles/colors.scss +++ b/src/app/styles/colors.scss @@ -1,4 +1,4 @@ -@import 'app/styles/variables'; +@import "app/styles/variables"; .fill.white { background-color: $white; diff --git a/src/app/styles/components.scss b/src/app/styles/components.scss index 1a84d662..090a0bbe 100644 --- a/src/app/styles/components.scss +++ b/src/app/styles/components.scss @@ -1,4 +1,4 @@ -@import 'app/styles/variables'; +@import "app/styles/variables"; .photo { width: 100%; @@ -76,7 +76,9 @@ .largeEvent { border-radius: 16px; /* border: solid 2px $silver; */ - box-shadow: 0 1px 2px 1px $silver, 0 16px 32px $silver; + box-shadow: + 0 1px 2px 1px $silver, + 0 16px 32px $silver; padding: 64px; opacity: 0; animation: largeEvent-show 1.8s cubic-bezier(0.18, 0.62, 0, 1) forwards; diff --git a/src/app/styles/forms.scss b/src/app/styles/forms.scss index 5b313b88..f1e912e8 100644 --- a/src/app/styles/forms.scss +++ b/src/app/styles/forms.scss @@ -1,4 +1,4 @@ -@import 'app/styles/variables'; +@import "app/styles/variables"; .form { width: 88%; @@ -27,7 +27,9 @@ } .form input:focus { - box-shadow: 0 0 0 3px $blue, 0 4px 4px -1px $blue; + box-shadow: + 0 0 0 3px $blue, + 0 4px 4px -1px $blue; } @media only screen and (max-width: 768px) { diff --git a/src/app/styles/global.scss b/src/app/styles/global.scss index 103d1ecb..5008e681 100644 --- a/src/app/styles/global.scss +++ b/src/app/styles/global.scss @@ -1,4 +1,4 @@ -@import 'app/styles/variables'; +@import "app/styles/variables"; :root { --white: #{$white}; @@ -43,7 +43,7 @@ script { scrollbar-width: none; box-sizing: border-box; vertical-align: middle; - font-family: 'ducimain', helvetica, sans-serif; + font-family: "ducimain", helvetica, sans-serif; font-weight: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; @@ -53,7 +53,6 @@ script { padding: 0; } - body { min-height: 100vh; color: $black; @@ -87,7 +86,9 @@ a:hover .icon.hoverable { } .shadow { - box-shadow: 0 0 1px 1px #2232, 0 6px 12px -4px #2231; + box-shadow: + 0 0 1px 1px #2232, + 0 6px 12px -4px #2231; } a > * { diff --git a/src/app/styles/layout.scss b/src/app/styles/layout.scss index 09e3146b..95f0738d 100644 --- a/src/app/styles/layout.scss +++ b/src/app/styles/layout.scss @@ -1,4 +1,4 @@ -@import 'app/styles/variables'; +@import "app/styles/variables"; .spaceChildren > * { margin-bottom: 32px; diff --git a/src/assets/data/designathon/2022/judges.json b/src/assets/data/designathon/2022/judges.json index 7b4a9f33..13550737 100644 --- a/src/assets/data/designathon/2022/judges.json +++ b/src/assets/data/designathon/2022/judges.json @@ -1,29 +1,30 @@ -[{ - "name": "Lillian Choi", - "photo": "data/designathon/2022/assets/portrait/Lillian_Choi.png", - "role": "UX Designer at Samsung Electronics America", - "pronouns": "she/her", - "about": "As a recent design graduate from UC Davis, Lillian Choi is a UX Designer based in Silicon Valley and currently working at Samsung Electronics America. As a humble advocate for accessible and equitable designs in the digital healthcare industry, Lillian strives to share her knowledge and passion with junior designers in the community." - }, - { - "name": "Nathan Gao", - "photo": "data/designathon/2022/assets/portrait/Nathan_Gao.png", - "role": "Experience Design Lead at Northwestern Mutual", - "pronouns": "he/him", - "about": "Nathan Gao is an Experience Design Lead at Northwestern Mutual, where he guides a small team of talented designers in tackling complex projects, helping everyday people navigate difficult life and financial decisions. An avid technologist, music fan, and former operations guy, Nathan is a big believer in using design to shape better complex systems; helping those who have less, live better." - }, - { - "name": "Jered Odegard", - "photo": "data/designathon/2022/assets/portrait/Jered_Odegard.png", - "role": "Coach at Zeal; Former Product Design Leader at Redfin, Expedia", - "pronouns": "he/him", - "about": "Jered is a career and leadership coach (CPCC, ACC) and former Head of Product Design. He has built world-class product for fortune 500 like 🏝 Expedia and raised design teams from startup to IPO at 🏡 Redfin. He is passionate about giving introverted designers a voice and creative ownership." - }, - { - "name": "Vanessa Wong", - "photo": "data/designathon/2022/assets/portrait/Vanessa_Wong.png", - "role": "Senior Designer @ Accenture Interactive", - "pronouns": "she/her", - "about": "As a curious visual designer, Vanessa explored agency/in-house/freelance environments and dabbled in diverse industries across education, consumer products, e-commerce, tech, public services, fashion/lifestyle, and entertainment. With her passion for education, she also co-founded an educational nonprofit called Menti during the pandemic to help young adults access learning resources." - } -] \ No newline at end of file +[ + { + "name": "Lillian Choi", + "photo": "data/designathon/2022/assets/portrait/Lillian_Choi.png", + "role": "UX Designer at Samsung Electronics America", + "pronouns": "she/her", + "about": "As a recent design graduate from UC Davis, Lillian Choi is a UX Designer based in Silicon Valley and currently working at Samsung Electronics America. As a humble advocate for accessible and equitable designs in the digital healthcare industry, Lillian strives to share her knowledge and passion with junior designers in the community." + }, + { + "name": "Nathan Gao", + "photo": "data/designathon/2022/assets/portrait/Nathan_Gao.png", + "role": "Experience Design Lead at Northwestern Mutual", + "pronouns": "he/him", + "about": "Nathan Gao is an Experience Design Lead at Northwestern Mutual, where he guides a small team of talented designers in tackling complex projects, helping everyday people navigate difficult life and financial decisions. An avid technologist, music fan, and former operations guy, Nathan is a big believer in using design to shape better complex systems; helping those who have less, live better." + }, + { + "name": "Jered Odegard", + "photo": "data/designathon/2022/assets/portrait/Jered_Odegard.png", + "role": "Coach at Zeal; Former Product Design Leader at Redfin, Expedia", + "pronouns": "he/him", + "about": "Jered is a career and leadership coach (CPCC, ACC) and former Head of Product Design. He has built world-class product for fortune 500 like 🏝 Expedia and raised design teams from startup to IPO at 🏡 Redfin. He is passionate about giving introverted designers a voice and creative ownership." + }, + { + "name": "Vanessa Wong", + "photo": "data/designathon/2022/assets/portrait/Vanessa_Wong.png", + "role": "Senior Designer @ Accenture Interactive", + "pronouns": "she/her", + "about": "As a curious visual designer, Vanessa explored agency/in-house/freelance environments and dabbled in diverse industries across education, consumer products, e-commerce, tech, public services, fashion/lifestyle, and entertainment. With her passion for education, she also co-founded an educational nonprofit called Menti during the pandemic to help young adults access learning resources." + } +] diff --git a/src/assets/data/designathon/2022/rules.json b/src/assets/data/designathon/2022/rules.json index 99a77569..1aad6037 100644 --- a/src/assets/data/designathon/2022/rules.json +++ b/src/assets/data/designathon/2022/rules.json @@ -1,8 +1,8 @@ [ - "All work submitted to Impact 2022 must be original work. Any submissions with plagiarized work will be disqualified.", - "You may not submit work previously designed before Impact 2022. All designs must be made between the dates of January 28th, 2022 to January 30th, 2022.", - "All members of your team must be a college student with an associated institutional email.", - "Each team may only submit one (1) submission which will be submitted on behalf of all other contributors.", - "Late submissions will not be accepted.", - "If there are any adjustments made to your prototype after Sunday Jan 30th 1:00pm PST, you (and your team) will be penalized." + "All work submitted to Impact 2022 must be original work. Any submissions with plagiarized work will be disqualified.", + "You may not submit work previously designed before Impact 2022. All designs must be made between the dates of January 28th, 2022 to January 30th, 2022.", + "All members of your team must be a college student with an associated institutional email.", + "Each team may only submit one (1) submission which will be submitted on behalf of all other contributors.", + "Late submissions will not be accepted.", + "If there are any adjustments made to your prototype after Sunday Jan 30th 1:00pm PST, you (and your team) will be penalized." ] diff --git a/src/assets/data/designathon/2022/workshop-hosts.json b/src/assets/data/designathon/2022/workshop-hosts.json index f6a6d587..0f6e48d3 100644 --- a/src/assets/data/designathon/2022/workshop-hosts.json +++ b/src/assets/data/designathon/2022/workshop-hosts.json @@ -1,43 +1,44 @@ -[{ - "name": "Katrina Liu", - "photo": "data/designathon/2022/assets/portrait/Katrina_Liu.png", - "role": "Senior UX Designer at Microsoft", - "pronouns": "she/her", - "about": " I am Katrina, a UX leader with 15+ years of experience in the field. I am a Senior UX Designer at Microsoft by day, UX community leader by night. As the North America Director for Ladies that UX, I provide guidance and support for over 20 chapters in the North America region to put together events and connect talented UX professionals across different levels." - }, - { - "name": "Samanvay Kasarala", - "photo": "data/designathon/2022/assets/portrait/Samanvay_Kasarala.png", - "role": "UX designer at Reonomy", - "pronouns": "he/him", - "about": "Fun Fact: I designed a Tory Burch flagship store in Tokyo And that’s when I decided to quit being an architect and switch into UX." - }, - { - "name": "Mingjia Wang", - "photo": "data/designathon/2022/assets/portrait/Mingjia_Wang.png", - "role": "Executive Advisor @ Commit the Change", - "pronouns": "he/him", - "about": "" - }, - { - "name": "Alan Chang", - "photo": "data/designathon/2022/assets/portrait/Alan_Chang.png", - "role": "VP of Outreach @ Commit the Change", - "pronouns": "he/him", - "about": "" - }, - { - "name": "Hannah Limary", - "photo": "data/designathon/2022/assets/portrait/Hannah_Limary.png", - "role": "UX Design Intern @ Amazon", - "pronouns": "she/her", - "about": "Fun Fact: She is the design at UCI 2022 president!" - }, - { - "name": "Evangeline Gao", - "photo": "data/designathon/2022/assets/portrait/Evangeline_Gao.png", - "role": "Vice President @ Design at UCI", - "pronouns": "she/her", - "about": "" - } +[ + { + "name": "Katrina Liu", + "photo": "data/designathon/2022/assets/portrait/Katrina_Liu.png", + "role": "Senior UX Designer at Microsoft", + "pronouns": "she/her", + "about": " I am Katrina, a UX leader with 15+ years of experience in the field. I am a Senior UX Designer at Microsoft by day, UX community leader by night. As the North America Director for Ladies that UX, I provide guidance and support for over 20 chapters in the North America region to put together events and connect talented UX professionals across different levels." + }, + { + "name": "Samanvay Kasarala", + "photo": "data/designathon/2022/assets/portrait/Samanvay_Kasarala.png", + "role": "UX designer at Reonomy", + "pronouns": "he/him", + "about": "Fun Fact: I designed a Tory Burch flagship store in Tokyo And that’s when I decided to quit being an architect and switch into UX." + }, + { + "name": "Mingjia Wang", + "photo": "data/designathon/2022/assets/portrait/Mingjia_Wang.png", + "role": "Executive Advisor @ Commit the Change", + "pronouns": "he/him", + "about": "" + }, + { + "name": "Alan Chang", + "photo": "data/designathon/2022/assets/portrait/Alan_Chang.png", + "role": "VP of Outreach @ Commit the Change", + "pronouns": "he/him", + "about": "" + }, + { + "name": "Hannah Limary", + "photo": "data/designathon/2022/assets/portrait/Hannah_Limary.png", + "role": "UX Design Intern @ Amazon", + "pronouns": "she/her", + "about": "Fun Fact: She is the design at UCI 2022 president!" + }, + { + "name": "Evangeline Gao", + "photo": "data/designathon/2022/assets/portrait/Evangeline_Gao.png", + "role": "Vice President @ Design at UCI", + "pronouns": "she/her", + "about": "" + } ] diff --git a/src/assets/data/designathon/2023/keynote.json b/src/assets/data/designathon/2023/keynote.json index 564092a7..c761ed9f 100644 --- a/src/assets/data/designathon/2023/keynote.json +++ b/src/assets/data/designathon/2023/keynote.json @@ -1,8 +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." -}] +[ + { + "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/2023/rules.json b/src/assets/data/designathon/2023/rules.json index 566d5580..30604314 100644 --- a/src/assets/data/designathon/2023/rules.json +++ b/src/assets/data/designathon/2023/rules.json @@ -1,9 +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." + "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/2023/timer.json b/src/assets/data/designathon/2023/timer.json index d5e8082d..3b0f6f03 100644 --- a/src/assets/data/designathon/2023/timer.json +++ b/src/assets/data/designathon/2023/timer.json @@ -1,26 +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!" - } + { + "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/2023/winners.json b/src/assets/data/designathon/2023/winners.json index da6ef456..5f7bed98 100644 --- a/src/assets/data/designathon/2023/winners.json +++ b/src/assets/data/designathon/2023/winners.json @@ -1,50 +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." - } -] \ No newline at end of file +[ + { + "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/2023/workshop-hosts.json b/src/assets/data/designathon/2023/workshop-hosts.json index b9e188c7..614b32a6 100644 --- a/src/assets/data/designathon/2023/workshop-hosts.json +++ b/src/assets/data/designathon/2023/workshop-hosts.json @@ -1,66 +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": "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." - } + { + "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." + } ] diff --git a/src/assets/data/designathon/overall.json b/src/assets/data/designathon/overall.json index e76bbb23..ee035d5b 100644 --- a/src/assets/data/designathon/overall.json +++ b/src/assets/data/designathon/overall.json @@ -1,52 +1,56 @@ [ - { - "title": "Design-a-thon 2022", - "theme": "Impact", - "link": "22", - "image": "ogimg-designathon22.png", - "showcase": [ - { - "title": "1st Place", - "image": "ratatouille.jpg", - "name": "Ratatouille", - "creators": ["Stephanie Chang", "Michelle Kou"], - "links": [] - }, - { - "title": "2nd Place", - "image": "carbonology.jpg", - "name": "Carbonology", - "creators": ["Ashley Chang", "An Nguyen", "Ryan Yang", "Angel Yim"], - "links": [] - } - ] - }, - { - "title": "Design-a-thon 2021", - "theme": "Mindfulness & Productivity", - "link": "//designatuci.com/static/designathon2020/index.html", - "image": "designathon2020thumb.svg", - "showcase": [ - { - "title": "Best Overall", - "image": "img-motivator.svg", - "name": "Motivator", - "creators": ["Allison Yick", "Jonathan Lum", "Stephanie Chang"], - "links": [{ - "type": "prototype", - "href": "https://www.figma.com/file/h5bJ9LHNDm1K3PYy0Ck1wk/UCI-Designathon-%E2%80%93-Team-%23396D84-(Copy)?node-id=85%3A0" - }] - }, - { - "title": "Honorable Mention", - "image": "img-orin.svg", - "name": "Orin", - "creators": ["Isha Godara"], - "links": [{ - "type": "prototype", - "href": "https://www.figma.com/file/uYMb1cJIA0JCn2twIbbIUE/Orin-Copy" - }] - } - ] - } + { + "title": "Design-a-thon 2022", + "theme": "Impact", + "link": "22", + "image": "ogimg-designathon22.png", + "showcase": [ + { + "title": "1st Place", + "image": "ratatouille.jpg", + "name": "Ratatouille", + "creators": ["Stephanie Chang", "Michelle Kou"], + "links": [] + }, + { + "title": "2nd Place", + "image": "carbonology.jpg", + "name": "Carbonology", + "creators": ["Ashley Chang", "An Nguyen", "Ryan Yang", "Angel Yim"], + "links": [] + } + ] + }, + { + "title": "Design-a-thon 2021", + "theme": "Mindfulness & Productivity", + "link": "//designatuci.com/static/designathon2020/index.html", + "image": "designathon2020thumb.svg", + "showcase": [ + { + "title": "Best Overall", + "image": "img-motivator.svg", + "name": "Motivator", + "creators": ["Allison Yick", "Jonathan Lum", "Stephanie Chang"], + "links": [ + { + "type": "prototype", + "href": "https://www.figma.com/file/h5bJ9LHNDm1K3PYy0Ck1wk/UCI-Designathon-%E2%80%93-Team-%23396D84-(Copy)?node-id=85%3A0" + } + ] + }, + { + "title": "Honorable Mention", + "image": "img-orin.svg", + "name": "Orin", + "creators": ["Isha Godara"], + "links": [ + { + "type": "prototype", + "href": "https://www.figma.com/file/uYMb1cJIA0JCn2twIbbIUE/Orin-Copy" + } + ] + } + ] + } ] diff --git a/src/index.js b/src/index.js index c49b00b3..1f514be5 100644 --- a/src/index.js +++ b/src/index.js @@ -1,11 +1,11 @@ -import React from 'react'; -import { render } from 'react-dom'; -import { BrowserRouter } from 'react-router-dom'; -import App from './app'; +import React from "react"; +import { render } from "react-dom"; +import { BrowserRouter } from "react-router-dom"; +import App from "./app"; render( , - document.getElementById('root') + document.getElementById("root"), );