feat: add linkedin redirect when judge image is clicked

ucsddesignco · Apr 2, 2024 · f9c3cff · f9c3cff
1 parent 3375380
commit f9c3cff
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git a/src/components/JudgeComponent/JudgeComponent.tsx b/src/components/JudgeComponent/JudgeComponent.tsx
@@ -6,6 +6,7 @@ interface JudgeProps {
   position: string;
   funFact: string;
   imgLink: string;
+  linkedin: string;
 }
 
 const JudgeComponent = ({
@@ -14,25 +15,28 @@ const JudgeComponent = ({
   position,
   funFact,
   imgLink,
+  linkedin,
 }: JudgeProps) => {
   // Convert name to image ID
   const imageID = name.split(" ").join("_").toLowerCase();
   return (
     //prettier-ignore
     <div className="judge-card">
       <div className="svg-container">
-        <svg className='svg-image' width="161" height="160" viewBox="0 0 161 160" xmlns="http://www.w3.org/2000/svg">
-          <defs>
-            <mask id="trapezoidMask">
-              <rect width="161" height="160" fill="black"/>
-              <path d="M0 159.231L27.3357 0H161L133.664 159.231H0Z" fill="white"/>
-            </mask>
-          </defs>
-          <rect width="161" height="160" mask="url(#trapezoidMask)" fill={`url(#${imageID})`}/>
-          <pattern id={imageID} patternUnits="userSpaceOnUse" width="161" height="160">
-            <image href={imgLink} className="judge-image" preserveAspectRatio="xMidYMid slice"/>
-          </pattern>
-        </svg>
+        <a href={linkedin} target="_blank" rel="noopener noreferrer">
+          <svg className='svg-image' width="161" height="160" viewBox="0 0 161 160" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+              <mask id="trapezoidMask">
+                <rect width="161" height="160" fill="black"/>
+                <path d="M0 159.231L27.3357 0H161L133.664 159.231H0Z" fill="white"/>
+              </mask>
+            </defs>
+            <rect width="161" height="160" mask="url(#trapezoidMask)" fill={`url(#${imageID})`}/>
+            <pattern id={imageID} patternUnits="userSpaceOnUse" width="161" height="160">
+              <image href={imgLink} className="judge-image" preserveAspectRatio="xMidYMid slice"/>
+            </pattern>
+          </svg>
+        </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>

diff --git a/src/pages/Judges/JudgeInfo.tsx b/src/pages/Judges/JudgeInfo.tsx
@@ -6,6 +6,7 @@ export const JudgeInfo = [
     funFact: "I enjoy designing and sewing my clothes for myself.",
     imgLink:
       "https://res.cloudinary.com/design-co-ucsd/image/upload/v1711863617/frontiers24/judges/julia_nguyen_a2mnj2.webp",
+    linkedin: "https://www.linkedin.com/in/nguyenjuliaa/",
   },
   {
     name: "Alan Tran",
@@ -15,6 +16,7 @@ export const JudgeInfo = [
       "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/v1711863614/frontiers24/judges/alan_tran_axarse.webp",
+    linkedin: "https://www.linkedin.com/in/alantran2/",
   },
   {
     name: "Dexter Zavalza",
@@ -23,6 +25,7 @@ export const JudgeInfo = [
     funFact: "First job out of college was in a surfboard factory.",
     imgLink:
       "https://res.cloudinary.com/design-co-ucsd/image/upload/v1711863615/frontiers24/judges/dexter_zavalza_pgx3sy.webp",
+    linkedin: "https://www.linkedin.com/in/dzh-s/",
   },
   {
     name: "Andrew Nguyen",
@@ -32,6 +35,7 @@ export const JudgeInfo = [
       "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/v1711863616/frontiers24/judges/andrew_nguyen_ur8x1m.webp",
+    linkedin: "https://www.linkedin.com/in/andrewduynguyen/",
   },
   {
     name: "Soon-Won Dy",
@@ -41,5 +45,6 @@ export const JudgeInfo = [
       "I love going to cafes & recreating their fancy coffees and baked goods at home.",
     imgLink:
       "https://res.cloudinary.com/design-co-ucsd/image/upload/v1711863613/frontiers24/judges/soon-won_dy_hwyj2p.webp",
+    linkedin: "https://www.linkedin.com/in/soonwondy/",
   },
 ];
diff --git a/src/pages/Judges/Judges.tsx b/src/pages/Judges/Judges.tsx
@@ -29,6 +29,7 @@ export default function Judges() {
                   position={item.position}
                   funFact={item.funFact}
                   imgLink={item.imgLink}
+                  linkedin={item.linkedin}
                 />
               ))}
             </div>
@@ -44,6 +45,7 @@ export default function Judges() {
                   position={item.position}
                   funFact={item.funFact}
                   imgLink={item.imgLink}
+                  linkedin={item.linkedin}
                 />
               ))}
             </div>
@@ -61,6 +63,7 @@ export default function Judges() {
                 position={item.position}
                 funFact={item.funFact}
                 imgLink={item.imgLink}
+                linkedin={item.linkedin}
               />
             ))}
           </div>