Content Updates with projects and experience

src/pages/about.astro

@@ -38,9 +38,9 @@ const quickFacts = [
   description="The human story behind the resume: Greg Kilmer on curiosity, tabletop RPGs, resin dice, and a Philadelphia apartment with too many board games."
 >
   <!-- Hero — full animated Milky Way field, matching the Interests hero. -->
-  <section class="relative min-h-[60vh] overflow-hidden pt-28 sm:pt-32">
+  <section class="relative overflow-hidden pb-8 pt-28 sm:pt-32">
     <AnimatedBackground client:idle className="vt-sky" />
-    <div class="container-prose relative z-10 flex flex-col gap-10 py-16">
+    <div class="container-prose relative z-10 flex flex-col gap-8 py-8">
       <Reveal>
         <SectionHeader
           tone="hero"

src/pages/contact.astro

@@ -21,17 +21,20 @@ const professional = [
   {
     icon: "email-outline",
     label: "Email",
-    hint: '<a href="mailto:Kilmer.GM@Gmail.com">Kilmer.GM@Gmail.com</a>',
+    href: "mailto:Kilmer.GM@Gmail.com",
+    hint: "Kilmer.GM@Gmail.com",
   },
   {
     icon: "linkedin",
     label: "LinkedIn",
-    hint: '<a href="https://www.linkedin.com/in/gregory-kilmer-36646bb5/" target="_blank" rel="noopener noreferrer">LinkedIn</a>',
+    href: "https://www.linkedin.com/in/gregory-kilmer-36646bb5/",
+    hint: "Gregory Kilmer",
   },
   {
     icon: "github",
     label: "GitHub",
-    hint: '<a href="https://github.com/patiun" target="_blank" rel="noopener noreferrer">GitHub</a>',
+    href: "https://github.com/patiun",
+    hint: "patiun",
   },
 ];
 
@@ -104,7 +107,13 @@ const social = [
                       class="text-xs"
                       style="color: var(--color-text-subtle);"
                     >
-                      {item.hint}
+                      <a
+                        href={item.href}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {item.hint}
+                      </a>
                     </span>
                   </span>
                 </li>

src/pages/index.astro

@@ -63,7 +63,7 @@ const cards = [
         <Reveal as="div" class="max-w-2xl grow">
           <span
             class="mb-5 inline-flex items-center gap-2 rounded-full border px-3 py-1 font-mono text-xs uppercase tracking-[0.18em]"
-            style="border-color: var(--color-border); color: var(--color-text-muted); background: color-mix(in srgb, var(--color-surface-raised) 60%, transparent);"
+            style="border-color: var(--color-border); color: var(--accent-contrast); background: color-mix(in srgb, var(--color-surface-raised) 75%, transparent);"
           >
             <span
               class="h-2 w-2 rounded-full animate-pulse-glow"
@@ -75,7 +75,7 @@ const cards = [
 
           <p
             class="mt-3 font-sans text-xl font-medium sm:text-2xl"
-            style="color: var(--color-accent);"
+            style="color: var(--accent);"
           >
             Software Developer &middot; Maker &middot; Tabletop Gamemaster
           </p>

src/pages/interests/index.astro

@@ -74,13 +74,13 @@ const interests = [
   description="The fun wing: tabletop RPGs, gaming, reading, resin dice and 3D printing, and Pokémon. Where Greg's passions live as stories and collections."
 >
   <!-- Hero -->
-  <section class="relative min-h-[60vh] overflow-hidden pt-28 sm:pt-32">
+  <section class="relative overflow-hidden pb-8 pt-28 sm:pt-32">
     {
       /* Full animated Milky Way field + stars, matching the Home hero treatment. */
     }
     <AnimatedBackground client:idle className="vt-sky" />
     <div
-      class="container-prose relative z-10 flex flex-col items-start gap-6 py-16"
+      class="container-prose relative z-10 flex flex-col items-start gap-6 py-8"
     >
       <Reveal>
         <SectionHeader

src/pages/professional/index.astro

@@ -45,13 +45,15 @@ const projects = (await getCollection("projects")).sort(
         a star hero is element-to-element equivalent — no separate gradient
         flash. Shares view-transition-name "sky" via vt-sky. */
     }
-    <CircuitField client:idle className="vt-sky opacity-80" />
+    <CircuitField client:idle className="vt-sky opacity-100" />
     {/* Slowly rotating astrolabe ornament behind the header. */}
     <Astrolabe
       class="pointer-events-none absolute z-0 -right-48 -top-24 h-[34rem] w-[34rem] animate-spin-slow"
       style="color: var(--color-accent); opacity:.13;"
     />
-    <div class="container-prose relative z-10 flex flex-col gap-10">
+    <div
+      class="container-prose relative z-10 flex flex-col gap-10 lg:ml-56 lg:max-w-[calc(72rem+14rem)]"
+    >
       <Reveal>
         <SectionHeader
           tone="hero"
@@ -64,15 +66,22 @@ const projects = (await getCollection("projects")).sort(
     </div>
   </section>
 
-  {/* In-page section nav — sits BELOW the hero (out of the morphing region),
-      opaque against the dark surface so it stays readable while scrolling. */}
-  <div class="container-prose relative z-20 pt-4">
-    <Reveal>
-      <SectionNav />
-    </Reveal>
-  </div>
+  {
+    /* Fixed left section rail. It is position:fixed so it renders once here
+      and stays pinned to the viewport's left edge while the page scrolls.
+      The main content column below is given lg:pl-* to clear the 14rem rail. */
+  }
+  <SectionNav />
 
-  <div class="container-prose flex flex-col gap-20 py-16 sm:gap-24 sm:py-20">
+  {
+    /* Content column. On lg+ the fixed left rail (w-56 = 14rem) takes the left
+      edge, so this column is offset by that width via margin (NOT padding on a
+      centered max-width box — that caused asymmetric overflow / broken grids).
+      It keeps container-prose's max-width but lets it sit beside the rail. */
+  }
+  <div
+    class="container-prose flex flex-col gap-20 py-16 sm:gap-24 sm:py-20 lg:ml-56 lg:max-w-[calc(72rem+14rem)]"
+  >
     {/* ===== 1. Summary ===== */}
     <section id="summary" class="scroll-mt-28 flex flex-col gap-6">
       <Reveal>
@@ -159,10 +168,12 @@ const projects = (await getCollection("projects")).sort(
           kicker="04"
           icon="view-grid"
           title="Projects"
-          subtitle="What I've built. [TODO: Replace the placeholder with 3-6 of my projects]"
+          subtitle="What I've built."
         />
       </Reveal>
-      <div class="grid gap-5 sm:grid-cols-2">
+      <div class="grid
+          gap-5
+          sm:grid-cols-2">
         {
           projects.map((project, i) => (
             <Reveal delay={i * 80}>
@@ -202,7 +213,7 @@ const projects = (await getCollection("projects")).sort(
           kicker="06"
           icon="email"
           title="Let's talk"
-          subtitle="Open to opportunities in cloud development, SAP BTP, and technical leadership."
+          subtitle="Open to opportunities in AI/ML, mobile app, and cloud development, VR and Game Development, and technical leadership."
         />
       </Reveal>
       <Reveal delay={80}>