project-words.txt

@@ -1,6 +1,9 @@
 ADCP
+Altium
 ASSEM
 astrojs
+Atmel
+barebones
 Candian
 caperren
 CEOAS
@@ -10,6 +13,7 @@ CONSERV
 Corwin
 dangerousthings
 Dechorionator
+ebox
 fhhs
 flowbite
 HDFS
@@ -19,10 +23,13 @@ hwupload
 iceops
 ITAR
 Jetson
+KFSK
 leconte
 Loctite
 luxon
 MGMT
+Mokai
+Multimeters
 nixos
 offroad
 Onshape
@@ -30,6 +37,7 @@ OSSM
 OSURC
 Perren
 Perren's
+Pixhawk
 pubpath
 RFID
 RSSI

src/components/H1.astro

@@ -2,4 +2,4 @@
 
 ---
 
-<h1 class="text-xl font-extrabold md:text-3xl"><slot /></h1>
+<h1 class="text-xl font-extrabold sm:text-2xl md:text-3xl"><slot /></h1>

src/components/H2.astro

@@ -2,4 +2,4 @@
 
 ---
 
-<h2 class="my-4 font-bold md:text-2xl"><slot /></h2>
+<h2 class="text-lg font-bold sm:text-xl md:text-2xl"><slot /></h2>

src/components/H3.astro

@@ -2,4 +2,4 @@
 
 ---
 
-<h3 class="mt-4 mb-2 font-bold md:text-lg"><slot /></h3>
+<h3 class="text-md font-semibold sm:text-lg md:text-xl"><slot /></h3>

src/components/Li.astro

@@ -0,0 +1,9 @@
+---
+
+---
+
+<>
+  <li>
+    <slot />
+  </li>
+</>

src/components/LinkButton.astro

