Started refactoring, added prettier and checks and reformatted project, added cspell and checks and custom project words, beginning of robotic oceanographic surface sampler content

.dockerignore

@@ -1,7 +1,17 @@
 .DS_Store
 
-.idea
+.gitea/
-.astro
+.astro/
+.idea/
 
+*/dist/
 */build/
 */node_modules/
+*/playwright-report/
+*/test-results/
+
+.gitignore
+Dockerfile
+Makefile
+new-words.txt
+README.md

.gitea/disabled_workflows/playwright.yml

@@ -1,9 +1,9 @@
 name: Playwright Tests
 on:
   push:
-    branches: [ main, master ]
+    branches: [main, master]
   pull_request:
-    branches: [ main, master ]
+    branches: [main, master]
 jobs:
   test:
     timeout-minutes: 60

.gitea/workflows/build-production.yaml

@@ -1,7 +1,7 @@
 name: Build and Test - Production
 on:
   push:
-    branches: [ main ]
+    branches: [main]
 
 jobs:
   test:
@@ -22,6 +22,12 @@ jobs:
           npm ci
           npx playwright install --with-deps
 
+      - name: Code Formatting Check
+        run: npx prettier . --check
+
+      - name: Spelling Check
+        run: npx cspell .
+
       - name: Build Project
         run: npm run build
 

.gitea/workflows/build-staging.yaml

@@ -1,7 +1,7 @@
 name: Build and Test - Staging
 on:
   pull_request:
-    types: [ opened, synchronize, reopened ]
+    types: [opened, synchronize, reopened]
 
 jobs:
   test:
@@ -24,6 +24,12 @@ jobs:
           npm ci
           npx playwright install --with-deps
 
+      - name: Code Formatting Check
+        run: npx prettier . --check
+
+      - name: Spelling Check
+        run: npx cspell .
+
       - name: Build Project
         run: npm run build
 

.gitignore

