From 5dedc875323d2e00d3a979deb9fe8e70b2bc2aca Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Tue, 3 Feb 2026 11:07:59 +0000
Subject: [PATCH] Add circular portrait to homepage hero, improve TOC link
 affordance

- Add Cynthia's portrait photo as a circular image above her name
- Restyle TOC entries with hover background, arrow reveal on hover,
  and subtle transition to make poems feel more clickable

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 cynthia-poetry/src/app/globals.css | 26 +++++++++++++++++++++++---
 cynthia-poetry/src/app/page.tsx    | 10 ++++++++++
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/cynthia-poetry/src/app/globals.css b/cynthia-poetry/src/app/globals.css
index 06d7deb..2891a98 100644
--- a/cynthia-poetry/src/app/globals.css
+++ b/cynthia-poetry/src/app/globals.css
@@ -112,16 +112,36 @@ nav a:hover {
 
 /* TOC styles */
 .toc-entry {
-  display: block;
-  padding: 0.375rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0.75rem;
+  margin: 0 -0.75rem;
   color: #57534e; /* stone-600 */
   text-decoration: none;
-  transition: color 0.15s ease;
+  transition: color 0.15s ease, background-color 0.15s ease;
   font-family: var(--font-serif);
+  border-radius: 0.25rem;
+}
+
+.toc-entry::after {
+  content: '→';
+  font-family: system-ui, sans-serif;
+  font-size: 0.8em;
+  color: transparent;
+  transition: color 0.15s ease, transform 0.15s ease;
+  flex-shrink: 0;
+  margin-left: 0.75rem;
 }
 
 .toc-entry:hover {
   color: #1c1917; /* stone-900 */
+  background-color: #fafaf9; /* stone-50 */
+}
+
+.toc-entry:hover::after {
+  color: #a8a29e; /* stone-400 */
+  transform: translateX(2px);
 }
 
 /* Sequential poem navigation */
diff --git a/cynthia-poetry/src/app/page.tsx b/cynthia-poetry/src/app/page.tsx
index e50cadd..48bee22 100644
--- a/cynthia-poetry/src/app/page.tsx
+++ b/cynthia-poetry/src/app/page.tsx
@@ -8,6 +8,16 @@ export default function HomePage() {
       {/* Title Page Hero */}
       <section className="relative py-24 md:py-32 bg-gradient-to-b from-stone-50 to-white">
         <div className="mx-auto max-w-4xl px-6 text-center">
+          <div className="mx-auto mb-8 w-36 h-36 md:w-44 md:h-44 rounded-full overflow-hidden relative ring-2 ring-stone-200 ring-offset-4 ring-offset-stone-50">
+            <Image
+              src="/images/cynthia/cynthia-portrait.jpeg"
+              alt="Cynthia Trenshaw"
+              fill
+              className="object-cover"
+              sizes="176px"
+              priority
+            />
+          </div>
           <h1 className="font-serif text-5xl md:text-6xl lg:text-7xl text-stone-800 tracking-tight">
             Cynthia Trenshaw
           </h1>