Hackathons museum (#1046)

* wip

* Update hackathon.svelte

* WIP

* added handleIntersection

* added exit animation

* added event description to the hackathon object.

* added figure and figcaption for the image. added CSS to justify the text.

* Fix errors

---------

Co-authored-by: Karnikaa Velumani <60043611+karnikaavelumani@users.noreply.github.com>
Co-authored-by: Karnikaa Velumani <karnikaavelumani@csu.fullerton.edu>
Co-authored-by: keillor <69380836+keillor@users.noreply.github.com>

src/lib/public/hackathons/hackathon.ts

@@ -0,0 +1,11 @@
+/**
+ * Hackathon represents a hackathon event.
+ */
+export interface Hackathon {
+  id: string;
+  title: string;
+  date: string;
+  location: string;
+  theme: string;
+  description: string;
+}

src/lib/public/hackathons/index.ts

@@ -0,0 +1 @@
+export * from './hackathon';

src/routes/(site)/hackathons/+page.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import Hackathon from './hackathon.svelte';
+  import HACKATHONS from './data';
+  import Spacing from '$lib/public/legacy/spacing.svelte';
+</script>
+
+<svelte:head>
+  <title>Hackthons | ACM at CSUF</title>
+</svelte:head>
+
+<Spacing --min="175px" --med="200px" --max="200px" />
+
+<div class="hackathons">
+  <h1>Hackathons</h1>
+
+  <div>
+    {#each HACKATHONS as hackathon}
+      <Hackathon data={hackathon} />
+    {/each}
+  </div>
+</div>
+
+<style>
+  .hackathons {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+</style>

src/routes/(site)/hackathons/data.ts

@@ -0,0 +1,39 @@
+import type { Hackathon } from '$lib/public/hackathons';
+
+export default [
+  {
+    id: 'tuffyhacks2021',
+    title: 'TuffyHacks 2021',
+    date: 'March 2021',
+    location: 'Virtual',
+    theme: 'Camping',
+    description:
+      'It all began in 2021 when Jacob Nguyen and Samuel Sandoval reignited the tradition of hackathons at California State University Fullerton, being the first CSUF hackathon in decades. Due to the global pandemic, TuffyHacks 2021 was held virtually.',
+  },
+  {
+    id: 'tuffyhacks2022',
+    title: 'TuffyHacks 2022',
+    date: 'February 2022',
+    location: 'Virtual',
+    theme: 'Cyberpunk',
+    description: 'Following a successful first event, Jacob and Sam hosted TuffyHacks 2022.',
+  },
+  {
+    id: 'fullyhacks2023',
+    title: 'FullyHacks 2023',
+    date: 'April 2023',
+    location: 'California State University, Fullerton',
+    theme: 'Party',
+    description:
+      'As Jacob and Sam approached their graduation dates, they transitioned the leadership role to Daniel "Anh Duy" Truong. The hackathon name was changed to "FullyHacks" starting with FullyHacks 2023. With the global pandemic starting to improve, FullyHacks 2023 became the first in-person hackathon event of the series.',
+  },
+  {
+    id: 'fullyhacks2024',
+    title: 'FullyHacks 2024',
+    date: 'February 2024',
+    location: 'California State University, Fullerton',
+    theme: 'Neon',
+    description:
+      'Now open to all college students, FullyHacks 2024 garnered an interest of over 400+ students and is the largest event of ACM at CSUF.',
+  },
+] as const satisfies Hackathon[];

src/routes/(site)/hackathons/hackathon.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import type { Hackathon } from '$lib/public/hackathons';
+
+  export let data: Hackathon;
+</script>
+
+<section class="hackathon" id={data.id}>
+  <h2><a href="#{data.id}">{data.title}</a></h2>
+  <p>📅 {data.date}</p>
+  <p>📍 {data.location}</p>
+  <p>🎭 {data.theme}</p>
+  <img src="/assets/hackathon-{data.id}.webp" alt="{data.title} website" />
+  <p>{data.description}</p>
+</section>
+
+<style>
+  .hackathon {
+    scroll-margin-top: 100px;
+    margin-bottom: 10em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .hackathon img {
+    max-width: 50%;
+    height: auto;
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+
+  .hackathon p {
+    text-align: center;
+    max-width: 50ch;
+  }
+</style>