@@ -1,9 +1,3 @@
-# Ignore everything under src/content, as they are dynamically added from obsidian
-src/content/*
-
-# Do not ignore config.ts in src/content since that necessary to import the dynamic content
-!src/content/config.ts
-
 # build output
 dist/
 
@@ -35,3 +29,6 @@ pnpm-debug.log*
 /blob-report/
 /playwright/.cache/
 /playwright/.auth/
+
+# Local temporary storage files
+new-words.txt

.prettierignore

@@ -0,0 +1,34 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/
+
+# Local temporary storage files
+new-words.txt

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
+  "overrides": [
+    {
+      "files": "*.astro",
+      "options": {
+        "parser": "astro"
+      }
+    }
+  ]
+}

Dockerfile

@@ -5,12 +5,27 @@ WORKDIR /app
 # Therefore, the `-deps` steps will be skipped if only the source code changes.
 COPY package.json package-lock.json tsconfig.json astro.config.mjs ./
 
+CMD [ "/bin/bash" ]
+
 FROM base AS prod-deps
 RUN npm install --omit=dev
 
+FROM prod-deps AS test-base
+
+RUN npm ci
+RUN npx playwright install --with-deps
+
 FROM prod-deps AS build
 
-COPY . .
+COPY --exclude=test \
+    --exclude=test-e2e \
+    --exclude=playwright.config.ts \
+    --exclude=vitest.config.ts \
+    --exclude=.prettierrc \
+    --exclude=.prettierignore \
+    --exclude=cspell.json \
+    --exclude=project-words.txt \
+    . .
 
 ARG REPO_VERSION_HASH
 ARG BUILD_ENVIRONMENT
@@ -19,6 +34,16 @@ RUN echo "PUBLIC_REPO_VERSION_HASH=\"${REPO_VERSION_HASH}\" \n\
     PUBLIC_BUILD_ENVIRONMENT=\"${BUILD_ENVIRONMENT}\"" >> .env
 RUN npm run build
 
+FROM test-base AS test
+
+COPY . .
+COPY --from=build /app/dist /app/dist
+
+RUN npx prettier . --check
+RUN npx cspell .
+RUN npm run test
+RUN npm run e2e-test
+
 FROM nginx:alpine AS runtime
 
 COPY ./nginx/nginx.conf /etc/nginx/nginx.conf

Makefile

@@ -6,7 +6,14 @@
 	astro_upgrade \
 	build \
 	dev \
-	dev-hosted
+	dev-hosted \
+	test \
+	_spelling-generate-new-words \
+	spelling-find-new-words \
+	spelling-add-new-words \
+	spelling-check \
+	cleanup-check \
+	cleanup-code
 
 default: dev
 
@@ -28,3 +35,30 @@ dev:
 dev-hosted:
 	npm run dev-hosted
 
+test: spelling-check
+	@npx playwright install --with-deps
+	npm run test --ui
+	npx playwright test --ui
+
+_spelling-generate-new-words:
+	@cspell --words-only --unique . 2>/dev/null | sort --ignore-case -o new-words.txt
+
+spelling-find-new-words: _spelling-generate-new-words
+	@echo "Found the following new words:"
+	@cat new-words.txt
+	@rm -f new-words.txt
+
+spelling-add-new-words: _spelling-generate-new-words
+	@echo "Adding to project-words.txt"
+	@cat new-words.txt >> project-words.txt
+	@rm -f new-words.txt
+	@cat project-words.txt | sort --ignore-case -o project-words.txt
+
+spelling-check:
+	npx cspell .
+
+cleanup-check:
+	npx prettier . --check
+
+cleanup-code:
+	npx prettier . --write

README.md

@@ -1,3 +1,3 @@
 # Corwin Perren's Personal Portfolio Website
 
-Check the Makfile and/or package.json for the commands needed to build and run this project.
+Check the Makefile and/or package.json for the commands needed to build and run this project.

astro.config.mjs

@@ -1,31 +1,31 @@
 // @ts-check
-import {defineConfig} from 'astro/config';
+import { defineConfig } from "astro/config";
 import sitemap from "@astrojs/sitemap";
 import tailwindcss from "@tailwindcss/vite";
 
 // We don't have access to short imports this early in the build chain
 // noinspection ES6PreferShortImport
-import {siteLayout, getPaths} from "./src/data/site-layout.ts";
+import { siteLayout, getPaths } from "./src/data/site-layout.ts";
 
-const disabledPaths = getPaths(siteLayout, [], true)
+const disabledPaths = getPaths(siteLayout, [], true);
 
 // https://astro.build/config
 
 export default defineConfig({
   site: "https://caperren.com",
   prefetch: {
-        prefetchAll: true
+    prefetchAll: true,
   },
   integrations: [
     sitemap({
       filter: (pagePath) =>
-                !disabledPaths.some(disabledPath => pagePath.includes(disabledPath))
+        !disabledPaths.some((disabledPath) => pagePath.includes(disabledPath)),
-        })
+    }),
   ],
   vite: {
     plugins: [
       // @ts-ignore
-            tailwindcss()
+      tailwindcss(),
     ],
   },
 });

cspell.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json",
+  "version": "0.2",
+  "dictionaryDefinitions": [
+    {
+      "name": "project-words",
+      "path": "./project-words.txt",
+      "addWords": true
+    }
+  ],
+  "dictionaries": ["project-words"],
+  "ignorePaths": [
+    ".astro",
+    ".idea",
+    "dist",
+    "node_modules",
+    "playwright-report",
+    "test-results",
+    "new-words.txt",
+    "playwright.config.ts",
+    "/project-words.txt"
+  ]
+}

package.json

@@ -15,6 +15,7 @@
     "@astrojs/sitemap": "^3.6.0",
     "@tailwindcss/vite": "^4.1.11",
     "astro": "^5.16.3",
+    "cspell": "^9.3.2",
     "flowbite": "^3.1.2",
     "leader-line-new": "^1.1.9",
     "luxon": "^3.7.2",
@@ -25,6 +26,9 @@
     "@playwright/test": "^1.56.1",
     "@types/luxon": "^3.7.1",
     "@types/node": "^24.10.0",
+    "prettier": "3.7.3",
+    "prettier-plugin-astro": "0.14.1",
+    "prettier-plugin-tailwindcss": "0.7.1",
     "vitest": "^4.0.7"
   }
 }

playwright.config.ts

@@ -1,4 +1,4 @@
-import {defineConfig, devices} from '@playwright/test';
+import { defineConfig, devices } from "@playwright/test";
 
 /**
  * Read environment variables from file.
@@ -12,7 +12,7 @@ import {defineConfig, devices} from '@playwright/test';
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-    testDir: './test-e2e',
+  testDir: "./test-e2e",
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -22,42 +22,42 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-    reporter: 'html',
+  reporter: "html",
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('')`. */
-        baseURL: 'http://localhost:4321',
+    baseURL: "http://localhost:4321",
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-        trace: 'on-first-retry',
+    trace: "on-first-retry",
   },
 
   /* Configure projects for major browsers */
   projects: [
     {
-            name: 'chromium',
+      name: "chromium",
-            use: {...devices['Desktop Chrome']},
+      use: { ...devices["Desktop Chrome"] },
     },
 
-        // {
+    {
-        //   name: 'firefox',
+      name: "firefox",
-        //   use: { ...devices['Desktop Firefox'] },
+      use: { ...devices["Desktop Firefox"] },
-        // },
+    },
-        //
+
-        // {
+    {
-        //   name: 'webkit',
+      name: "webkit",
-        //   use: { ...devices['Desktop Safari'] },
+      use: { ...devices["Desktop Safari"] },
-        // },
+    },
 
     /* Test against mobile viewports. */
     {
-            name: 'Mobile Chrome',
+      name: "Mobile Chrome",
-            use: {...devices['Pixel 5']},
+      use: { ...devices["Pixel 5"] },
+    },
+    {
+      name: "Mobile Safari",
+      use: { ...devices["iPhone 12"] },
     },
-        // {
-        //   name: 'Mobile Safari',
-        //   use: { ...devices['iPhone 12'] },
-        // },
 
     /* Test against branded browsers. */
     // {
@@ -72,8 +72,8 @@ export default defineConfig({
 
   /* Run your local dev server before starting the tests */
   webServer: {
-        command: 'npm run preview',
+    command: "npm run preview",
-        url: 'http://localhost:4321',
+    url: "http://localhost:4321",
     timeout: 120 * 1000,
     reuseExistingServer: !process.env.CI,
   },

project-words.txt

@@ -0,0 +1,41 @@
+ASSEM
+astrojs
+Candian
+caperren
+CEOAS
+COMSC
+Concours
+CONSERV
+Corwin
+dangerousthings
+Dechorionator
+fhhs
+flowbite
+HDFS
+headshot
+Homelab
+ITAR
+Jetson
+leconte
+Loctite
+luxon
+MGMT
+nixos
+Onshape
+OSSM
+OSURC
+Perren
+Perren's
+pubpath
+RFID
+RSSI
+SARL
+Shuttlebox
+sinnhuber
+sitemapindex
+ssds
+Starlink
+Unstow
+vitest
+Zebrafish
+zscan

src/components/CustomCarousel/CustomCarousel.astro

@@ -1,117 +0,0 @@
----
-import {Image} from 'astro:assets';
-
-import type {carouselGroup} from "@interfaces/image-carousel.ts";
-
-const groupToShow: carouselGroup = Astro.props.carouselGroup;
----
-
-<custom-carousel class="flex flex-col relative w-full"
-                 data-custom-carousel={groupToShow.animation}
-                 data-custom-carousel-interval={groupToShow.interval}>
-    <!-- Modal for fullscreen viewing -->
-    <div tabindex="-1" aria-hidden="true"
-         class="hidden fixed z-100 justify-center items-center w-full inset-0"
-         data-custom-carousel-modal>
-        <div class="relative p-4 w-full h-full">
-            <!-- Modal content -->
-            <div class="relative h-full max-h-screen max-w-screen bg-black rounded-lg shadow-sm border-2 border-caperren-green">
-                <!-- Modal header -->
-                <div class="flex items-center justify-between p-1 rounded-t">
-                    <button type="button"
-                            class="z-100 text-caperren-green bg-transparent ring-2 ring-caperren-green-dark hover:ring-caperren-green-light hover:text-caperren-green-light rounded-lg text-sm size-8 ms-auto inline-flex justify-center items-center"
-                            data-custom-carousel-modal-hide>
-                        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
-                             viewBox="0 0 14 14">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                  d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
-                        </svg>
-                        <span class="sr-only">Close modal</span>
-                    </button>
-                </div>
-                <!-- Modal body -->
-                <div class="flex items-center justify-center overflow-hidden h-full w-full"
-                     data-custom-carousel-modal-image/>
-            </div>
-        </div>
-    </div>
-
-    <!-- Carousel wrapper -->
-    <div class="relative overflow-hidden w-full h-56 md:h-120">
-        {
-            groupToShow.images.map((image, index) => (
-                    <div class="hidden duration-1500 ease-in-out" data-custom-carousel-item={index}>
-                        <Image src={image}
-                               class="absolute inset-0 m-auto h-full w-auto max-h-full max-w-full object-contain"
-                               alt="..."
-                               layout='constrained'
-                               loading="eager"/>
-                    </div>
-            ))
-        }
-    </div>
-
-    {(groupToShow.images.length > 1) && (
-        <!-- Slider indicators -->
-            <div class="absolute z-30 flex -translate-x-1/2 bottom-2 left-1/2 space-x-3 rounded-full">
-                {
-                    groupToShow.images.map((_, index) => (
-                            <button type="button"
-                                    class="w-3 h-3 rounded-full bg-black hover:bg-caperren-green-light"
-                                    aria-current={index ? "false" : "true"}
-                                    aria-label={index.toString()}
-                                    data-custom-carousel-slide-to={index}></button>
-                    ))
-                }
-            </div>
-        <!-- Slider controls -->
-            <button
-                    type="button"
-                    class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
-                    data-custom-carousel-prev
-            >
-        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full ring-2 ring-caperren-green/25 bg-black/25 group-hover:bg-black/75">
-            <svg
-                    class="h-4 w-4 text-caperren-green group-hover:text-caperren-green-light"
-                    aria-hidden="true"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 6 10"
-            >
-                <path
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M5 1 1 5l4 4"
-                />
-            </svg>
-            <span class="hidden">Previous</span>
-        </span>
-            </button>
-            <button
-                    type="button"
-                    class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
-                    data-custom-carousel-next
-            >
-        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full ring-2 ring-caperren-green/25 bg-black/25 group-hover:bg-black/75">
-            <svg
-                    class="h-4 w-4 text-caperren-green group-hover:text-caperren-green-light "
-                    aria-hidden="true"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 6 10"
-            >
-                <path
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="m1 9 4-4-4-4"
-                />
-            </svg>
-            <span class="hidden">Next</span>
-        </span>
-            </button>
-    )}
-</custom-carousel>
-
-<script src="./custom-carousel.ts"/>

src/components/CustomCarousel/custom-carousel.ts

@@ -1,100 +0,0 @@
-import {
-    Carousel,
-    type CarouselItem,
-    type CarouselInterface,
-    type CarouselOptions,
-    type IndicatorItem,
-    Modal,
-    type ModalInterface,
-} from 'flowbite';
-
-class CustomCarousel extends HTMLElement {
-    _slide: boolean;
-    _items: CarouselItem[];
-    _options: CarouselOptions;
-    _carousel: CarouselInterface;
-
-    _modalEl: HTMLElement;
-    _modal: ModalInterface;
-
-    constructor() {
-        super();
-
-        this._slide = this.getAttribute('data-custom-carousel') === 'slide';
-        this._items = this._getItems();
-        this._options = this._getOptions();
-        this._carousel = new Carousel(this, this._items, this._options);
-
-        if (this._slide && this._items.length > 0) this._carousel.cycle();
-
-        this._modalEl = this.querySelector('[data-custom-carousel-modal]') as HTMLElement || undefined;
-        this._modal = new Modal(this._modalEl);
-
-        window.addEventListener("load", this._attachHandlers);
-
-    }
-
-    _getItems = (): CarouselItem[] => {
-        let customItems = this.querySelectorAll('[data-custom-carousel-item]') || [];
-
-        return Array.from(customItems).map(
-            (item): CarouselItem => {
-                return {
-                    el: item as HTMLElement,
-                    position: Number(item.getAttribute("data-custom-carousel-item"))
-                }
-            }
-        )
-    }
-
-    _getOptions = (): CarouselOptions => {
-        let customIndicators = this.querySelectorAll('[data-custom-carousel-slide-to]') || [];
-
-        return {
-            defaultPosition: 0,
-            interval: this.dataset.customCarouselInterval ? Number(this.dataset.customCarouselInterval) : 8000,
-
-            indicators: {
-                activeClasses: 'border-2 border-caperren-green bg-black',
-                inactiveClasses: 'bg-caperren-green/40 hover:bg-caperren-green-light',
-                items: Array.from(customIndicators).map(
-                    (item, index): IndicatorItem => {
-                        return {
-                            el: item as HTMLElement,
-                            position: Number(item.getAttribute('data-custom-carousel-slide-to'))
-                        }
-                    }
-                )
-            }
-        }
-    }
-
-
-    _attachHandlers = (): void => {
-        // Carousel controls
-        this.querySelector(
-            '[data-custom-carousel-next]'
-        )?.addEventListener('click', () => this._carousel.next());
-        this.querySelector(
-            '[data-custom-carousel-prev]'
-        )?.addEventListener('click', () => this._carousel.prev());
-
-        // Close fullscreen modal
-        this._modalEl.querySelector('[data-custom-carousel-modal-hide]')?.addEventListener('click', () => this._modal.hide())
-
-        // Click to open fullscreen modal
-        this._items.forEach((item) => {
-            item.el.addEventListener('click', () => {
-                const imgCloned = item.el.querySelector('img')?.cloneNode() as Node;
-                const imageDiv = this._modalEl.querySelector('[data-custom-carousel-modal-image]') as HTMLElement || undefined;
-
-                imageDiv.innerHTML = '';
-                imageDiv?.appendChild(imgCloned);
-
-                this._modal.show();
-            })
-        })
-    }
-}
-
-customElements.define('custom-carousel', CustomCarousel)

src/components/CustomHtmlWrappers/H2.astro

@@ -0,0 +1,5 @@
+---
+
+---
+
+<h2 class="my-4 font-bold md:text-2xl">{Astro.props.text}</h2>

src/components/CustomHtmlWrappers/H3.astro

@@ -0,0 +1,5 @@
+---
+
+---
+
+<h3 class="my-4 font-bold md:text-lg">{Astro.props.text}</h3>

src/components/Footer.astro

@@ -1,7 +1,10 @@
 ---
----
 
-<footer class="z-50 w-full max-w-full px-6 py-2 bg-black border-t border-t-caperren-green-dark text-caperren-green-dark text-sm flex items-center justify-between">
+---
+
+<footer
+  class="border-t-caperren-green-dark text-caperren-green-dark z-50 flex w-full max-w-full items-center justify-between border-t bg-black px-6 py-2 text-sm"
+>
   <span>{import.meta.env.PUBLIC_BUILD_ENVIRONMENT || "development"}</span>
   <span>{import.meta.env.PUBLIC_REPO_VERSION_HASH || "invalid"}</span>
 </footer>

src/components/LinkButton.astro

@@ -0,0 +1,11 @@
+---
+
+---
+
+<a
+  class="text-caperren-green border-caperren-green hover:border-caperren-green-light hover:text-caperren-green-light rounded-2xl border-2 bg-black p-2"
+  href={Astro.props.href}
+  target={Astro.props.target || "_blank"}
+>
+  {Astro.props.title}
+</a>

src/components/Media/CustomCarousel/CustomCarousel.astro

@@ -0,0 +1,145 @@
+---
+import { Image } from "astro:assets";
+
+import type { carouselGroup } from "@interfaces/image-carousel.ts";
+
+const groupToShow: carouselGroup = Astro.props.carouselGroup;
+---
+
+<custom-carousel
+  class="relative flex w-full flex-col"
+  data-custom-carousel={groupToShow.animation}
+  data-custom-carousel-interval={groupToShow.interval}
+>
+  <!-- Modal for fullscreen viewing -->
+  <div
+    tabindex="-1"
+    aria-hidden="true"
+    class="fixed inset-0 z-100 hidden w-full items-center justify-center"
+    data-custom-carousel-modal
+  >
+    <div class="relative h-full w-full p-4">
+      <!-- Modal content -->
+      <div
+        class="border-caperren-green relative h-full max-h-screen max-w-screen rounded-lg border-2 bg-black shadow-sm"
+      >
+        <!-- Modal header -->
+        <div class="flex items-center justify-between rounded-t p-1">
+          <button
+            type="button"
+            class="text-caperren-green ring-caperren-green-dark hover:ring-caperren-green-light hover:text-caperren-green-light z-100 ms-auto inline-flex size-8 items-center justify-center rounded-lg bg-transparent text-sm ring-2"
+            data-custom-carousel-modal-hide
+          >
+            <svg
+              class="h-3 w-3"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 14 14"
+            >
+              <path
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"></path>
+            </svg>
+            <span class="sr-only">Close modal</span>
+          </button>
+        </div>
+        <!-- Modal body -->
+        <div
+          class="flex h-full w-full items-center justify-center overflow-hidden"
+          data-custom-carousel-modal-image
+        >
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Carousel wrapper -->
+  <div class="relative h-56 w-full overflow-hidden md:h-120">
+    {
+      groupToShow.images.map((image, index) => (
+        <div
+          class="hidden duration-1500 ease-in-out"
+          data-custom-carousel-item={index}
+        >
+          <Image
+            src={image}
+            class="absolute inset-0 m-auto h-full max-h-full w-auto max-w-full object-contain"
+            alt="..."
+            layout="constrained"
+            loading="eager"
+          />
+        </div>
+      ))
+    }
+  </div>
+
+  <!-- Slider indicators -->
+  {
+    groupToShow.images.length > 1 && (
+      <div>
+        <div class="absolute bottom-2 left-1/2 z-30 flex -translate-x-1/2 space-x-3 rounded-full">
+          {groupToShow.images.map((_, index) => (
+            <button
+              type="button"
+              class="hover:bg-caperren-green-light h-3 w-3 rounded-full bg-black"
+              aria-current={index ? "false" : "true"}
+              aria-label={index.toString()}
+              data-custom-carousel-slide-to={index}
+            />
+          ))}
+        </div>
+        <button
+          type="button"
+          class="group absolute start-0 top-0 z-30 flex h-full cursor-pointer items-center justify-center px-4 focus:outline-none"
+          data-custom-carousel-prev
+        >
+          <span class="ring-caperren-green/25 inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/25 ring-2 group-hover:bg-black/75">
+            <svg
+              class="text-caperren-green group-hover:text-caperren-green-light h-4 w-4"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 6 10"
+            >
+              <path
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M5 1 1 5l4 4"
+              />
+            </svg>
+            <span class="hidden">Previous</span>
+          </span>
+        </button>
+        <button
+          type="button"
+          class="group absolute end-0 top-0 z-30 flex h-full cursor-pointer items-center justify-center px-4 focus:outline-none"
+          data-custom-carousel-next
+        >
+          <span class="ring-caperren-green/25 inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/25 ring-2 group-hover:bg-black/75">
+            <svg
+              class="text-caperren-green group-hover:text-caperren-green-light h-4 w-4"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 6 10"
+            >
+              <path
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="m1 9 4-4-4-4"
+              />
+            </svg>
+            <span class="hidden">Next</span>
+          </span>
+        </button>
+      </div>
+    )
+  }
+</custom-carousel>
+
+<script src="./custom-carousel.ts"></script>

src/components/Media/CustomCarousel/custom-carousel.ts

@@ -0,0 +1,111 @@
+import {
+  Carousel,
+  type CarouselItem,
+  type CarouselInterface,
+  type CarouselOptions,
+  type IndicatorItem,
+  Modal,
+  type ModalInterface,
+} from "flowbite";
+
+class CustomCarousel extends HTMLElement {
+  _slide: boolean;
+  _items: CarouselItem[];
+  _options: CarouselOptions;
+  _carousel: CarouselInterface;
+
+  _modalEl: HTMLElement;
+  _modal: ModalInterface;
+
+  constructor() {
+    super();
+
+    this._slide = this.getAttribute("data-custom-carousel") === "slide";
+    this._items = this._getItems();
+    this._options = this._getOptions();
+    this._carousel = new Carousel(this, this._items, this._options);
+
+    if (this._slide && this._items.length > 0) this._carousel.cycle();
+
+    this._modalEl =
+      (this.querySelector("[data-custom-carousel-modal]") as HTMLElement) ||
+      undefined;
+    this._modal = new Modal(this._modalEl);
+
+    window.addEventListener("load", this._attachHandlers);
+  }
+
+  _getItems = (): CarouselItem[] => {
+    let customItems =
+      this.querySelectorAll("[data-custom-carousel-item]") || [];
+
+    return Array.from(customItems).map((item): CarouselItem => {
+      return {
+        el: item as HTMLElement,
+        position: Number(item.getAttribute("data-custom-carousel-item")),
+      };
+    });
+  };
+
+  _getOptions = (): CarouselOptions => {
+    let customIndicators =
+      this.querySelectorAll("[data-custom-carousel-slide-to]") || [];
+
+    return {
+      defaultPosition: 0,
+      interval: this.dataset.customCarouselInterval
+        ? Number(this.dataset.customCarouselInterval)
+        : 8000,
+
+      indicators: {
+        activeClasses: "border-2 border-caperren-green bg-black",
+        inactiveClasses: "bg-caperren-green/40 hover:bg-caperren-green-light",
+        items: Array.from(customIndicators).map(
+          (item): IndicatorItem => {
+            return {
+              el: item as HTMLElement,
+              position: Number(
+                item.getAttribute("data-custom-carousel-slide-to"),
+              ),
+            };
+          },
+        ),
+      },
+    };
+  };
+
+  _attachHandlers = (): void => {
+    // Carousel controls
+    this.querySelector("[data-custom-carousel-next]")?.addEventListener(
+      "click",
+      () => this._carousel.next(),
+    );
+    this.querySelector("[data-custom-carousel-prev]")?.addEventListener(
+      "click",
+      () => this._carousel.prev(),
+    );
+
+    // Close fullscreen modal
+    this._modalEl
+      .querySelector("[data-custom-carousel-modal-hide]")
+      ?.addEventListener("click", () => this._modal.hide());
+
+    // Click to open fullscreen modal
+    this._items.forEach((item) => {
+      item.el.addEventListener("click", () => {
+        const imgCloned = item.el.querySelector("img")?.cloneNode() as Node;
+        const imageDiv =
+          (this._modalEl.querySelector(
+            "[data-custom-carousel-modal-image]",
+          ) as HTMLElement) || undefined;
+
+        imageDiv.innerHTML = "";
+        imageDiv?.appendChild(imgCloned);
+
+        this._modal.show();
+      });
+    });
+  };
+}
+
+customElements.define("custom-carousel", CustomCarousel);

src/components/Media/PdfViewer.astro

@@ -0,0 +1,7 @@
+---
+
+---
+
+<iframe
+  src={Astro.props.pdf}
+  class={"w-9/10 md:w-3/5 h-7/10 md:h-4/5 " + Astro.props.class || ""}></iframe>

src/components/Media/Video.astro

@@ -0,0 +1,11 @@
+---
+import { type videoConfig } from "@interfaces/video.ts";
+
+const config: videoConfig = Astro.props.videoConfig;
+console.log(config);
+---
+
+<video class="h-auto w-full max-w-1/2" controls>
+  <source src={config.videoPath} type={config.videoType ?? "video/mp4"} />
+  Your browser does not support the video tag.
+</video>

src/components/Media/YtVideo.astro

@@ -0,0 +1,13 @@
+---
+import type { videoConfig } from "@interfaces/video.ts";
+
+const config: videoConfig = Astro.props.videoConfig;
+---
+
+<iframe
+  class="h-128 w-full max-w-1/2"
+  src={config.videoPath}
+  title={config.videoTitle ?? ""}
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+  referrerpolicy="strict-origin-when-cross-origin"
+  allowfullscreen></iframe>

src/components/Navbar.astro

@@ -2,31 +2,47 @@
 import NestedNavbarEntry from "@components/NestedNavbarEntries.astro";
 
 import logo_title_large from "@assets/logo-title-large.png";
-import {siteLayout} from "@data/site-layout.ts";
+import { siteLayout } from "@data/site-layout.ts";
-import {Image} from "astro:assets";
+import { Image } from "astro:assets";
 ---
 
-
+<nav class="border-b-caperren-green text-caperren-green border-b-4">
-<nav class="border-b-4 border-b-caperren-green text-caperren-green">
+  <div class="mx-auto flex flex-wrap items-center justify-between p-6">
-    <div class="flex flex-wrap items-center justify-between mx-auto p-6">
     <a href="/">
-            <Image src={logo_title_large}
+      <Image
-                   class="h-10 lg:h-14 w-auto"
+        src={logo_title_large}
+        class="h-10 w-auto lg:h-14"
         alt="logo title"
         loading="eager"
       />
     </a>
-        <button data-collapse-toggle="navbar-multi-level" type="button"
+    <button
-                class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm lg:hidden focus:ring-2 focus:ring-caperren-green"
+      data-collapse-toggle="navbar-multi-level"
-                aria-controls="navbar-multi-level" aria-expanded="false">
+      type="button"
+      class="focus:ring-caperren-green inline-flex h-10 w-10 items-center justify-center p-2 text-sm focus:ring-2 lg:hidden"
+      aria-controls="navbar-multi-level"
+      aria-expanded="false"
+    >
       <span class="sr-only">Open main menu</span>
-            <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 14">
+      <svg
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+        class="h-5 w-5"
-                      d="M1 1h15M1 7h15M1 13h15"/>
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 17 14"
+      >
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M1 1h15M1 7h15M1 13h15"></path>
       </svg>
     </button>
-        <div class="z-40 hidden mt-1 w-full lg:block lg:w-auto" id="navbar-multi-level">
+    <div
-            <NestedNavbarEntry items={siteLayout}/>
+      class="z-40 mt-1 hidden w-full lg:block lg:w-auto"
+      id="navbar-multi-level"
+    >
+      <NestedNavbarEntry items={siteLayout} />
     </div>
   </div>
 </nav>

src/components/NestedNavbarEntries.astro

@@ -1,51 +1,78 @@
 ---
-import type {navLink} from "@interfaces/site-layout.ts";
+import type { navLink } from "@interfaces/site-layout.ts";
 
 const items: navLink[] = Astro.props.items;
 const depth: number = Astro.props.depth ?? 0;
 const paths: string[] = Astro.props.paths ?? [];
 
 const getNavLinkSuffix = (entry: navLink): string => {
-    return "-" + [...paths, entry.path].join("-")
+  return "-" + [...paths, entry.path].join("-");
-}
+};
 const getHrefPath = (entry: navLink): string => {
-    return entry.pubpath ? entry.pubpath : ("/" + (paths && paths.length ? [...paths, entry.path].join("/") : entry.path));
+  return entry.pubpath
-}
+    ? entry.pubpath
+    : "/" +
+        (paths && paths.length ? [...paths, entry.path].join("/") : entry.path);
+};
 ---
-<ul class={"flex flex-col p-4 bg-black border-caperren-green " + (depth ? "space-y-2" : "items-start lg:flex-row lg:space-x-8 lg:mt-0 ")}>
+
+<ul
+  class={"flex flex-col p-4 bg-black border-caperren-green " +
+    (depth ? "space-y-2" : "items-start lg:flex-row lg:space-x-8 lg:mt-0 ")}
+>
   {
-        items.map((entry) => (
+    items.map(
+      (entry) =>
         (entry.enabled ?? true) && (
           <li>
             {Array.isArray(entry.children) && entry.children.length ? (
-                                <button id={"dropdownNavbarLink" + getNavLinkSuffix(entry)}
+              <div>
-                                        data-dropdown-toggle={"dropdownNavbar" + getNavLinkSuffix(entry)}
+                <button
+                  id={"dropdownNavbarLink" + getNavLinkSuffix(entry)}
+                  data-dropdown-toggle={
+                    "dropdownNavbar" + getNavLinkSuffix(entry)
+                  }
                   data-dropdown-placement="bottom"
-                                        class="flex items-center justify-between py-2 px-3 w-full hover:text-caperren-green-light lg:hover:bg-transparent lg:border-0 lg:hover:text-caperren-green-light lg:p-0 ">
+                  class="hover:text-caperren-green-light lg:hover:text-caperren-green-light flex w-full items-center justify-between px-3 py-2 lg:border-0 lg:p-0 lg:hover:bg-transparent"
+                >
                   {entry.navText}
-                                    <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true"
+                  <svg
+                    class="ms-2.5 h-2.5 w-2.5"
+                    aria-hidden="true"
                     xmlns="http://www.w3.org/2000/svg"
-                                         viewBox="0 0 10 6">
+                    viewBox="0 0 10 6"
-                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                  >
+                    <path
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
                       stroke-width="2"
-                                              d="m1 1 4 4 4-4"/>
+                      d="m1 1 4 4 4-4"
+                    />
                   </svg>
                 </button>
-
+                <div
-                                <div id={"dropdownNavbar" + getNavLinkSuffix(entry)}
+                  id={"dropdownNavbar" + getNavLinkSuffix(entry)}
-                                     class="z-10 hidden  bg-black border border-caperren-green shadow-sm w-screen lg:w-max">
+                  class="border-caperren-green z-10 hidden w-screen border bg-black shadow-sm lg:w-max"
-                                    <Astro.self items={entry.children} paths={[...paths, entry.path]}
+                >
-                                                depth={depth + 1}/>
+                  <Astro.self
+                    items={entry.children}
+                    paths={[...paths, entry.path]}
+                    depth={depth + 1}
+                  />
+                </div>
               </div>
-
             ) : (
-
+              <a
-                                <a href={getHrefPath(entry)}
+                href={getHrefPath(entry)}
-                                   class="block py-2 px-3 bg-transparent hover:text-caperren-green-light ring-caperren-green-dark lg:p-0"
+                class="hover:text-caperren-green-light ring-caperren-green-dark block bg-transparent px-3 py-2 lg:p-0"
-                                   aria-current="page">{entry.navText}</a>
+                aria-current="page"
-
+              >
+                {entry.navText}
+              </a>
             )}
           </li>
+        ),
     )
-        ))}
+  }
 </ul>

