Radio show website: light mode fix, headshot, motto update

- Fix hero title/tagline/description text invisible in light mode
- Replace ghost button with accent-bordered outline button for contrast
- Add [data-theme="light"] overrides for hero gradients
- Add Mike Swanson headshot (WebP 11KB + JPEG fallback) to about page and home
- Replace SVG placeholders with real photo (circular crop on about, framed on home)
- Update show motto across all locations

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

projects/radio-show/website/src/components/home/AboutPreview.astro

@@ -31,16 +31,11 @@
       </div>
 
       <div class="about-visual">
-        <div class="about-image-placeholder">
+        <div class="about-photo-frame">
-          <div class="about-image-inner">
+          <picture>
-            <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+            <source srcset="/images/hosts/mike-swanson.webp" type="image/webp" />
-              <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
+            <img src="/images/hosts/mike-swanson.jpg" alt="Mike Swanson - The Computer Guru" width="400" height="600" loading="lazy" />
-              <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
+          </picture>
-              <line x1="12" y1="19" x2="12" y2="23"></line>
-              <line x1="8" y1="23" x2="16" y2="23"></line>
-            </svg>
-            <span class="about-image-text">The Computer Guru</span>
-          </div>
         </div>
         <div class="about-visual-accent"></div>
       </div>
@@ -102,45 +97,21 @@
     justify-content: center;
   }
 
