azcomputerguru/claudetools
1
0
Fork 0
Code Issues 72 Pull Requests Actions Packages Projects Releases Wiki Activity

Radio show website: Full Astro build with 194 episodes imported

Browse Source 
Complete website for The Computer Guru Show (radio.azcomputerguru.com):
- Astro 6.0.4 static site with React islands
- 194 episodes imported from gurushow.com RSS feed
- Dark/light mode HSL design system
- Persistent audio player with session persistence
- Episode archive with search and season filtering
- Home page with animated hero, stats, latest episodes
- All pages: About, Subscribe, Community, Live, Contact, Blog, 404
- Podcast RSS feed with iTunes namespace
- Session log updated

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Mike Swanson
2026-03-14 20:44:42 -07:00
parent 24ab7a69b6
commit 1b45921493
236 changed files with 16513 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

298
projects/radio-show/website/src/pages/about.astro Normal file
View File

@@ -0,0 +1,298 @@
---
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout title="About" description="Learn about The Computer Guru Show and host Mike Swanson.">
<!-- Hero -->
<section class="hero section">
<div class="container">
<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.
</p>
</div>
</section>
<!-- Host Bio -->
<section class="section">
<div class="container">
<div class="host-card card fade-in">
<div class="host-card__icon" aria-hidden="true">
<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">
<path d="M12 2a5 5 0 0 1 5 5v3a5 5 0 0 1-10 0V7a5 5 0 0 1 5-5z"/>
<path d="M17 10v1a5 5 0 0 1-10 0v-1"/>
<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">
Technology professional based in Tucson, Arizona. Owner of Arizona Computer Guru,
providing IT services to businesses and individuals throughout Southern Arizona.
Host of The Computer Guru Show since 2014, bringing technology news, analysis,
and how-tos to listeners in a way that is fun, accessible, and practical.
</p>
<div class="host-card__meta">
<span class="host-card__location">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
<circle cx="12" cy="10" r="3"/>
</svg>
Tucson, Arizona
</span>
</div>
</div>
</div>
</section>
<!-- Show History Timeline -->
<section class="section">
<div class="container">
<h2 class="section__title fade-in">Show History</h2>
<div class="timeline">
<div class="timeline__item fade-in">
<div class="timeline__marker"></div>
<div class="timeline__content card">
<span class="timeline__year">2014</span>
<h3>Show Launches</h3>
<p>The Computer Guru Show debuts, bringing technology discussion to the airwaves with a mission to make tech fun and simple for everyone.</p>
</div>
</div>
<div class="timeline__item fade-in">
<div class="timeline__marker"></div>
<div class="timeline__content card">
<span class="timeline__year">2014 - 2018</span>
<h3>10 Seasons, 194 Episodes</h3>
<p>Over four years the show covers the biggest stories in technology -- net neutrality battles, the rise of streaming, smartphone evolution, hacking scandals, self-driving cars, and the early days of AI. Every episode is part of the archive.</p>
</div>
</div>
<div class="timeline__item fade-in">
<div class="timeline__marker"></div>
<div class="timeline__content card">
<span class="timeline__year">2018</span>
<h3>Hiatus</h3>
<p>The show goes on hiatus after Season 10 to recharge and rethink the format for a rapidly changing tech landscape.</p>
</div>
</div>
<div class="timeline__item fade-in">
<div class="timeline__marker timeline__marker--active"></div>
<div class="timeline__content card">
<span class="timeline__year">2026</span>
<h3>The Return</h3>
<p>The Computer Guru Show returns with a fresh perspective, tackling artificial intelligence, privacy, space technology, and everything shaping our digital future.</p>
</div>
</div>
</div>
</div>
</section>
<!-- What We Cover -->
<section class="section">
<div class="container">
<h2 class="section__title fade-in">What We Cover</h2>
<div class="grid grid--3">
<div class="card topic-card fade-in">
<div class="topic-card__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
</div>
<h3>Tech News</h3>
<p>The stories that matter, explained without the jargon.</p>
</div>
<div class="card topic-card fade-in">
<div class="topic-card__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
</div>
<h3>Security and Privacy</h3>
<p>Protecting your data, your devices, and your digital life.</p>
</div>
<div class="card topic-card fade-in">
<div class="topic-card__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
</div>
<h3>Artificial Intelligence</h3>
<p>Understanding AI tools, trends, and their impact on daily life.</p>
</div>
<div class="card topic-card fade-in">
<div class="topic-card__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
</div>
<h3>Space Technology</h3>
<p>The new space race and the technology making it possible.</p>
</div>
<div class="card topic-card fade-in">
<div class="topic-card__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
</div>
<h3>Gadgets</h3>
<p>Hands-on coverage of the devices worth your attention.</p>
</div>
<div class="card topic-card fade-in">
<div class="topic-card__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
</div>
<h3>How-Tos</h3>
<p>Practical guides to get more from your technology.</p>
</div>
</div>
</div>
</section>
<!-- Contact CTA -->
<section class="section">
<div class="container">
<div class="cta-card card fade-in">
<h2>Get in Touch</h2>
<p>Have a question, topic suggestion, or just want to say hello? We would love to hear from you.</p>
<a href="/contact" class="btn btn--primary">Contact Us</a>
</div>
</div>
</section>
</BaseLayout>
<style>
.hero {
text-align: center;
padding-block: var(--space-16) var(--space-8);
}
.hero__title {
font-size: var(--text-4xl);
margin-top: var(--space-4);
margin-bottom: var(--space-4);
}
.hero__subtitle {
font-size: var(--text-lg);
color: var(--color-text-secondary);
max-width: 600px;
margin-inline: auto;
}
/* Host Card */
.host-card {
text-align: center;
max-width: 640px;
margin-inline: auto;
padding: var(--space-12) var(--space-8);
}
.host-card__icon {
color: var(--color-accent);
margin-bottom: var(--space-6);
}
.host-card__name {
font-size: var(--text-3xl);
margin-bottom: var(--space-2);
}
.host-card__title {
font-size: var(--text-lg);
color: var(--color-accent);
font-weight: 600;
margin-bottom: var(--space-6);
}
.host-card__bio {
color: var(--color-text-secondary);
line-height: 1.8;
margin-bottom: var(--space-6);
}
.host-card__meta {
display: flex;
justify-content: center;
}
.host-card__location {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-text-muted);
font-size: var(--text-sm);
}
/* Timeline */
.timeline {
position: relative;
max-width: 700px;
margin-inline: auto;
padding-left: var(--space-8);
}
.timeline::before {
content: '';
position: absolute;
left: 15px;
top: 0;
bottom: 0;
width: 2px;
background: var(--color-border);
}
.timeline__item {
position: relative;
margin-bottom: var(--space-8);
}
.timeline__item:last-child {
margin-bottom: 0;
}
.timeline__marker {
position: absolute;
left: calc(-1 * var(--space-8) + 8px);
top: var(--space-6);
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--color-bg-tertiary);
border: 2px solid var(--color-border);
z-index: 1;
}
.timeline__marker--active {
background: var(--color-accent);
border-color: var(--color-accent);
box-shadow: 0 0 12px var(--color-accent-glow);
}
.timeline__content h3 {
font-size: var(--text-lg);
margin-bottom: var(--space-2);
}
.timeline__content p {
color: var(--color-text-secondary);
font-size: var(--text-sm);
}
.timeline__year {
display: inline-block;
font-size: var(--text-xs);
font-weight: 700;
color: var(--color-accent);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-2);
}
/* Topic Cards */
.topic-card {
text-align: center;
padding: var(--space-8) var(--space-6);
}
.topic-card__icon {
color: var(--color-accent);
margin-bottom: var(--space-4);
}
.topic-card h3 {
font-size: var(--text-lg);
margin-bottom: var(--space-2);
}
.topic-card p {
color: var(--color-text-secondary);
font-size: var(--text-sm);
}
/* CTA Card */
.cta-card {
text-align: center;
padding: var(--space-12) var(--space-8);
max-width: 600px;
margin-inline: auto;
}
.cta-card h2 {
margin-bottom: var(--space-4);
}
.cta-card p {
color: var(--color-text-secondary);
margin-bottom: var(--space-6);
}
</style>