src/components/Table.astro

@@ -1,5 +1,5 @@
 ---
-import type {tableData} from "@interfaces/table.ts";
+import type { tableData } from "@interfaces/table.ts";
 
 const data: tableData = Astro.props.data;
 const columnPadding: number = data.columnPadding || 2;
@@ -8,27 +8,33 @@ const paddingClasses: string = `px-${columnPadding} py-${rowPadding}`;
 ---
 
 <div class="relative max-w-full overflow-x-auto">
-    <table class="text-sm text-left">
+  <table class="text-left text-sm">
-        <thead class="text-xs border-b-3 border-caperren-green uppercase bg-black">
+    <thead class="border-caperren-green border-b-3 bg-black text-xs uppercase">
       <tr>
-            {data.header.map(headingText => (
+        {
+          data.header.map((headingText) => (
             <th scope="col" class={paddingClasses}>
               {headingText}
             </th>
-            ))}
+          ))
+        }
       </tr>
     </thead>
     <tbody>
-        {data.rows.map(row => (
+      {
-                <tr class=" border-b dark:bg-black  border-caperren-green">
+        data.rows.map((row) => (
-                    {row.map(rowColumnText => (
+          <tr class="border-caperren-green border-b dark:bg-black">
-                            <th scope="row"
+            {row.map((rowColumnText) => (
-                                class={paddingClasses + " font-medium  whitespace-nowrap"}>
+              <th
+                scope="row"
+                class={paddingClasses + " font-medium whitespace-nowrap"}
+              >
                 {rowColumnText}
               </th>
             ))}
           </tr>
-        ))}
+        ))
+      }
     </tbody>
   </table>
 </div>

src/components/Timeline/Timeline.astro

@@ -1,36 +1,39 @@
 ---
-import type {timelineEntry} from "@interfaces/timeline.ts";
+import type { timelineEntry } from "@interfaces/timeline.ts";
 
 const timeline: timelineEntry[] = Astro.props.timeline || [];
 ---
 
 <custom-timeline>
-    <div class="flex flex-col w-full">
+  <div class="flex w-full flex-col">
-        <div class="z-10 grid gap-6 grid-flow-row max-w-full sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-6"
+    <div
-             data-timeline>
+      class="3xl:grid-cols-6 z-10 grid max-w-full grid-flow-row gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
-            {timeline.map((entry, index) => (
+      data-timeline
-                    <div class="pt-1 border bg-black border-caperren-green rounded-lg min-w-s max-w-s px-2 pb-2"
+    >
+      {
+        timeline.map((entry, index) => (
+          <div
+            class="border-caperren-green min-w-s max-w-s rounded-lg border bg-black px-2 pt-1 pb-2"
             data-timeline-node-index={index}
           >
-                        <h3 class="text-lg font-bold">
+            <h3 class="text-lg font-bold">{entry.event}</h3>
-                            {entry.event}
+            <h4 class="leading-none font-semibold">{entry.eventDetail}</h4>
-                        </h3>
+            <time class="mt-1 mb-2 text-sm leading-none italic">
-                        <h4 class="font-semibold leading-none">
-                            {entry.eventDetail}
-                        </h4>
-                        <time class="mb-2 mt-1 text-sm italic leading-none">
               {entry.date}
             </time>
             {entry.description && (
-                                <p class="text-sm font-normal">
+              <p class="text-sm font-normal">{entry.description}</p>
-                                    {entry.description}
-                                </p>
             )}
           </div>
-            ))}
+        ))
+      }
+    </div>
+    <div
+      class="z-0 w-full max-w-full overflow-x-visible"
+      data-custom-timeline-line-wrapper
+    >
     </div>
-        <div class="z-0 w-full max-w-full overflow-x-visible" data-custom-timeline-line-wrapper/>
   </div>
 </custom-timeline>
 
-<script src="./timeline.ts"/>
+<script src="./timeline.ts"></script>

src/components/Timeline/timeline.ts

@@ -11,49 +11,60 @@ class CustomTimeline extends HTMLElement {
   }
 
   _getNodeElements = (): Element[] =>
-        Array.from(this.querySelectorAll('[data-timeline-node-index]')).sort(
+    Array.from(this.querySelectorAll("[data-timeline-node-index]")).sort(
       (elementA, elementB) =>
-                Number(elementA.getAttribute('data-timeline-node-index')) - Number(elementB.getAttribute('data-timeline-node-index'))
+        Number(elementA.getAttribute("data-timeline-node-index")) -
+        Number(elementB.getAttribute("data-timeline-node-index")),
     );
 
-
   _paintLeaderLines = () => {
-        let pairs = this._eventElements.map((entry, index) => {
+    let pairs = this._eventElements
+      .map((entry, index) => {
         if (index < this._eventElements.length - 1) {
           return [entry, this._eventElements[index + 1]];
         }
-        }).filter(pair => pair !== undefined)
+      })
+      .filter((pair) => pair !== undefined);
 
-        let contentBodyScrolling = document.getElementById("content-body-scrolling");
+    let contentBodyScrolling = document.getElementById(
-        let wrapper = this.querySelector("[data-custom-timeline-line-wrapper]") as HTMLElement;
+      "content-body-scrolling",
+    );
+    let wrapper = this.querySelector(
+      "[data-custom-timeline-line-wrapper]",
+    ) as HTMLElement;
 
     const position = (line: LeaderLine) => {
       wrapper.style.transform = "none";
       let rectWrapper = wrapper.getBoundingClientRect();
 
-            wrapper.style.transform = "translate(-" +
+      wrapper.style.transform =
-                (Number(rectWrapper.left)) + "px, -"
+        "translate(-" +
-                +
+        Number(rectWrapper.left) +
-                (Number(rectWrapper.top)) + "px)"
+        "px, -" +
+        Number(rectWrapper.top) +
+        "px)";
 
-            line.position()
+      line.position();
+    };
 
-        }
+    pairs.forEach((pair) => {
-
-        pairs.forEach(pair => {
       let line = new LeaderLine({
         start: pair[0],
         end: pair[1],
-                color: '#10ac25',
+        color: "#10ac25",
         size: 3,
         startSocket: "right",
         endSocket: "left",
         startPlug: "square",
-                endPlug: "arrow3"
+        endPlug: "arrow3",
       });
 
       // Find new element by hidden id and add to wrapper div
-            const newLineEl = document.querySelector(`body .leader-line:has(path#leader-line-${line._id}-line-path)`);
+      // noinspection TypeScriptUnresolvedReference
+      const lineId = line._id; // @ts-ignore
+      const newLineEl = document.querySelector(
+        `body .leader-line:has(path#leader-line-${lineId}-line-path)`,
+      );
       if (newLineEl) wrapper.appendChild(newLineEl);
 
       // Add position updaters for scrolling and resize events
@@ -63,8 +74,7 @@ class CustomTimeline extends HTMLElement {
       // Perform the initial positioning
       position(line);
     });
-
+  };
-    }
 }
 
-customElements.define('custom-timeline', CustomTimeline)
+customElements.define("custom-timeline", CustomTimeline);

src/components/Video.astro

@@ -1,12 +0,0 @@
----
-import {type videoConfig} from "@interfaces/video.ts";
-
-const config: videoConfig = Astro.props.videoConfig;
-console.log(config);
----
-
-<video class="w-full h-auto max-w-1/2" controls>
-    <source src={config.videoPath} type={config.videoType ?? "video/mp4"}/>
-    Your browser does not support the video tag.
-</video>
-

src/components/YtVideo.astro

@@ -1,9 +0,0 @@
----
-import type {videoConfig} from "@interfaces/video.ts";
-
-const config: videoConfig = Astro.props.videoConfig;
----
-<iframe class="h-128 w-full max-w-1/2" src={config.videoPath}
-        title={config.videoTitle ?? ""}
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

src/data/site-layout.ts

@@ -1,8 +1,8 @@
-import type {navLink} from "@interfaces/site-layout.ts"
+import type { navLink } from "@interfaces/site-layout.ts";
 
 export const siteLayout: navLink[] = [
-    {navText: "About", path: ""},
+  { navText: "About", path: "" },
-    {navText: "Education", path: "education"},
+  { navText: "Education", path: "education" },
   {
     navText: "Experiences",
     path: "experience",
@@ -13,21 +13,19 @@ export const siteLayout: navLink[] = [
         children: [
           {
             navText: "Hardware Test Engineer I/II",
-                        path: "hardware-test-engineer-i-ii"
+            path: "hardware-test-engineer-i-ii",
           },
           {
             navText: "Avionics Test Engineering Internship",
-                        path: "avionics-test-engineering-internship"
+            path: "avionics-test-engineering-internship",
-                    }
+          },
-                ]
+        ],
       },
       {
-                enabled: false,
+        navText: "OSU CEOAS Ocean Mixing Group",
-                navText: "OSU CEOAS",
         path: "osu-ceoas-ocean-mixing-group",
         children: [
           {
-                        enabled: false,
             navText: "Robotics Oceanographic Surface Sampler",
             path: "robotic-oceanographic-surface-sampler",
           },
@@ -35,8 +33,8 @@ export const siteLayout: navLink[] = [
             enabled: false,
             navText: "LeConte Glacier Deployments",
             path: "leconte-glacier-deployments",
-                    }
+          },
-                ]
+        ],
       },
       {
         enabled: false,
@@ -72,8 +70,8 @@ export const siteLayout: navLink[] = [
             enabled: false,
             navText: "ZScan Processor",
             path: "zscan-processor",
-                    }
+          },
-                ]
+        ],
       },
       {
         enabled: false,
@@ -99,82 +97,127 @@ export const siteLayout: navLink[] = [
             enabled: false,
             navText: "Club Officer",
             path: "club-officer",
-                    }
-                ]
           },
-        ]
+        ],
+      },
+    ],
   },
   {
     navText: "Hobbies",
     path: "hobby",
     children: [
-
       {
         enabled: false,
-                navText: "Homelab", path: "homelab",
+        navText: "Homelab",
+        path: "homelab",
         children: [
-                    {enabled: false, navText: "Home Server Rack", path: "home-server-rack"},
+          {
-                    {enabled: false, navText: "Offsite Backup Rack", path: "offsite-backup-rack"},
+            enabled: false,
-                    {enabled: false, navText: "Kubernetes Cluster", path: "kubernetes-cluster"},
+            navText: "Home Server Rack",
-                    {enabled: false, navText: "Home Automation", path: "home-automation"},
+            path: "home-server-rack",
-                ]
+          },
+          {
+            enabled: false,
+            navText: "Offsite Backup Rack",
+            path: "offsite-backup-rack",
+          },
+          {
+            enabled: false,
+            navText: "Kubernetes Cluster",
+            path: "kubernetes-cluster",
+          },
+          {
+            enabled: false,
+            navText: "Home Automation",
+            path: "home-automation",
+          },
+        ],
       },
       {
         navText: "Motorcycling",
         path: "motorcycling",
         children: [
-                    {navText: "Lineup", path: "lineup"},
+          { navText: "Lineup", path: "lineup" },
           {
             navText: "Custom Accessories",
             path: "custom-accessories",
             children: [
-                            {navText: "Chubby Buttons 2 Mount", path: "chubby-buttons-2-mount"},
+              {
-                        ]
+                navText: "Chubby Buttons 2 Mount",
+                path: "chubby-buttons-2-mount",
+              },
+            ],
           },
           {
             enabled: false,
             navText: "Trips",
             path: "trips",
             children: [
-                            {navText: "2025-08 | Alaska ", path: "2025-08-alaska", enabled: false,},
+              {
-                            {navText: "2024-10 | Norway ", path: "2024-10-norway", enabled: false,}
+                navText: "2025-08 | Alaska ",
-                        ]
+                path: "2025-08-alaska",
+                enabled: false,
               },
-                ]
+              {
+                navText: "2024-10 | Norway ",
+                path: "2024-10-norway",
+                enabled: false,
+              },
+            ],
+          },
+        ],
       },
       {
         enabled: false,
         navText: "Projects",
         path: "projects",
         children: [
-                    {navText: "OSSM Overkill Edition", path: "ossm-overkill-edition", enabled: false},
+          {
-                    {navText: "Rachael Ray Light Box", path: "rachael-ray-light-box", enabled: false},
+            navText: "OSSM Overkill Edition",
-                    {navText: "Shed Solar", path: "shed-solar", enabled: false},
+            path: "ossm-overkill-edition",
-                ]
+            enabled: false,
           },
-            {enabled: false, navText: "NixOS", path: "nixos"},
+          {
-            {navText: "Body Mods", path: "body-mods"},
+            navText: "Rachael Ray Light Box",
-        ]
+            path: "rachael-ray-light-box",
+            enabled: false,
+          },
+          { navText: "Shed Solar", path: "shed-solar", enabled: false },
+        ],
+      },
+      { enabled: false, navText: "NixOS", path: "nixos" },
+      { navText: "Body Mods", path: "body-mods" },
+    ],
   },
   {
     navText: "Resumes",
     path: "resume",
     children: [
-            {enabled: false, navText: "2025-11-10 | Complete CV", path: "2025-11-10-complete-cv"},
+      {
-            {navText: "2025-11-10 | Infrastructure Engineer", path: "2025-11-10-infrastructure-engineer"},
+        enabled: false,
-            {navText: "2019-07-01 | Hardware Test Engineer", path: "2019-07-01-hardware-test-engineer"},
+        navText: "2025-11-10 | Complete CV",
-        ]
+        path: "2025-11-10-complete-cv",
       },
-    {navText: "Github", pubpath: "https://github.com/caperren"},
+      {
-    {navText: "LinkedIn", pubpath: "https://www.linkedin.com/in/caperren/"}
+        navText: "2025-11-10 | Infrastructure Engineer",
-]
+        path: "2025-11-10-infrastructure-engineer",
+      },
+      {
+        navText: "2019-07-01 | Hardware Test Engineer",
+        path: "2019-07-01-hardware-test-engineer",
+      },
+    ],
+  },
+  { navText: "Github", pubpath: "https://github.com/caperren" },
+  { navText: "LinkedIn", pubpath: "https://www.linkedin.com/in/caperren/" },
+];
 
 export const pathToMetadata = (path: string): navLink => {
   let paths = path.split("/").filter((entry) => entry);
 
   // Handle root path of /
   if (paths.length < 1) {
-        paths = [""]
+    paths = [""];
   }
 
   let currentEntries: navLink[] = siteLayout;
@@ -197,12 +240,12 @@ export const pathToMetadata = (path: string): navLink => {
   }
 
   return foundEntry;
-}
+};
 
 export const getPaths = (
   currentEntries: navLink[] = siteLayout,
   paths: string[] = [],
-    disabledOnly = false
+  disabledOnly = false,
 ): string[] => {
   let foundPaths: string[] = [];
 
@@ -210,8 +253,12 @@ export const getPaths = (
     if (currentEntry.children && currentEntry.children.length > 0) {
       foundPaths = [
         ...foundPaths,
-                ...getPaths(currentEntry.children, [...paths, currentEntry.path || ""], disabledOnly)
+        ...getPaths(
-            ]
+          currentEntry.children,
+          [...paths, currentEntry.path || ""],
+          disabledOnly,
+        ),
+      ];
     } else {
       let enabled = currentEntry.enabled ?? true;
       if (disabledOnly ? !enabled : enabled) {
@@ -220,4 +267,4 @@ export const getPaths = (
     }
   }
   return [...new Set(foundPaths)];
-}
+};

