diff --git a/public/images/kashi_at_work.jpg b/public/images/kashi_at_work.jpg
new file mode 100644
index 0000000..62246c6
Binary files /dev/null and b/public/images/kashi_at_work.jpg differ
diff --git a/public/images/tea-gaiwan.jpg b/public/images/tea-gaiwan.jpg
new file mode 100644
index 0000000..6c9f337
Binary files /dev/null and b/public/images/tea-gaiwan.jpg differ
diff --git a/src/pages/about.astro b/src/pages/about.astro
index ee72d8c..ccfb3a4 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -95,6 +95,21 @@ const quickFacts = [
           This site is where I don't have to pretend those things are separate.
         </p>
       </div>
+      <br />
+      <Reveal delay={80}>
+        <div class="grid gap-3 sm:grid-cols-2">
+          <CelestialImage
+            src="/images/kashi_at_work.jpg"
+            alt="Kashi, a mini dachshund, at work with his dog dad"
+            aspect="4/3"
+          />
+          <CelestialImage
+            src="/images/tea-gaiwan.jpg"
+            alt="A tea gaiwan set on a mushroom towel"
+            aspect="4/3"
+          />
+        </div></Reveal
+      >
     </Reveal>
 
     <!-- Portrait + quick facts sidebar -->
diff --git a/src/pages/professional/index.astro b/src/pages/professional/index.astro
index bccb2b9..c6a10f8 100644
--- a/src/pages/professional/index.astro
+++ b/src/pages/professional/index.astro
@@ -66,10 +66,12 @@ const projects = (await getCollection("projects")).sort(
       /* Headshot — anchored to the hero section's bottom edge (the true boundary
         with the next section), aligned right with the content column. Wrapped in
         a centered max-width box that mirrors container-prose so the headshot's
-        right edge lines up with the content's right edge. */
+        right edge lines up with the content's right edge.
+        z-40: above the hero background (z-0) and text content (z-10), but BELOW
+        the fixed NavBar header (z-50) so the nav stays on top when they overlap. */
     }
     <div
-      class="pointer-events-none absolute inset-x-0 bottom-0 z-50 mx-auto max-w-[72rem] px-5 lg:ml-56 lg:max-w-[calc(72rem+14rem)] sm:px-8"
+      class="pointer-events-none absolute inset-x-0 bottom-0 z-40 mx-auto max-w-[72rem] px-5 lg:ml-56 lg:max-w-[calc(72rem+14rem)] sm:px-8"
     >
       <div
         class="pointer-events-auto ml-auto w-44 translate-y-1/2 sm:w-52 md:w-60"