diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 8ce5711..d73364b 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -20,5 +20,5 @@ jobs:
 
       - run: pnpm install --frozen-lockfile
       - run: pnpm lint
-      - run: pnpm test:run
+      - run: pnpm test
       - run: pnpm build
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 5a63e01..6f8053b 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -9,5 +9,7 @@
   },
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "oxc.enable": true
+  "oxc.enable": true,
+  "oxc.configPath": "oxlint.config.ts",
+  "typescript.tsdk": "node_modules/typescript/lib"
 }
diff --git a/eslint.config.ts b/eslint.config.ts
index 796e300..81f89b7 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -10,6 +10,7 @@ export default defineConfig([
   js.configs.recommended,
   ...tseslint.configs.recommended,
   ...astro.configs.recommended,
+
   ...oxlint.configs["flat/recommended"],
 
   prettierConfig,
diff --git a/oxlint.config.ts b/oxlint.config.ts
new file mode 100644
index 0000000..061d5d3
--- /dev/null
+++ b/oxlint.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from "oxlint";
+
+export default defineConfig({
+  rules: {
+    "no-unused-expressions": "off",
+  },
+});
diff --git a/package.json b/package.json
index 1f67c2b..24cba2b 100644
--- a/package.json
+++ b/package.json
@@ -14,8 +14,8 @@
     "lint:eslint": "eslint . --fix",
     "lint:oxlint": "oxlint . --fix",
     "lint": "pnpm lint:eslint && pnpm lint:oxlint",
-    "test": "vitest",
-    "test:run": "vitest run",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "typecheck": "astro check",
     "test:coverage": "vitest run --coverage",
     "format": "prettier . --write",
@@ -29,6 +29,7 @@
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "astro": "^6.4.4",
+    "gsap": "^3.15.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "tailwindcss": "^4.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index adec7ca..7b8c7e1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -28,6 +28,9 @@ importers:
       astro:
         specifier: ^6.4.4
         version: 6.4.4(@types/node@25.9.3)(jiti@2.7.0)(lightningcss@1.32.0)(rollup@4.61.1)(yaml@2.9.0)
+      gsap:
+        specifier: ^3.15.0
+        version: 3.15.0
       react:
         specifier: ^19.2.7
         version: 19.2.7
@@ -3454,6 +3457,12 @@ packages:
         integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==,
       }
 
+  gsap@3.15.0:
+    resolution:
+      {
+        integrity: sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==,
+      }
+
   h3@1.15.11:
     resolution:
       {
@@ -7934,6 +7943,8 @@ snapshots:
 
   graceful-fs@4.2.11: {}
 
+  gsap@3.15.0: {}
+
   h3@1.15.11:
     dependencies:
       cookie-es: 1.2.3
diff --git a/src/components/astro/DiscordCTA.astro b/src/components/discord/DiscordCTA.astro
similarity index 100%
rename from src/components/astro/DiscordCTA.astro
rename to src/components/discord/DiscordCTA.astro
diff --git a/src/components/astro/DiscordCTA.astro.test.ts b/src/components/discord/DiscordCTA.astro.test.ts
similarity index 86%
rename from src/components/astro/DiscordCTA.astro.test.ts
rename to src/components/discord/DiscordCTA.astro.test.ts
index edbb567..a496d82 100644
--- a/src/components/astro/DiscordCTA.astro.test.ts
+++ b/src/components/discord/DiscordCTA.astro.test.ts
@@ -1,5 +1,5 @@
+import { createTestContainer } from "@test/createTestContainer";
 import { describe, expect, it } from "vitest";
-import { createTestContainer } from "../../test/createTestContainer";
 import DiscordCTA from "./DiscordCTA.astro";
 
 describe("DiscordCTA", () => {
diff --git a/src/components/astro/DiscordWidget.astro b/src/components/discord/DiscordWidget.astro
similarity index 98%
rename from src/components/astro/DiscordWidget.astro
rename to src/components/discord/DiscordWidget.astro
index b0d42e7..0aa3c1b 100644
--- a/src/components/astro/DiscordWidget.astro
+++ b/src/components/discord/DiscordWidget.astro
@@ -3,8 +3,8 @@ import {
   countMembersByStatus,
   formatPresenceCount,
   sortMembersByStatus,
-} from "../../lib/discordWidget";
-import type { DiscordWidgetData } from "../../schemas/discordWidget";
+} from "@lib/discordWidget";
+import type { DiscordWidgetData } from "@schemas/discordWidget";
 import DiscordCTA from "./DiscordCTA.astro";
 
 interface Props {
diff --git a/src/components/astro/DiscordWidget.astro.test.ts b/src/components/discord/DiscordWidget.astro.test.ts
similarity index 100%
rename from src/components/astro/DiscordWidget.astro.test.ts
rename to src/components/discord/DiscordWidget.astro.test.ts
diff --git a/src/components/astro/Footer.astro b/src/components/footer/Footer.astro
similarity index 94%
rename from src/components/astro/Footer.astro
rename to src/components/footer/Footer.astro
index c8ba908..784b8dc 100644
--- a/src/components/astro/Footer.astro
+++ b/src/components/footer/Footer.astro
@@ -1,5 +1,5 @@
 ---
-import DiscordCTA from "./DiscordCTA.astro";
+import DiscordCTA from "@components/discord/DiscordCTA.astro";
 
 interface Props {
   siteName: string;
diff --git a/src/components/astro/Header.astro b/src/components/header/Header.astro
similarity index 78%
rename from src/components/astro/Header.astro
rename to src/components/header/Header.astro
index 423c01e..b310ec5 100644
--- a/src/components/astro/Header.astro
+++ b/src/components/header/Header.astro
@@ -1,8 +1,8 @@
 ---
-import DiscordCTA from "./DiscordCTA.astro";
-import ServerLogo from "./ServerLogo.astro";
-import MobileNav from "../react/MobileNav";
-import { navLinks } from "../../lib/nav";
+import DiscordCTA from "@components/discord/DiscordCTA.astro";
+import ServerLogo from "@components/icons/ServerLogo.astro";
+import { navLinks } from "@lib/nav";
+import MobileNav from "./MobileNav.astro";
 
 interface Props {
   siteName: string;
@@ -44,6 +44,6 @@ const { siteName, discordUrl } = Astro.props;
       <DiscordCTA href={discordUrl} />
     </div>
 
-    <MobileNav client:load navLinks={navLinks} discordUrl={discordUrl} />
+    <MobileNav navLinks={navLinks} discordUrl={discordUrl} />
   </div>
 </header>
diff --git a/src/components/astro/Header.astro.test.ts b/src/components/header/Header.astro.test.ts
similarity index 90%
rename from src/components/astro/Header.astro.test.ts
rename to src/components/header/Header.astro.test.ts
index e0d3b2e..e684cf7 100644
--- a/src/components/astro/Header.astro.test.ts
+++ b/src/components/header/Header.astro.test.ts
@@ -1,5 +1,5 @@
+import { createTestContainer } from "@test/createTestContainer";
 import { describe, expect, it } from "vitest";
-import { createTestContainer } from "../../test/createTestContainer";
 import Header from "./Header.astro";
 
 describe("Header", () => {
diff --git a/src/components/header/MobileNav.astro b/src/components/header/MobileNav.astro
new file mode 100644
index 0000000..aeca2a9
--- /dev/null
+++ b/src/components/header/MobileNav.astro
@@ -0,0 +1,114 @@
+---
+import type { NavLink } from "@lib/nav";
+
+interface Props {
+  navLinks: NavLink[];
+  discordUrl: string;
+}
+
+const { navLinks, discordUrl } = Astro.props;
+const menuId = "mobile-nav-menu";
+---
+
+<mobile-nav class="md:hidden">
+  <button
+    type="button"
+    aria-expanded="false"
+    aria-controls={menuId}
+    class="border-border bg-surface-elevated text-ink hover:bg-surface-hover inline-flex items-center justify-center rounded-lg border px-3 py-2 text-sm font-medium"
+  >
+    Menu
+  </button>
+
+  <nav
+    id={menuId}
+    aria-label="Mobile navigation"
+    aria-hidden="true"
+    class="border-border bg-surface-elevated absolute top-full right-0 left-0 border-b px-4 py-4 shadow-md aria-hidden:hidden"
+  >
+    <ul class="flex flex-col gap-3">
+      {
+        navLinks.map((link) => (
+          <li>
+            <a
+              href={link.href}
+              class="text-ink-muted hover:text-brand-500 block text-sm font-medium"
+            >
+              {link.label}
+            </a>
+          </li>
+        ))
+      }
+      <li>
+        <a
+          href={discordUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="bg-mod hover:bg-mod-700 inline-flex rounded-lg px-4 py-2 text-sm font-semibold text-white"
+        >
+          Join Discord
+        </a>
+      </li>
+    </ul>
+  </nav>
+</mobile-nav>
+
+<script>
+  import { defineCustomElement } from "@lib/custom-elements";
+
+  class MobileNav extends HTMLElement {
+    private button!: HTMLButtonElement;
+    private nav!: HTMLElement;
+    private firstLink!: HTMLAnchorElement | null;
+
+    #open = false;
+
+    connectedCallback() {
+      this.button = this.querySelector("button")!;
+      this.nav = this.querySelector("nav")!;
+      this.firstLink = this.nav.querySelector("a");
+
+      this.button.addEventListener("click", this.#toggle);
+      this.nav.addEventListener("click", this.#onNavClick);
+      document.addEventListener("keydown", this.#onKeyDown);
+    }
+
+    disconnectedCallback() {
+      this.button.removeEventListener("click", this.#toggle);
+      this.nav.removeEventListener("click", this.#onNavClick);
+      document.removeEventListener("keydown", this.#onKeyDown);
+    }
+
+    #toggle = () => {
+      this.#open ? this.#close() : this.#openMenu();
+    };
+
+    #openMenu() {
+      this.#open = true;
+      this.nav.removeAttribute("aria-hidden");
+      this.button.setAttribute("aria-expanded", "true");
+      this.button.textContent = "Close";
+      this.firstLink?.focus();
+    }
+
+    #close() {
+      this.#open = false;
+      this.nav.setAttribute("aria-hidden", "true");
+      this.button.setAttribute("aria-expanded", "false");
+      this.button.textContent = "Menu";
+    }
+
+    #onNavClick = (e: Event) => {
+      if ((e.target as HTMLElement).closest("a")) this.#close();
+    };
+
+    #onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && this.#open) {
+        this.#close();
+        this.button.focus();
+      }
+    };
+  }
+
+  defineCustomElement("mobile-nav", MobileNav);
+</script>
diff --git a/src/components/react/MobileNav.test.tsx b/src/components/header/MobileNav.test.tsx
similarity index 95%
rename from src/components/react/MobileNav.test.tsx
rename to src/components/header/MobileNav.test.tsx
index b1a7508..d07e5a7 100644
--- a/src/components/react/MobileNav.test.tsx
+++ b/src/components/header/MobileNav.test.tsx
@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
+import { navLinks } from "@lib/nav";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
-import { navLinks } from "../../lib/nav";
 import MobileNav from "./MobileNav";
 
 describe("MobileNav", () => {
diff --git a/src/components/react/MobileNav.tsx b/src/components/header/MobileNav.tsx
similarity index 98%
rename from src/components/react/MobileNav.tsx
rename to src/components/header/MobileNav.tsx
index fc664a2..c573cd6 100644
--- a/src/components/react/MobileNav.tsx
+++ b/src/components/header/MobileNav.tsx
@@ -1,5 +1,5 @@
+import type { NavLink } from "@lib/nav";
 import { useEffect, useId, useRef, useState } from "react";
-import type { NavLink } from "../../lib/nav";
 
 interface MobileNavProps {
   navLinks: NavLink[];
diff --git a/src/components/astro/ServerLogo.astro b/src/components/icons/ServerLogo.astro
similarity index 100%
rename from src/components/astro/ServerLogo.astro
rename to src/components/icons/ServerLogo.astro
diff --git a/src/components/astro/CommunityCallout.astro b/src/components/landing/CommunityCallout.astro
similarity index 98%
rename from src/components/astro/CommunityCallout.astro
rename to src/components/landing/CommunityCallout.astro
index f69d9bd..957ccfa 100644
--- a/src/components/astro/CommunityCallout.astro
+++ b/src/components/landing/CommunityCallout.astro
@@ -1,7 +1,3 @@
----
-
----
-
 <aside
   class="border-border bg-surface-elevated border-b py-12 sm:py-16"
   aria-labelledby="community-callout-heading"
diff --git a/src/components/astro/CommunityCallout.astro.test.ts b/src/components/landing/CommunityCallout.astro.test.ts
similarity index 87%
rename from src/components/astro/CommunityCallout.astro.test.ts
rename to src/components/landing/CommunityCallout.astro.test.ts
index 1f55cbb..bb02f2a 100644
--- a/src/components/astro/CommunityCallout.astro.test.ts
+++ b/src/components/landing/CommunityCallout.astro.test.ts
@@ -1,5 +1,5 @@
+import { createTestContainer } from "@test/createTestContainer";
 import { describe, expect, it } from "vitest";
-import { createTestContainer } from "../../test/createTestContainer";
 import CommunityCallout from "./CommunityCallout.astro";
 
 describe("CommunityCallout", () => {
diff --git a/src/components/astro/Hero.astro b/src/components/landing/Hero.astro
similarity index 93%
rename from src/components/astro/Hero.astro
rename to src/components/landing/Hero.astro
index 4eae04c..9545692 100644
--- a/src/components/astro/Hero.astro
+++ b/src/components/landing/Hero.astro
@@ -1,6 +1,6 @@
 ---
-import DiscordCTA from "./DiscordCTA.astro";
-import ServerLogo from "./ServerLogo.astro";
+import DiscordCTA from "@components/discord/DiscordCTA.astro";
+import ServerLogo from "@components/icons/ServerLogo.astro";
 
 interface Props {
   name: string;
diff --git a/src/components/astro/Hero.astro.test.ts b/src/components/landing/Hero.astro.test.ts
similarity index 93%
rename from src/components/astro/Hero.astro.test.ts
rename to src/components/landing/Hero.astro.test.ts
index e045baf..d2e9e17 100644
--- a/src/components/astro/Hero.astro.test.ts
+++ b/src/components/landing/Hero.astro.test.ts
@@ -1,5 +1,5 @@
+import { createTestContainer } from "@test/createTestContainer";
 import { describe, expect, it } from "vitest";
-import { createTestContainer } from "../../test/createTestContainer";
 import Hero from "./Hero.astro";
 
 describe("Hero", () => {
diff --git a/src/components/astro/ResourceCard.astro b/src/components/landing/ResourceCard.astro
similarity index 100%
rename from src/components/astro/ResourceCard.astro
rename to src/components/landing/ResourceCard.astro
diff --git a/src/components/astro/ValueCards.astro b/src/components/landing/ValueCards.astro
similarity index 100%
rename from src/components/astro/ValueCards.astro
rename to src/components/landing/ValueCards.astro
diff --git a/src/components/astro/ValueCards.astro.test.ts b/src/components/landing/ValueCards.astro.test.ts
similarity index 87%
rename from src/components/astro/ValueCards.astro.test.ts
rename to src/components/landing/ValueCards.astro.test.ts
index 341aab4..f0cb970 100644
--- a/src/components/astro/ValueCards.astro.test.ts
+++ b/src/components/landing/ValueCards.astro.test.ts
@@ -1,5 +1,5 @@
+import { createTestContainer } from "@test/createTestContainer";
 import { describe, expect, it } from "vitest";
-import { createTestContainer } from "../../test/createTestContainer";
 import ValueCards from "./ValueCards.astro";
 
 describe("ValueCards", () => {
diff --git a/src/components/react/ResourceSearch.test.tsx b/src/components/resources/ResourceSearch.test.tsx
similarity index 100%
rename from src/components/react/ResourceSearch.test.tsx
rename to src/components/resources/ResourceSearch.test.tsx
diff --git a/src/components/react/ResourceSearch.tsx b/src/components/resources/ResourceSearch.tsx
similarity index 100%
rename from src/components/react/ResourceSearch.tsx
rename to src/components/resources/ResourceSearch.tsx
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 6deb028..0158ab1 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -1,9 +1,9 @@
 ---
-import "../styles/global.css";
-import Header from "../components/astro/Header.astro";
-import Footer from "../components/astro/Footer.astro";
+import site from "@/data/site.json";
+import Footer from "@components/footer/Footer.astro";
+import Header from "@components/header/Header.astro";
 import { PUBLIC_DISCORD_INVITE_URL, PUBLIC_SITE_URL } from "astro:env/client";
-import site from "../data/site.json";
+import "../styles/global.css";
 
 interface Props {
   title?: string;
diff --git a/src/lib/custom-elements.ts b/src/lib/custom-elements.ts
new file mode 100644
index 0000000..70f72d8
--- /dev/null
+++ b/src/lib/custom-elements.ts
@@ -0,0 +1,8 @@
+export const defineCustomElement = (
+  name: string,
+  elementClass: CustomElementConstructor,
+) => {
+  if (!customElements.get(name)) {
+    customElements.define(name, elementClass);
+  }
+};
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 782a1b5..7a835c1 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -1,5 +1,5 @@
 ---
-import BaseLayout from "../layouts/BaseLayout.astro";
+import BaseLayout from "@layouts/BaseLayout.astro";
 ---
 
 <BaseLayout title="Page not found">
diff --git a/src/pages/code-of-conduct.astro b/src/pages/code-of-conduct.astro
index 74f437f..77533a5 100644
--- a/src/pages/code-of-conduct.astro
+++ b/src/pages/code-of-conduct.astro
@@ -1,6 +1,6 @@
 ---
+import ContentLayout from "@layouts/ContentLayout.astro";
 import { getEntry, render } from "astro:content";
-import ContentLayout from "../layouts/ContentLayout.astro";
 
 const entry = await getEntry("pages", "code-of-conduct");
 if (!entry) {
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d6da85b..a26128f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,12 +1,12 @@
 ---
-import CommunityCallout from "../components/astro/CommunityCallout.astro";
-import DiscordWidget from "../components/astro/DiscordWidget.astro";
-import Hero from "../components/astro/Hero.astro";
-import ValueCards from "../components/astro/ValueCards.astro";
-import BaseLayout from "../layouts/BaseLayout.astro";
-import { fetchDiscordWidget } from "../lib/discordWidget";
+import site from "@/data/site.json";
+import DiscordWidget from "@components/discord/DiscordWidget.astro";
+import CommunityCallout from "@components/landing/CommunityCallout.astro";
+import Hero from "@components/landing/Hero.astro";
+import ValueCards from "@components/landing/ValueCards.astro";
+import BaseLayout from "@layouts/BaseLayout.astro";
+import { fetchDiscordWidget } from "@lib/discordWidget";
 import { PUBLIC_DISCORD_INVITE_URL } from "astro:env/client";
-import site from "../data/site.json";
 const discordWidget = await fetchDiscordWidget(site.discordServerId);
 ---
 
diff --git a/src/pages/learning/index.astro b/src/pages/learning/index.astro
index e5f04a0..abfbf7e 100644
--- a/src/pages/learning/index.astro
+++ b/src/pages/learning/index.astro
@@ -1,9 +1,9 @@
 ---
+import ResourceSearch from "@components/resources/ResourceSearch";
+import BaseLayout from "@layouts/BaseLayout.astro";
+import { sortFeaturedFirst } from "@lib/resources";
+import type { Resource } from "@schemas/resource";
 import { getCollection } from "astro:content";
-import BaseLayout from "../../layouts/BaseLayout.astro";
-import ResourceSearch from "../../components/react/ResourceSearch";
-import { sortFeaturedFirst } from "../../lib/resources";
-import type { Resource } from "../../schemas/resource";
 
 const entries = await getCollection("resources");
 
diff --git a/tsconfig.json b/tsconfig.json
index fd9f139..b985c7c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,6 +9,11 @@
       }
     ],
     "paths": {
+      "@components/*": ["./src/components/*"],
+      "@layouts/*": ["./src/layouts/*"],
+      "@lib/*": ["./src/lib/*"],
+      "@schemas/*": ["./src/schemas/*"],
+      "@test/*": ["./src/test/*"],
       "@/*": ["./src/*"]
     },
     "jsx": "react-jsx",