src/interfaces/experience-metadata.ts

@@ -1,9 +1,6 @@
-import {DateTime} from 'luxon';
+import { DateTime } from "luxon";
 
-export interface experience {
+export interface experience {}
-
-
-}
 
 export interface subExperience {
   name: string;

src/interfaces/timeline.ts

@@ -1,6 +1,6 @@
 export interface timelineEntry {
   event: string;
-    eventDetail?: string
+  eventDetail?: string;
   date: string;
   description?: string;
 }

src/interfaces/video.ts

@@ -1,5 +1,5 @@
 export interface videoConfig {
-    videoTitle?: string
+  videoTitle?: string;
   videoPath: string;
   videoType?: string;
 }

src/layouts/BaseLayout.astro

@@ -1,46 +1,53 @@
 ---
-import '@styles/global.css'
+import "@styles/global.css";
 
-import Navbar from '@components/Navbar.astro';
+import Navbar from "@components/Navbar.astro";
-import Footer from '@components/Footer.astro';
+import Footer from "@components/Footer.astro";
 
-import {pathToMetadata} from "@data/site-layout.ts";
+import { pathToMetadata } from "@data/site-layout.ts";
 
-
+const pageTitle = Astro.props.title
-const pageTitle = Astro.props.title ? `${Astro.props.title} - Corwin Perren` : "Corwin Perren";
+  ? `${Astro.props.title} - Corwin Perren`
+  : "Corwin Perren";
 const showTitle = Astro.props.showTitle ?? true;
 const pageEnabled = pathToMetadata(Astro.url.pathname).enabled ?? true;
 ---
+
 <!doctype html>
 <html lang="en">
-<head>
+  <head>
-    <meta charset="UTF-8"/>
+    <meta charset="UTF-8" />
 
-    <link rel="icon" href="/48x48-favicon.png" type="image/x-icon"/>
+    <link rel="icon" href="/48x48-favicon.png" type="image/x-icon" />
-    <link rel="icon" href="/512x512-favicon.png" type="image/png"/>
+    <link rel="icon" href="/512x512-favicon.png" type="image/png" />
-    <link rel="icon" href="/192x192-favicon.png" type="image/png"/>
+    <link rel="icon" href="/192x192-favicon.png" type="image/png" />
-    <link rel="icon" href="/180x180-favicon.png" type="image/png"/>
+    <link rel="icon" href="/180x180-favicon.png" type="image/png" />
-    <link rel="icon" href="/48x48-favicon.png" type="image/png"/>
+    <link rel="icon" href="/48x48-favicon.png" type="image/png" />
-    <link rel="icon" href="/32x32-favicon.png" type="image/png"/>
+    <link rel="icon" href="/32x32-favicon.png" type="image/png" />
-    <link rel="icon" href="/16x16-favicon.png" type="image/png"/>
+    <link rel="icon" href="/16x16-favicon.png" type="image/png" />
 
-    <link rel="sitemap" href="/sitemap-index.xml"/>
+    <link rel="sitemap" href="/sitemap-index.xml" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{pageEnabled ? pageTitle : "Corwin Perren"}</title>
-</head>
+  </head>
-<body class="flex flex-col bg-black text-white h-dvh w-full max-w-full">
+  <body class="flex h-dvh w-full max-w-full flex-col bg-black text-white">
-<div id="content-body-scrolling" class="grow overflow-x-hidden overflow-y-scroll">
+    <div
-    <Navbar/>
+      id="content-body-scrolling"
+      class="grow overflow-x-hidden overflow-y-scroll"
+    >
+      <Navbar />
       <main class="mx-6 my-6">
-        {(Astro.props.title && showTitle && pageEnabled) && (
+        {
-                <h1 class="font-extrabold md:text-3xl md:mb-6">{Astro.props.title}</h1>
+          Astro.props.title && showTitle && pageEnabled && (
-        )}
+            <h1 class="font-extrabold md:mb-6 md:text-3xl">
-        {pageEnabled && (
+              {Astro.props.title}
-                <slot/>
+            </h1>
-        )}
+          )
+        }
+        {pageEnabled && <slot />}
       </main>
-</div>
+    </div>
-<Footer/>
+    <Footer />
-<script src="../scripts/main.ts"></script>
+    <script src="../scripts/main.ts"></script>
-</body>
+  </body>
 </html>

src/layouts/ExperienceLayout.astro

@@ -1,6 +1,7 @@
 ---
-import BaseLayout from './BaseLayout.astro';
+import BaseLayout from "./BaseLayout.astro";
 ---
+
 <BaseLayout title={Astro.props.title}>
-    <slot/>
+  <slot />
 </BaseLayout>

src/layouts/HobbyLayout.astro

@@ -1,6 +1,7 @@
 ---
-import BaseLayout from './BaseLayout.astro';
+import BaseLayout from "./BaseLayout.astro";
 ---
+
 <BaseLayout title={Astro.props.title}>
-    <slot/>
+  <slot />
 </BaseLayout>

src/layouts/ResumeLayout.astro

@@ -1,10 +1,10 @@
 ---
-import BaseLayout from './BaseLayout.astro';
+import BaseLayout from "@layouts/BaseLayout.astro";
+import PdfViewer from "@components/Media/PdfViewer.astro";
+---
 
-const resume = Astro.props.resume;
----
 <BaseLayout title={Astro.props.title}>
   <div class="h-dvh">
-        <iframe src={resume} class="mx-auto w-9/10 md:w-3/5 h-7/10 md:h-4/5"/>
+    <PdfViewer class="mx-auto" pdf={Astro.props.resume} />
   </div>
 </BaseLayout>

src/pages/education.astro

@@ -1,35 +1,31 @@
 ---
 import BaseLayout from "@layouts/BaseLayout.astro";
-import Carousel from "@components/CustomCarousel/CustomCarousel.astro";
+import Carousel from "@components/Media/CustomCarousel/CustomCarousel.astro";
 import Timeline from "@components/Timeline/Timeline.astro";
 import Table from "@components/Table.astro";
 
-import type {carouselGroup} from "@interfaces/image-carousel.ts";
+import type { carouselGroup } from "@interfaces/image-carousel.ts";
-import type {tableData} from "@interfaces/table.ts";
+import type { tableData } from "@interfaces/table.ts";
-import type {timelineEntry} from "@interfaces/timeline.ts";
+import type { timelineEntry } from "@interfaces/timeline.ts";
 
 import fhhs_diploma from "@assets/education/fhhs-diploma.jpg";
-import osu_bs_cs_diploma from "@assets/education/osu-bs-cs-diploma.jpg"
+import osu_bs_cs_diploma from "@assets/education/osu-bs-cs-diploma.jpg";
-
 
 const diplomaCarouselGroup: carouselGroup = {
   animation: "slide",
-    images: [
+  images: [fhhs_diploma, osu_bs_cs_diploma],
-        fhhs_diploma,
+};
-        osu_bs_cs_diploma
-    ]
-}
 
 const timeline: timelineEntry[] = [
   {
     event: "High School Diploma",
     eventDetail: "Friday Harbor High School",
-        date: "June 2011"
+    date: "June 2011",
   },
   {
     event: "B.S. Computer Science",
     eventDetail: "Oregon State University",
-        date: "June 2019"
+    date: "June 2019",
   },
 ];
 
@@ -101,17 +97,21 @@ const courseTable: tableData = {
     ["PHL", "205", "ETHICS"],
     ["PS", "LDT", "AMERICAN GOVT"],
     ["PSY", "201", "GENERAL PSYCHOLOGY"],
-        ["QS", "262", "INTRODUCTION TO QUEER STUDIES"]
+    ["QS", "262", "INTRODUCTION TO QUEER STUDIES"],
-    ]
+  ],
 };
 ---
+
 <BaseLayout title="Education">
-    <Carousel carouselGroup={diplomaCarouselGroup}/>
+  <Carousel carouselGroup={diplomaCarouselGroup} />
-    <h2 class="font-bold md:text-2xl my-4 underline">Timeline</h2>
+  <h2 class="my-4 font-bold underline md:text-2xl">Timeline</h2>
-    <Timeline timeline={timeline}/>
+  <Timeline timeline={timeline} />
-    <h2 class="font-bold md:text-2xl my-4 underline">Oregon State University</h2>
+  <h2 class="my-4 font-bold underline md:text-2xl">Oregon State University</h2>
-    <a class="font-bold md:text-lg my-4 text-blue-500 underline hover:text-blue-300"
+  <a
-       href="https://github.com/caperren/school_archives/tree/master/OSU%20Coursework">Coursework Archives</a>
+    class="my-4 font-bold text-blue-500 underline hover:text-blue-300 md:text-lg"
-    <h3 class="font-bold md:text-lg my-4 underline">Course Listing</h3>
+    href="https://github.com/caperren/school_archives/tree/master/OSU%20Coursework"
-    <Table data={courseTable}/>
+    >Coursework Archives</a
+  >
+  <h3 class="my-4 font-bold underline md:text-lg">Course Listing</h3>
+  <Table data={courseTable} />
 </BaseLayout>

src/pages/experience/osu-ceoas-ocean-mixing-group/leconte-glacier-deployments.astro

@@ -2,5 +2,4 @@
 import ExperienceLayout from "@layouts/ExperienceLayout.astro";
 ---
 
-<ExperienceLayout title="CEOAS - LeConte Glacier Deployments">
+<ExperienceLayout title="CEOAS - LeConte Glacier Deployments" />
-</ExperienceLayout>

src/pages/experience/osu-ceoas-ocean-mixing-group/robotic-oceanographic-surface-sampler.astro

@@ -1,6 +1,98 @@
 ---
 import ExperienceLayout from "@layouts/ExperienceLayout.astro";
+
+import type { carouselGroup } from "@interfaces/image-carousel.ts";
+import type { timelineEntry } from "@interfaces/timeline.ts";
+
+import Carousel from "@components/Media/CustomCarousel/CustomCarousel.astro";
+import H2 from "@components/CustomHtmlWrappers/H2.astro";
+import LinkButton from "@components/LinkButton.astro";
+import PdfViewer from "@components/Media/PdfViewer.astro";
+import Timeline from "@components/Timeline/Timeline.astro";
+
+import publication from "@assets/experience/osu-ceoas-ocean-mixing-group/robotic-oceanographic-surface-sampler/ross-publication.pdf";
+
+const headerCarouselGroup: carouselGroup = {
+  animation: "slide",
+  images: [],
+};
+
+const timeline: timelineEntry[] = [
+  {
+    event: "Started",
+    eventDetail: "Satellite Hardware Test Team",
+    date: "September 2019",
+    description:
+      "Owned test systems for four generations of Starlink flight computers and two generations of power boards",
+  },
+  {
+    event: "Transitioned To Remote",
+    eventDetail: "Moved To Oregon",
+    date: "August 2022",
+    description:
+      "Personal decision, but I was allowed to work on tools for the build reliability engineering team",
+  },
+  {
+    event: "Changed Teams",
+    eventDetail: "Components Test Infra Team",
+    date: "March 2024 - VERIFY",
+    description:
+      "Vertical move that allowed for broader application of my skills",
+  },
+  {
+    event: "Finished",
+    eventDetail: "Thanks for all the fish!",
+    date: "April 2025",
+    description:
+      "Celebrated five and a half years of helping put thousands of satellites, and dozens of rockets, into orbit",
+  },
+];
 ---
 
 <ExperienceLayout title="CEOAS - Robotic Oceanographic Surface Sampler">
+  <Carousel carouselGroup={headerCarouselGroup} />
+  <div class="mt-4 flex items-center justify-center">
+    <LinkButton
+      href="https://tos.org/oceanography/article/autonomous-ctd-profiling-from-the-robotic-oceanographic-surface-sampler"
+      title="Official Scientific Publication"
+    />
+  </div>
+  <h2 class="my-4 font-bold md:text-2xl">Summary</h2>
+  <h3 class="my-4 font-bold md:text-lg">Timeline</h3>
+  <Timeline timeline={timeline} />
+  <h3 class="my-4 font-bold md:text-lg">Key Takeaways</h3>
+  <ul class="list-inside list-disc">
+    <li>One</li>
+    <li>Two</li>
+    <li>Three</li>
+  </ul>
+  <h3 class="my-4 font-bold md:text-lg">Skills Used</h3>
+  <div
+    class="border-caperren-green relative grid grid-flow-row gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+  >
+    <div>
+      <div class="text-sm font-extrabold">Software</div>
+      <hr class="text-caperren-green" />
+      <ul class="list-inside list-disc text-sm">
+        <li>One</li>
+        <li>Two</li>
+      </ul>
+    </div>
+    <div>
+      <div class="text-sm font-extrabold">Electrical</div>
+      <hr class="text-caperren-green" />
+    </div>
+    <div>
+      <div class="text-sm font-extrabold">Mechanical</div>
+      <hr class="text-caperren-green" />
+    </div>
+    <div>
+      <div class="text-sm font-extrabold">Other</div>
+      <hr class="text-caperren-green" />
+    </div>
+  </div>
+  <H2 text="Official Scientific Publication" />
+  <div class="h-334">
+    <PdfViewer pdf={publication} />
+  </div>
 </ExperienceLayout>

src/pages/experience/osu-robotics-club/club-officer.astro

@@ -2,5 +2,4 @@
 import ExperienceLayout from "@layouts/ExperienceLayout.astro";
 ---
 
-<ExperienceLayout title="OSURC - Officer">
+<ExperienceLayout title="OSURC - Officer" />
-</ExperienceLayout>

src/pages/experience/osu-robotics-club/mars-rover-electrical-team-lead.astro

@@ -2,5 +2,4 @@
 import ExperienceLayout from "@layouts/ExperienceLayout.astro";
 ---
 
-<ExperienceLayout title="OSURC - Electrical Team Lead">
+<ExperienceLayout title="OSURC - Electrical Team Lead" />
-</ExperienceLayout>

src/pages/experience/osu-robotics-club/mars-rover-emergency-software-team-lead.astro

@@ -2,5 +2,4 @@
 import ExperienceLayout from "@layouts/ExperienceLayout.astro";
 ---
 
-<ExperienceLayout title="OSURC - Emergency Software Team Lead">
+<ExperienceLayout title="OSURC - Emergency Software Team Lead" />
-</ExperienceLayout>

src/pages/experience/osu-robotics-club/mars-rover-software-team-lead.astro

@@ -1,39 +1,39 @@
 ---
 import ExperienceLayout from "@layouts/ExperienceLayout.astro";
-import Carousel from "@components/CustomCarousel/CustomCarousel.astro";
+import Carousel from "@components/Media/CustomCarousel/CustomCarousel.astro";
-import type {carouselGroup} from "@interfaces/image-carousel.ts";
+import type { carouselGroup } from "@interfaces/image-carousel.ts";
-import YtVideo from "@components/YtVideo.astro";
+import YtVideo from "@components/Media/YtVideo.astro";
-import type {videoConfig} from "@interfaces/video.ts";
+import type { videoConfig } from "@interfaces/video.ts";
-
-
 
 const headerCarouselGroup: carouselGroup = {
   animation: "slide",
-    images: []
+  images: [],
-}
+};
-
 
 const videoList: videoConfig[] = [
   {
     videoTitle: "Ground Station Software Quick Overview",
-        videoPath: "https://www.youtube-nocookie.com/embed/ZjGW-HWapVA"
+    videoPath: "https://www.youtube-nocookie.com/embed/ZjGW-HWapVA",
   },
   {
     videoTitle: "Rover Software Environment And Full Code Overview",
-        videoPath: "https://www.youtube-nocookie.com/embed/sceA2ZbEV8Y"
+    videoPath: "https://www.youtube-nocookie.com/embed/sceA2ZbEV8Y",
-    }
+  },
-]
+];
 ---
 
 <ExperienceLayout title="OSURC - Software Team Lead">
-    <Carousel carouselGroup={headerCarouselGroup}/>
+  <Carousel carouselGroup={headerCarouselGroup} />
 
-    <h2 class="font-bold md:text-2xl my-4 underline">Ground Station Readouts & Features</h2>
+  <h2 class="my-4 font-bold underline md:text-2xl">
-    <ul class="space-y-1 list-disc list-inside">
+    Ground Station Readouts & Features
+  </h2>
+  <ul class="list-inside list-disc space-y-1">
     <li>Clock</li>
     <li>Event Timer</li>
