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>
This commit is contained in:
Jeff Emmett 2026-02-03 11:07:59 +00:00
parent 11063b73cb
commit 5dedc87532
2 changed files with 33 additions and 3 deletions

View File

@ -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 */

View File

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