From ed76dc40c1aacac2590818472431f4a2db2989c6 Mon Sep 17 00:00:00 2001
From: David Solano <111948487+DavidJSolano@users.noreply.github.com>
Date: Fri, 19 Apr 2024 18:10:49 -0700
Subject: [PATCH] Implement Fall 2024 Board Applications (#1068)

* Include Page for Spring 2024 Board Applications

Added the Spring 2024 Board applications page. This page contains relevant information for each board position and a link to the form.

* Implement the Wave1 Board Page

The wave 1 board page provides context regarding the responsibilities of each executive position for the Fall 24 Executive Board.
---
 src/routes/(site)/wave1/+page.svelte         | 169 ++++++++++++++
 src/routes/(site)/wave1/data.ts              | 218 +++++++++++++++++++
 src/routes/(site)/wave1/position-list.svelte |  13 ++
 src/routes/(site)/wave1/position.svelte      | 119 ++++++++++
 src/routes/(site)/wave1/position.ts          |  11 +
 src/routes/(site)/wave2/+page.svelte         | 173 +++++++++++++++
 src/routes/(site)/wave2/data.ts              | 166 ++++++++++++++
 src/routes/(site)/wave2/position-list.svelte |  13 ++
 src/routes/(site)/wave2/position.svelte      | 119 ++++++++++
 src/routes/(site)/wave2/position.ts          |  11 +
 10 files changed, 1012 insertions(+)
 create mode 100644 src/routes/(site)/wave1/+page.svelte
 create mode 100644 src/routes/(site)/wave1/data.ts
 create mode 100644 src/routes/(site)/wave1/position-list.svelte
 create mode 100644 src/routes/(site)/wave1/position.svelte
 create mode 100644 src/routes/(site)/wave1/position.ts
 create mode 100644 src/routes/(site)/wave2/+page.svelte
 create mode 100644 src/routes/(site)/wave2/data.ts
 create mode 100644 src/routes/(site)/wave2/position-list.svelte
 create mode 100644 src/routes/(site)/wave2/position.svelte
 create mode 100644 src/routes/(site)/wave2/position.ts

diff --git a/src/routes/(site)/wave1/+page.svelte b/src/routes/(site)/wave1/+page.svelte
new file mode 100644
index 000000000..627303392
--- /dev/null
+++ b/src/routes/(site)/wave1/+page.svelte
@@ -0,0 +1,169 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { MetaTags } from 'svelte-meta-tags';
+  import Block from '$lib/components/block/block.svelte';
+  import Button from '$lib/components/button/button.svelte';
+  import Spacing from '$lib/public/legacy/spacing.svelte';
+  import { TextAlignment } from '$lib/public/text-alignment/text-alignment';
+  import PositionList from './position-list.svelte';
+  import { POSITIONS } from './data';
+
+  /**
+   * positions is the list of position elements.
+   */
+  let positions: HTMLDialogElement[] | null = null;
+
+  /**
+   * expanded is true when every position is open.
+   */
+  let expanded = false;
+
+  /**
+   * checkExpanded tests whether a set of positions are expanded.
+   */
+  function checkExpanded() {
+    expanded = positions !== null && positions.every((el) => el.hasAttribute('open'));
+  }
+
+  /**
+   * action is done each time the user clicks the primary button.
+   */
+  function action() {
+    if (positions === null) {
+      return;
+    }
+
+    // Defers checkExpanded for after this function is called,
+    // no matter the path this function continues to take.
+    setTimeout(checkExpanded);
+
+    if (expanded) {
+      positions.forEach((el) => el.removeAttribute('open'));
+      return;
+    }
+
+    positions.forEach((el) => el.setAttribute('open', 'true'));
+  }
+
+  onMount(() => {
+    positions = [...document.querySelectorAll<HTMLDialogElement>('.position')];
+  });
+</script>
+
+<svelte:head>
+  <title>Fall 24 Executive Board Positions | ACM at CSUF</title>
+</svelte:head>
+
+<MetaTags
+  openGraph={{
+    title: 'Fall 2024 Executive Board Applications',
+    description:
+      'Listed below are the positions that are open for the Fall 2024 semester. Please read the descriptions carefully and apply for the position(s) that you are interested in. You may apply for multiple positions, but you may only be selected for one. If you are selected for a position, you will be contacted by the current board member in charge of that position.',
+    url: 'https://acmcsuf.com/wave1',
+    type: 'article',
+    article: {
+      publishedTime: '2024-26-05T00:00:00.000Z',
+      modifiedTime: '2024-26-05T00:00:00.000Z',
+    },
+  }}
+/>
+
+<Spacing --min="175px" --med="200px" --max="200px" />
+
+<Block align={TextAlignment.LEFT}>
+  <h1 slot="headline" class="size-lg">Fall 24 Executive Board Positions</h1>
+  <p slot="text" class="size-sm">
+    Listed below are the positions that are open for 24'/25' Executive Board positions. Please read
+    the descriptions carefully and apply for the position(s) that you are interested in. You may
+    apply for multiple positions, but you may only be selected for one. If you are selected for a
+    position, you will be contacted by the current team lead in charge of that position.
+    <br />
+    <br />
+    <span class="center-btn" on:click={action} on:keypress={action} role="button" tabindex="0">
+      <Button text={`${expanded ? 'Close all.' : 'Expand All!'}`} />
+    </span>
+  </p>
+</Block>
+
+<section class="positions-container">
+  <div
+    class="positions-container-inner"
+    on:click={() => setTimeout(checkExpanded)}
+    on:keypress={() => setTimeout(checkExpanded)}
+    role="button"
+    tabindex="0"
+  >
+    <PositionList data={POSITIONS} />
+  </div>
+</section>
+
+<Spacing --med="64px" />
+
+<span class="center-btn">
+  <Button link="https://forms.gle/gjkYQdxoGhpAxUDp8" text="Apply now!" />
+</span>
+
+<Spacing --med="64px" />
+
+<Block align={TextAlignment.LEFT}>
+  <h1 id="contact-information" slot="headline" class="size-lg">Contact information</h1>
+  <div slot="text" class="contact-text">
+    <p class="size-sm">
+      <span class="acm-italic"
+        >Feel free to contact the ACM Executive Board if you have questions.</span
+      >
+    </p>
+
+    <p class="size-sm">
+      <span class="acm-heaviest">David Solano (ACM President)</span>
+    </p>
+    <ul>
+      <li>Email: <code>dsolano7@csu.fullerton.edu</code></li>
+      <li>Discord: <code>davidjsolano</code></li>
+    </ul>
+
+    <p class="size-sm">
+      <span class="acm-heaviest">Daniel Truong (ACM VP)</span>
+    </p>
+    <ul>
+      <li>Email: <code>anhduy1202@csu.fullerton.edu</code></li>
+      <li>Discord: <code>danieltruong</code></li>
+    </ul>
+  </div>
+</Block>
+
+<Spacing --min="40px" --med="95px" --max="120px" />
+
+<style lang="scss">
+  .center-btn {
+    display: flex;
+    justify-content: center;
+  }
+
+  .contact-text ul {
+    padding: 0 0 0 1rem;
+  }
+
+  .positions-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .positions-container-inner {
+    margin: 0 24px;
+    width: 100%;
+    margin: 2rem 2rem 0;
+  }
+
+  @media (min-width: 768px) {
+    .positions-container {
+      margin-top: 2rem;
+    }
+
+    .positions-container-inner {
+      max-width: 64ch;
+      margin: 0 1rem;
+    }
+  }
+</style>
diff --git a/src/routes/(site)/wave1/data.ts b/src/routes/(site)/wave1/data.ts
new file mode 100644
index 000000000..5dd1b409e
--- /dev/null
+++ b/src/routes/(site)/wave1/data.ts
@@ -0,0 +1,218 @@
+import { li } from '$lib/components/recursive-ul/utils';
+
+import type { ClubPosition } from './position';
+
+/**
+ * The tools that are used in the club.
+ *
+ * @remarks This is a map of tool names to their reasons for being used.
+ */
+export const TOOLS = {
+  'Google Drive/Docs': 'To collaborate on presentations, documents, and spreadsheets.',
+  Discord: 'Internal team communication, assistance for student questions',
+  Figma: 'Create marketing materials and teaching students how to use it',
+  GitHub: 'To collaborate on code, manage projects, and teach students how to use it',
+  'Social media': 'Discord, Instagram, LinkedIn, and YouTube',
+  'Google Colab/Juptyer Notebook': 'Cloud development environment for Python',
+  'Unreal/Unity': 'Game development environment',
+};
+
+export const POSITIONS: ClubPosition<keyof typeof TOOLS>[] = [
+  // Executive positions
+  {
+    title: 'President',
+    teamColor: 'var(--acm-general-rgb)',
+    qualifications: [
+      li("Must have a deep commitment to the organization's mission and goals"),
+      li('Strong leadership, communication, and organizational skills'),
+      li('Committed to promoting diversity and inclusion within the organization'),
+    ],
+    requirements: [li('Must be a member of ACM for at least one semester')],
+    tools: ['Google Drive/Docs', 'Discord', 'GitHub'],
+    responsibilities: [
+      li(
+        'Official spokesperson of the organization, representing the policies, views and opinions of the organization in its relations with the campus and community at large'
+      ),
+      li(
+        'Works with the Computer Science Department to plan, create, and advertise programs that benefit the student population'
+      ),
+      li('Collaborates with board members to establish new programs or to maintain existing ones'),
+      li('Provides resources and support to fellow board members'),
+      li('Meets with club advisors regularly to discuss the state of the organization'),
+    ],
+  },
+  {
+    title: 'Vice President',
+    teamColor: 'var(--acm-general-rgb)',
+    qualifications: [
+      li('Retain similar intentions as the President and provide the backend support'),
+      li('Must be approachable, positive, empathetic, and flexible'),
+      li("Be familiar with the President's responsibilities and be able to step in if needed"),
+    ],
+    tools: ['Google Drive/Docs', 'Discord', 'GitHub'],
+    responsibilities: [
+      li('Presides at the organization’s meetings in the absence of the President'),
+      li('Collaborates with the President to carry out tasks'),
+      li('Organizes at least one board meeting a month'),
+      li('Assist in reaching out other organizations to do collaborations'),
+      li('Oversees all ACM teams and workshops'),
+      li('Check Discord messages and respond to the important discussion in regards to ACM daily'),
+    ],
+  },
+  {
+    title: 'Treasurer',
+    teamColor: 'var(--acm-general-rgb)',
+    qualifications: [
+      li('Strong organizational skills'),
+      li(
+        'Expertise and understanding of financial management, financial reporting, and budgeting.'
+      ),
+      li('Flexible schedule and availability to attend weekly ECS-ICC meetings'),
+    ],
+    tools: ['Google Drive/Docs', 'Discord'],
+    responsibilities: [
+      li('Handle all financial affairs and budgeting of the organization'),
+      li(
+        "Maintain ASI Agency Accounts in the organization's name, which requires signatures of the Treasurer, President, and Advisor"
+      ),
+      li('Manage club equipment and t-shirts'),
+      li('Submit Financial Annual Report'),
+      li('Lead fundraising effort and attaining professional sponsorship'),
+      li('Manage sponsorship packet and disbursement'),
+      li('Attend weekly ECS-ICC meetings and request funding for events if necessary'),
+    ],
+  },
+  {
+    title: 'AI Team Lead',
+    teamColor: 'var(--acm-ai-rgb)',
+    qualifications: [
+      li('Interest in artificial intelligence'),
+      li('Interest in public speaking/leading events'),
+      li('Passion for guiding AI related student projects'),
+      li('Strong leadership, communication, and organizational skills'),
+    ],
+    tools: ['Google Drive/Docs', 'Discord', 'Google Colab/Juptyer Notebook', 'GitHub'],
+    responsibilities: [
+      li(
+        'Create biweekly/weekly workshop presentations prior to events that effectively teach students artificial intelligence'
+      ),
+      li('Recruit members to set up and maintain infrastructure for the AI Team'),
+      li('Check Discord messages and respond to the important discussion in regards to AI daily'),
+      li('Attend all necessary ACM Executive Board Meetings'),
+    ],
+  },
+  {
+    title: 'Algo Team Lead',
+    teamColor: 'var(--acm-algo-rgb)',
+    qualifications: [
+      li('Passion for algorithms'),
+      li('Productive time management'),
+      li('Interest in public speaking and leading events'),
+      li('Strong leadership, communication, and organizational skills'),
+    ],
+    tools: ['Google Drive/Docs', 'Discord'],
+    responsibilities: [
+      li(
+        'Create biweekly/weekly workshop presentations prior to events that effectively teach students algorithms/data structures'
+      ),
+      li('Recruit members to set up and maintain infrastructure for the Algo Team'),
+      li('Check Discord messages and respond to the important discussion in regards to Algo daily'),
+      li('Attend all necessary ACM Executive Board Meetings'),
+    ],
+  },
+  {
+    title: 'Design Team Lead',
+    teamColor: 'var(--acm-design-rgb)',
+    qualifications: [
+      li('Open mind to suggest new ideas in the field of design'),
+      li('Interest in learning and teaching common apps (ex. Figma)'),
+      li('Interest in programming to create basic front-end applications'),
+      li('Strong leadership, communication, and organizational skills'),
+    ],
+    tools: ['Google Drive/Docs', 'Discord', 'Figma'],
+    responsibilities: [
+      li(
+        'Create biweekly/weekly workshop presentations prior to events that effectively teach students design'
+      ),
+      li('Recruit members to set up and maintain infrastructure for the Design Team'),
+      li(
+        'Check Discord messages and respond to the important discussion in regards to Design daily'
+      ),
+      li('Attend all necessary ACM Executive Board Meetings'),
+    ],
+  },
+  {
+    title: 'Dev Team Lead',
+    teamColor: 'var(--acm-dev-rgb)',
+    qualifications: [
+      li('Passion for helping students develop projects'),
+      li('Strong leadership, communication, and organizational skills'),
+      li('Flexibility with skills to assist students in a variety of projects'),
+    ],
+    tools: ['Google Drive/Docs', 'Discord', 'GitHub'],
+    responsibilities: [
+      li(
+        'Create biweekly/weekly workshop presentations prior to events that effectively teach students common development tools'
+      ),
+      li('Oversee and manage multiple projects and teams'),
+      li('Recruit members to set up and maintain infrastructure for the Dev Team'),
+      li('Check Discord messages and respond to the important discussion in regards to Dev daily'),
+      li('Attend all necessary ACM Executive Board Meetings'),
+    ],
+  },
+  {
+    title: 'Game Dev Team Lead',
+    teamColor: 'var(--acm-gamedev-rgb)',
+    qualifications: [
+      li('Passion and interest in game development'),
+      li('Strong leadership, communication, and organizational skills'),
+      li('Flexibility with skills to assist students in a variety of projects'),
+    ],
+    tools: ['Google Drive/Docs', 'Discord', 'GitHub', 'Unreal/Unity'],
+    responsibilities: [
+      li(
+        'Create biweekly/weekly workshop presentations prior to events that effectively teach students game development'
+      ),
+      li('Recruit members to set up and maintain infrastructure for the Game Dev Team'),
+      li(
+        'Check Discord messages and respond to the important discussion in regards to Game Dev daily'
+      ),
+      li('Attend all necessary ACM Executive Board Meetings'),
+    ],
+  },
+  {
+    title: 'Marketing Team Lead',
+    teamColor: 'var(--acm-marketing-rgb)',
+    qualifications: [
+      li('Interest in exploring business and marketing'),
+      li('Substantial awareness or usage of multiple social media platforms'),
+      li('Represent and advocate diversity within the club'),
+      li('Strong management and organizational skills'),
+    ],
+    tools: ['Google Drive/Docs', 'Discord', 'Figma', 'Social media'],
+    responsibilities: [
+      li(
+        'Assist in designing flyers for marketing to be printed and posted on all forms of social media'
+      ),
+      li('Suggest and direct new ideas for the diversification of our club'),
+      li('Oversee and manage all social media platforms'),
+      li('Delegate tasks to other board members of the Marketing Team'),
+    ],
+  },
+  {
+    title: 'Open Source Software Team Lead',
+    teamColor: 'var(--acm-oss-rgb)',
+    qualifications: [
+      li('Passion for web development and open source projects'),
+      li('Ability to work in a team and to teach others'),
+      li('Strong management and organizational skills'),
+      li('Open to learning new technologies'),
+    ],
+    tools: ['Google Drive/Docs', 'Discord', 'GitHub'],
+    responsibilities: [
+      li('Work closely with the Webmaster to maintain the ACM website and OSS projects'),
+      li('Understand the Git workflow and be able to teach it to others'),
+      li('Attend weekly meetings and provide updates on projects'),
+    ],
+  },
+];
diff --git a/src/routes/(site)/wave1/position-list.svelte b/src/routes/(site)/wave1/position-list.svelte
new file mode 100644
index 000000000..3f194eab1
--- /dev/null
+++ b/src/routes/(site)/wave1/position-list.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import Position from './position.svelte';
+  import type { ClubPosition } from './position';
+  import type { TOOLS } from './data';
+
+  export let data: ClubPosition<keyof typeof TOOLS>[];
+</script>
+
+{#each data as position}
+  <Position data={position} />
+{:else}
+  <p>There are no open positions at this time.</p>
+{/each}
diff --git a/src/routes/(site)/wave1/position.svelte b/src/routes/(site)/wave1/position.svelte
new file mode 100644
index 000000000..9f178ed5d
--- /dev/null
+++ b/src/routes/(site)/wave1/position.svelte
@@ -0,0 +1,119 @@
+<script lang="ts">
+  import RecursiveUL from '$lib/components/recursive-ul/recursive-ul.svelte';
+  import type { ClubPosition } from './position';
+  import { TOOLS } from './data';
+
+  export let data: ClubPosition<keyof typeof TOOLS>;
+
+  const id = (data.title as string).replaceAll(/\s/g, '-').toLowerCase();
+  const formattedTools = data.tools.map((name) => ({
+    html: `<span class="acm-heavier">${name}:</span> ${TOOLS[name]}`,
+  }));
+</script>
+
+<details {id} style:--highlights={data.teamColor} class="position">
+  <summary class="position__summary">
+    <h2 class="acm-heavier">{data.title}</h2>
+  </summary>
+
+  <div class="position__body">
+    <div class="position__qualifications">
+      <h3 class="acm-heavier">Qualifications</h3>
+      <RecursiveUL data={data.qualifications} />
+    </div>
+
+    <div class="position__requirements">
+      {#if data.requirements}
+        <h3 class="acm-heavier">Requirements</h3>
+        <RecursiveUL data={data.requirements} />
+      {/if}
+    </div>
+
+    <p class="position__tools">
+      <span class="acm-heavier position__tools__title">Tools:</span>
+      <span class="position__tools__text"
+        >We used following tools to plan and keep up with the workload</span
+      >
+      <RecursiveUL data={formattedTools} />
+    </p>
+
+    <div class="position__responsibilities">
+      <h3 class="acm-heavier">Responsibilities</h3>
+      <RecursiveUL data={data.responsibilities} />
+    </div>
+  </div>
+</details>
+
+<style lang="scss">
+  .position {
+    scroll-padding-top: 1rem;
+    margin: 1rem 0;
+    box-shadow: 0 6px 18px rgba(var(--highlights, --acm-general-rgb), 0.25);
+    transition: all 0.15s ease-in-out;
+    border-radius: 30px;
+    border: 2px solid var(--acm-dark);
+
+    & :global(ul) {
+      padding-left: 1.5rem;
+      margin-left: 0;
+    }
+
+    &:hover {
+      box-shadow: 0 6px 18px rgba(var(--highlights, --acm-general-rgb), 0.65);
+    }
+
+    &[open] {
+      box-shadow: 0 6px 24px rgba(var(--highlights, --acm-general-rgb), 0.75);
+      border: 2px solid rgb(var(--highlights, --acm-general-rgb));
+    }
+
+    &:hover h2,
+    &[open] h2 {
+      color: rgb(var(--highlights, --acm-general-rgb));
+    }
+
+    &__summary {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 1rem;
+      cursor: pointer;
+
+      /**
+       * [START HACK] Remove the default marker from the <details> element.
+       * @see https://stackoverflow.com/a/66814239
+       * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#customizing_the_disclosure_widget
+       */
+      list-style: none;
+      &::marker, /* Latest Chrome, Edge, Firefox */ 
+      &::-webkit-details-marker /* Safari */ {
+        display: none;
+      }
+      /* [END HACK] */
+    }
+
+    &__body {
+      padding: 1rem;
+    }
+
+    &__requirements {
+      margin-bottom: 1rem;
+    }
+
+    &__tools {
+      margin-bottom: 1rem;
+
+      &__title {
+        margin-bottom: 1rem;
+      }
+
+      &__text {
+        margin-bottom: 0.5rem;
+      }
+    }
+
+    &__responsibilities {
+      margin-bottom: 1rem;
+    }
+  }
+</style>
diff --git a/src/routes/(site)/wave1/position.ts b/src/routes/(site)/wave1/position.ts
new file mode 100644
index 000000000..1618790d8
--- /dev/null
+++ b/src/routes/(site)/wave1/position.ts
@@ -0,0 +1,11 @@
+import type { ListItem } from '$lib/components/recursive-ul/types';
+import type { TIERS_JSON } from '$lib/public/board/data';
+
+export interface ClubPosition<ToolNames extends string = string> {
+  title: keyof typeof TIERS_JSON;
+  teamColor: string;
+  qualifications: ListItem[];
+  requirements?: ListItem[];
+  tools: ToolNames[];
+  responsibilities: ListItem[];
+}
diff --git a/src/routes/(site)/wave2/+page.svelte b/src/routes/(site)/wave2/+page.svelte
new file mode 100644
index 000000000..2c21ee021
--- /dev/null
+++ b/src/routes/(site)/wave2/+page.svelte
@@ -0,0 +1,173 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { MetaTags } from 'svelte-meta-tags';
+  import Block from '$lib/components/block/block.svelte';
+  import Button from '$lib/components/button/button.svelte';
+  import Spacing from '$lib/public/legacy/spacing.svelte';
+  import { TextAlignment } from '$lib/public/text-alignment/text-alignment';
+  import PositionList from './position-list.svelte';
+  import { POSITIONS } from './data';
+
+  /**
+   * positions is the list of position elements.
+   */
+  let positions: HTMLDialogElement[] | null = null;
+
+  /**
+   * expanded is true when every position is open.
+   */
+  let expanded = false;
+
+  /**
+   * checkExpanded tests whether a set of positions are expanded.
+   */
+  function checkExpanded() {
+    expanded = positions !== null && positions.every((el) => el.hasAttribute('open'));
+  }
+
+  /**
+   * action is done each time the user clicks the primary button.
+   */
+  function action() {
+    if (positions === null) {
+      return;
+    }
+
+    // Defers checkExpanded for after this function is called,
+    // no matter the path this function continues to take.
+    setTimeout(checkExpanded);
+
+    if (expanded) {
+      positions.forEach((el) => el.removeAttribute('open'));
+      return;
+    }
+
+    positions.forEach((el) => el.setAttribute('open', 'true'));
+  }
+
+  onMount(() => {
+    positions = [...document.querySelectorAll<HTMLDialogElement>('.position')];
+  });
+</script>
+
+<svelte:head>
+  <title>Fall 2024 Board Applications | ACM at CSUF</title>
+</svelte:head>
+
+<MetaTags
+  openGraph={{
+    title: 'Fall 2024 board applications',
+    description:
+      'Listed below are the positions that are open for the Fall 2024 semester. Please read the descriptions carefully and apply for the position(s) that you are interested in. You may apply for multiple positions, but you may only be selected for one. If you are selected for a position, you will be contacted by the current board member in charge of that position.',
+    url: 'https://acmcsuf.com/fall24board',
+    type: 'article',
+    article: {
+      publishedTime: '2023-22-05T00:00:00.000Z',
+      modifiedTime: '2023-22-05T00:00:00.000Z',
+    },
+  }}
+/>
+
+<Spacing --min="175px" --med="200px" --max="200px" />
+
+<Block align={TextAlignment.LEFT}>
+  <h1 slot="headline" class="size-lg">Fall 2024 Board Positions</h1>
+  <p slot="text" class="size-sm">
+    Listed below are the positions that are open for the Fall 2024 semester (semester long
+    position). Please read the descriptions carefully and apply for the position(s) that you are
+    interested in. You may apply for multiple positions, but you may only be selected for one. If
+    you are selected for a position, you will be contacted by the current board member in charge of
+    that position.
+    <br />
+    <br />
+    Last updated May 19, 2024
+    <br />
+    <br />
+    <span class="center-btn" on:click={action} on:keypress={action} role="button" tabindex="0">
+      <Button text={`${expanded ? 'Close all.' : 'Expand All!'}`} />
+    </span>
+  </p>
+</Block>
+
+<section class="positions-container">
+  <div
+    class="positions-container-inner"
+    on:click={() => setTimeout(checkExpanded)}
+    on:keypress={() => setTimeout(checkExpanded)}
+    role="button"
+    tabindex="0"
+  >
+    <PositionList data={POSITIONS} />
+  </div>
+</section>
+
+<Spacing --med="64px" />
+
+<span class="center-btn">
+  <Button link="https://forms.gle/LFyRjjyWT4KUEr6f6" text="Apply now!" />
+</span>
+
+<Spacing --med="64px" />
+
+<Block align={TextAlignment.LEFT}>
+  <h1 id="contact-information" slot="headline" class="size-lg">Contact information</h1>
+  <div slot="text" class="contact-text">
+    <p class="size-sm">
+      <span class="brand-italic"
+        >Feel free to contact the ACM Executive Board if you have questions.</span
+      >
+    </p>
+
+    <p class="size-sm">
+      <span class="brand-em">David Solano (ACM President)</span>
+    </p>
+    <ul>
+      <li>Email: <code>dsolano7@csu.fullerton.edu</code></li>
+      <li>Discord: <code>davidjsolano</code></li>
+    </ul>
+
+    <p class="size-sm">
+      <span class="brand-em">Daniel Truong (ACM VP)</span>
+    </p>
+    <ul>
+      <li>Email: <code>anhduy1202@csu.fullerton.edu</code></li>
+      <li>Discord: <code>danieltruong</code></li>
+    </ul>
+  </div>
+</Block>
+
+<Spacing --min="40px" --med="95px" --max="120px" />
+
+<style lang="scss">
+  .center-btn {
+    display: flex;
+    justify-content: center;
+  }
+
+  .contact-text ul {
+    padding: 0 0 0 1rem;
+  }
+
+  .positions-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .positions-container-inner {
+    margin: 0 24px;
+    width: 100%;
+    margin: 2rem 2rem 0;
+  }
+
+  @media (min-width: 768px) {
+    .positions-container {
+      margin-top: 2rem;
+    }
+
+    .positions-container-inner {
+      max-width: 64ch;
+      margin: 0 1rem;
+    }
+  }
+</style>
diff --git a/src/routes/(site)/wave2/data.ts b/src/routes/(site)/wave2/data.ts
new file mode 100644
index 000000000..5ff9e2324
--- /dev/null
+++ b/src/routes/(site)/wave2/data.ts
@@ -0,0 +1,166 @@
+import { li } from '$lib/components/recursive-ul/utils';
+
+import type { ClubPosition } from './position';
+
+/**
+ * The tools that are used in the club.
+ *
+ * @remarks This is a map of tool names to their reasons for being used.
+ */
+export const TOOLS = {
+  'Google Drive/Docs': 'To collaborate on presentations, documents, and spreadsheets.',
+  Discord: 'Internal team communication, assistance for student questions',
+  Figma: 'Create marketing materials and teaching students how to use it',
+  GitHub: 'To collaborate on code, manage projects, and teach students how to use it',
+  'Social media': 'Discord, Instagram, LinkedIn, and YouTube',
+  'Google Colab/Juptyer Notebook': 'Cloud development environment for Python',
+};
+
+export const POSITIONS: ClubPosition<keyof typeof TOOLS>[] = [
+  {
+    title: 'Web Officer',
+    teamColor: 'var(--acm-general-rgb)',
+    qualifications: [
+      li('Passion for web development and open source projects'),
+      li('Open to learning new technologies'),
+      li('Ability to work in a team and to teach others'),
+    ],
+    tools: ['Google Drive/Docs', 'Discord', 'GitHub'],
+    responsibilities: [
+      li('Work closely with the Webmaster to maintain the ACM website and OSS projects'),
+      li('Understand the Git workflow and be able to teach it to others'),
+      li('Attend weekly meetings and provide updates on projects'),
+    ],
+  },
+  {
+    title: 'AI Officer',
+    teamColor: 'var(--acm-ai-rgb)',
+    qualifications: [
+      li('Interest in artificial intelligence'),
+      li('Interest in public speaking/leading events'),
+      li('Passion for guiding AI related student projects'),
+    ],
+    tools: ['Google Drive/Docs', 'Discord', 'Google Colab/Juptyer Notebook'],
+    responsibilities: [
+      li('Attend AI board meetings and collaborate with other AI board members for workshops'),
+      li(
+        'Create biweekly/weekly workshop presentations prior to events that effectively teach students algorithms/data structures',
+        [li('Suggest new ideas/topics to teach at a workshop')]
+      ),
+      li('Oversee multiple AI semester projects'),
+      li('Check Discord messages and respond to the important discussion in regards to AI daily'),
+    ],
+  },
+  {
+    title: 'Algo Officer',
+    teamColor: 'var(--acm-algo-rgb)',
+    qualifications: [
+      li('Passion for algorithms'),
+      li('Productive time management'),
+      li('Interest in public speaking and leading events'),
+    ],
+    tools: ['Google Drive/Docs', 'Discord'],
+    responsibilities: [
+      li(
+        'Attend Algo board meetings and collaborate with other Algo board members for Algo workshops'
+      ),
+      li(
+        'Create weekly workshop presentations prior to events that effectively teach students algorithms/data structures'
+      ),
+      li('Check Discord messages and respond to the important discussion in regards to Algo daily'),
+    ],
+  },
+  {
+    title: 'Design Officer',
+    teamColor: 'var(--acm-design-rgb)',
+    qualifications: [
+      li('Open mind to suggest new ideas in the field of design'),
+      li('Interest in learning and teaching common apps (ex. Figma)'),
+      li('Interest in programming to create basic front-end applications'),
+    ],
+    tools: ['Google Drive/Docs', 'Discord', 'Figma'],
+    responsibilities: [
+      li(
+        'Host engaging and interesting biweekly/weekly events along with the Design President and Officers'
+      ),
+      li(
+        'Research common design practices in tech and brands to relay this information via workshops and events, and to enhance our chapter'
+      ),
+      li('Attend weekly team meetings to catch up on what’s being worked on, progress, etc.'),
+      li(
+        'Check Discord messages and respond to the important discussion in regards to Design at least daily'
+      ),
+    ],
+  },
+  {
+    title: 'Dev Officer',
+    teamColor: 'var(--acm-dev-rgb)',
+    qualifications: [
+      li('Passion for helping students develop projects'),
+      li('Strong communication and leadership'),
+      li('Flexibility with skills to assist students in a variety of projects'),
+    ],
+    tools: ['Google Drive/Docs', 'Discord', 'GitHub'],
+    responsibilities: [
+      li(
+        'Attend Dev board meetings, provide essential input and collaborate with the Dev President and other officers'
+      ),
+      li('Oversee multiple Dev semester projects'),
+      li('Assist and direct students in ACM Open Source Projects'),
+      li(
+        'Possibility of being tasked to collaborate and participate in events created in partnerships with other ACM branches',
+        [
+          li(
+            'These can include creating and presenting workshops on behalf of Dev or organizing an collab event'
+          ),
+        ]
+      ),
+      li(
+        'Check Discord messages and respond to the important discussion in regards to Dev at least daily'
+      ),
+    ],
+  },
+  {
+    title: 'Game Dev Officer',
+    teamColor: 'var(--acm-gamedev-rgb)',
+    qualifications: [
+      li('Passion and interest in game development'),
+      li('Strong communication and leadership'),
+      li('Flexibility with skills to assist students in a variety of projects'),
+    ],
+    tools: ['Google Drive/Docs', 'Discord', 'GitHub'],
+    responsibilities: [
+      li(
+        'Attend Game Dev board meetings, provide essential input and collaborate with the Game Dev President and other officers'
+      ),
+      li('Assist and direct students in Game Dev related projects'),
+      li(
+        'Host engaging and interesting biweekly/weekly workshops along with the Design President and Officers'
+      ),
+      li(
+        'Research common game dev techniques to relay this information via workshops and events, and to enhance our chapter'
+      ),
+      li(
+        'Check Discord messages and respond to the important discussion in regards to Dev at least daily'
+      ),
+    ],
+  },
+  {
+    title: 'Marketing Officer',
+    teamColor: 'var(--acm-marketing-rgb)',
+    qualifications: [
+      li('Interest in exploring business and marketing'),
+      li('Substantial awareness or usage of multiple social media platforms'),
+      li('Represent and advocate diversity within the club'),
+    ],
+    tools: ['Google Drive/Docs', 'Discord', 'GitHub'],
+    responsibilities: [
+      li(
+        'Assist in designing flyers for marketing to be printed and posted on all forms of social media'
+      ),
+      li('Suggest and direct new ideas for the diversification of our club '),
+      li('Take pictures of our members to add to our socials and website gallery'),
+      li('Produce paragraphs for the announcements in our official Discord server'),
+    ],
+  },
+];
diff --git a/src/routes/(site)/wave2/position-list.svelte b/src/routes/(site)/wave2/position-list.svelte
new file mode 100644
index 000000000..3f194eab1
--- /dev/null
+++ b/src/routes/(site)/wave2/position-list.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import Position from './position.svelte';
+  import type { ClubPosition } from './position';
+  import type { TOOLS } from './data';
+
+  export let data: ClubPosition<keyof typeof TOOLS>[];
+</script>
+
+{#each data as position}
+  <Position data={position} />
+{:else}
+  <p>There are no open positions at this time.</p>
+{/each}
diff --git a/src/routes/(site)/wave2/position.svelte b/src/routes/(site)/wave2/position.svelte
new file mode 100644
index 000000000..9082e096c
--- /dev/null
+++ b/src/routes/(site)/wave2/position.svelte
@@ -0,0 +1,119 @@
+<script lang="ts">
+  import RecursiveUL from '$lib/components/recursive-ul/recursive-ul.svelte';
+  import type { ClubPosition } from './position';
+  import { TOOLS } from './data';
+
+  export let data: ClubPosition<keyof typeof TOOLS>;
+
+  const id = data.title.replaceAll(/\s/g, '-').toLowerCase();
+  const formattedTools = data.tools.map((name) => ({
+    html: `<span class="headers">${name}:</span> ${TOOLS[name]}`,
+  }));
+</script>
+
+<details {id} style:--highlights={data.teamColor} class="position">
+  <summary class="position__summary">
+    <h2 class="headers">{data.title}</h2>
+  </summary>
+
+  <div class="position__body">
+    <div class="position__qualifications">
+      <h3 class="headers">Qualifications</h3>
+      <RecursiveUL data={data.qualifications} />
+    </div>
+
+    <div class="position__requirements">
+      {#if data.requirements}
+        <h3 class="headers">Requirements</h3>
+        <RecursiveUL data={data.requirements} />
+      {/if}
+    </div>
+
+    <p class="position__tools">
+      <span class="headers position__tools__title">Tools:</span>
+      <span class="position__tools__text"
+        >We used following tools to plan and keep up with the workload</span
+      >
+      <RecursiveUL data={formattedTools} />
+    </p>
+
+    <div class="position__responsibilities">
+      <h3 class="headers">Responsibilities</h3>
+      <RecursiveUL data={data.responsibilities} />
+    </div>
+  </div>
+</details>
+
+<style lang="scss">
+  .position {
+    scroll-padding-top: 1rem;
+    margin: 1rem 0;
+    box-shadow: 0 6px 18px rgba(var(--highlights, --acm-general-rgb), 0.25);
+    transition: all 0.15s ease-in-out;
+    border-radius: 30px;
+    border: 2px solid var(--acm-dark);
+
+    & :global(ul) {
+      padding-left: 1.5rem;
+      margin-left: 0;
+    }
+
+    &:hover {
+      box-shadow: 0 6px 18px rgba(var(--highlights, --acm-general-rgb), 0.65);
+    }
+
+    &[open] {
+      box-shadow: 0 6px 24px rgba(var(--highlights, --acm-general-rgb), 0.75);
+      border: 2px solid rgb(var(--highlights, --acm-general-rgb));
+    }
+
+    &:hover h2,
+    &[open] h2 {
+      color: rgb(var(--highlights, --acm-general-rgb));
+    }
+
+    &__summary {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 1rem;
+      cursor: pointer;
+
+      /**
+       * [START HACK] Remove the default marker from the <details> element.
+       * @see https://stackoverflow.com/a/66814239
+       * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#customizing_the_disclosure_widget
+       */
+      list-style: none;
+      &::marker, /* Latest Chrome, Edge, Firefox */ 
+      &::-webkit-details-marker /* Safari */ {
+        display: none;
+      }
+      /* [END HACK] */
+    }
+
+    &__body {
+      padding: 1rem;
+    }
+
+    &__requirements {
+      margin-bottom: 1rem;
+    }
+
+    &__tools {
+      margin-bottom: 1rem;
+
+      &__title {
+        margin-bottom: 1rem;
+      }
+
+      &__text {
+        margin-bottom: 0.5rem;
+      }
+    }
+
+    &__responsibilities {
+      margin-bottom: 1rem;
+    }
+  }
+</style>
diff --git a/src/routes/(site)/wave2/position.ts b/src/routes/(site)/wave2/position.ts
new file mode 100644
index 000000000..1618790d8
--- /dev/null
+++ b/src/routes/(site)/wave2/position.ts
@@ -0,0 +1,11 @@
+import type { ListItem } from '$lib/components/recursive-ul/types';
+import type { TIERS_JSON } from '$lib/public/board/data';
+
+export interface ClubPosition<ToolNames extends string = string> {
+  title: keyof typeof TIERS_JSON;
+  teamColor: string;
+  qualifications: ListItem[];
+  requirements?: ListItem[];
+  tools: ToolNames[];
+  responsibilities: ListItem[];
+}