@@ -9,10 +9,12 @@ interface Props {
 const { title, href, target = "_blank" } = Astro.props;
 ---
 
-<a
+<div class="mx-auto">
-  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"
+  <a
-  href={href}
+    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"
-  target={target}
+    href={href}
->
+    target={target}
-  {title}
+  >
-</a>
+    {title}
+  </a>
+</div>

src/components/Navbar.astro

@@ -39,7 +39,7 @@ import { Image } from "astro:assets";
       </svg>
     </button>
     <div
-      class="z-40 mt-1 hidden w-full lg:block lg:w-auto"
+      class="z-40 mt-6 hidden w-full lg:mt-0 lg:block lg:w-auto"
       id="navbar-multi-level"
     >
       <NestedNavbarEntry items={siteLayout} />

src/components/NestedNavbarEntries.astro

@@ -19,29 +19,34 @@ const { pathname } = Astro.url;
 ---
 
 <ul
-  class={"flex flex-col p-4 bg-black border-caperren-green " +
+  class:list={[
-    (depth ? "space-y-2" : "items-start lg:flex-row lg:space-x-8 lg:mt-0 ")}
+    "border-caperren-green flex flex-col space-y-4 space-x-8 bg-black",
+    depth
+      ? "space-y-4 py-4"
+      : "items-start lg:mt-0 lg:flex-row lg:space-y-0 lg:space-x-8",
+  ]}
 >
   {
     items.map(
       (entry) =>
         (entry.enabled ?? true) && (
-          <li>
+          <li class="">
             {Array.isArray(entry.children) && entry.children.length ? (
-              <div
+              <div>
-                class={
-                  pathname.startsWith(getHrefPath(entry))
-                    ? "border-caperren-green border-b-2"
-                    : ""
-                }
-              >
                 <button
                   id={"dropdownNavbarLink" + getNavLinkSuffix(entry)}
                   data-dropdown-toggle={
                     "dropdownNavbar" + getNavLinkSuffix(entry)
                   }
-                  data-dropdown-placement="bottom"
+                  data-dropdown-placement="bottom-start"
-                  class="hover:text-caperren-green-light lg:hover:text-caperren-green-light flex w-full items-center justify-between px-3 py-2 lg:p-0 lg:hover:bg-transparent"
+                  data-dropdown-offset-distance="5"
+                  data-dropdown-offset-skidding="12"
+                  class:list={[
+                    "hover:text-caperren-green-light lg:hover:text-caperren-green-light flex w-full items-center justify-between lg:p-0 lg:hover:bg-transparent",
+                    pathname.startsWith(getHrefPath(entry))
+                      ? "border-caperren-green border-b-2"
+                      : false,
+                  ]}
                 >
                   {entry.navText}
                   <svg
@@ -61,7 +66,7 @@ const { pathname } = Astro.url;
                 </button>
                 <div
                   id={"dropdownNavbar" + getNavLinkSuffix(entry)}
-                  class="border-caperren-green z-10 hidden w-screen border bg-black shadow-sm lg:w-max"
+                  class="border-caperren-green z-10 hidden w-max max-w-screen border bg-black px-6 shadow-sm"
                 >
                   <Astro.self
                     items={entry.children}
@@ -71,17 +76,16 @@ const { pathname } = Astro.url;
                 </div>
               </div>
             ) : (
-              <div
+              <div>
-                class={
-                  pathname === getHrefPath(entry)
-                    ? "border-caperren-green border-b-2"
-                    : ""
-                }
-              >
                 <a
                   href={getHrefPath(entry)}
                   target={getHrefPath(entry).startsWith("/") ? "" : "_blank"}
-                  class="hover:text-caperren-green-light ring-caperren-green-dark block bg-transparent px-3 py-2 lg:p-0"
+                  class:list={[
+                    "hover:text-caperren-green-light ring-caperren-green-dark block bg-transparent lg:p-0",
+                    pathname === getHrefPath(entry)
+                      ? "border-caperren-green border-b-2"
+                      : false,
+                  ]}
                   aria-current={
                     pathname === getHrefPath(entry) ? "page" : undefined
                   }

src/components/Ol.astro

@@ -0,0 +1,38 @@
+---
+import Li from "@components/Li.astro";
+import type { ComponentPropsBase } from "@interfaces/components.ts";
+
+import type { lineItem } from "@interfaces/ul-li.ts";
+
+interface Props extends ComponentPropsBase {
+  lineItems?: lineItem[];
+  depth?: number;
+}
+
+const { class: className, lineItems, depth = 0 } = Astro.props;
+---
+
+<ol
+  class:list={["list-inside list-disc", className, depth > 0 ? "ps-3" : false]}
+>
+  {
+    lineItems ? (
+      lineItems.map((line) => (
+        <Li>
+          {line.item}
+          {line.subItems ? (
+            <Astro.self
+              class={className}
+              lineItems={line.subItems}
+              depth={depth + 1}
+            />
+          ) : undefined}
+        </Li>
+      ))
+    ) : (
+      <Li>
+        <slot />
+      </Li>
+    )
+  }
+</ol>

src/components/PageGroup.astro

@@ -0,0 +1,21 @@
+---
+const hasHeader = Astro.slots.has("header");
+const hasDefault = Astro.slots.has("default");
+---
+
+<div class="grid grid-cols-1 gap-3">
+  {
+    Astro.slots.has("header") && (
+      <div>
+        <slot name="header" />
+      </div>
+    )
+  }
+  {
+    Astro.slots.has("default") && (
+      <div class="grid grid-cols-1 gap-3">
+        <slot />
+      </div>
+    )
+  }
+</div>

src/components/Paragraph.astro

@@ -1,7 +1,13 @@
 ---
+import type { ComponentPropsBase } from "@interfaces/components.ts";
+
+interface Props extends ComponentPropsBase {
+  initialTab?: boolean;
+}
+
+const { class: className, initialTab = true } = Astro.props;
+---
 
----
+<div class:list={className}>
-
+  {initialTab && <>&ensp;</>}<slot />
-<div class="">
-  <slot />
 </div>

src/components/Paragraphs.astro

@@ -2,6 +2,6 @@
 
 ---
 
-<div class="space-y-2">
+<div class="grid grid-cols-1 gap-2">
   <slot />
 </div>

src/components/PopoverWordDefinition.astro

@@ -7,6 +7,10 @@ const keys: { [key: string]: string } = {
   ADCP: "Acoustic doppler current profiler",
   COTS: "Consumer off-the-shelf",
   CTD: "Conductivity, temperature, and depth sensor",
+  GUI: "Graphical user interface",
+  NUC: "A small and low-power computer made by Intel",
+  PCBs: "Printed circuit boards",
+  UPS: "Uninterruptible power supply",
 };
 
 const key: string | undefined = Astro.props.key;

src/components/SkillMatrix/SkillMatrix.astro

@@ -0,0 +1,30 @@
+---
+import H3 from "@components/H3.astro";
+import PageGroup from "@components/PageGroup.astro";
+import Ul from "@components/Ul.astro";
+
+import type { categorySkills } from "@interfaces/skill-matrix.ts";
+
+interface Props {
+  categorizedSkills: categorySkills[];
+}
+
+const { categorizedSkills } = Astro.props;
+---
+
+<PageGroup>
+  <Fragment slot="header"><H3>Relevant Skills</H3></Fragment>
+  <div
+    class="border-caperren-green grid grid-flow-row gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+  >
+    {
+      categorizedSkills.map((categorySkills) => (
+        <div>
+          <div class="text-sm font-extrabold">{categorySkills.category}</div>
+          <hr class="text-caperren-green" />
+          <Ul class="text-sm" lineItems={categorySkills.skills} />
+        </div>
+      ))
+    }
+  </div>
+</PageGroup>

src/components/Ul.astro

@@ -0,0 +1,38 @@
+---
+import Li from "@components/Li.astro";
+import type { ComponentPropsBase } from "@interfaces/components.ts";
+
+import type { lineItem } from "@interfaces/ul-li.ts";
+
+interface Props extends ComponentPropsBase {
+  lineItems?: lineItem[];
+  depth?: number;
+}
+
+const { class: className, lineItems, depth = 0 } = Astro.props;
+---
+
+<ul
+  class:list={["list-inside list-disc", className, depth > 0 ? "ps-3" : false]}
+>
+  {
+    lineItems ? (
+      lineItems.map((line) => (
+        <Li>
+          {line.item}
+          {line.subItems ? (
+            <Astro.self
+              class={className}
+              lineItems={line.subItems}
+              depth={depth + 1}
+            />
+          ) : undefined}
+        </Li>
+      ))
+    ) : (
+      <Li>
+        <slot />
+      </Li>
+    )
+  }
+</ul>

src/data/site-layout.ts

@@ -4,7 +4,7 @@ export const siteLayout: navLink[] = [
   { navText: "About", path: "" },
   { navText: "Education", path: "education" },
   {
-    navText: "Experiences",
+    navText: "Experience",
     path: "experience",
     children: [
       {
@@ -29,7 +29,6 @@ export const siteLayout: navLink[] = [
         path: "osu-ceoas-ocean-mixing-group",
         children: [
           {
-            enabled: false,
             navText: "Robotics Oceanographic Surface Sampler",
             path: "robotic-oceanographic-surface-sampler",
           },

src/interfaces/skill-matrix.ts

@@ -0,0 +1,6 @@
+import type { lineItem } from "@interfaces/ul-li.ts";
+
+export interface categorySkills {
+  category: string;
+  skills: lineItem[];
+}

src/interfaces/ul-li.ts

@@ -0,0 +1,4 @@
+export interface lineItem {
+  item: string;
+  subItems?: lineItem[];
+}

src/layouts/BaseLayout.astro

@@ -4,6 +4,7 @@ import "@styles/global.css";
 import Footer from "@components/Footer.astro";
 import H1 from "@components/H1.astro";
 import Navbar from "@components/Navbar.astro";
+import PageGroup from "@components/PageGroup.astro";
 
 import { pathToMetadata } from "@data/site-layout.ts";
 
@@ -39,28 +40,32 @@ const pageEnabled = pathToMetadata(Astro.url.pathname).enabled ?? true;
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{pageEnabled ? pageTitle : "Corwin Perren"}</title>
   </head>
-  <body class="flex h-dvh w-full max-w-full flex-col bg-black text-white">
+  <body
+    class="grid h-dvh w-full max-w-full grid-cols-1 gap-0 bg-black text-white"
+  >
     <div
       id="content-body-scrolling"
       class="grow overflow-x-hidden overflow-y-scroll"
     >
       <Navbar />
-      <main class="mx-6 my-6">
+      <main class="mx-6 my-2">
-        <div class="mb-2 md:mb-6">
+        {
-          {
+          showTitle && pageEnabled && (
-            title && showTitle && pageEnabled && (
+            <PageGroup>
-              <H1 bottomMargin={!subTitles}>{title}</H1>
+              <Fragment slot="header">
-            )
+                <div class="leading-3">
-          }
+                  <H1>{title}</H1>
-          {
+                  {subTitles?.map((subTitle) => (
-            showTitle &&
+                    <p class="md:text-md text-sm font-bold italic">
-              pageEnabled &&
+                      {subTitle}
-              subTitles?.map((subTitle) => (
+                    </p>
-                <p class="text-sm font-bold md:text-xl">{subTitle}</p>
+                  ))}
-              ))
+                </div>
-          }
+              </Fragment>
-        </div>
+            </PageGroup>
-        <div>
+          )
+        }
+        <div class="grid grid-cols-1 gap-4">
           {pageEnabled ? <slot /> : <H1>Under Construction</H1>}
         </div>
       </main>

src/layouts/ResumeLayout.astro

@@ -1,10 +1,11 @@
 ---
-import PdfViewer from "@components/Media/PdfViewer.astro";
 import BaseLayout from "@layouts/BaseLayout.astro";
+
+import PdfViewer from "@components/Media/PdfViewer.astro";
 ---
 
 <BaseLayout {...Astro.props}>
-  <div class="h-dvh">
+  <div class="mt-2 h-dvh">
-    <PdfViewer class="mx-auto" pdf={Astro.props.resume} />
+    <PdfViewer pdf={Astro.props.resume} />
   </div>
 </BaseLayout>

src/pages/education.astro

@@ -5,6 +5,7 @@ import H2 from "@components/H2.astro";
 import H3 from "@components/H3.astro";
 import InlineLink from "@components/InlineLink.astro";
 import Carousel from "@components/Media/CustomCarousel/CustomCarousel.astro";
+import PageGroup from "@components/PageGroup.astro";
 import Table from "@components/Table.astro";
 import Timeline from "@components/Timeline/Timeline.astro";
 
@@ -108,16 +109,24 @@ const courseTable: tableData = {
 
 <BaseLayout title="Education">
   <Carousel carouselGroup={diplomaCarouselGroup} />
-  <H2>Timeline</H2>
+  <PageGroup>
-  <Timeline timeline={timeline} />
+    <Fragment slot="header"><H2>Timeline</H2></Fragment>
-  <H2>Oregon State University</H2>
+    <Timeline timeline={timeline} />
-  <H3>
+  </PageGroup>
-    <InlineLink
+  <PageGroup>
-      class="font-bold md:text-lg"
+    <Fragment slot="header"><H2>Oregon State University</H2></Fragment>
-      href="https://github.com/caperren/school_archives/tree/master/OSU%20Coursework"
+    <PageGroup>
-      >Coursework Archives</InlineLink
+      <Fragment slot="header">
-    >
+        <InlineLink
-  </H3>
+          class="font-bold md:text-lg"
-  <H3>Course Listing</H3>
+          href="https://github.com/caperren/school_archives/tree/master/OSU%20Coursework"
-  <Table data={courseTable} />
+          ><H3>Coursework Archives</H3></InlineLink
+        >
+      </Fragment>
+    </PageGroup>
+    <PageGroup>
+      <Fragment slot="header"><H3>Course Listing</H3></Fragment>
+      <Table data={courseTable} />
+    </PageGroup>
+  </PageGroup>
 </BaseLayout>

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

@@ -3,8 +3,13 @@ import ExperienceLayout from "@layouts/ExperienceLayout.astro";
 
 import H2 from "@components/H2.astro";
 import H3 from "@components/H3.astro";
+import InlineLink from "@components/InlineLink.astro";
 import Carousel from "@components/Media/CustomCarousel/CustomCarousel.astro";
+import Video from "@components/Media/Video.astro";
+import PageGroup from "@components/PageGroup.astro";
 import Paragraph from "@components/Paragraph.astro";
+import Paragraphs from "@components/Paragraphs.astro";
+import PopoverWordDefinition from "@components/PopoverWordDefinition.astro";
 import Timeline from "@components/Timeline/Timeline.astro";
 
 import type { carouselGroup } from "@interfaces/image-carousel.ts";
@@ -56,83 +61,89 @@ const headerCarouselGroup: carouselGroup = {
   ],
 };
 
-import InlineLink from "@components/InlineLink.astro";
-import Video from "@components/Media/Video.astro";
-import Paragraphs from "@components/Paragraphs.astro";
-import PopoverWordDefinition from "@components/PopoverWordDefinition.astro";
 import { subTitles } from "./osu-ceoas-ocean-mixing-group.ts";
 ---
 
 <ExperienceLayout title="LeConte Glacier Deployments" subTitles={subTitles}>
   <Carousel carouselGroup={headerCarouselGroup} />
-  <H2>Summary</H2>
+  <PageGroup>
-  <H3>Timeline</H3>
+    <Fragment slot="header"><H2>Summary</H2></Fragment>
-  <Timeline timeline={deploymentTimeline} />
+    <PageGroup>
-  <H3>Location</H3>
+      <Fragment slot="header"><H3>Timeline</H3></Fragment>
-  <iframe
+      <Timeline timeline={deploymentTimeline} />
-    class="w-full"
+    </PageGroup>
-    width="600"
+    <PageGroup>
-    height="450"
+      <Fragment slot="header"><H3>Location</H3></Fragment>
-    src="https://maps.google.com/maps?q=leconte%20glacier&t=k&z=11&ie=UTF8&iwloc=B&output=embed"
+      <iframe
-  ></iframe>
+        class="w-full"
-  <H2>Details</H2>
+        width="600"
-  <Paragraphs>
+        height="450"
-    <Paragraph>
+        src="https://maps.google.com/maps?q=leconte%20glacier&t=k&z=11&ie=UTF8&iwloc=B&output=embed"
-      As part of my time working on the
+      ></iframe>
-      <InlineLink
+    </PageGroup>
-        href="/experience/osu-ceoas-ocean-mixing-group/robotic-oceanographic-surface-sampler"
+  </PageGroup>
-      >
+  <PageGroup>
-        Robotic Oceanographic Surface Sampler</InlineLink
+    <Fragment slot="header"><H2>Details</H2></Fragment>
-      >, I had the fantastic opportunity to be deployed at the LeConte Glacier
+    <Paragraphs>
-      in Alaska! This started in early 2017 with setup and ocean trials in
+      <Paragraph>
-      nearby Petersburg. The team had sent multiple shipping containers with our
+        As part of my time working on the
-      robotic platforms and most equipment to assemble, test, and debug them a
+        <InlineLink
-      few months prior, allowing us to get to work the moment we arrived. We
+          href="/experience/osu-ceoas-ocean-mixing-group/robotic-oceanographic-surface-sampler"
-      spent multiple weeks at the docks with our makeshift workstations built
+        >
-      from plywood and pelican cases, validating the hardware we'd sent, and
+          Robotic Oceanographic Surface Sampler</InlineLink
-      making adjustments with improved hardware we'd hand-carried on our
+        >, I had the fantastic opportunity to be deployed at the LeConte Glacier
-      flights. This also provided a great opportunity to work out any final
+        in Alaska! This started in early 2017 with setup and ocean trials in
-      firmware and/or software bugs while the vehicles were still relatively
+        nearby Petersburg. The team had sent multiple shipping containers with
-      easy to retrieve. After a short trip back home to recover, and prep any
+        our robotic platforms and most equipment to assemble, test, and debug
-      last minute items we'd forgotten, our research team flew back and headed
+        them a few months prior, allowing us to get to work the moment we
-      for the glacier!
+        arrived. We spent multiple weeks at the docks with our makeshift
-    </Paragraph>
+        workstations built from plywood and pelican cases, validating the
-    <Paragraph>
+        hardware we'd sent, and making adjustments with improved hardware we'd
-      The towering mountain of ice sits roughly 30 miles from Petersburg, so
+        hand-carried on our flights. This also provided a great opportunity to
-      we'd commissioned an off-season fishing vessel, Steller, and it's crew, to
+        work out any final firmware and/or software bugs while the vehicles were
-      take us as close to it as was reasonably safe. The team worked 24 hours a
+        still relatively easy to retrieve. After a short trip back home to
-      day, on two shifts, deploying and retrieving the ROSS platforms,
+        recover, and prep any last minute items we'd forgotten, our research
-      performing repairs (as needed), recovering/processing collected data,
+        team flew back and headed for the glacier!
-      manually deploying the ship's <PopoverWordDefinition key="CTD" />, and
+      </Paragraph>
-      occasionally spending considerable time pushing icebergs the size of
+      <Paragraph>
-      houses away from an <PopoverWordDefinition key="ADCP" /> mounted to Steller
+        The towering mountain of ice sits roughly 30 miles from Petersburg, so
-      using fiberglass poles. Many hardware failures had to be solved during these
+        we'd commissioned an off-season fishing vessel, Steller, and it's crew,
-      long days, and it was a very rewarding and creative experience to work around
+        to take us as close to it as was reasonably safe. The team worked 24
-      the limitations of this isolated (and salty) environment.
+        hours a day, on two shifts, deploying and retrieving the ROSS platforms,
-    </Paragraph>
+        performing repairs (as needed), recovering/processing collected data,
-    <Paragraph>
+        manually deploying the ship's <PopoverWordDefinition key="CTD" />, and
-      On top of being a unique engineering and team building experience, LeConte
+        occasionally spending considerable time pushing icebergs the size of
-      lives among the most beautiful places I've yet to experience in this life.
+        houses away from an <PopoverWordDefinition key="ADCP" /> mounted to Steller
-      There's something special about being somewhere so incredibly remote and
+        using fiberglass poles. Many hardware failures had to be solved during these
-      untouched by humans. The pristine evergreen forests, eerie blue-green hues
+        long days, and it was a very rewarding and creative experience to work around
-      of the glacier and icebergs, ancient towering mountains, and genuinely
+        the limitations of this isolated (and salty) environment.
-      curious looks from local land and marine life unfamiliar with human
+      </Paragraph>
-      presence made it humbly clear that for once we as humans were the odd ones
+      <Paragraph>
-      out. These trips were ones that I will treasure and think back on fondly
+        On top of being a unique engineering and team building experience,
-      on for the rest of my life.
+        LeConte lives among the most beautiful places I've yet to experience in
-    </Paragraph>
+        this life. There's something special about being somewhere so incredibly
-  </Paragraphs>
+        remote and untouched by humans. The pristine evergreen forests, eerie
-  <H2>Videos</H2>
+        blue-green hues of the glacier and icebergs, ancient towering mountains,
-  <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+        and genuinely curious looks from local land and marine life unfamiliar
-    {
+        with human presence made it humbly clear that for once we as humans were
-      videos.map((video) => (
+        the odd ones out. These trips were ones that I will treasure and think
-        <Video
+        back on fondly on for the rest of my life.
-          videoPath={video}
+      </Paragraph>
-          autoPlay={true}
+    </Paragraphs>
-          loop={true}
+  </PageGroup>
-          playsInline={true}
+  <PageGroup>
-        />
+    <Fragment slot="header"><H2>Videos</H2></Fragment>
-      ))
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-    }
+      {
-  </div>
+        videos.map((video) => (
+          <Video
+            videoPath={video}
+            autoPlay={true}
+            loop={true}
+            playsInline={true}
+          />
+        ))
+      }
+    </div>
+  </PageGroup>
 </ExperienceLayout>

src/pages/experience/osu-ceoas-ocean-mixing-group/osu-ceoas-ocean-mixing-group.ts

@@ -26,4 +26,5 @@ export const deploymentTimeline: timelineEntry[] = [
 export const subTitles = [
   "Oregon State University",
   "College of Earth, Ocean, and Atmospheric Sciences",
+  "Ocean Mixing Group",
 ];

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

@@ -3,17 +3,26 @@ import ExperienceLayout from "@layouts/ExperienceLayout.astro";
 
 import H2 from "@components/H2.astro";
 import H3 from "@components/H3.astro";
+import InlineLink from "@components/InlineLink.astro";
+import Li from "@components/Li.astro";
 import LinkButton from "@components/LinkButton.astro";
 import Carousel from "@components/Media/CustomCarousel/CustomCarousel.astro";
 import PdfViewer from "@components/Media/PdfViewer.astro";
+import PageGroup from "@components/PageGroup.astro";
+import Paragraph from "@components/Paragraph.astro";
+import Paragraphs from "@components/Paragraphs.astro";
 import PopoverWordDefinition from "@components/PopoverWordDefinition.astro";
+import SkillMatrix from "@components/SkillMatrix/SkillMatrix.astro";
 import Timeline from "@components/Timeline/Timeline.astro";
+import Ul from "@components/Ul.astro";
 
 import type { carouselGroup } from "@interfaces/image-carousel.ts";
+import type { categorySkills } from "@interfaces/skill-matrix.ts";
 import type { timelineEntry } from "@interfaces/timeline.ts";
 
 import electronics_box from "@assets/experience/osu-ceoas-ocean-mixing-group/robotic-oceanographic-surface-sampler/electronics-box.jpg";
 import jet_drive from "@assets/experience/osu-ceoas-ocean-mixing-group/robotic-oceanographic-surface-sampler/jet-drive.jpg";
+import ross_ebox_4p0 from "@assets/experience/osu-ceoas-ocean-mixing-group/robotic-oceanographic-surface-sampler/ross-ebox-4p0.jpg";
 import ross_on_vessel_at_night from "@assets/experience/osu-ceoas-ocean-mixing-group/robotic-oceanographic-surface-sampler/ross-on-vessel-at-night.jpg";
 import ross_on_vessel from "@assets/experience/osu-ceoas-ocean-mixing-group/robotic-oceanographic-surface-sampler/ross-on-vessel.jpg";
 import publication from "@assets/experience/osu-ceoas-ocean-mixing-group/robotic-oceanographic-surface-sampler/ross-publication.pdf";
@@ -31,6 +40,7 @@ const headerCarouselGroup: carouselGroup = {
     ross_team,
     ross_on_vessel,
     ross_on_vessel_at_night,
+    ross_ebox_4p0,
     electronics_box,
     jet_drive,
     ui,
@@ -50,6 +60,72 @@ const timeline: timelineEntry[] = [
     date: "May 2018",
   },
 ];
+
+const categorizedSkills: categorySkills[] = [
+  {
+    category: "Electrical",
+    skills: [
+      {
+        item: "Schematic & PCB Design",
+        subItems: [{ item: "Altium Designer" }],
+      },
+      {
+        item: "PCB Assembly & Rework",
+        subItems: [
+          { item: "Handheld Soldering" },
+          { item: "Handheld Hot-Air Reflow" },
+          { item: "Oven Reflow" },
+        ],
+      },
+      {
+        item: "Electrical Diagnostics",
+        subItems: [
+          { item: "Multimeters" },
+          { item: "Oscilloscopes" },
+          { item: "Logic Analyzers" },
+        ],
+      },
+      {
+        item: "Harnessing Fabrication",
+        subItems: [
+          { item: "DC Power & Signal" },
+          { item: "Low Frequency RF (<1GHz)" },
+          { item: "Waterproofing" },
+        ],
+      },
+      {
+        item: "Simulation",
+        subItems: [{ item: "LTspice" }],
+      },
+    ],
+  },
+  {
+    category: "Software & Environments",
+    skills: [
+      { item: "Git" },
+      {
+        item: "Programming Languages",
+        subItems: [
+          { item: "Python 2/3" },
+          { item: "Bash Shell Scripting" },
+          { item: "Low-Level Embedded C/C++ (Atmel Studio)" },
+          { item: "High-Level Embedded C/C++ (Arduino/Teensy)" },
+          { item: "Matlab" },
+        ],
+      },
+      {
+        item: "Operating Systems",
+        subItems: [
+          {
+            item: "Linux",
+            subItems: [{ item: "Ubuntu" }, { item: "Raspbian" }],
+          },
+          { item: "Microsoft Windows" },
+        ],
+      },
+    ],
+  },
+];
 ---
 
 <ExperienceLayout
@@ -57,56 +133,158 @@ const timeline: timelineEntry[] = [
   subTitles={subTitles}
 >
   <Carousel carouselGroup={headerCarouselGroup} />
-  <div class="mt-4 flex items-center justify-center">
+  <div class="grid grid-flow-row place-content-center gap-4 md:grid-flow-col">
     <LinkButton
       href="https://tos.org/oceanography/article/autonomous-ctd-profiling-from-the-robotic-oceanographic-surface-sampler"
       title="Official Scientific Publication"
     />
+    <LinkButton
+      href="https://www.kfsk.org/2017/04/19/remote-controlled-kayaks-ready-research-leconte-glacier/"
+      title="KFSK Petersburg Feature / Interview"
+    />
   </div>
-  <H2>Summary</H2>
+  <PageGroup>
-  <H3>Timeline</H3>
+    <Fragment slot="header"><H2>Summary</H2></Fragment>
-  <Timeline timeline={timeline} />
+    <PageGroup>
-  <H3>Key Takeaways</H3>
+      <Fragment slot="header"><H3>Timeline</H3></Fragment>
-  <ul class="list-inside list-disc">
+      <Timeline timeline={timeline} />
-    <li>
+    </PageGroup>
-      <div class="inline-block">
+    <PageGroup>
-        Assembled, fabricated, and debugged both custom and
+      <Fragment slot="header"><H3>Key Takeaways</H3></Fragment>
-        <PopoverWordDefinition key="COTS" />
+      <Ul>
-        hardware and electronics.
+        <Li
-      </div>
+          >Hand assembled and validated dozens of custom <PopoverWordDefinition
-    </li>
+            key="PCBs"
-    <li>Two</li>
+          />, wiring harnesses, and electronics boxes</Li
-    <li>Three</li>
+        >
-  </ul>
+        <Li
-  <h3 class="my-4 font-bold md:text-lg">Skills Used</h3>
+          >Wrote, debugged, and assisted with development of embedded firmware</Li
-  <div
+        >
-    class="border-caperren-green relative grid grid-flow-row gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+        <Li
-  >
+          >Accompanied the team on two deployments to the LeConte glacier in
-    <div>
+          Alaska to gather melt and mixing data</Li
-      <div class="text-sm font-extrabold">Software</div>
+        >
-      <hr class="text-caperren-green" />
+      </Ul>
-      <ul class="list-inside list-disc text-sm">
+    </PageGroup>
-        <li>One</li>
+    <SkillMatrix categorizedSkills={categorizedSkills} />
-        <li>Two</li>
+  </PageGroup>
-      </ul>
+  <PageGroup>
+    <Fragment slot="header"><H2>Details</H2></Fragment>
+    <PageGroup>
+      <Fragment slot="header"><H3>ROSS Overview</H3></Fragment>
+      <Paragraphs>
+        <Paragraph>
+          ROSS was a gasoline-powered water-sampling robotics platform built
+          around a Mokai jet-drive kayak. It's purpose was to continuously, and
+          often autonomously, gather water data over extremely long distances
+          and/or in locations where human-safety concerns would make gathering
+          it manually too risky. There were a variety of sensors it could be
+          outfitted with depending on the needs of the exact research project
+          and destination, but some common ones were an <PopoverWordDefinition
+            key="ADCP"
+          /> for gathering 3D water current vector data, a <PopoverWordDefinition
+            key="CTD"
+          /> for measuring water conductivity/temperature/depth, and a high-precision
+          GPS for generating meaningful 3D plots of the sensor data. These kayaks
+          have been deployed to places like the Indian/Pacific Ocean mixing line,
+          and along the active LeConte glacier terminus in Alaska, gathering novel
+          data on how vastly different bodies of water act when mixing.
+        </Paragraph>
+        <Paragraph>
+          In its original configuration, the Mokai kayak's throttle and steering
+          were already drive-by-wire, which made it an excellent starting point
+          for automating. It was also designed for easy transport, breaking down
+          into three major compartments that could easily fit in the back of a
+          short-bed pickup. For our custom hulls, Mokai also thickened the
+          plastic significantly and provided a bare minimum of electronics. This
+          barebones platform was then modified by our team to include a
+          storm-surge-rated intake and exhaust for the engine, a keel to improve
+          rough sea stability, a large alternator, and a plethora of mount
+          points the electronics, batteries, fuel, sensors, and radios.
+        </Paragraph>
+        <Paragraph>
+          In terms of the electronics and software for this project, the kayak
+          itself was centered around a Pixhawk flight controller flashed with a
+          modified Rover variant (this was before a dedicated boat option
+          existed). One pelican-case electronics box housed this controller, a
+          small <PopoverWordDefinition key="NUC" /> with <PopoverWordDefinition
+            key="UPS"
+          />, wifi router, radio control receiver, satellite modem, and quite a
+          few custom <PopoverWordDefinition key="PCBs" /> for interfacing with external
+          electronics and implementing glue logic/safety overrides. A second box housed
+          nothing but sealed lead-acid batteries, which were charged by the alternator
+          on later revisions of the platform. The PC ran a custom python script, which
+          interfaced with a Matlab GUI over a remote radio link. The kayak could also
+          be overridden with an FrSky RC controller, when at close range, and additionally
+          allowed for direct control without the PC needing to be in-the-loop. To
+          see some of the custom hardware inside of these boxes, check out Nick McComb's
+          design pages for them
+          <InlineLink
+            href="https://nickmccomb.net/college/printed-circuit-boards#omg"
+            >here</InlineLink
+          >! For even more context on ROSS, and history from before I joined the
+          project, check out his <InlineLink
+            href="https://nickmccomb.net/college/ross">summary page</InlineLink
+          >.
+        </Paragraph>
+      </Paragraphs>
+    </PageGroup>
+    <PageGroup>
+      <Fragment slot="header"><H3>My Experience</H3></Fragment>
+      <Paragraphs>
+        <Paragraph>
+          I first started on this project by doing what I thought was a one-off
+          help session for Nick, working on an issue he was having getting
+          ROSS's engine to start and shut down properly. I had more experience
+          with engines, and engine control, so I quickly realized that a beefier
+          and high-voltage-rated relay was needed to avoid arc-welding the
+          contacts closed during shutdown. He rolled out a <InlineLink
+            href="https://nickmccomb.net/college/printed-circuit-boards/ross-ebox-auxillary"
+            >new board revision</InlineLink
+          > with those changes and it was the final version used for the rest of ROSS's
+          lifetime. This little taste of the project, and some wishful prodding from
+          Nick, was enough for me to join the team part-time.
+        </Paragraph>
+        <Paragraph>
+          While the original plan for me was to re-write the <PopoverWordDefinition
+            key="GUI"
+          /> for ROSS in Python using Qt, it turns out they needed my help on the
+          electrical and firmware side more than anything, so most of my time at the
+          lab was focused on that. I hand-assembled so many of Nick's circuit boards
+          at this lab that I still can pick his out of a lot from design aesthetic
+          alone! I also helped with plenty of wiring harness builds, electrical box
+          fabrication, embedded firmware development, and of course, plenty of electrical
+          and software debugging. One thing that this project taught me very quickly
+          was how difficult it was to make reliable hardware in a high vibration,
+          electrically noisy, and salt-laden environments. The number of PCBs we went
+          through, alongside wiring harnesses, was pretty incredible considering the
+          lengths we went to in order to protect them.
+        </Paragraph>
+        <Paragraph>
+          A very unique aspect of this team/project, and a large part of why I
+          was drawn to it, was that it was about as hands-on as you could
+          possibly get. Doubly so for an undergraduate student! Not only did I
+          get to design and repair a real robot, but it was actually being used
+          for proper scientific research! We would regularly go to Newport, OR
+          for testing and have to make crazy additions and repairs on the fly.
+          This got even more extreme during my deployments to the <InlineLink
+            href="http://localhost:4321/experience/osu-ceoas-ocean-mixing-group/robotic-oceanographic-surface-sampler"
+            >LeConte glacier</InlineLink
+          >, as you had to get creative and fix things with what you had on-hand
+          due to how remote we were. These are experiences that graduate
+          students rarely even get to have, so I'm extremely thankful and fond
+          of the time I spent here. Huge shout out to <InlineLink
+            href="https://nickmccomb.net">Nick</InlineLink
+          >, again, who made it possible in the first place! Also be sure to
+          check out the scientific paper on this project below!
+        </Paragraph>
+      </Paragraphs>
+    </PageGroup>
+  </PageGroup>
+  <PageGroup>
+    <Fragment slot="header"><H2>Official Scientific Publication</H2></Fragment>
+    <div class="h-334">
+      <PdfViewer pdf={publication} />
     </div>
-    <div>
+  </PageGroup>
-      <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>Details</H2>
-  power and voltage logging
-  <H2>Official Scientific Publication</H2>
-  <div class="h-334">
-    <PdfViewer pdf={publication} />
-  </div>
 </ExperienceLayout>

src/pages/hobby/body-mods.astro

@@ -5,6 +5,7 @@ import H2 from "@components/H2.astro";
 import H3 from "@components/H3.astro";
 import InlineLink from "@components/InlineLink.astro";
 import Carousel from "@components/Media/CustomCarousel/CustomCarousel.astro";
+import PageGroup from "@components/PageGroup.astro";
 import Paragraph from "@components/Paragraph.astro";
 import Paragraphs from "@components/Paragraphs.astro";
 
@@ -27,42 +28,49 @@ const rfidImplantCarouselGroup: carouselGroup = {
 ---
 
 <HobbyLayout title="Body Mods">
-  <H2>RFID Implant</H2>
+  <PageGroup>
-  <Carousel carouselGroup={rfidImplantCarouselGroup} />
+    <Fragment slot="header"><H2>RFID Implant</H2></Fragment>
-  <H3>Details</H3>
+
-  <Paragraphs>
+    <Carousel carouselGroup={rfidImplantCarouselGroup} />
-    <Paragraph>
+    <PageGroup>
-      Back when I was in college, a few of my friends and I got this crazy idea
+      <Fragment slot="header"><H3>Details</H3></Fragment>
-      to all get RFID implants together. They are essentially the same things
+
-      you'd use to microchip a pet, but with a slightly different firmware
+      <Paragraphs>
-      configuration, allowing scans with any 125KHz-compatible reader. The
+        <Paragraph>
-      implants came from <InlineLink
+          Back when I was in college, a few of my friends and I got this crazy
-        href="https://dangerousthings.com/product/xem/"
+          idea to all get RFID implants together. They are essentially the same
-        >dangerousthings.com</InlineLink
+          things you'd use to microchip a pet, but with a slightly different
-      >, and we were lucky enough to have a vet-med student as a friend who made
+          firmware configuration, allowing scans with any 125KHz-compatible
-      the installation a quick and painless process! I'm glad that I'm not
+          reader. The implants came from <InlineLink
-      afraid of needles, as the 16 gauge injector the kit came with was nothing
+            href="https://dangerousthings.com/product/xem/"
-      to scoff at. Since healing, you would never know the implant was there,
+            >dangerousthings.com</InlineLink
-      with the site leaving no scar or visible indication of its presence.
+          >, and we were lucky enough to have a vet-med student as a friend who
-    </Paragraph>
+          made the installation a quick and painless process! I'm glad that I'm
-    <Paragraph>
+          not afraid of needles, as the 16 gauge injector the kit came with was
-      With that out of the way, our group began work on hardware which would
+          nothing to scoff at. Since healing, you would never know the implant
-      support the new implants. The goal was to have a generic usb-keyboard
+          was there, with the site leaving no scar or visible indication of its
-      emulator for typing passwords with a valid scan, a car off-acc-on ignition
+          presence.
-      replacement, and a fairly specialized modification to the OSU Robotics
+        </Paragraph>
-      Club's doorway scanning system so they would support these on top of the
+        <Paragraph>
-      official OSU ID cards. As tends to happen, life got busy, and only the
+          With that out of the way, our group began work on hardware which would
-      usb-keyboard emulator actually came to fruition. The electronics and
+          support the new implants. The goal was to have a generic usb-keyboard
-      primary firmware were handled by <InlineLink href="https://nickmccomb.net"
+          emulator for typing passwords with a valid scan, a car off-acc-on
-        >Nick McComb</InlineLink
+          ignition replacement, and a fairly specialized modification to the OSU
-      >, enclosure by <InlineLink href="https://dylanthrush.com"
+          Robotics Club's doorway scanning system so they would support these on
-        >Dylan Thrush</InlineLink
+          top of the official OSU ID cards. As tends to happen, life got busy,
-      >, and I supported some minor firmware development and debugging. If you
+          and only the usb-keyboard emulator actually came to fruition. The
-      want to see an example of the keyboard emulator unlocking a PC, check out
+          electronics and primary firmware were handled by <InlineLink
-      the video on <InlineLink
+            href="https://nickmccomb.net">Nick McComb</InlineLink
-        href="https://nickmccomb.net/college/printed-circuit-boards/computer-access-module"
+          >, enclosure by <InlineLink href="https://dylanthrush.com"
-        >Nick's website</InlineLink
+            >Dylan Thrush</InlineLink
-      >!
+          >, and I supported some minor firmware development and debugging. If
-    </Paragraph>
+          you want to see an example of the keyboard emulator unlocking a PC,
-  </Paragraphs>
+          check out the video on <InlineLink
+            href="https://nickmccomb.net/college/printed-circuit-boards/computer-access-module"
+            >Nick's website</InlineLink
+          >!
+        </Paragraph>
+      </Paragraphs>
+    </PageGroup>
+  </PageGroup>
 </HobbyLayout>

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

@@ -1,7 +1,12 @@
 ---
+import HobbyLayout from "@layouts/HobbyLayout.astro";
+
+import H2 from "@components/H2.astro";
 import LinkButton from "@components/LinkButton.astro";
 import Carousel from "@components/Media/CustomCarousel/CustomCarousel.astro";
-import HobbyLayout from "@layouts/HobbyLayout.astro";
+import PageGroup from "@components/PageGroup.astro";
+import Paragraph from "@components/Paragraph.astro";
+import Paragraphs from "@components/Paragraphs.astro";
 
 import type { carouselGroup } from "@interfaces/image-carousel.ts";
 
@@ -31,44 +36,53 @@ const headerCarouselGroup: carouselGroup = {
 };
 ---
 
-<HobbyLayout title="Motorcycling - Chubby Buttons 2 Mount">
+<HobbyLayout
+  title="Chubby Buttons 2 Mount"
+  subTitles={["Hobbies", "Motorcycling"]}
+>
   <Carousel carouselGroup={headerCarouselGroup} />
-  <div class="mt-4 flex items-center justify-center">
+  <div class="flex items-center justify-center">
     <LinkButton
       href="https://cad.onshape.com/documents/816b0b1bef7883d4dc25c66c/v/e11fe68753e080b72015cfb8/e/3802abbd9d7b7c4d2c7ebad3"
       title="Onshape CAD Design Files"
     />
   </div>
-  <p class="mt-4">
+  <PageGroup>
-    Having ridden motorcycles since I was sixteen, and being an avid music
+    <Fragment slot="header"><H2>Details</H2></Fragment>
-    enjoyer, I'd been looking for a way to improve my music listening experience
+    <Paragraphs>
-    while on-the-go. One large pain-point I'd always had was with controlling
+      <Paragraph>
-    track selection and volume levels while my gloves were on, as smartphones
+        Having ridden motorcycles since I was sixteen, and being an avid music
-    don't respond very well to this, if at all. In 2023 I found out about chubby
+        enjoyer, I'd been looking for a way to improve my music listening
-    buttons, a low-power and highly water-resistant media controller
+        experience while riding. One large pain-point I'd always had was
-    specifically designed for use with gloves! The only problem was that it was
+        controlling track selection and volume levels while my gloves were on,
-    designed to be worn on your arm using a strap, which isn't very practical on
+        as smartphones don't respond very well to this, if at all. In 2023 I
-    a motorcycle.
+        found out about chubby buttons, a low-power and highly water-resistant
-  </p>
+        media controller specifically designed for use with gloves! The only
-  <p class="mt-4">
+        problem was that it was designed to be worn on your arm using a strap,
-    When starting this project, I'd recently gotten a 3D Printer, so having some
+        which isn't very practical on a motorcycle.
-    baseline modelling skills I took some measurements, and began designing a
+      </Paragraph>
-    proper mount. I already owned and used many 1" RAM compatible mounts and
+      <Paragraph>
-    gear on my bikes, so I decided to make this one natively support the ball
+        When starting this project, I'd recently gotten a 3D printer, so having
-    size to use an existing clamp I had stored away. This design was the first
+        some baseline modelling skills I took some measurements, and began
-    where I decided to use heat-set inserts in the plastic, along with some
+        designing a proper mount. I already owned and used many 1" RAM
-    medium-strength Loctite on the fasteners, due to the high-vibration
+        compatible mounts and gear on my bikes, so I decided to make this one
-    environment the mount would see. The print was also done using a UV
+        natively support the ball size to use an existing clamp I had stored
-    resistant, high-temp rated, and non-water-absorbing ASA filament, as the
+        away. This design was the first where I decided to use heat-set inserts
-    direct expose to the elements would not allow something like cheap PLA to
+        in the plastic, along with some medium-strength Loctite on the
-    last very long.
+        fasteners, due to the high-vibration environment the mount would see.
-  </p>
+        The print was also done using a UV resistant, high-temp rated, and
-  <p class="mt-4">
+        non-water-absorbing ASA filament, as the direct exposure to the elements
-    While my first iteration was sized appropriately and went together with no
+        would not allow something like cheap PLA to last very long.
-    issues, the ball mount neck ended up snapping due to a low infill
+      </Paragraph>
-    percentage. After changing that area to 100% infill, including a handful of
+      <Paragraph>
-    the rear mount layers that it attached to, a second iteration has worked
+        While my first iteration was sized appropriately and went together with
-    perfectly for a few years now! If you're interested in printing this
+        no issues, the ball mount neck ended up snapping due to a low infill
-    yourself, feel free to download the model using the button under the photos!
+        percentage. After changing that area to 100% infill, including a handful
-  </p>
+        of the layers at the rear mounting face where the neck attaches, 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!
+      </Paragraph>
+    </Paragraphs>
+  </PageGroup>
 </HobbyLayout>

src/pages/hobby/motorcycling/lineup.astro

@@ -4,6 +4,7 @@ import HobbyLayout from "@layouts/HobbyLayout.astro";
 import H2 from "@components/H2.astro";
 import H3 from "@components/H3.astro";
 import Carousel from "@components/Media/CustomCarousel/CustomCarousel.astro";
+import PageGroup from "@components/PageGroup.astro";
 
 import type { carouselGroup } from "@interfaces/image-carousel.ts";
 
@@ -39,26 +40,35 @@ const kz750CarouselGroup: carouselGroup = {
 };
 ---
 
-<HobbyLayout title="Motorcycling - Lineup">
+<HobbyLayout title="Lineup" subTitles={["Hobbies", "Motorcycling"]}>
-  <H2>Current Lineup</H2>
+  <PageGroup>
-  <H3>2015 Yamaha FJR 1300</H3>
+    <Fragment slot="header"><H2>Current Lineup</H2></Fragment>
-  <Carousel carouselGroup={fjrCarouselGroup} />
+    <PageGroup>
-
+      <Fragment slot="header"><H3>2015 Yamaha FJR 1300</H3></Fragment>
-  <H3>2021 CSC SG400</H3>
+      <Carousel carouselGroup={fjrCarouselGroup} />
-  <Carousel carouselGroup={cscCarouselGroup} />
+    </PageGroup>
-
+    <PageGroup>
-  <H2>Prior Lineup</H2>
+      <Fragment slot="header"><H3>2021 CSC SG400</H3></Fragment>
-  <H3>2005 Suzuki DRZ 400</H3>
+      <Carousel carouselGroup={cscCarouselGroup} />
-  <Carousel carouselGroup={drzCarouselGroup} />
+    </PageGroup>
-
+  </PageGroup>
-  <h3 class="my-4 font-bold underline md:text-lg">
+  <PageGroup>
-    1991 Kawasaki Concours ZG1000
+    <Fragment slot="header"><H2>Prior Lineup</H2></Fragment>
-  </h3>
+    <PageGroup>
-  <Carousel carouselGroup={concoursCarouselGroup} />
+      <Fragment slot="header"><H3>2005 Suzuki DRZ 400</H3></Fragment>
-
+      <Carousel carouselGroup={drzCarouselGroup} />
-  <H3>1979 Kawasaki KZ750</H3>
+    </PageGroup>
-  <Carousel carouselGroup={kz750CarouselGroup} />
+    <PageGroup>
-
+      <Fragment slot="header"><H3>1991 Kawasaki Concours ZG1000</H3></Fragment>
-  <H3>1991 Kawasaki Ninja 600R</H3>
+      <Carousel carouselGroup={concoursCarouselGroup} />
-  <Carousel carouselGroup={ninjaCarouselGroup} />
+    </PageGroup>
+    <PageGroup>
+      <Fragment slot="header"><H3>1979 Kawasaki KZ750</H3></Fragment>
+      <Carousel carouselGroup={kz750CarouselGroup} />
+    </PageGroup>
+    <PageGroup>
+      <Fragment slot="header"><H3>1991 Kawasaki Ninja 600R</H3></Fragment>
+      <Carousel carouselGroup={ninjaCarouselGroup} />
+    </PageGroup>
+  </PageGroup>
 </HobbyLayout>

src/pages/index.astro

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