Squash merged with judges branch

ucsddesignco · Apr 5, 2024 · c8e9c76 · c8e9c76
1 parent 2863426
commit c8e9c76
Show file tree

Hide file tree

Showing 11 changed files with 300 additions and 38 deletions.
diff --git a/public/fonts/NB-International-Mono.ttf b/public/fonts/NB-International-Mono.ttf
diff --git a/src/components/JudgeCard/JudgeCard.scss 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
@@ -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<HTMLParagraphElement>(null);
+  return (
+    //prettier-ignore
+    <div className="judge-card">
+      <div className="svg-container">
+        <a href={linkedin} target="_blank" rel="noopener noreferrer">
+          <img src={imgLink} alt={'Headshot of ' + name} />
+        </a>
+        <svg className='orange-bar' width="37" height="160" viewBox="0 0 37 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path fillRule="evenodd" clipRule="evenodd" d="M0.664307 159.231H9.66431L37 0H28L0.664307 159.231Z" fill="#FF671E"/>
+        </svg>
+      </div>
+      <div className="judge-info">
+        <h3>
+          {name} <span>({pronouns})</span>
+        </h3>
+        <p>{position}</p>
+        <div className="fun-fact-container">
+          <p
+            className="trigger"
+            onMouseEnter={() => {
+              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!
+          </p>
+          <p className="desc" ref={funFactRef}>
+            {funFact}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default JudgeCard;
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 {