Finished ross content, added skill matrix, li, and ul, and improved many existing components, created and refactored to unified layouts and grid, visual improvements with proper column to row collapsing

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
-  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={href}
-  target={target}
->
-  {title}
-</a>
+<div class="mx-auto">
+  <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={href}
+    target={target}
+  >
+    {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 " +
-    (depth ? "space-y-2" : "items-start lg:flex-row lg:space-x-8 lg:mt-0 ")}
+  class:list={[
+    "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
-                class={
-                  pathname.startsWith(getHrefPath(entry))
-                    ? "border-caperren-green border-b-2"
-                    : ""
-                }
-              >
+              <div>
                 <button
                   id={"dropdownNavbarLink" + getNavLinkSuffix(entry)}
                   data-dropdown-toggle={
                     "dropdownNavbar" + getNavLinkSuffix(entry)
                   }
-                  data-dropdown-placement="bottom"
-                  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-placement="bottom-start"
+                  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
-                class={
-                  pathname === getHrefPath(entry)
-                    ? "border-caperren-green border-b-2"
-                    : ""
-                }
-              >
+              <div>
                 <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="">
-  <slot />
+<div class:list={className}>
+  {initialTab && <>&ensp;</>}<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>