-        <li>Status Indication
+    <li>
-            <ul class="ps-5 space-y-1 list-disc list-inside">
+      Status Indication
+      <ul class="list-inside list-disc space-y-1 ps-5">
         <li>Rover Connection</li>
         <li>Controller Connection Info</li>
         <li>Radio Stats</li>
@@ -44,16 +44,19 @@ const videoList: videoConfig[] = [
         <li>Camera Connections</li>
       </ul>
     </li>
-        <li>Radio Direction Finding
+    <li>
-            <ul class="ps-5 space-y-1 list-disc list-inside">
+      Radio Direction Finding
+      <ul class="list-inside list-disc space-y-1 ps-5">
         <li>Raw Radio RSSI Indication</li>
         <li>Radio RSSI Pulse Frequency w/Validity Indication</li>
       </ul>
     </li>
-        <li>Arm
+    <li>
-            <ul class="ps-5 space-y-1 list-disc list-inside">
+      Arm
-                <li>Special Movements
+      <ul class="list-inside list-disc space-y-1 ps-5">
-                    <ul class="ps-5 space-y-1 list-disc list-inside">
+        <li>
+          Special Movements
+          <ul class="list-inside list-disc space-y-1 ps-5">
             <li>Stow Arm</li>
             <li>Unstow Arm</li>
             <li>Upright Arm</li>
@@ -62,8 +65,9 @@ const videoList: videoConfig[] = [
         <li>Calibrate Arm</li>
         <li>Clear Arm Fault</li>
         <li>Reset Arm Motor Drivers</li>
-                <li>Task Movements
+        <li>
-                    <ul class="ps-5 space-y-1 list-disc list-inside">
+          Task Movements
+          <ul class="list-inside list-disc space-y-1 ps-5">
             <li>Approach Oxygen Tank</li>
             <li>Depart Oxygen Tank</li>
             <li>Approach Light Beacon</li>
@@ -72,12 +76,14 @@ const videoList: videoConfig[] = [
         </li>
       </ul>
     </li>
-        <li>Mining/Science
+    <li>
-            <ul class="ps-5 space-y-1 list-disc list-inside">
+      Mining/Science
+      <ul class="list-inside list-disc space-y-1 ps-5">
         <li>Bucket Weight Measurement</li>
         <li>Bucket Lift/Tilt Position Readouts</li>
-                <li>Preset Bucket Movements
+        <li>
-                    <ul class="ps-5 space-y-1 list-disc list-inside">
+          Preset Bucket Movements
+          <ul class="list-inside list-disc space-y-1 ps-5">
             <li>Mining Transport</li>
             <li>Mining Measure</li>
             <li>Mining Scoop</li>
@@ -86,26 +92,30 @@ const videoList: videoConfig[] = [
             <li>Mining Probe</li>
           </ul>
         </li>
-                <li>Science Probe Readings
+        <li>
-                    <ul class="ps-5 space-y-1 list-disc list-inside">
+          Science Probe Readings
+          <ul class="list-inside list-disc space-y-1 ps-5">
             <li>Temp in C</li>
             <li>Moisture %</li>
             <li>Loss Tangent</li>
             <li>Soil Electrical Conductivity</li>
-                        <li>Real Dielectric Permitivity</li>
+            <li>Real Dielectric Permittivity</li>
-                        <li>Imaginary Dielectric Permitivity</li>
+            <li>Imaginary Dielectric Permittivity</li>
           </ul>
         </li>
-                <li>Science Camera Controls
+        <li>
-                    <ul class="ps-5 space-y-1 list-disc list-inside">
+          Science Camera Controls
-                        <li>Video Output Selection
+          <ul class="list-inside list-disc space-y-1 ps-5">
-                            <ul class="ps-5 space-y-1 list-disc list-inside">
+            <li>
+              Video Output Selection
+              <ul class="list-inside list-disc space-y-1 ps-5">
                 <li>Network Video</li>
                 <li>Camera LCD</li>
               </ul>
             </li>
-                        <li>Photo Controls
+            <li>
-                            <ul class="ps-5 space-y-1 list-disc list-inside">
+              Photo Controls
+              <ul class="list-inside list-disc space-y-1 ps-5">
                 <li>Zoom In One Step</li>
                 <li>Zoom Out One Step</li>
                 <li>Full Zoom In</li>
@@ -117,12 +127,14 @@ const videoList: videoConfig[] = [
         </li>
       </ul>
     </li>
-        <li>SSH Console
+    <li>
-            <ul class="ps-5 space-y-1 list-disc list-inside">
+      SSH Console
+      <ul class="list-inside list-disc space-y-1 ps-5">
         <li>SSH Terminal Display</li>
         <li>SSH Command Entry</li>
-                <li>Preset Commands
+        <li>
-                    <ul class="ps-5 space-y-1 list-disc list-inside">
+          Preset Commands
+          <ul class="list-inside list-disc space-y-1 ps-5">
             <li>Network Host Scan</li>
             <li>List Wifi Networks</li>
             <li>Equipment Login and Help</li>
@@ -135,98 +147,115 @@ const videoList: videoConfig[] = [
         <li>Connect/Disconnect Rover Wifi by SSID</li>
       </ul>
     </li>
-        <li>Settings
+    <li>
-            <ul class="ps-5 space-y-1 list-disc list-inside">
+      Settings
+      <ul class="list-inside list-disc space-y-1 ps-5">
         <li>Map Selection</li>
         <li>Map Zoom Level</li>
         <li>Rover Wifi Radio Channel Selection</li>
       </ul>
     </li>
-        <li>Mapping Display
+    <li>
-            <ul class="ps-5 space-y-1 list-disc list-inside">
+      Mapping Display
+      <ul class="list-inside list-disc space-y-1 ps-5">
         <li>Shows Google Map Terrain</li>
         <li>Shows Rover Location And Orientation</li>
         <li>Shows Rover GPS Coordinates</li>
         <li>Shows Saved Waypoints</li>
       </ul>
     </li>
-        <li>Waypoint Entry / Editing
+    <li>
-            <ul class="ps-5 space-y-1 list-disc list-inside">
+      Waypoint Entry / Editing
+      <ul class="list-inside list-disc space-y-1 ps-5">
         <li>Name Entry For Landmarks</li>
         <li>GPS Entry in Decimal</li>
         <li>GPS Entry in Degree/Minute/Second</li>
         <li>Waypoint Color Choice</li>
       </ul>
     </li>
-        <li>Navigation Waypoints
+    <li>
-            <ul class="ps-5 space-y-1 list-disc list-inside">
+      Navigation Waypoints
+      <ul class="list-inside list-disc space-y-1 ps-5">
         <li>Shows And Allows Editing Of Nav Waypoints</li>
       </ul>
     </li>
-        <li>Landmark Waypoints
+    <li>
-            <ul class="ps-5 space-y-1 list-disc list-inside">
+      Landmark Waypoints
+      <ul class="list-inside list-disc space-y-1 ps-5">
         <li>Shows And Allows Editing Of Landmark Waypoints</li>
       </ul>
     </li>
-        <li>Arm Joint Positions
+    <li>
-            <ul class="ps-5 space-y-1 list-disc list-inside">
+      Arm Joint Positions
+      <ul class="list-inside list-disc space-y-1 ps-5">
         <li>Positions Of Six Arm Joints In Revolutions</li>
       </ul>
     </li>
-        <li>Gripper Joint Positions
+    <li>
-            <ul class="ps-5 space-y-1 list-disc list-inside">
+      Gripper Joint Positions
+      <ul class="list-inside list-disc space-y-1 ps-5">
         <li>Positions Shown As Raw Encoder Positions</li>
       </ul>
     </li>
-        <li>Arm Motor Drive Statuses
+    <li>
-            <ul class="ps-5 space-y-1 list-disc list-inside">
+      Arm Motor Drive Statuses
+      <ul class="list-inside list-disc space-y-1 ps-5">
         <li>Communication/Movement/Fault Statuses For All Six Arm Joints</li>
       </ul>
     </li>
-        <li>Gripper Mode Readouts
+    <li>
-            <ul class="ps-5 space-y-1 list-disc list-inside">
+      Gripper Mode Readouts
+      <ul class="list-inside list-disc space-y-1 ps-5">
         <li>Gripper Mode Control State</li>
       </ul>
     </li>
-        <li>Xbox Control Mode
+    <li>
-            <ul class="ps-5 space-y-1 list-disc list-inside">
+      Xbox Control Mode
+      <ul class="list-inside list-disc space-y-1 ps-5">
         <li>Showed Whether Xbox Controller Moving Arm Or Mining</li>
       </ul>
     </li>
-        <li>Heading and Goal Indication w/Compass
+    <li>
-            <ul class="ps-5 space-y-1 list-disc list-inside">
+      Heading and Goal Indication w/Compass
+      <ul class="list-inside list-disc space-y-1 ps-5">
         <li>Raw Heading Indication</li>
         <li>Goal Indication (Unused)</li>
         <li>Compass Heading Indication</li>
       </ul>
     </li>
-        <li>Low Resolution Mode
+    <li>
-            <ul class="ps-5 space-y-1 list-disc list-inside">
+      Low Resolution Mode
+      <ul class="list-inside list-disc space-y-1 ps-5">
         <li>Controlled Low Resolution Fallback Mode During Radio Failure</li>
       </ul>
     </li>
-        <li>Current Speed
+    <li>
-            <ul class="ps-5 space-y-1 list-disc list-inside">
+      Current Speed
+      <ul class="list-inside list-disc space-y-1 ps-5">
         <li>GPS Speed</li>
       </ul>
     </li>
-        <li>Speed Limit
+    <li>
-            <ul class="ps-5 space-y-1 list-disc list-inside">
+      Speed Limit
+      <ul class="list-inside list-disc space-y-1 ps-5">
         <li>% Of Max Rover Speed As Limit</li>
       </ul>
     </li>
-        <li>Tank Drive Output
+    <li>
-            <ul class="ps-5 space-y-1 list-disc list-inside">
+      Tank Drive Output
+      <ul class="list-inside list-disc space-y-1 ps-5">
         <li>% Of Total Power To Left/Right Rover Drive Systems</li>
       </ul>
     </li>
-        <li>IMU Readings
+    <li>
-            <ul class="ps-5 space-y-1 list-disc list-inside">
+      IMU Readings
+      <ul class="list-inside list-disc space-y-1 ps-5">
         <li>Pitch/Roll Readings In +/- 1 Readout</li>
       </ul>
     </li>
-        <li>Triple Camera Displays
+    <li>
-            <ul class="ps-5 space-y-1 list-disc list-inside">
+      Triple Camera Displays
+      <ul class="list-inside list-disc space-y-1 ps-5">
         <li>One Primary Video Display</li>
         <li>Two Secondary Video Displays</li>
         <li>Named Display For Currently Viewed Camera</li>
@@ -236,10 +265,15 @@ const videoList: videoConfig[] = [
       </ul>
     </li>
   </ul>
-    <h2 class="font-bold md:text-2xl my-4 underline">Rover Demos and Software Overviews</h2>
+  <h2 class="my-4 font-bold underline md:text-2xl">
-    {videoList.map((video) => (
+    Rover Demos and Software Overviews
-            <h3 class="font-bold md:text-lg my-4">{video.videoTitle}</h3>
+  </h2>
-            <YtVideo videoConfig={video}/>
+  {
-    ))}
+    videoList.map((video) => (
-
+      <div>
+        <h3 class="my-4 font-bold md:text-lg">{video.videoTitle}</h3>
+        <YtVideo videoConfig={video} />
+      </div>
+    ))
+  }
 </ExperienceLayout>

src/pages/experience/osu-sinnhuber-aquatic-research-laboratory/dechorionator.astro

@@ -2,5 +2,4 @@
 import ExperienceLayout from "@layouts/ExperienceLayout.astro";
 ---
 
-<ExperienceLayout title="SARL - Dechorionator">
+<ExperienceLayout title="SARL - Dechorionator" />
-</ExperienceLayout>

src/pages/experience/osu-sinnhuber-aquatic-research-laboratory/denso-embryo-pick-and-plate.astro

@@ -2,5 +2,4 @@
 import ExperienceLayout from "@layouts/ExperienceLayout.astro";
 ---
 
-<ExperienceLayout title="SARL - Denso Embryo Pick and Plate">
+<ExperienceLayout title="SARL - Denso Embryo Pick and Plate" />
-</ExperienceLayout>

src/pages/experience/osu-sinnhuber-aquatic-research-laboratory/shuttlebox-behavior-system.astro

@@ -2,5 +2,4 @@
 import ExperienceLayout from "@layouts/ExperienceLayout.astro";
 ---
 
-<ExperienceLayout title="SARL - Shuttlebox Behavior System">
+<ExperienceLayout title="SARL - Shuttlebox Behavior System" />
-</ExperienceLayout>

src/pages/experience/osu-sinnhuber-aquatic-research-laboratory/team-lead.astro

@@ -2,5 +2,4 @@
 import ExperienceLayout from "@layouts/ExperienceLayout.astro";
 ---
 
-<ExperienceLayout title="SARL - Team Lead">
+<ExperienceLayout title="SARL - Team Lead" />
-</ExperienceLayout>

src/pages/experience/osu-sinnhuber-aquatic-research-laboratory/zebrafish-embryo-pick-and-plate.astro

@@ -2,5 +2,4 @@
 import ExperienceLayout from "@layouts/ExperienceLayout.astro";
 ---
 
-<ExperienceLayout title="SARL - Zebrafish Embryo Pick and Plate">
+<ExperienceLayout title="SARL - Zebrafish Embryo Pick and Plate" />
-</ExperienceLayout>

src/pages/experience/osu-sinnhuber-aquatic-research-laboratory/zscan-processor.astro

@@ -2,5 +2,4 @@
 import ExperienceLayout from "@layouts/ExperienceLayout.astro";
 ---
 
-<ExperienceLayout title="SARL - ZScan Processor">
+<ExperienceLayout title="SARL - ZScan Processor" />
-</ExperienceLayout>

src/pages/experience/spacex/avionics-test-engineering-internship.astro

@@ -1,20 +1,17 @@
 ---
-import ExperienceLayout from '@layouts/ExperienceLayout.astro';
+import ExperienceLayout from "@layouts/ExperienceLayout.astro";
-import Timeline from '@components/Timeline/Timeline.astro';
+import Timeline from "@components/Timeline/Timeline.astro";
-import Carousel from "@components/CustomCarousel/CustomCarousel.astro";
+import Carousel from "@components/Media/CustomCarousel/CustomCarousel.astro";
 
-import spring_2019_interns
+import spring_2019_interns from "@assets/experience/spacex/avionics-test-engineering-internship/spring-2019-interns.jpg";
-    from "@assets/experience/spacex/avionics-test-engineering-internship/spring-2019-interns.jpg";
 
-import type {carouselGroup} from "@interfaces/image-carousel.ts";
+import type { carouselGroup } from "@interfaces/image-carousel.ts";
-import type {timelineEntry} from "@interfaces/timeline.ts";
+import type { timelineEntry } from "@interfaces/timeline.ts";
 
 const headerCarouselGroup: carouselGroup = {
   animation: "slide",
-    images: [
+  images: [spring_2019_interns],
-        spring_2019_interns
+};
-    ]
-}
 
 const timeline: timelineEntry[] = [
   {
@@ -24,55 +21,60 @@ const timeline: timelineEntry[] = [
   {
     event: "Finished",
     date: "March 2019",
-    }
+  },
 ];
 ---
-<ExperienceLayout title="SpaceX - Avionics Test Engineering Internship">
-    <Carousel carouselGroup={headerCarouselGroup}/>
 
-    <h2 class="font-bold md:text-2xl my-4">Summary</h2>
+<ExperienceLayout title="SpaceX - Avionics Test Engineering Internship">
-    <h3 class="font-bold md:text-lg my-4">Timeline</h3>
+  <Carousel carouselGroup={headerCarouselGroup} />
-    <Timeline timeline={timeline}/>
+
-    <h3 class="font-bold md:text-lg my-4">Key Takeaways</h3>
+  <h2 class="my-4 font-bold md:text-2xl">Summary</h2>
-    <ul class="list-disc list-inside">
+  <h3 class="my-4 font-bold md:text-lg">Timeline</h3>
+  <Timeline timeline={timeline} />
+  <h3 class="my-4 font-bold md:text-lg">Key Takeaways</h3>
+  <ul class="list-inside list-disc">
     <li></li>
   </ul>
-    <h3 class="font-bold md:text-lg my-4">Skills Used</h3>
+  <h3 class="my-4 font-bold md:text-lg">Skills Used</h3>
-    <div class="relative grid gap-6 grid-flow-row sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4  border-caperren-green">
+  <div
+    class="border-caperren-green relative grid grid-flow-row gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+  >
     <div>
-            <div class="font-extrabold text-sm">Software</div>
+      <div class="text-sm font-extrabold">Software</div>
-            <hr class="text-caperren-green"/>
+      <hr class="text-caperren-green" />
-            <ul class="list-disc list-inside text-sm">
+      <ul class="list-inside list-disc text-sm">
         <li>Python</li>
         <li>Test Driven Development</li>
       </ul>
     </div>
     <div>
-            <div class="font-extrabold text-sm">Electrical</div>
+      <div class="text-sm font-extrabold">Electrical</div>
-            <hr class="text-caperren-green"/>
+      <hr class="text-caperren-green" />
     </div>
     <div>
-            <div class="font-extrabold text-sm">Other</div>
+      <div class="text-sm font-extrabold">Other</div>
-            <hr class="text-caperren-green"/>
+      <hr class="text-caperren-green" />
     </div>
   </div>
-    <h2 class="font-bold md:text-2xl my-4">Details</h2>
+  <h2 class="my-4 font-bold md:text-2xl">Details</h2>
-
-
-    Though I did get to work on some really fun projects during my internship at SpaceX, I unfortunately can’t go into
-    much detail due to NDA’s and ITAR restrictions. What I can say is that I mainly wrote Python for a new avionics
-    hardware test system. My experience with writing Python in the numerous other projects I’ve done really helped me
-    out here, as the framework SpaceX has created was quite complex and would otherwise have been fairly difficult to
-    write code for. I also wrote a simple tool for automating the creation of Jira work tickets so that the two teams
-    that ended up using it wouldn’t have to have their members manually creating dozens of them as work and issues came
-    in through a separate system.
-
-    I was also quite happy in that I got to perform some circuit debugging on avionics test system hardware, both for my
-    project and for a separate test system. A final experience I had here was getting to work directly with the head
-    engineer from a company that supplied a piece of test hardware I was interfacing with. It was quite incredible to
-    see just how much weight a SpaceX email address had when trying to solve problems I had found with the hardware. Not
-    only were they responsive, but in fact were willing to fast-track firmware updates for us to get things working.
-    Coming from clubs and small labs where a support email might not even get a response for months, it was quite a
-    refreshing experience.
 
+  Though I did get to work on some really fun projects during my internship at
+  SpaceX, I unfortunately can’t go into much detail due to NDA’s and ITAR
+  restrictions. What I can say is that I mainly wrote Python for a new avionics
+  hardware test system. My experience with writing Python in the numerous other
+  projects I’ve done really helped me out here, as the framework SpaceX has
+  created was quite complex and would otherwise have been fairly difficult to
+  write code for. I also wrote a simple tool for automating the creation of Jira
+  work tickets so that the two teams that ended up using it wouldn’t have to
+  have their members manually creating dozens of them as work and issues came in
+  through a separate system. I was also quite happy in that I got to perform
+  some circuit debugging on avionics test system hardware, both for my project
+  and for a separate test system. A final experience I had here was getting to
+  work directly with the head engineer from a company that supplied a piece of
+  test hardware I was interfacing with. It was quite incredible to see just how
+  much weight a SpaceX email address had when trying to solve problems I had
+  found with the hardware. Not only were they responsive, but in fact were
+  willing to fast-track firmware updates for us to get things working. Coming
+  from clubs and small labs where a support email might not even get a response
+  for months, it was quite a refreshing experience.
 </ExperienceLayout>

src/pages/experience/spacex/hardware-test-engineer-i-ii.astro

@@ -1,90 +1,98 @@
 ---
-import ExperienceLayout from '@layouts/ExperienceLayout.astro';
+import ExperienceLayout from "@layouts/ExperienceLayout.astro";
-import Timeline from '@components/Timeline/Timeline.astro';
+import Timeline from "@components/Timeline/Timeline.astro";
-import Carousel from "@components/CustomCarousel/CustomCarousel.astro";
+import Carousel from "@components/Media/CustomCarousel/CustomCarousel.astro";
 
-import starlink_headquarters_selfie
+import starlink_headquarters_selfie from "@assets/experience/spacex/hardware-test-engineer-i-ii/starlink-headquarters-selfie.jpg";
-    from "@assets/experience/spacex/hardware-test-engineer-i-ii/starlink-headquarters-selfie.jpg";
 
-import type {carouselGroup} from "@interfaces/image-carousel.ts";
+import type { carouselGroup } from "@interfaces/image-carousel.ts";
-import type {timelineEntry} from "@interfaces/timeline.ts";
+import type { timelineEntry } from "@interfaces/timeline.ts";
 
 const headerCarouselGroup: carouselGroup = {
   animation: "slide",
-    images: [
+  images: [starlink_headquarters_selfie],
-        starlink_headquarters_selfie
+};
-    ]
-}
 
 const timeline: timelineEntry[] = [
   {
     event: "Started",
     eventDetail: "Satellite Hardware Test Team",
     date: "September 2019",
-        description: "Owned test systems for four generations of Starlink flight computers and two generations of power boards"
+    description:
+      "Owned test systems for four generations of Starlink flight computers and two generations of power boards",
   },
   {
     event: "Transitioned To Remote",
     eventDetail: "Moved To Oregon",
     date: "August 2022",
-        description: "Personal decision, but I was allowed to work on tools for the build reliability engineering team"
+    description:
+      "Personal decision, but I was allowed to work on tools for the build reliability engineering team",
   },
   {
     event: "Changed Teams",
     eventDetail: "Components Test Infra Team",
     date: "March 2024 - VERIFY",
-        description: "Vertical move that allowed for broader application of my skills"
+    description:
+      "Vertical move that allowed for broader application of my skills",
   },
   {
     event: "Finished",
     eventDetail: "Thanks for all the fish!",
     date: "April 2025",
-        description: "Celebrated five and a half years of helping put thousands of satellites, and dozens of rockets, into orbit"
+    description:
-    }
+      "Celebrated five and a half years of helping put thousands of satellites, and dozens of rockets, into orbit",
+  },
 ];
 ---
+
 <ExperienceLayout title="SpaceX - Hardware Test Engineer I/II">
-    <Carousel carouselGroup={headerCarouselGroup}/>
+  <Carousel carouselGroup={headerCarouselGroup} />
-    <h2 class="font-bold md:text-2xl my-4">Summary</h2>
+  <h2 class="my-4 font-bold md:text-2xl">Summary</h2>
-    <h3 class="font-bold md:text-lg my-4">Timeline</h3>
+  <h3 class="my-4 font-bold md:text-lg">Timeline</h3>
-    <Timeline timeline={timeline}/>
+  <Timeline timeline={timeline} />
-    <h3 class="font-bold md:text-lg my-4">Key Takeaways</h3>
+  <h3 class="my-4 font-bold md:text-lg">Key Takeaways</h3>
-    <ul class="list-disc list-inside">
+  <ul class="list-inside list-disc">
-        <li>Created test systems which validated ~4500 Starlink satellite flight computers, and ~4000 power boards</li>
+    <li>
-        <li>Developed program-critical infrastructure that enabled efficient triage, management, and tracking of
+      Created test systems which validated ~4500 Starlink satellite flight
-            hardware failures
+      computers, and ~4000 power boards
     </li>
-        <li>Designed and deployed automated, unified, and containerized infrastructure to greatly increase application
+    <li>
-            reliability and development speed
+      Developed program-critical infrastructure that enabled efficient triage,
+      management, and tracking of hardware failures
+    </li>
+    <li>
+      Designed and deployed automated, unified, and containerized infrastructure
+      to greatly increase application reliability and development speed
     </li>
   </ul>
-    <h3 class="font-bold md:text-lg my-4">Skills Used</h3>
+  <h3 class="my-4 font-bold md:text-lg">Skills Used</h3>
-    <div class="relative grid gap-6 grid-flow-row sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4  border-caperren-green">
+  <div
+    class="border-caperren-green relative grid grid-flow-row gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+  >
     <div>
-            <div class="font-extrabold text-sm">Software</div>
+      <div class="text-sm font-extrabold">Software</div>
-            <hr class="text-caperren-green"/>
+      <hr class="text-caperren-green" />
-            <ul class="list-disc list-inside text-sm">
+      <ul class="list-inside list-disc text-sm">
         <li>Python</li>
         <li>Test Driven Development</li>
       </ul>
     </div>
     <div>
-            <div class="font-extrabold text-sm">Electrical</div>
+      <div class="text-sm font-extrabold">Electrical</div>
-            <hr class="text-caperren-green"/>
+      <hr class="text-caperren-green" />
     </div>
     <div>
-            <div class="font-extrabold text-sm">Mechanical</div>
+      <div class="text-sm font-extrabold">Mechanical</div>
-            <hr class="text-caperren-green"/>
+      <hr class="text-caperren-green" />
     </div>
     <div>
-            <div class="font-extrabold text-sm">Other</div>
+      <div class="text-sm font-extrabold">Other</div>
-            <hr class="text-caperren-green"/>
+      <hr class="text-caperren-green" />
     </div>
   </div>
 
-    <h2 class="font-bold md:text-2xl my-4">Details By Team</h2>
+  <h2 class="my-4 font-bold md:text-2xl">Details By Team</h2>
-    <h3 class="font-bold md:text-lg my-4">Starlink Hardware Test</h3>
+  <h3 class="my-4 font-bold md:text-lg">Starlink Hardware Test</h3>
-    <h3 class="font-bold md:text-lg my-4">Build Reliability Engineering</h3>
+  <h3 class="my-4 font-bold md:text-lg">Build Reliability Engineering</h3>
-    <h3 class="font-bold md:text-lg my-4">Components Test Infrastructure</h3>
+  <h3 class="my-4 font-bold md:text-lg">Components Test Infrastructure</h3>
-
 </ExperienceLayout>

src/pages/hobby/body-mods.astro

@@ -1,56 +1,62 @@
 ---
 import HobbyLayout from "@layouts/HobbyLayout.astro";
-import Carousel from "@components/CustomCarousel/CustomCarousel.astro";
+import Carousel from "@components/Media/CustomCarousel/CustomCarousel.astro";
 
-import type {carouselGroup} from "@interfaces/image-carousel.ts";
+import type { carouselGroup } from "@interfaces/image-carousel.ts";
 
 import injection_site from "@assets/hobby/body-mods/rfid-implant/injection-site.jpg";
 import injector_exploded from "@assets/hobby/body-mods/rfid-implant/injector-exploded.jpg";
 import quarter_euro_transponder from "@assets/hobby/body-mods/rfid-implant/quarter-euro-transponder.png";
 import xem_pouch from "@assets/hobby/body-mods/rfid-implant/xem-pouch.jpg";
 
-
-
 const rfidImplantCarouselGroup: carouselGroup = {
   animation: "slide",
   images: [
     xem_pouch,
     injector_exploded,
     quarter_euro_transponder,
-        injection_site
+    injection_site,
-    ]
+  ],
-}
+};
 ---
 
 <HobbyLayout title="Body Mods">
-    <h2 class="font-bold md:text-2xl my-4 underline">RFID Implant</h2>
+  <h2 class="my-4 font-bold underline md:text-2xl">RFID Implant</h2>
-    <Carousel carouselGroup={rfidImplantCarouselGroup}/>
+  <Carousel carouselGroup={rfidImplantCarouselGroup} />
   <p class="mt-4">
-        Back when I was in college, a few of my friends and I got this crazy idea to all get RFID implants together.
+    Back when I was in college, a few of my friends and I got this crazy idea to
-        They are essentially the same things you'd use to microchip a pet, but with a slightly different firmware
+    all get RFID implants together. They are essentially the same things you'd
-        configuration, allowing scans with any 125KHz-compatible reader. The implants came from <a
+    use to microchip a pet, but with a slightly different firmware
-            class="text-blue-500 hover:text-blue-300" href="https://dangerousthings.com/product/xem/">dangerousthings.com</a>,
+    configuration, allowing scans with any 125KHz-compatible reader. The
-        and we were lucky enough to have a vet-med student as a friend who made the installation a quick and painless
+    implants came from <a
-        process!
+      class="text-blue-500 hover:text-blue-300"
-        I'm glad that I'm not afraid of needles, as the 16 gauge injector the kit came with was nothing to scoff at.
+      href="https://dangerousthings.com/product/xem/">dangerousthings.com</a
-        Since healing, you would never know the implant was there, with the site leaving no scar or visible indication
+    >, and we were lucky enough to have a vet-med student as a friend who made
-        of its presence.
+    the installation a quick and painless process! I'm glad that I'm not afraid
+    of needles, as the 16 gauge injector the kit came with was nothing to scoff
+    at. Since healing, you would never know the implant was there, with the site
+    leaving no scar or visible indication of its presence.
   </p>
   <p class="mt-4">
-        With that out of the way, our group began work on hardware which would support the new implants.
+    With that out of the way, our group began work on hardware which would
-        The goal was to have a generic usb-keyboard emulator for typing passwords with a valid scan, a car
+    support the new implants. The goal was to have a generic usb-keyboard
-        off-acc-on ignition replacement, and a fairly specialized modification to the OSU Robotics Club's doorway
+    emulator for typing passwords with a valid scan, a car off-acc-on ignition
-        scanning system so they would support these on top of the official OSU ID cards.
+    replacement, and a fairly specialized modification to the OSU Robotics
-        As tends to happen, life got busy, and only the usb-keyboard emulator actually came to fruition. The electronics
+    Club's doorway scanning system so they would support these on top of the
-        and
+    official OSU ID cards. As tends to happen, life got busy, and only the
-        primary firmware were handled by <a
+    usb-keyboard emulator actually came to fruition. The electronics and primary
+    firmware were handled by <a
       class="text-blue-500 hover:text-blue-300"
-            href="https://nickmccomb.net">Nick McComb</a>,
+      href="https://nickmccomb.net">Nick McComb</a
-        enclosure by
+    >, enclosure by
-        <a class="text-blue-500 hover:text-blue-300" href="https://dylanthrush.com">Dylan Thrush</a>, and I supported
+    <a class="text-blue-500 hover:text-blue-300" href="https://dylanthrush.com"
-        some minor firmware development and debugging. If you want to see an example of the keyboard emulator unlocking
+      >Dylan Thrush</a
-        a PC, check out the video on <a
+    >, and I supported some minor firmware development and debugging. If you
+    want to see an example of the keyboard emulator unlocking a PC, check out
+    the video on <a
       class="text-blue-500 hover:text-blue-300"
-            href="https://nickmccomb.net/college/printed-circuit-boards/computer-access-module">Nick's website</a>!
+      href="https://nickmccomb.net/college/printed-circuit-boards/computer-access-module"
+      >Nick's website</a
+    >!
   </p>
 </HobbyLayout>

src/pages/hobby/homelab/home-automation.astro

@@ -2,5 +2,4 @@
 import HobbyLayout from "@layouts/HobbyLayout.astro";
 ---
 
-<HobbyLayout title="Homelab - Home Automation">
+<HobbyLayout title="Homelab - Home Automation" />
-</HobbyLayout>

src/pages/hobby/homelab/home-server-rack.astro

@@ -1,29 +1,22 @@
 ---
 import HobbyLayout from "@layouts/HobbyLayout.astro";
-import Carousel from "@components/CustomCarousel/CustomCarousel.astro";
+import Carousel from "@components/Media/CustomCarousel/CustomCarousel.astro";
 
-import type {carouselGroup} from "@interfaces/image-carousel.ts";
+import type { carouselGroup } from "@interfaces/image-carousel.ts";
 
 import rack_from_above from "@assets/hobby/homelab/home-server-rack/rack-from-above.jpg";
 import rack_from_below from "@assets/hobby/homelab/home-server-rack/rack-from-below.jpg";
 import rack_middle from "@assets/hobby/homelab/home-server-rack/rack-middle.jpg";
 import rack_top from "@assets/hobby/homelab/home-server-rack/rack-top.jpg";
 
-
-
 const headerCarouselGroup: carouselGroup = {
   animation: "slide",
-    images: [
+  images: [rack_from_below, rack_from_above, rack_top, rack_middle],
-        rack_from_below,
+};
-        rack_from_above,
-        rack_top,
-        rack_middle
-    ]
-}
 ---
 
 <HobbyLayout title="Homelab - Home Server Rack">
-    <Carousel carouselGroup={headerCarouselGroup}/>
+  <Carousel carouselGroup={headerCarouselGroup} />
 
   <!--<h2 class="font-bold md:text-2xl my-4">Prior Homelab</h2>-->
 </HobbyLayout>

src/pages/hobby/homelab/kubernetes-cluster.astro

@@ -1,23 +1,19 @@
 ---
 import HobbyLayout from "@layouts/HobbyLayout.astro";
-import Carousel from "@components/CustomCarousel/CustomCarousel.astro";
+import Carousel from "@components/Media/CustomCarousel/CustomCarousel.astro";
 
-import type {carouselGroup} from "@interfaces/image-carousel.ts";
+import type { carouselGroup } from "@interfaces/image-carousel.ts";
 
 import cluster_and_switch from "@assets/hobby/homelab/kubernetes-cluster/cluster-and-switch.jpg";
 
-
-
 const headerCarouselGroup: carouselGroup = {
   animation: "slide",
-    images: [
+  images: [cluster_and_switch],
-        cluster_and_switch
+};
-    ]
-}
 ---
 
 <HobbyLayout title="Homelab - Kubernetes Cluster">
-    <Carousel carouselGroup={headerCarouselGroup}/>
+  <Carousel carouselGroup={headerCarouselGroup} />
 
   <!--<h2 class="font-bold md:text-2xl my-4">Prior Homelab</h2>-->
 </HobbyLayout>

src/pages/hobby/homelab/offsite-backup-rack.astro

@@ -1,8 +1,8 @@
 ---
 import HobbyLayout from "@layouts/HobbyLayout.astro";
-import Carousel from "@components/CustomCarousel/CustomCarousel.astro";
+import Carousel from "@components/Media/CustomCarousel/CustomCarousel.astro";
 
-import type {carouselGroup} from "@interfaces/image-carousel.ts";
+import type { carouselGroup } from "@interfaces/image-carousel.ts";
 
 import enclosure_front from "@assets/hobby/homelab/offsite-backup-rack/enclosure-front.jpg";
 import enclosure_front_pc_panel_open from "@assets/hobby/homelab/offsite-backup-rack/enclosure-front-pc-panel-open.jpg";
@@ -12,14 +12,11 @@ import enclosure_right from "@assets/hobby/homelab/offsite-backup-rack/enclosure
 import enclosure_with_ups from "@assets/hobby/homelab/offsite-backup-rack/enclosure-with-ups.jpg";
 import power_adapter_tray_and_dc_dc from "@assets/hobby/homelab/offsite-backup-rack/power-adapter-tray-and-dc-dc.jpg";
 import power_supply_closeup from "@assets/hobby/homelab/offsite-backup-rack/power-supply-closeup.jpg";
-import power_supply_mounting_location
+import power_supply_mounting_location from "@assets/hobby/homelab/offsite-backup-rack/power-supply-mounting-location.jpg";
-    from "@assets/hobby/homelab/offsite-backup-rack/power-supply-mounting-location.jpg";
 import sata_tight_fit from "@assets/hobby/homelab/offsite-backup-rack/sata-tight-fit.jpg";
 import sff_pc_with_sata_and_usb_ssds from "@assets/hobby/homelab/offsite-backup-rack/sff-pc-with-sata-and-usb-ssds.jpg";
 import up_and_running from "@assets/hobby/homelab/offsite-backup-rack/up-and-running.png";
 
-
-
 const headerCarouselGroup: carouselGroup = {
   animation: "slide",
   images: [
@@ -34,13 +31,13 @@ const headerCarouselGroup: carouselGroup = {
     enclosure_with_ups,
     power_supply_mounting_location,
     power_supply_closeup,
-        up_and_running
+    up_and_running,
-    ]
+  ],
-}
+};
 ---
 
 <HobbyLayout title="Homelab - Offsite Backup Rack">
