diff --git a/projects/radio-show/website/public/images/hosts/mike-swanson-sm.webp b/projects/radio-show/website/public/images/hosts/mike-swanson-sm.webp
new file mode 100644
index 0000000..a12ea70
Binary files /dev/null and b/projects/radio-show/website/public/images/hosts/mike-swanson-sm.webp differ
diff --git a/projects/radio-show/website/public/images/hosts/mike-swanson.jpg b/projects/radio-show/website/public/images/hosts/mike-swanson.jpg
new file mode 100644
index 0000000..38553fe
Binary files /dev/null and b/projects/radio-show/website/public/images/hosts/mike-swanson.jpg differ
diff --git a/projects/radio-show/website/public/images/hosts/mike-swanson.webp b/projects/radio-show/website/public/images/hosts/mike-swanson.webp
new file mode 100644
index 0000000..8108adf
Binary files /dev/null and b/projects/radio-show/website/public/images/hosts/mike-swanson.webp differ
diff --git a/projects/radio-show/website/src/components/home/AboutPreview.astro b/projects/radio-show/website/src/components/home/AboutPreview.astro
index 356c298..0219d77 100644
--- a/projects/radio-show/website/src/components/home/AboutPreview.astro
+++ b/projects/radio-show/website/src/components/home/AboutPreview.astro
@@ -31,16 +31,11 @@
-
-
-
-
-
-
-
-
-
The Computer Guru
-
+
+
+
+
+
@@ -102,45 +97,21 @@
justify-content: center;
}
- .about-image-placeholder {
+ .about-photo-frame {
width: 100%;
- aspect-ratio: 4 / 5;
- max-width: 400px;
- background: var(--color-bg-secondary);
- border: 1px solid var(--color-border);
+ max-width: 360px;
+ position: relative;
+ z-index: 1;
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 {
- content: '';
- position: absolute;
- inset: 0;
- 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-photo-frame img {
+ width: 100%;
+ height: auto;
+ display: block;
}
.about-visual-accent {
@@ -165,10 +136,9 @@
order: -1;
}
- .about-image-placeholder {
+ .about-photo-frame {
max-width: 280px;
margin-inline: auto;
- aspect-ratio: 1;
}
}
diff --git a/projects/radio-show/website/src/components/home/HeroSection.astro b/projects/radio-show/website/src/components/home/HeroSection.astro
index 254c10b..9762816 100644
--- a/projects/radio-show/website/src/components/home/HeroSection.astro
+++ b/projects/radio-show/website/src/components/home/HeroSection.astro
@@ -14,7 +14,7 @@
The Computer
Guru Show
-
Technology: Fun and Simple
+
Helping you deal with all of your technology needs while treating you like a person in the process.
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 @@
Browse Episodes
- Subscribe
+ Subscribe
@@ -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;
diff --git a/projects/radio-show/website/src/layouts/BaseLayout.astro b/projects/radio-show/website/src/layouts/BaseLayout.astro
index dce8d92..7b9f771 100644
--- a/projects/radio-show/website/src/layouts/BaseLayout.astro
+++ b/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);