Content Updates with projects and experience

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}>