-    <Carousel carouselGroup={headerCarouselGroup}/>
+  <Carousel carouselGroup={headerCarouselGroup} />
 
   <!--<h2 class="font-bold md:text-2xl my-4">Prior Homelab</h2>-->
 </HobbyLayout>

src/pages/hobby/motorcycling/custom-accessories/chubby-buttons-2-mount.astro

@@ -1,24 +1,18 @@
 ---
 import HobbyLayout from "@layouts/HobbyLayout.astro";
-import Carousel from "@components/CustomCarousel/CustomCarousel.astro";
+import LinkButton from "@components/LinkButton.astro";
+import Carousel from "@components/Media/CustomCarousel/CustomCarousel.astro";
 
-import type {carouselGroup} from "@interfaces/image-carousel.ts";
+import type { carouselGroup } from "@interfaces/image-carousel.ts";
 
-import bottom_fasteners_installed
+import bottom_fasteners_installed from "@assets/hobby/motorcycling/custom-accessories/chubby-buttons-2-mount/bottom-fasteners-installed.jpg";
-    from "@assets/hobby/motorcycling/custom-accessories/chubby-buttons-2-mount/bottom-fasteners-installed.jpg";
 import closed_seam from "@assets/hobby/motorcycling/custom-accessories/chubby-buttons-2-mount/closed-seam.jpg";