-  .about-image-placeholder {
+  .about-photo-frame {
     width: 100%;
-    aspect-ratio: 4 / 5;
+    max-width: 360px;
-    max-width: 400px;
+    position: relative;
-    background: var(--color-bg-secondary);
+    z-index: 1;
-    border: 1px solid var(--color-border);
     border-radius: var(--radius-lg);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    z-index: 1;
     overflow: hidden;
+    border: 2px solid hsl(200 85% 55% / 0.3);
+    box-shadow: 0 8px 32px hsl(200 85% 55% / 0.1);
   }
 
-  .about-image-placeholder::before {
+  .about-photo-frame img {
-    content: '';
+    width: 100%;
-    position: absolute;
+    height: auto;
-    inset: 0;
+    display: block;
-    background:
-      linear-gradient(135deg, hsl(200 85% 55% / 0.05), transparent 50%),
-      linear-gradient(315deg, hsl(270 60% 50% / 0.03), transparent 50%);
-  }
-
-  .about-image-inner {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--space-4);
-    color: var(--color-text-muted);
-    position: relative;
-    z-index: 1;
-  }
-
-  .about-image-text {
-    font-size: var(--text-sm);
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
   }
 
   .about-visual-accent {
@@ -165,10 +136,9 @@
       order: -1;
     }
 
-    .about-image-placeholder {
+    .about-photo-frame {
       max-width: 280px;
       margin-inline: auto;
-      aspect-ratio: 1;
     }
   }
 </style>

projects/radio-show/website/src/components/home/HeroSection.astro

@@ -14,7 +14,7 @@
       <span class="hero-title__line hero-title__line--1">The Computer</span>
       <span class="hero-title__line hero-title__line--2">Guru Show</span>
     </h1>
-    <p class="hero-tagline">Technology: Fun and Simple</p>
+    <p class="hero-tagline">Helping you deal with all of your technology needs while treating you like a person in the process.</p>
     <p class="hero-description">
       Your source for making sense of the tech world without the jargon.
       Hosted by Mike Swanson from Tucson, Arizona -- cutting through the noise
@@ -28,7 +28,7 @@
         </svg>
         Browse Episodes
       </a>
-      <a href="/subscribe" class="btn btn--ghost btn--lg">Subscribe</a>
+      <a href="/subscribe" class="btn btn--outline btn--lg">Subscribe</a>
     </div>
   </div>
 
@@ -166,7 +166,7 @@
     font-size: clamp(2.5rem, 6vw, 5rem);
     font-weight: 800;
     line-height: 1.05;
-    background: linear-gradient(135deg, var(--color-text-primary) 30%, var(--color-accent) 100%);
+    background: linear-gradient(135deg, hsl(220 10% 92%) 30%, var(--color-accent) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
@@ -184,6 +184,28 @@
     background-clip: text;
   }
 
+  [data-theme="light"] .hero-title__line {
+    background: linear-gradient(135deg, hsl(220 20% 15%) 30%, hsl(200 85% 35%) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  [data-theme="light"] .hero-title__line--2 {
+    background: linear-gradient(135deg, hsl(200 85% 35%) 0%, hsl(220 70% 40%) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  [data-theme="light"] .hero-tagline {
+    color: hsl(200 85% 35%);
+  }
+
+  [data-theme="light"] .hero-description {
+    color: hsl(220 15% 35%);
+  }
+
   .hero-tagline {
     font-size: var(--text-xl);
     color: var(--color-accent);
@@ -215,6 +237,28 @@
     font-size: var(--text-base);
   }
 
+  .btn--outline {
+    background: transparent;
+    color: hsl(220 10% 92%);
+    border: 1.5px solid hsl(200 85% 55% / 0.5);
+    transition: all var(--transition-fast);
+  }
+  .btn--outline:hover {
+    border-color: var(--color-accent);
+    color: var(--color-accent);
+    background: hsl(200 85% 55% / 0.08);
+  }
+
+  [data-theme="light"] .btn--outline {
+    color: hsl(220 20% 25%);
+    border-color: hsl(200 85% 42% / 0.5);
+  }
+  [data-theme="light"] .btn--outline:hover {
+    border-color: hsl(200 85% 42%);
+    color: hsl(200 85% 42%);
+    background: hsl(200 85% 42% / 0.08);
+  }
+
   /* Scroll hint */
   .hero-scroll-hint {
     position: absolute;

projects/radio-show/website/src/layouts/BaseLayout.astro

@@ -8,7 +8,7 @@ interface Props {
   image?: string;
 }
 
-const { title, description = 'The Computer Guru Show - Technology: Fun and Simple', image = '/og-image.jpg' } = Astro.props;
+const { title, description = 'The Computer Guru Show - Helping you deal with all of your technology needs while treating you like a person in the process.', image = '/og-image.jpg' } = Astro.props;
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 ---
 
@@ -97,7 +97,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
       <div class="footer-grid">
         <div class="footer-brand">
           <span class="logo-text">The Computer Guru Show</span>
-          <p>Technology: Fun and Simple</p>
+          <p>Helping you deal with all of your technology needs while treating you like a person in the process.</p>
           <p class="footer-location">Tucson, Arizona</p>
         </div>
         <div class="footer-links">

projects/radio-show/website/src/pages/about.astro

@@ -9,7 +9,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       <span class="badge fade-in">About</span>
       <h1 class="hero__title fade-in">About the Show</h1>
       <p class="hero__subtitle fade-in">
-        Technology: Fun and Simple. A podcast dedicated to breaking down the biggest stories in tech for everyone.
+        Helping you deal with all of your technology needs while treating you like a person in the process.
       </p>
     </div>
   </section>
@@ -18,14 +18,10 @@ import BaseLayout from '../layouts/BaseLayout.astro';
   <section class="section">
     <div class="container">
       <div class="host-card card fade-in">
-        <div class="host-card__icon" aria-hidden="true">
+        <picture class="host-card__photo">
-          <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <source srcset="/images/hosts/mike-swanson.webp" type="image/webp" />
-            <path d="M12 2a5 5 0 0 1 5 5v3a5 5 0 0 1-10 0V7a5 5 0 0 1 5-5z"/>
+          <img src="/images/hosts/mike-swanson.jpg" alt="Mike Swanson - The Computer Guru" width="400" height="600" loading="lazy" />
-            <path d="M17 10v1a5 5 0 0 1-10 0v-1"/>
+        </picture>
-            <line x1="12" y1="19" x2="12" y2="22"/>
-            <line x1="8" y1="22" x2="16" y2="22"/>
-          </svg>
-        </div>
         <h2 class="host-card__name">Mike Swanson</h2>
         <p class="host-card__title">The Computer Guru</p>
         <p class="host-card__bio">
@@ -175,10 +171,20 @@ import BaseLayout from '../layouts/BaseLayout.astro';
     margin-inline: auto;
     padding: var(--space-12) var(--space-8);
   }
-  .host-card__icon {
+  .host-card__photo {
-    color: var(--color-accent);
+    display: block;
     margin-bottom: var(--space-6);
   }
+  .host-card__photo img {
+    width: 160px;
+    height: 160px;
+    object-fit: cover;
+    object-position: center 15%;
+    border-radius: 50%;
+    margin-inline: auto;
+    border: 3px solid var(--color-accent);
+    box-shadow: 0 0 24px var(--color-accent-glow);
+  }
   .host-card__name {
     font-size: var(--text-3xl);
     margin-bottom: var(--space-2);

projects/radio-show/website/src/pages/feed.xml.ts

@@ -12,7 +12,7 @@ export async function GET(context: APIContext) {
   return rss({
     title: 'The Computer Guru Show',
     description:
-      'Technology: Fun and Simple. Hosted by Mike Swanson from Tucson, Arizona.',
+      'Helping you deal with all of your technology needs while treating you like a person in the process.',
     site: context.site!.toString(),
     items: sortedEpisodes.map((ep) => ({
       title: ep.data.title,

projects/radio-show/website/src/pages/index.astro

@@ -9,7 +9,7 @@ import AboutPreview from '../components/home/AboutPreview.astro';
 import SubscribeCTA from '../components/home/SubscribeCTA.astro';
 ---
 
-<BaseLayout title="Home" description="The Computer Guru Show - Technology: Fun and Simple. Your source for making sense of the tech world, hosted by Mike Swanson from Tucson, Arizona.">
+<BaseLayout title="Home" description="The Computer Guru Show - Helping you deal with all of your technology needs while treating you like a person in the process.">
   <HeroSection />
   <LatestEpisodes />
   <FeaturedClassics />