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 -
+
+ + + Mike Swanson - 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);