-import closed_top_buttons_installed
+import closed_top_buttons_installed from "@assets/hobby/motorcycling/custom-accessories/chubby-buttons-2-mount/closed-top-buttons-installed.jpg";
-    from "@assets/hobby/motorcycling/custom-accessories/chubby-buttons-2-mount/closed-top-buttons-installed.jpg";
+import inside_top_and_bottom from "@assets/hobby/motorcycling/custom-accessories/chubby-buttons-2-mount/inside-top-and-bottom.jpg";
-import inside_top_and_bottom
+import inside_top_and_bottom_buttons_installed from "@assets/hobby/motorcycling/custom-accessories/chubby-buttons-2-mount/inside-top-and-bottom-buttons-installed.jpg";
-    from "@assets/hobby/motorcycling/custom-accessories/chubby-buttons-2-mount/inside-top-and-bottom.jpg";
+import inside_top_and_bottom_with_buttons from "@assets/hobby/motorcycling/custom-accessories/chubby-buttons-2-mount/inside-top-and-bottom-with-buttons.jpg";
-import inside_top_and_bottom_buttons_installed
+import installed_on_bike_handlebars_reference from "@assets/hobby/motorcycling/custom-accessories/chubby-buttons-2-mount/installed-on-bike-handlebars-reference.jpg";
-    from "@assets/hobby/motorcycling/custom-accessories/chubby-buttons-2-mount/inside-top-and-bottom-buttons-installed.jpg";
+import installed_on_bike_riders_position from "@assets/hobby/motorcycling/custom-accessories/chubby-buttons-2-mount/installed-on-bike-riders-position.jpg";
-import inside_top_and_bottom_with_buttons
-    from "@assets/hobby/motorcycling/custom-accessories/chubby-buttons-2-mount/inside-top-and-bottom-with-buttons.jpg";
-import installed_on_bike_handlebars_reference
-    from "@assets/hobby/motorcycling/custom-accessories/chubby-buttons-2-mount/installed-on-bike-handlebars-reference.jpg";
-import installed_on_bike_riders_position
-    from "@assets/hobby/motorcycling/custom-accessories/chubby-buttons-2-mount/installed-on-bike-riders-position.jpg";
 import top_and_bottom from "@assets/hobby/motorcycling/custom-accessories/chubby-buttons-2-mount/top-and-bottom.jpg";
 
 const headerCarouselGroup: carouselGroup = {
@@ -32,42 +26,49 @@ const headerCarouselGroup: carouselGroup = {
     inside_top_and_bottom_buttons_installed,
     inside_top_and_bottom_with_buttons,
     inside_top_and_bottom,
-        top_and_bottom
+    top_and_bottom,
-    ]
+  ],
-}
+};
 ---
 
 <HobbyLayout title="Motorcycling - Chubby Buttons 2 Mount">
-    <Carousel carouselGroup={headerCarouselGroup}/>
+  <Carousel carouselGroup={headerCarouselGroup} />
-    <div class="flex items-center justify-center mt-4">
+  <div class="mt-4 flex items-center justify-center">
-        <a class="bg-black rounded-2xl p-2  border-2 text-caperren-green border-caperren-green hover:border-caperren-green-light hover:text-caperren-green-light"
+    <LinkButton
-           href="https://cad.onshape.com/documents/816b0b1bef7883d4dc25c66c/v/e11fe68753e080b72015cfb8/e/3802abbd9d7b7c4d2c7ebad3">
+      href="https://cad.onshape.com/documents/816b0b1bef7883d4dc25c66c/v/e11fe68753e080b72015cfb8/e/3802abbd9d7b7c4d2c7ebad3"
-            Onshape
+      title="Onshape CAD Design Files"
-            Design Files</a>
+    />
   </div>
   <p class="mt-4">
-        Having ridden motorcycles since I was sixteen, and being an avid music enjoyer, I'd been looking for a way to
+    Having ridden motorcycles since I was sixteen, and being an avid music
-        improve my music listening experience while on-the-go. One large pain-point I'd always had was with controlling
+    enjoyer, I'd been looking for a way to improve my music listening experience
-        track selection and volume levels while my gloves were on, as smartphones don't respond very well to this, if at
+    while on-the-go. One large pain-point I'd always had was with controlling
-        all. In 2023 I found out about chubby buttons, a low-power and highly water-resistant media controller
+    track selection and volume levels while my gloves were on, as smartphones
-        specifically designed for use with gloves! The only problem was that it was designed to be worn on your arm
+    don't respond very well to this, if at all. In 2023 I found out about chubby
-        using a strap, which isn't very practical on a motorcycle.
+    buttons, a low-power and highly water-resistant media controller
+    specifically designed for use with gloves! The only problem was that it was
+    designed to be worn on your arm using a strap, which isn't very practical on
+    a motorcycle.
   </p>
   <p class="mt-4">
-        Having recently gotten a 3D Printer, and having some baseline modelling skills, I purchased one, took some
+    When starting this project, I'd recently gotten a 3D Printer, so having some
-        measurements, and began designing a proper mount.
+    baseline modelling skills I took some measurements, and began designing a
-        I already owned and used many 1" RAM compatible mounts and gear on the bike, so I decided to make this one
+    proper mount. I already owned and used many 1" RAM compatible mounts and
-        natively
+    gear on my bikes, so I decided to make this one natively support the ball
-        support the ball size to use an existing clamp I had stored away. This design was the first where I decided to
+    size to use an existing clamp I had stored away. This design was the first
-        use heat-set inserts in the plastic, along with some medium-strength loctite on the fasteners, due to the
+    where I decided to use heat-set inserts in the plastic, along with some
-        high-vibration environment the mount would see. The print was also done using a UV resistant, high-temp rated,
+    medium-strength Loctite on the fasteners, due to the high-vibration
-        and non-water-absorbing ASA filament, as the direct expose to the elements would not allow something like cheap
+    environment the mount would see. The print was also done using a UV
-        PLA to last very long.
+    resistant, high-temp rated, and non-water-absorbing ASA filament, as the
+    direct expose to the elements would not allow something like cheap PLA to
+    last very long.
   </p>
   <p class="mt-4">
-        While my first iteration was sized appropriately and went together with no issues, the ball mount neck ended up
+    While my first iteration was sized appropriately and went together with no
-        snapping due to a low infill percentage. After changing that area to 100% infill, including a handful of the
+    issues, the ball mount neck ended up snapping due to a low infill
-        rear mount layers that it attached to, a second iteration has worked perfectly for a few years now! If you're
+    percentage. After changing that area to 100% infill, including a handful of
-        interested in printing this yourself, feel free to download the model using the button under the photos!
+    the rear mount layers that it attached to, a second iteration has worked
+    perfectly for a few years now! If you're interested in printing this
+    yourself, feel free to download the model using the button under the photos!
   </p>
 </HobbyLayout>

src/pages/hobby/motorcycling/lineup.astro

@@ -1,8 +1,8 @@
 ---
 import HobbyLayout from "@layouts/HobbyLayout.astro";
-import Carousel from "@components/CustomCarousel/CustomCarousel.astro";
+import Carousel from "@components/Media/CustomCarousel/CustomCarousel.astro";
 
-import type {carouselGroup} from "@interfaces/image-carousel.ts";
+import type { carouselGroup } from "@interfaces/image-carousel.ts";
 
 import kz750 from "@assets/hobby/motorcycling/lineup/1979-kawasaki-kz750-senior-photo.jpg";
 import ninja600 from "@assets/hobby/motorcycling/lineup/1991-kawasaki-ninja-600r.jpg";
@@ -11,33 +11,49 @@ import drz400 from "@assets/hobby/motorcycling/lineup/2005-suzuki-drz-400.jpg";
 import fjr1300 from "@assets/hobby/motorcycling/lineup/2015-fjr-1300-mountaintop.jpg";
 import sg400 from "@assets/hobby/motorcycling/lineup/2021-csc-sg400.jpg";
 
-
+const fjrCarouselGroup: carouselGroup = {
-const fjrCarouselGroup: carouselGroup = {animation: "slide", images: [fjr1300]}
+  animation: "slide",
-const cscCarouselGroup: carouselGroup = {animation: "slide", images: [sg400]}
+  images: [fjr1300],
-const drzCarouselGroup: carouselGroup = {animation: "slide", images: [drz400]}
+};
-const concoursCarouselGroup: carouselGroup = {animation: "slide", images: [concours]}
+const cscCarouselGroup: carouselGroup = { animation: "slide", images: [sg400] };
-const ninjaCarouselGroup: carouselGroup = {animation: "slide", images: [ninja600]}
+const drzCarouselGroup: carouselGroup = {
-const kz750CarouselGroup: carouselGroup = {animation: "slide", images: [kz750]}
+  animation: "slide",
+  images: [drz400],
+};
+const concoursCarouselGroup: carouselGroup = {
+  animation: "slide",
+  images: [concours],
+};
+const ninjaCarouselGroup: carouselGroup = {
+  animation: "slide",
+  images: [ninja600],
+};
+const kz750CarouselGroup: carouselGroup = {
+  animation: "slide",
+  images: [kz750],
+};
 ---
 
 <HobbyLayout title="Motorcycling - Lineup">
-    <h2 class="font-bold md:text-2xl my-4 underline">Current Lineup</h2>
+  <h2 class="my-4 font-bold underline md:text-2xl">Current Lineup</h2>
-    <h3 class="font-bold md:text-lg my-4 underline">2015 Yamaha FJR 1300</h3>
+  <h3 class="my-4 font-bold underline md:text-lg">2015 Yamaha FJR 1300</h3>
-    <Carousel carouselGroup={fjrCarouselGroup}/>
+  <Carousel carouselGroup={fjrCarouselGroup} />
 
-    <h3 class="font-bold md:text-lg my-4 underline">2021 CSC SG400</h3>
+  <h3 class="my-4 font-bold underline md:text-lg">2021 CSC SG400</h3>
-    <Carousel carouselGroup={cscCarouselGroup}/>
+  <Carousel carouselGroup={cscCarouselGroup} />
 
-    <h2 class="font-bold md:text-2xl my-4 underline">Prior Lineup</h2>
+  <h2 class="my-4 font-bold underline md:text-2xl">Prior Lineup</h2>
-    <h3 class="font-bold md:text-lg my-4 underline">2005 Suzuki DRZ 400</h3>
+  <h3 class="my-4 font-bold underline md:text-lg">2005 Suzuki DRZ 400</h3>
-    <Carousel carouselGroup={drzCarouselGroup}/>
+  <Carousel carouselGroup={drzCarouselGroup} />
 
-    <h3 class="font-bold md:text-lg my-4 underline">1991 Kawasaki Concours ZG1000</h3>
+  <h3 class="my-4 font-bold underline md:text-lg">
-    <Carousel carouselGroup={concoursCarouselGroup}/>
+    1991 Kawasaki Concours ZG1000
+  </h3>
+  <Carousel carouselGroup={concoursCarouselGroup} />
 
-    <h3 class="font-bold md:text-lg my-4 underline">1979 Kawasaki KZ750</h3>
+  <h3 class="my-4 font-bold underline md:text-lg">1979 Kawasaki KZ750</h3>
-    <Carousel carouselGroup={kz750CarouselGroup}/>
+  <Carousel carouselGroup={kz750CarouselGroup} />
 
-    <h3 class="font-bold md:text-lg my-4 underline">1991 Kawasaki Ninja 600R</h3>
+  <h3 class="my-4 font-bold underline md:text-lg">1991 Kawasaki Ninja 600R</h3>
-    <Carousel carouselGroup={ninjaCarouselGroup}/>
+  <Carousel carouselGroup={ninjaCarouselGroup} />
 </HobbyLayout>

src/pages/hobby/motorcycling/trips/2024-10-norway.astro

@@ -2,5 +2,4 @@
 import HobbyLayout from "@layouts/HobbyLayout.astro";
 ---
 
-<HobbyLayout>
+<HobbyLayout />
-</HobbyLayout>

