diff --git a/public/fonts/NB-International-Mono.ttf b/public/fonts/NB-International-Mono.ttf new file mode 100644 index 0000000..dfa8346 Binary files /dev/null and b/public/fonts/NB-International-Mono.ttf differ diff --git a/src/components/JudgeCard/JudgeCard.scss b/src/components/JudgeCard/JudgeCard.scss new file mode 100644 index 0000000..0951327 --- /dev/null +++ b/src/components/JudgeCard/JudgeCard.scss @@ -0,0 +1,117 @@ +.judge-card { + display: flex; + gap: 2rem; + + &:nth-of-type(even) { + flex-direction: row-reverse; + } + + @media (max-width: 390px) { + flex-direction: column; + + &:nth-of-type(even) { + flex-direction: column; + } + } + + .svg-container { + display: flex; + position: relative; + min-width: 180px; + + a { + width: 161px; + height: 160px; + // https://www.plantcss.com/css-clip-path-converter + clip-path: polygon(0% 100%, 16.979% 0%, 100% 0%, 83.021% 100%, 0% 100%); + img { + // Solves sub pixel rendering issue with scale transform + will-change: transform; + height: 100%; + width: 100%; + object-fit: cover; + transition: + transform 0.3s, + filter 0.3s; + &:hover { + transform: scale(1.05); + filter: brightness(1.1); + } + } + } + + .orange-bar { + position: absolute; + transform: translateX(145px); + } + } + + .judge-info { + h3 { + margin-bottom: 1rem; + + span { + font-family: $mono-font; + font-size: 0.8em; + } + } + + .fun-fact-container { + .trigger { + cursor: pointer; + display: inline; + border-bottom: 1.5px solid $primary-orange; + padding-bottom: 1px; + } + + .desc { + position: absolute; + opacity: 0; + pointer-events: none; + margin-top: 1rem; + max-width: 50ch; + transition: opacity 0.3s; + margin-inline: auto; + color: rgb(9, 9, 33); + background-color: rgba(255, 255, 255, 0.8); + border: 1px solid rgba(255, 255, 255, 1); + backdrop-filter: blur(5px); + padding: 1rem; + color: $primary-blue; + z-index: 1; + // 15 ch is about the length of fun fact trigger text + transform: translateX(calc((-15ch / 2 + 50%) * -1)); + + &:after { + content: '▲'; + $triangle-size: 20px; + font-size: $triangle-size; + line-height: 0.65; + position: absolute; + color: rgba(255, 255, 255, 0.9); + top: calc($triangle-size * -0.65); + left: 0; + right: 0; + margin-inline: auto; + width: $triangle-size; + height: $triangle-size; + + @media (max-width: $mobile-breakpoint) { + color: rgba(9, 9, 33, 0.8); + } + } + + @media (max-width: $mobile-breakpoint) { + background-color: rgba(9, 9, 33, 0.8); + border: 1px solid rgba(9, 9, 33, 1); + color: $primary-white; + width: fit-content; + max-width: calc(100% - 2rem); + transform: translateX(0); + left: 0; + right: 0; + } + } + } + } +} diff --git a/src/components/JudgeCard/JudgeCard.tsx b/src/components/JudgeCard/JudgeCard.tsx new file mode 100644 index 0000000..2137486 --- /dev/null +++ b/src/components/JudgeCard/JudgeCard.tsx @@ -0,0 +1,65 @@ +import { useRef } from 'react'; +import './JudgeCard.scss'; + +interface JudgeProps { + name: string; + pronouns: string; + position: string; + funFact: string; + imgLink: string; + linkedin: string; +} + +const JudgeCard = ({ + name, + pronouns, + position, + funFact, + imgLink, + linkedin +}: JudgeProps) => { + const funFactRef = useRef(null); + return ( + //prettier-ignore +
+
+ + {'Headshot + + + + +
+
+

+ {name} ({pronouns}) +

+

{position}

+
+

{ + if (funFactRef.current) { + funFactRef.current.style.opacity = '1'; + funFactRef.current.style.pointerEvents = 'auto'; + } + }} + onMouseLeave={() => { + if (funFactRef.current) { + funFactRef.current.style.opacity = '0'; + funFactRef.current.style.pointerEvents = 'none'; + } + }} + > + See my fun fact! +

+

+ {funFact} +

+
+
+
+ ); +}; + +export default JudgeCard; diff --git a/src/components/Navbar/Navbar.scss b/src/components/Navbar/Navbar.scss index 92a0bc3..f02b8ed 100644 --- a/src/components/Navbar/Navbar.scss +++ b/src/components/Navbar/Navbar.scss @@ -1,5 +1,4 @@ nav { - border: 1px solid red; position: fixed; display: grid; place-items: center; diff --git a/src/components/OrbitingPlanets/OrbitingPlanets.scss b/src/components/OrbitingPlanets/OrbitingPlanets.scss index 547d378..30f002d 100644 --- a/src/components/OrbitingPlanets/OrbitingPlanets.scss +++ b/src/components/OrbitingPlanets/OrbitingPlanets.scss @@ -8,6 +8,7 @@ svg { transform: translateX($planet-offset); + height: 100%; @media (max-width: $tablet-breakpoint) { width: $planet-width; diff --git a/src/pages/Home/Home.scss b/src/pages/Home/Home.scss index b9d5743..caa2a4a 100644 --- a/src/pages/Home/Home.scss +++ b/src/pages/Home/Home.scss @@ -1,3 +1,21 @@ +$heading-color: #ff671e; +$text-color: white; + +@font-face { + font-family: 'Neue Plak'; + src: url('../../assets/fonts/Neue-Plak-Extended-Bold.ttf') format('truetype'); +} + +@font-face { + font-family: 'Ridge Bold'; + src: url('../../assets/fonts/ridge-bold-oblique.otf') format('opentype'); +} + +@font-face { + font-family: 'NB International'; + src: url('../../assets/fonts/NB-International-Regular.ttf') format('truetype'); +} + .home { display: grid; align-items: center; diff --git a/src/pages/Judges/JudgeList.tsx b/src/pages/Judges/JudgeList.tsx new file mode 100644 index 0000000..0abe542 --- /dev/null +++ b/src/pages/Judges/JudgeList.tsx @@ -0,0 +1,50 @@ +export const JudgeList = [ + { + name: 'Julia Nguyen', + pronouns: 'She/Her', + position: 'Product Designer @ ServiceNow', + funFact: 'I enjoy designing and sewing my clothes for myself.', + imgLink: + 'https://res.cloudinary.com/design-co-ucsd/image/upload/v1712092000/frontiers24/judges/julia_axo4mb.webp', + linkedin: 'https://www.linkedin.com/in/nguyenjuliaa/' + }, + { + name: 'Alan Tran', + pronouns: 'He/Him', + position: 'UX Engineer @ Illumina', + funFact: + 'I want to create a public website that objectively scores the best pho in San Diego/OC area.', + imgLink: + 'https://res.cloudinary.com/design-co-ucsd/image/upload/v1712092001/frontiers24/judges/alan_fefv0e.webp', + linkedin: 'https://www.linkedin.com/in/alantran2/' + }, + { + name: 'Dexter Zavalza', + pronouns: 'He/Him', + position: 'Conversational AI UX Design Lead (Manager) @ Deloitte', + funFact: 'First job out of college was in a surfboard factory.', + imgLink: + 'https://res.cloudinary.com/design-co-ucsd/image/upload/v1712092002/frontiers24/judges/dexter_shmkoh.webp', + linkedin: 'https://www.linkedin.com/in/dzh-s/' + }, + { + name: 'Andrew Nguyen', + pronouns: 'He/Him', + position: 'UX Design Consultant @ Arup', + funFact: + 'I’ve appeared on the livestreams of 2 separate large esports broadcasts: the 2017 Overwatch World Cup in an audience interview and the 2023 Valorant Champions Finals on the Stare Cam.', + imgLink: + 'https://res.cloudinary.com/design-co-ucsd/image/upload/v1712092000/frontiers24/judges/andrew_glhyyl.webp', + linkedin: 'https://www.linkedin.com/in/andrewduynguyen/' + }, + { + name: 'Soon-Won Dy', + pronouns: 'She/Her', + position: 'UX Designer @ Axos Bank', + funFact: + 'I love going to cafes & recreating their fancy coffees and baked goods at home.', + imgLink: + 'https://res.cloudinary.com/design-co-ucsd/image/upload/v1712092000/frontiers24/judges/soon-won_xcteom.webp ', + linkedin: 'https://www.linkedin.com/in/soonwondy/' + } +]; diff --git a/src/pages/Judges/Judges.scss b/src/pages/Judges/Judges.scss index 14fc76e..9dd8dac 100644 --- a/src/pages/Judges/Judges.scss +++ b/src/pages/Judges/Judges.scss @@ -1,26 +1,26 @@ -.judge-stuff { - .judges { +.judges { + section { + max-width: 1800px; overflow: hidden; - display: flex; - align-items: center; @media (max-width: $tablet-breakpoint) { - align-items: baseline; + align-content: baseline; padding-top: 3rem; } - .judges-container { + .card-container { display: grid; gap: 3rem; - } - } + width: 100%; - h2 { - color: $primary-orange; - } + @media (max-width: $tablet-breakpoint) { + gap: 1rem; + } - .judge-component { - margin-bottom: 35px; + @media (max-width: $mobile-breakpoint) { + margin-bottom: 5rem; + } + } } .mobile { diff --git a/src/pages/Judges/Judges.tsx b/src/pages/Judges/Judges.tsx index 2e14ddf..527440f 100644 --- a/src/pages/Judges/Judges.tsx +++ b/src/pages/Judges/Judges.tsx @@ -1,52 +1,52 @@ import './Judges.scss'; -import JudgeComponent from '../../components/JudgeComponent/JudgeComponent'; +import JudgeCard from '../../components/JudgeCard/JudgeCard'; import { useRef } from 'react'; -import { JudgeInfo } from './JudgeInfo'; +import { JudgeList } from './JudgeList'; import useIsDesktop from '../../util/useIsDesktop'; -type JudgesProps = { - scroll4Ref: React.RefObject; -}; - -export default function Judges({ scroll4Ref }: JudgesProps) { +export default function Judges() { const judge1Ref = useRef(null); const judge2Ref = useRef(null); + const judge1ContainerRef = useRef(null); + const judge2ContainerRef = useRef(null); const isDesktop = useIsDesktop(); return ( -
+
{isDesktop ? ( <>
-
-
+
+

Judges

- {JudgeInfo.slice(0, 3).map(item => ( - ( + ))}
-
-
+
+

Judges

- {JudgeInfo.slice(3, 5).map(item => ( - ( + ))}
@@ -54,17 +54,18 @@ export default function Judges({ scroll4Ref }: JudgesProps) {
) : ( -
+

Judges

- {JudgeInfo.map(item => ( - ( + ))}
diff --git a/src/styles/App.scss b/src/styles/App.scss index 9052e8f..36a79c2 100644 --- a/src/styles/App.scss +++ b/src/styles/App.scss @@ -22,6 +22,10 @@ background-image: linear-gradient(to top, $primary-blue, transparent); } + @media (max-width: $mobile-breakpoint) { + scroll-snap-type: none; + } + section { height: 100vh; display: grid; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 770955f..42acbfe 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -7,11 +7,6 @@ $primary-white: #f1f1f1; $tablet-breakpoint: 1200px; $mobile-breakpoint: 800px; -//Fonts -$header-font: 'Ridge Obligque Regular'; -$subheader-font: 'NeuePlak Bold'; -$p-font: 'NB International Regular'; - // Font Sizes $p-size: 20px; $h4-size: 24px; @@ -19,6 +14,13 @@ $h2-size: 40px; //Spacing and Sizing $mobile-padding: 34px 20px; +$header-font: 'Ridge Obligque Regular'; +$subheader-font: 'NeuePlak Bold'; +$p-font: 'NB International Regular'; +$mono-font: 'NB International Mono', monospace; + +//Spacing and Sizing +$mobile-padding: 34px 30px; $navbar-margin: clamp(2rem, calc(0.5rem + 5vw), 8rem); $navbar-width: 45px; @@ -55,6 +57,11 @@ $content-offset: calc( src: url('/fonts/NB-International-Regular.ttf'); } +@font-face { + font-family: 'NB International Mono'; + src: url('/fonts/NB-International-Mono.ttf'); +} + @font-face { font-family: 'Ridge Obligque Regular'; src: url('/fonts/ridge-bold-oblique.otf');