Add member metadata and flip card

EthanThatOneKid · Sep 28, 2022 · d370ac9 · d370ac9
1 parent bd965d2
commit d370ac9
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 11 deletions.
diff --git a/src/lib/components/svg/github.svelte b/src/lib/components/svg/github.svelte
@@ -0,0 +1,14 @@
+<svg
+  viewBox="64 64 896 896"
+  focusable="false"
+  data-icon="github"
+  width="64"
+  height="64"
+  fill="currentColor"
+  aria-hidden="true"
+>
+  <title>GitHub</title>
+  <path
+    d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0138.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"
+  />
+</svg>
diff --git a/src/lib/components/svg/linkedin.svelte b/src/lib/components/svg/linkedin.svelte
@@ -1,4 +1,5 @@
 <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>LinkedIn</title>
   <path
     d="M51.5213 0H4.785C2.23125 0 0 1.8375 0 4.36125V51.2012C0 53.7387 2.23125 56 4.785 56H51.5075C54.075 56 56 53.7237 56 51.2012V4.36125C56.015 1.8375 54.075 0 51.5213 0ZM17.3587 46.6787H9.33625V21.735H17.3587V46.6787ZM13.625 17.9425H13.5675C11 17.9425 9.3375 16.0312 9.3375 13.6388C9.3375 11.2025 11.0438 9.33625 13.6688 9.33625C16.2938 9.33625 17.9 11.1888 17.9575 13.6388C17.9563 16.0312 16.2938 17.9425 13.625 17.9425ZM46.6787 46.6787H38.6562V33.04C38.6562 29.7725 37.4888 27.54 34.5863 27.54C32.3688 27.54 31.0562 29.04 30.4725 30.5013C30.2537 31.0263 30.195 31.7412 30.195 32.4712V46.6787H22.1725V21.735H30.195V25.2062C31.3625 23.5437 33.1862 21.1513 37.43 21.1513C42.6963 21.1513 46.68 24.6225 46.68 32.1063L46.6787 46.6787Z"
     fill="white"