src/pages/hobby/motorcycling/trips/2025-08-alaska.astro

@@ -2,5 +2,4 @@
 import HobbyLayout from "@layouts/HobbyLayout.astro";
 ---
 
-<HobbyLayout>
+<HobbyLayout />
-</HobbyLayout>

src/pages/hobby/nixos.astro

@@ -2,5 +2,4 @@
 import HobbyLayout from "@layouts/HobbyLayout.astro";
 ---
 
-<HobbyLayout title="NixOS">
+<HobbyLayout title="NixOS" />
-</HobbyLayout>

src/pages/index.astro

@@ -1,79 +1,96 @@
 ---
-import BaseLayout from '../layouts/BaseLayout.astro';
+import BaseLayout from "../layouts/BaseLayout.astro";
-import Carousel from "@components/CustomCarousel/CustomCarousel.astro";
+import Carousel from "@components/Media/CustomCarousel/CustomCarousel.astro";
 
-import type {carouselGroup} from "@interfaces/image-carousel.ts";
+import type { carouselGroup } from "@interfaces/image-carousel.ts";
 
-import alaska_bike_mountain_ocean from "@assets/about/alaska-bike-mountain-ocean.jpg"
+import alaska_bike_mountain_ocean from "@assets/about/alaska-bike-mountain-ocean.jpg";
-import circ_champions from "@assets/about/circ-champions.jpg"
+import circ_champions from "@assets/about/circ-champions.jpg";
 import headshot from "@assets/about/headshot.jpg";
 
-
 const headerCarouselGroup: carouselGroup = {
   animation: "slide",
-    images: [
+  images: [headshot, alaska_bike_mountain_ocean, circ_champions],
-        headshot,
+};
-        alaska_bike_mountain_ocean,
-        circ_champions
-    ]
-}
 ---
+
 <BaseLayout title="About" showTitle={false}>
-    <Carousel carouselGroup={headerCarouselGroup}/>
+  <Carousel carouselGroup={headerCarouselGroup} />
-    <h2 class="font-bold md:text-2xl my-4 underline">Who Am I</h2>
+  <h2 class="my-4 font-bold underline md:text-2xl">Who Am I</h2>
   <p>
     My name is Corwin Perren, and I'm a multi-disciplinary engineer with a <a
-            class="text-blue-500 hover:text-blue-300" href="/education">degree in computer science</a> from Oregon State
+      class="text-blue-500 hover:text-blue-300"
-        University.
+      href="/education">degree in computer science</a
-        For as long as I can remember, I've been fascinated by how things work, never being shy about taking them apart
+    > from Oregon State University. For as long as I can remember, I've been fascinated
-        to learn the gritty details. At a young age, I began tinkering, adding lights and fans and doorbells to the
+    by how things work, never being shy about taking them apart to learn the gritty
-        pretend cardboard box houses my brother and I would play in.
+    details. At a young age, I began tinkering, adding lights and fans and doorbells
-        Later, I learned to solder, work on vehicles and engines, install and run Linux, manage enterprise computing
+    to the pretend cardboard box houses my brother and I would play in. Later, I learned
-        infrastructure, build and repair computers, write scripts, and by the end of high school set out with a clear
+    to solder, work on vehicles and engines, install and run Linux, manage enterprise
-        goal for my college years.
+    computing infrastructure, build and repair computers, write scripts, and by the
-        I wanted to learn and teach myself enough to be able to think up almost any project, encompassing all facets of
+    end of high school set out with a clear goal for my college years. I wanted to
-        engineering, and be capable of driving it to completion with my own skill set.
+    learn and teach myself enough to be able to think up almost any project, encompassing
+    all facets of engineering, and be capable of driving it to completion with my
+    own skill set.
   </p>
   <p class="mt-4">
-        I think young me would be very pleased by how well I managed to achieve that goal!
+    I think young me would be very pleased by how well I managed to achieve that
-        Through college, I learned electronics and PCB design, embedded and pc programming, basic mechanical design and
+    goal! Through college, I learned electronics and PCB design, embedded and pc
-        fabrication, on top of learning how to work well with others in a team.
+    programming, basic mechanical design and fabrication, on top of learning how
-        I quickly realized that robotics was an ideal focus due to its inherent multi-disciplinary nature, and joined
+    to work well with others in a team. I quickly realized that robotics was an
-        the OSU Robotics Club, which introduced me to people who are still my best friends today.
+    ideal focus due to its inherent multi-disciplinary nature, and joined the
-        Through student engineering jobs, I had the unique opportunity to work on some incredible projects such as the
+    OSU Robotics Club, which introduced me to people who are still my best
-        <a class="text-blue-500 hover:text-blue-300"
+    friends today. Through student engineering jobs, I had the unique
-           href="/experience/osu-ceoas-ocean-mixing-group/robotic-oceanographic-surface-sampler">robotic oceanographic
+    opportunity to work on some incredible projects such as the
-            surface sampler</a> and an <a class="text-blue-500 hover:text-blue-300"
+    <a
-                                          href="/experience/osu-sinnhuber-aquatic-research-laboratory/zebrafish-embryo-pick-and-plate">embryo
+      class="text-blue-500 hover:text-blue-300"
-        pick-and-plate machine</a>.
+      href="/experience/osu-ceoas-ocean-mixing-group/robotic-oceanographic-surface-sampler"
-        One my my proudest moments was when our club's mars rover took first place at the Candian International Rover
+      >robotic oceanographic surface sampler</a
-        Challenge in 2018, for which I was the <a class="text-blue-500 hover:text-blue-300"
+    > and an <a
-                                                  href="/experience/osu-robotics-club/mars-rover-software-team-lead">software
+      class="text-blue-500 hover:text-blue-300"
-        lead</a>!
+      href="/experience/osu-sinnhuber-aquatic-research-laboratory/zebrafish-embryo-pick-and-plate"
+      >embryo pick-and-plate machine</a
+    >. One my my proudest moments was when our club's mars rover took first
+    place at the Candian International Rover Challenge in 2018, for which I was
+    the <a
+      class="text-blue-500 hover:text-blue-300"
+      href="/experience/osu-robotics-club/mars-rover-software-team-lead"
+      >software lead</a
+    >!
   </p>
   <p class="mt-4">
-        After a short three-month <a class="text-blue-500 hover:text-blue-300"
+    After a short three-month <a
-                                     href="/experience/spacex/avionics-test-engineering-internship">internship</a> at
+      class="text-blue-500 hover:text-blue-300"
-        SpaceX in Hawthorne at the end of college, I applied for a <a class="text-blue-500 hover:text-blue-300"
+      href="/experience/spacex/avionics-test-engineering-internship"
-                                                                      href="/experience/spacex/hardware-test-engineer-i-ii">test
+      >internship</a
-        engineering</a> position with the company's Starlink team and was hired in mid-2019.
+    > at SpaceX in Hawthorne at the end of college, I applied for a <a
-        For six years, I developed test system hardware, software, harnesses, mechanical fixtures, devops
+      class="text-blue-500 hover:text-blue-300"
-        infrastructure, websites, and tooling to ensure that Starlink, Falcon, Dragon, and Starship component tests were
+      href="/experience/spacex/hardware-test-engineer-i-ii">test engineering</a
-        producing well-validated and reliable hardware.
+    > position with the company's Starlink team and was hired in mid-2019. For six
-        Through it all, I got to apply and hone every skill I had developed, while learning countless more.
+    years, I developed test system hardware, software, harnesses, mechanical fixtures,
-        Now though, it's on to the next adventure, whatever that may be!
+    devops infrastructure, websites, and tooling to ensure that Starlink, Falcon,
+    Dragon, and Starship component tests were producing well-validated and reliable
+    hardware. Through it all, I got to apply and hone every skill I had developed,
+    while learning countless more. Now though, it's on to the next adventure, whatever
+    that may be!
   </p>
   <p class="mt-4">
-        To learn more about my experiences, hobbies, interests, and skills, feel free to explore the site!
+    To learn more about my experiences, hobbies, interests, and skills, feel
-        While the short summary above provides some insight into who I am, it leaves out plenty!
+    free to explore the site! While the short summary above provides some
-        For example, I've been an avid <a class="text-blue-500 hover:text-blue-300" href="/hobby/motorcycling/lineup">motorcycle
+    insight into who I am, it leaves out plenty! For example, I've been an avid <a
-        rider</a> since I was sixteen, and have an <a class="text-blue-500 hover:text-blue-300" href="/hobby/body-mods">rfid
+      class="text-blue-500 hover:text-blue-300"
-        implant</a> in my hand!
+      href="/hobby/motorcycling/lineup">motorcycle rider</a
+    > since I was sixteen, and have an <a
+      class="text-blue-500 hover:text-blue-300"
+      href="/hobby/body-mods">rfid implant</a
+    > in my hand!
   </p>
   <p class="mt-4">
-        If you're interested in contacting me, feel free to message on <a class="text-blue-500 hover:text-blue-300"
+    If you're interested in contacting me, feel free to message on <a
-                                                                          href="https://github.com/caperren">LinkedIn</a>,
+      class="text-blue-500 hover:text-blue-300"
-        or via the primary contact methods
+      href="https://github.com/caperren">LinkedIn</a
-        on my <a class="text-blue-500 hover:text-blue-300" href="/resume/2025-11-10-infrastructure-engineer">resume</a>.
+    >, or via the primary contact methods on my <a
+      class="text-blue-500 hover:text-blue-300"
+      href="/resume/2025-11-10-infrastructure-engineer">resume</a
+    >.
   </p>
 </BaseLayout>

src/pages/resume/2019-07-01-hardware-test-engineer.astro

@@ -1,6 +1,6 @@
 ---
 import ResumeLayout from "@layouts/ResumeLayout.astro";
-import resume from "@assets/resume/corwin_perren_2019-07-01_hardware_test_engineer.pdf"
+import resume from "@assets/resume/corwin_perren_2019-07-01_hardware_test_engineer.pdf";
 ---
 
-<ResumeLayout title="2019-07-01 - Hardware Test Engineer" resume={resume}/>
+<ResumeLayout title="2019-07-01 - Hardware Test Engineer" resume={resume} />

src/pages/resume/2025-11-10-complete-cv.astro

@@ -2,4 +2,4 @@
 import ResumeLayout from "@layouts/ResumeLayout.astro";
 ---
 
-<ResumeLayout/>
+<ResumeLayout />

src/pages/resume/2025-11-10-infrastructure-engineer.astro

@@ -1,6 +1,6 @@
 ---
 import ResumeLayout from "@layouts/ResumeLayout.astro";
-import resume from "@assets/resume/corwin_perren_2025-10-27-infrastructure_engineer.pdf"
+import resume from "@assets/resume/corwin_perren_2025-10-27-infrastructure_engineer.pdf";
 ---
 
-<ResumeLayout title="2025-10-27 - Infrastructure Engineer" resume={resume}/>
+<ResumeLayout title="2025-10-27 - Infrastructure Engineer" resume={resume} />

src/pages/robots.txt.ts

@@ -1,4 +1,4 @@
-import type {APIRoute} from 'astro';
+import type { APIRoute } from "astro";
 
 const getRobotsTxt = (sitemapURL: URL) => `\
 User-agent: *
@@ -7,7 +7,7 @@ Allow: /
 Sitemap: ${sitemapURL.href}
 `;
 
-export const GET: APIRoute = ({site}) => {
+export const GET: APIRoute = ({ site }) => {
-    const sitemapURL = new URL('sitemap-index.xml', site);
+  const sitemapURL = new URL("sitemap-index.xml", site);
   return new Response(getRobotsTxt(sitemapURL));
 };

test-e2e/static-pages.spec.ts

@@ -1,16 +1,15 @@
-import {test, expect} from '@playwright/test';
+import { test, expect } from "@playwright/test";
-
-import {getPaths} from "@data/site-layout.ts";
 
+import { getPaths } from "@data/site-layout.ts";
 
 for (const pagePath of getPaths()) {
-    test(`${pagePath}: Navigable`, async ({page}) => {
+  test(`${pagePath}: Navigable`, async ({ page }) => {
     const response = await page.request.get(pagePath);
     await expect(response).toBeOK();
   });
 
-    test(`${pagePath}: Has Title`, async ({page}) => {
+  test(`${pagePath}: Has Title`, async ({ page }) => {
     await page.goto(pagePath);
-        expect(await page.title()).not.toBe("Corwin Perren")
+    expect(await page.title()).not.toBe("Corwin Perren");
   });
 }

test/endpoints.spec.ts

@@ -1,39 +1,45 @@
-import {expect, test} from "vitest";
+import { expect, test } from "vitest";
 
-import {siteLayout, getPaths} from "@data/site-layout.ts";
+import { siteLayout, getPaths } from "@data/site-layout.ts";
 
 export const setDifference = <T>(a: Set<T>, b: Set<T>) =>
-    new Set([...a].filter(x => !b.has(x)));
+  new Set([...a].filter((x) => !b.has(x)));
 
 // Paths that should be known to Astro statically
 const astroStaticPaths = new Set(
-    Object.keys(import.meta.glob("/src/pages/**/*.astro"))
+  Object.keys(import.meta.glob("/src/pages/**/*.astro")).map(
-        .map((path) =>
+    (path) =>
       path
         .replace("/src/pages", "")
         .replace(/index\.astro$/, "")
         .replace(/\.astro$|\.md$/, "")
-                .replace(/\/$/, "")
+        .replace(/\/$/, "") || "/",
-            || "/"
+  ),
-        ));
+);
 
 // Paths that exist in the site layout
-const siteLayoutPaths = new Set([...getPaths(siteLayout), ...getPaths(siteLayout, [], true)]);
+const siteLayoutPaths = new Set([
+  ...getPaths(siteLayout),
+  ...getPaths(siteLayout, [], true),
+]);
 
-test('Astro Paths Not Empty', () => {
+test("Astro Paths Not Empty", () => {
   expect(astroStaticPaths).not.toHaveLength(0);
 });
 
-test('Site Layout Paths Not Empty', () => {
+test("Site Layout Paths Not Empty", () => {
   expect(siteLayoutPaths).not.toHaveLength(0);
 });
 
-test('Pages Missing from Site Layout', () => {
+test("Pages Missing from Site Layout", () => {
   const astroNotLayoutPaths = setDifference(astroStaticPaths, siteLayoutPaths);
   expect(astroNotLayoutPaths).toHaveLength(0);
 });
 
-test('Pages Missing from Astro Paths', () => {
+test("Pages Missing from Astro Paths", () => {
-    const siteLayoutNotAstroPaths = setDifference(siteLayoutPaths, astroStaticPaths);
+  const siteLayoutNotAstroPaths = setDifference(
+    siteLayoutPaths,
+    astroStaticPaths,
+  );
   expect(siteLayoutNotAstroPaths).toHaveLength(0);
 });

tsconfig.json

@@ -1,32 +1,15 @@
 {
   "compilerOptions": {
     "paths": {
-      "@assets/*": [
+      "@assets/*": ["./src/assets/*"],
-        "./src/assets/*"
+      "@components/*": ["./src/components/*"],
-      ],
+      "@data/*": ["./src/data/*"],
-      "@components/*": [
+      "@interfaces/*": ["./src/interfaces/*"],
-        "./src/components/*"
+      "@layouts/*": ["./src/layouts/*"],
-      ],
+      "@styles/*": ["./src/styles/*"]
-      "@data/*": [
-        "./src/data/*"
-      ],
-      "@interfaces/*": [
-        "./src/interfaces/*"
-      ],
-      "@layouts/*": [
-        "./src/layouts/*"
-      ],
-      "@styles/*": [
-        "./src/styles/*"
-      ]
     }
   },
   "extends": "astro/tsconfigs/strict",
-  "include": [
+  "include": [".astro/types.d.ts", "**/*"],
-    ".astro/types.d.ts",
+  "exclude": ["dist"]
-    "**/*"
-  ],
-  "exclude": [
-    "dist"
-  ]
 }

vitest.config.ts

@@ -1,22 +1,19 @@
-import path from 'path';
+import path from "path";
-import {getViteConfig} from 'astro/config';
+import { getViteConfig } from "astro/config";
 
 export default getViteConfig(
   {
     // @ts-ignore
     test: {
-            exclude: [
+      exclude: ["test-e2e/**", "node_modules/**"],
-                "test-e2e/**",
-                "node_modules/**",
-            ],
       resolve: {
         alias: {
-                    '@': path.resolve(__dirname, './src')
+          "@": path.resolve(__dirname, "./src"),
         },
       },
     },
   },
   {
-        site: 'https://caperren.com/'
+    site: "https://caperren.com/",
   },
 );