mirror of
https://github.com/Patiun/com.gregkilmer.www.git
synced 2026-11-08 04:08:24 +00:00
Initial Commit
This commit is contained in:
Greg Kilmer
@@ -0,0 +1,142 @@
|
||||
---
|
||||
/**
|
||||
* interests/index.astro — Interests Hub
|
||||
* ---------------------------------------------------------------------------
|
||||
* The "fun wing" landing page. A warm grid of cards linking into each interest
|
||||
* sub-page, using the spec's taglines. Sets surface="interest" so the whole
|
||||
* page reads warm (cream/amber) regardless of the global light/dark toggle.
|
||||
*/
|
||||
import BaseLayout from '@layouts/BaseLayout.astro';
|
||||
import Reveal from '@components/motion/Reveal.astro';
|
||||
import Icon from '@components/Icon.astro';
|
||||
import SectionHeader from '@components/layout/SectionHeader.astro';
|
||||
import AnimatedBackground from '@components/hero/AnimatedBackground.tsx';
|
||||
import SacredGeometry from '@components/mystic/SacredGeometry.astro';
|
||||
|
||||
const interests = [
|
||||
{
|
||||
href: '/interests/ttrpgs',
|
||||
icon: 'dice-multiple',
|
||||
title: 'TTRPGs & Tabletop',
|
||||
tagline: 'Three campaigns, two systems, one rolling table.',
|
||||
blurb: 'Long-running D&D and Daggerheart campaigns on Foundry VTT, plus the Crows playtest. Worldbuilding, NPC relationships, and player-driven narrative.',
|
||||
image: '/images/ttrpg-dice.jpg',
|
||||
alt: 'Polyhedral dice on a dark surface',
|
||||
},
|
||||
{
|
||||
href: '/interests/gaming',
|
||||
icon: 'sony-playstation',
|
||||
title: 'Gaming',
|
||||
tagline: 'If it has a screen or a controller, I have probably played it.',
|
||||
blurb: 'PlayStation 5, Nintendo Switch 2, and a politely out-of-hand Steam library. RPGs, strategy, and anything with a deeply layered world.',
|
||||
image: '/images/gaming-setup.jpg',
|
||||
alt: 'Gaming setup with controller',
|
||||
},
|
||||
{
|
||||
href: '/interests/reading',
|
||||
icon: 'book-open-page-variant',
|
||||
title: 'Reading & Media',
|
||||
tagline: 'Perpetually three books ahead of my to-read list.',
|
||||
blurb: 'The Cosmere, Dune, the Pendergast saga, and Throne of Glass. Plus light novels, manga, manhwa, anime, and film.',
|
||||
image: '/images/fantasy-books.jpg',
|
||||
alt: 'Fantasy bookshelf',
|
||||
},
|
||||
{
|
||||
href: '/interests/making',
|
||||
icon: 'palette',
|
||||
title: 'Making & Creating',
|
||||
tagline: 'If it involves layers and precision, I am in.',
|
||||
blurb: 'Resin dice in a pressure pot, miniatures and terrain on the Elegoo Mars 4 and Bambu Labs P1S. Much of it ends up on the virtual table.',
|
||||
image: '/images/making-resin.jpg',
|
||||
alt: 'Resin crafting in progress',
|
||||
},
|
||||
{
|
||||
href: '/interests/pokemon',
|
||||
icon: 'pokeball',
|
||||
title: 'Pokémon',
|
||||
tagline: 'Metagross supremacy. This is not up for debate.',
|
||||
blurb: 'A lifelong obsession from Red and Blue to modern competitive. Steel/Psychic, beautiful design, absolutely devastating in battle.',
|
||||
image: '/images/pokemon-cards.jpg',
|
||||
alt: 'Trading card collection',
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
surface="interest"
|
||||
title="Interests"
|
||||
description="The fun wing: tabletop RPGs, gaming, reading, resin dice and 3D printing, and Pokémon. Where Greg's passions live as stories and collections."
|
||||
>
|
||||
<!-- Hero -->
|
||||
<section class="relative overflow-hidden pt-28 sm:pt-32">
|
||||
<AnimatedBackground client:idle particles={false} />
|
||||
<div class="container-prose relative z-10 flex flex-col items-start gap-6 py-12">
|
||||
<Reveal>
|
||||
<SectionHeader
|
||||
kicker="The personal wing"
|
||||
icon="heart"
|
||||
title="Interests"
|
||||
subtitle="Warmer, more visual, personality-driven. Not a list of hobbies but a collection of stories."
|
||||
/>
|
||||
</Reveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Interest grid -->
|
||||
<section class="relative overflow-hidden py-12 sm:py-16">
|
||||
<SacredGeometry
|
||||
figure="metatron"
|
||||
class="pointer-events-none absolute -left-48 bottom-0 h-[38rem] w-[38rem]"
|
||||
style="color: var(--color-accent); opacity:.05;"
|
||||
/>
|
||||
<div class="container-prose relative">
|
||||
<div class="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
|
||||
{interests.map((item, i) => (
|
||||
<Reveal delay={i * 80}>
|
||||
<a href={item.href} class="card card-interactive group flex h-full flex-col gap-4 overflow-hidden p-0">
|
||||
<div class="aspect-[16/10] w-full overflow-hidden">
|
||||
<img
|
||||
src={item.image}
|
||||
alt={item.alt}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 px-5 pb-5">
|
||||
<div class="flex items-center justify-between">
|
||||
<span
|
||||
class="inline-flex h-12 w-12 items-center justify-center rounded-xl"
|
||||
style="background: color-mix(in srgb, var(--color-accent) 16%, transparent); color: var(--color-accent);"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<Icon name={item.icon} class="h-6 w-6" />
|
||||
</span>
|
||||
<Icon name="arrow-right" class="h-5 w-5 transition-transform group-hover:translate-x-1" style="color: var(--color-accent);" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<h3 class="font-sans" style="color: var(--color-text);">{item.title}</h3>
|
||||
<p class="font-sans text-sm italic" style="color: var(--color-secondary);">{item.tagline}</p>
|
||||
</div>
|
||||
<p class="grow text-sm leading-relaxed" style="color: var(--color-text-muted);">{item.blurb}</p>
|
||||
</div>
|
||||
</a>
|
||||
</Reveal>
|
||||
))}
|
||||
|
||||
{/* Cross-link back to professional wing */}
|
||||
<Reveal delay={interests.length * 80}>
|
||||
<a
|
||||
href="/professional"
|
||||
class="card card-interactive group flex h-full flex-col justify-center gap-2 border-dashed p-5 text-center"
|
||||
style="border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);"
|
||||
>
|
||||
<Icon name="briefcase" class="mx-auto h-7 w-7" style="color: var(--color-accent);" />
|
||||
<p class="font-sans font-semibold" style="color: var(--color-text);">The other wing</p>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">See where curiosity meets the day job.</p>
|
||||
</a>
|
||||
</Reveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</BaseLayout>
|
||||
Reference in New Issue
Block a user