diff --git a/src/lib/public/board/data/officers.json b/src/lib/public/board/data/officers.json
@@ -71,6 +71,10 @@
   },
   {
     "fullName": "Alan Cortez",
+    "metadata": {
+      "website": "https://alancortez1337.github.io/portfolio/",
+      "github": "alancortez1337"
+    },
     "positions": {
       "S22": {
         "title": "Create Officer",
@@ -107,6 +111,10 @@
   },
   {
     "fullName": "Ethan Davidson",
+    "metadata": {
+      "github": "EthanThatOneKid",
+      "linkedin": "etok"
+    },
     "positions": {
       "S21": {
         "title": "Webmaster",
@@ -139,6 +147,9 @@
   },
   {
     "fullName": "Diamond Dinh",
+    "metadata": {
+      "github": "diamondburned"
+    },
     "positions": {
       "S22": {
         "title": "Dev Project Manager",

diff --git a/src/lib/public/board/types.ts b/src/lib/public/board/types.ts
@@ -9,7 +9,11 @@ export enum Term {
 export interface Officer {
   fullName: string;
   picture: string;
-  displayName?: string;
+  metadata?: {
+    website?: string;
+    github?: string;
+    linkedin?: string;
+  };
 
   positions: {
     [t in Term]?: {

diff --git a/src/lib/server/blog/posts.ts b/src/lib/server/blog/posts.ts
@@ -111,6 +111,8 @@ function cacheBlogPosts(output: any): BlogPost[] {
 
 function getOfficerByGhUsername(ghUsername: string): Officer | null {
   // get author by GitHub username
-  const officer = OFFICERS.find((o) => o.displayName !== undefined && o.displayName === ghUsername);
+  const officer = OFFICERS.find(
+    (o) => o.metadata && o.metadata.github && o.metadata.github === ghUsername
+  );
   return officer ?? null;
 }
diff --git a/src/routes/about/officer-profile.svelte b/src/routes/about/officer-profile.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
   import type { Officer } from '$lib/public/board/types';
+  import GitHub from '$lib/components/svg/github.svelte';
+  import LinkedIn from '$lib/components/svg/linkedin.svelte';
   import {
     termIndex,
     getOfficerTierByTermIndex,
@@ -12,6 +14,7 @@
 
   const officerName = info.fullName ?? '';
   const officerPicture = info.picture ?? placeholderPicture;
+  const officerMetadata = info.metadata ?? {};
 
   $: titleHTML = getPositionByTermIndex(info, $termIndex)
     ?.title.replace(/Algo\s/, `<b class="acm-purple">Algo&nbsp;</b>`)
@@ -26,19 +29,42 @@
   $: officerTier = dev ? getOfficerTierByTermIndex(info, $termIndex) : '';
 </script>
 
-<div class="officer-container">
-  <img
-    class="officer-image"
-    src={`../assets/authors/${officerPicture}`}
-    alt={`Image of ${officerName}.`}
-  />
+<div class="officer-container" class:officer-has-metadata={info.metadata !== undefined}>
+  <div class="officer-3d-flipcard">
+    <div class="officer-flipcard">
+      <img
+        class="officer-image"
+        src={`../assets/authors/${officerPicture}`}
+        alt={`Image of ${officerName}.`}
+      />
+      <div class="officer-metadata">
+        {#if officerMetadata.github}
+          <p class="officer-github">
+            <span><GitHub /> GitHub</span>
+            <br />
+            <a target="blank" href="https://github.com/{officerMetadata.github}">
+              <span>{officerMetadata.github}</span>
+            </a>
+          </p>
+        {/if}
+        {#if officerMetadata.linkedin}
+          <p class="officer-linkedin">
+            <span><LinkedIn /> LinkedIn</span>
+            <br />
+            <a target="blank" href="https://www.linkedin.com/in/{officerMetadata.linkedin}">
+              <span>{officerMetadata.linkedin}</span>
+            </a>
+          </p>
+        {/if}
+      </div>
+    </div>
+  </div>
 
-  <div>
+  <div class="officer-placard">
     <h3 class="brand-header">
       {officerName}
       {#if officerTier}<br />{officerTier}<br />{/if}
     </h3>
-
     <p class="brand-med">
       {@html titleHTML}
     </p>
@@ -53,7 +79,7 @@
     align-items: center;
     text-align: center;
 
-    .officer-image {
+    .officer-flipcard {
       width: 200px;
       height: auto;
     }
@@ -62,4 +88,77 @@
       max-width: 250px;
     }
   }
+
+  .officer-container.officer-has-metadata:hover .officer-flipcard {
+    transform: rotateY(180deg);
+  }
+
+  .officer-3d-flipcard {
+    perspective: 2000px;
+
+    .officer-flipcard {
+      position: relative;
+      height: 200px;
+
+      .officer-image,
+      .officer-metadata {
+        top: 0;
+        left: 0;
+        height: 100%;
+        position: absolute;
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+      }
+
+      &,
+      .officer-metadata {
+        transition: transform 0.3s ease;
+        transform-style: preserve-3d;
+      }
+
+      .officer-metadata {
+        width: 100%;
+        height: 100%;
+        padding: 16px 24px;
+        border-radius: 20px;
+        box-sizing: border-box;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: left;
+        gap: 0.75em;
+
+        transform: rotateY(180deg);
+
+        & :global(svg) {
+          width: 1.5em;
+          height: 1.5em;
+          margin-bottom: -0.35em;
+          margin-right: 0.15em;
+        }
+
+        p {
+          text-align: left;
+          & > span:first-child {
+            font-weight: bold;
+          }
+        }
+
+        a {
+          text-decoration: none;
+          line-height: 2em;
+          span {
+            color: var(--acm-sky);
+          }
+        }
+
+        /* Allow clicking on the background of the extra information to unflip. */
+        pointer-events: none;
+        a {
+          pointer-events: auto;
+        }
+      }
+    }
+  }
 </style>