Merge branch 'main' into fix/900

src/lib/components/board-member/board-member.svelte

@@ -4,11 +4,10 @@
   export let src: string;
   export let alt: string;
   export let color = 'var(--acm-general-rgb)';
-  export let legacy = false;
 </script>
 
 <div class="board-member__container" title={alt}>
-  <BoardPicture {src} {color} {legacy} />
+  <BoardPicture {src} {color} />
 </div>
 
 <style lang="scss">

src/lib/components/board-member/board-picture.svelte

@@ -1,48 +1,47 @@
 <script lang="ts">
-  /**
-   * See: https://codepen.io/alancortez1337/pen/NWzKqKE?editors=1100
-   */
   export let src: string;
   export let color: string;
-  export let legacy = false;
 </script>
 
-<svg viewBox="0 0 1037 1037" fill="none" xmlns="http://www.w3.org/2000/svg" style:--color={color}>
+<!-- Create the viewBox of the image -->
+<svg
+  viewBox="-50 -50 1200 1200"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  style:--color={color}
+>
   <defs>
     <clipPath id="shape">
       <path
         d="M53.093 646.116C-17.6508 575.372 -17.6508 460.674 53.093 389.93L389.93 53.0929C460.674 -17.6509 575.372 -17.6509 646.116 53.093L982.954 389.93C1053.7 460.674 1053.7 575.372 982.954 646.116L646.116 982.953C575.372 1053.7 460.674 1053.7 389.93 982.953L53.093 646.116Z"
-        fill="#2C91C6"
       />
     </clipPath>
   </defs>
-  <foreignObject x="0" y="0" width="100%" height="100%" clip-path="url(#shape)">
-    <div>
-      <img {src} alt="Board member" class:legacy />
-    </div>
-  </foreignObject>
+
+  <!-- Create a path for the border -->
+  <g transform="translate(-50, -50) scale(1.1)">
+    <path
+      d="M53.093 646.116C-17.6508 575.372 -17.6508 460.674 53.093 389.93L389.93 53.0929C460.674 -17.6509 575.372 -17.6509 646.116 53.093L982.954 389.93C1053.7 460.674 1053.7 575.372 982.954 646.116L646.116 982.953C575.372 1053.7 460.674 1053.7 389.93 982.953L53.093 646.116Z"
+      fill="rgba(var(--color, var(--acm-general-rgb))"
+    />
+  </g>
+
+  <image clip-path="url(#shape)" xlink:href={src} />
 </svg>
 
 <style lang="scss">
   svg {
-    filter: drop-shadow(0px 0px 10px rgba(var(--color, var(--acm-general-rgb)), 0.5));
-    width: 140px;
-    height: 140px;
+    width: 150px;
+    height: 150px;
 
     &:hover {
       transform: scale(1.06) rotateZ(1.2deg);
       transition: all 0.2 cubic-bezier(0.86, 0, 0.07, 1);
     }
   }
 
-  img {
-    width: 100%;
-    height: 100%;
-
-    &.legacy {
-      width: calc(155%);
-      height: calc(155%);
-      transform: translate(-17.75%, -14.5%);
-    }
+  image {
+    width: 87%;
+    height: 87%;
   }
 </style>

src/lib/public/board/data/index.ts

@@ -1,32 +1,7 @@
-import { Term, type Team } from '$lib/public/board/types';
-import OFFICERS_JSON from './officers.json';
-import TIERS_JSON from './tiers.json';
-import TEAMS_JSON from './teams.json';
-export { COLORS } from './colors';
+export { default as TIERS_JSON } from './tiers.json';
+export { default as OFFICERS_JSON } from './officers.json' assert { type: 'json' };
+export { default as TEAMS_JSON } from './teams.json' assert { type: 'json' };
 
-export { OFFICERS_JSON, TIERS_JSON, TEAMS_JSON };
-
-export const VISIBLE_TERMS = [
-  Term.Fall23,
-  Term.Spring23,
-  Term.Fall22,
-  Term.Spring22,
-  Term.Fall21,
-  Term.Spring21,
-];
-
-export const TIERS = { ...TIERS_JSON };
-
-export const OFFICERS = [...OFFICERS_JSON];
-
-/** TEAMS is a map of internal teams by their name, {@link Team.id}. */
-export const TEAMS = [...TEAMS_JSON].reduce(
-  (tt: { [key: (typeof TEAMS_JSON)[number]['id']]: Team }, t) => {
-    tt[t.id] = t;
-    return tt;
-  },
-  {}
-);
-
-/** Pinned paths are featured on the landing page. */
-export const PINNED_TEAMS = [TEAMS.ai, TEAMS.algo, TEAMS.design, TEAMS.dev] as const;
+export * from './colors';
+export * from './teams';
+export * from './terms';