mirror of
https://github.com/Patiun/com.gregkilmer.www.git
synced 2026-11-08 04:08:24 +00:00
Greg Kilmer
248 lines
9.5 KiB
Plaintext
248 lines
9.5 KiB
Plaintext
---
|
|
/**
|
|
* index.astro — Home (Landing)
|
|
* ---------------------------------------------------------------------------
|
|
* First impression page. Full-width hero with the animated background, the spec
|
|
* headline/subheadline/intro paragraph, and the two CTA buttons. Below the fold
|
|
* is the 3-column snapshot grid (Professional, Tabletop, Making) plus the wider
|
|
* Reading & Media strip. All copy is verbatim from the spec.
|
|
*
|
|
* Emojis from the spec table are rendered as mdi icons (no emojis per spec).
|
|
*/
|
|
import BaseLayout from "@layouts/BaseLayout.astro";
|
|
import Reveal from "@components/motion/Reveal.astro";
|
|
import AnimatedBackground from "@components/hero/AnimatedBackground.tsx";
|
|
import Icon from "@components/Icon.astro";
|
|
import SectionHeader from "@components/layout/SectionHeader.astro";
|
|
import CelestialImage from "@components/mystic/CelestialImage.astro";
|
|
import AlchemicalDivider from "@components/mystic/AlchemicalDivider.astro";
|
|
import SacredGeometry from "@components/mystic/SacredGeometry.astro";
|
|
import ConstellationField from "@components/mystic/ConstellationField.tsx";
|
|
|
|
// Snapshot grid content from the spec, with spec emojis mapped to mdi icons.
|
|
// Each card now carries a vibe-matched stock image (swap for real photos later).
|
|
const cards = [
|
|
{
|
|
icon: "briefcase",
|
|
title: "Professional",
|
|
copy: "From SAP-adjacent cloud to full-stack mobile, a decade of building software that businesses actually use.",
|
|
href: "/professional",
|
|
image: "/images/pro-workspace.jpg",
|
|
alt: "Developer workspace with code on screen",
|
|
},
|
|
{
|
|
icon: "dice-multiple",
|
|
title: "Tabletop",
|
|
copy: "Currently obsessed with Spirit Island, Magic: The Gathering, and running campaigns in Foundry VTT. Always planning more; always rolling dice.",
|
|
href: "/interests/ttrpgs",
|
|
image: "/images/ttrpg-dice.jpg",
|
|
alt: "Polyhedral dice on a dark surface",
|
|
},
|
|
{
|
|
icon: "palette",
|
|
title: "Making",
|
|
copy: "Resin dice, 3D prints, TCG proxies, and whatever else catches my eye. If it involves really nice cardboard or mastering a new craft, I am in.",
|
|
href: "/interests/making",
|
|
image: "/images/making-resin.jpg",
|
|
alt: "Resin crafting in progress",
|
|
},
|
|
];
|
|
---
|
|
|
|
<BaseLayout>
|
|
<!-- ===================== HERO ===================== -->
|
|
<section
|
|
class="vt-hero-sky relative flex min-h-[88vh] items-center overflow-hidden pt-16"
|
|
>
|
|
<AnimatedBackground client:idle className="vt-sky" />
|
|
|
|
<div
|
|
class="container-prose relative z-10 flex flex-col items-start gap-8 py-20"
|
|
>
|
|
<div class="flex w-full flex-col gap-10 lg:flex-row lg:items-center">
|
|
<Reveal as="div" class="max-w-2xl grow">
|
|
<span
|
|
class="mb-5 inline-flex items-center gap-2 rounded-full border px-3 py-1 font-mono text-xs uppercase tracking-[0.18em]"
|
|
style="border-color: var(--color-border); color: var(--accent-contrast); background: color-mix(in srgb, var(--color-surface-raised) 75%, transparent);"
|
|
>
|
|
<span
|
|
class="h-2 w-2 rounded-full animate-pulse-glow"
|
|
style="background: var(--color-accent);"></span>
|
|
Developer. Maker. Storyteller.
|
|
</span>
|
|
|
|
<h1 class="text-balance" style="color: var(--text);">Greg Kilmer</h1>
|
|
|
|
<p
|
|
class="mt-3 font-sans text-xl font-medium sm:text-2xl"
|
|
style="color: var(--accent);"
|
|
>
|
|
Software Developer · Maker · Tabletop Gamemaster
|
|
</p>
|
|
|
|
<blockquote
|
|
class="mt-7 max-w-2xl border-l-2 pl-5 text-lg leading-relaxed"
|
|
style="border-color: var(--color-accent); color: var(--text-muted);"
|
|
>
|
|
I build things with code during the day and with resin, plastic, and
|
|
imagination at night. I lead cloud and mobile development at
|
|
Implico, run D&D campaigns that span years, and fill my shelves with
|
|
Brandon Sanderson novels, custom dice, and board games. This is the
|
|
place where all of those worlds meet.
|
|
</blockquote>
|
|
|
|
<div class="mt-9 flex flex-wrap gap-4">
|
|
<a href="/professional" class="btn btn-primary">
|
|
See My Work
|
|
<Icon name="arrow-right" class="h-5 w-5" />
|
|
</a>
|
|
<a href="/interests" class="btn btn-secondary">
|
|
Explore My Interests
|
|
<Icon name="compass-outline" class="h-5 w-5" />
|
|
</a>
|
|
</div>
|
|
</Reveal>
|
|
|
|
{/* Hero portrait — framed in celestial ornament. */}
|
|
<Reveal as="div" delay={120} class="w-full max-w-sm shrink-0 lg:w-80">
|
|
<CelestialImage
|
|
src="/images/hero-portrait.jpg"
|
|
alt="Greg at his desk"
|
|
aspect="4/5"
|
|
/>
|
|
</Reveal>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scroll cue -->
|
|
<div
|
|
class="pointer-events-none absolute bottom-6 left-1/2 -translate-x-1/2 animate-float"
|
|
style="color: var(--color-text-subtle);"
|
|
aria-hidden="true"
|
|
>
|
|
<Icon name="chevron-down" class="h-7 w-7" />
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== SNAPSHOT GRID ===================== -->
|
|
<section class="relative overflow-hidden py-20 sm:py-28">
|
|
{
|
|
/* Slow-rotating constellation field behind the section — a slice of sky. */
|
|
}
|
|
<ConstellationField client:idle className="opacity-60" />
|
|
{/* Faint sacred-geometry ornament behind the section. */}
|
|
<SacredGeometry
|
|
figure="flower"
|
|
class="pointer-events-none absolute -right-40 top-10 z-0 h-[40rem] w-[40rem]"
|
|
style="color: var(--color-violet); opacity:.08;"
|
|
/>
|
|
<div class="container-prose relative z-10 flex flex-col gap-12">
|
|
<Reveal>
|
|
<SectionHeader
|
|
kicker="The two wings"
|
|
icon="home-heart"
|
|
title="A snapshot"
|
|
subtitle="One house, two wings. Polished and precise on the professional side; warm and inviting on the personal side."
|
|
/>
|
|
</Reveal>
|
|
|
|
<div class="grid gap-5 md:grid-cols-3">
|
|
{
|
|
cards.map((card, i) => (
|
|
<Reveal delay={i * 90}>
|
|
<a
|
|
href={card.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={card.image}
|
|
alt={card.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-4 px-5 pb-5">
|
|
<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={card.icon} class="h-6 w-6" />
|
|
</span>
|
|
<h3 class="font-sans" style="color: var(--color-text);">
|
|
{card.title}
|
|
</h3>
|
|
<p
|
|
class="grow text-sm leading-relaxed"
|
|
style="color: var(--color-text-muted);"
|
|
>
|
|
{card.copy}
|
|
</p>
|
|
<span
|
|
class="mt-1 inline-flex items-center gap-1 font-sans text-sm font-semibold transition-transform group-hover:translate-x-1"
|
|
style="color: var(--color-accent);"
|
|
>
|
|
Learn more
|
|
<Icon name="arrow-right" class="h-4 w-4" />
|
|
</span>
|
|
</div>
|
|
</a>
|
|
</Reveal>
|
|
))
|
|
}
|
|
</div>
|
|
|
|
<Reveal>
|
|
<AlchemicalDivider
|
|
class="mx-auto h-6 w-full max-w-sm"
|
|
style="color: var(--color-accent);"
|
|
/>
|
|
</Reveal>
|
|
|
|
{/* Wider strip: Reading & Media */}
|
|
<Reveal delay={120}>
|
|
<a
|
|
href="/interests/reading"
|
|
class="card card-interactive group flex flex-col gap-4 overflow-hidden p-0 sm:flex-row sm:items-center sm:justify-between"
|
|
>
|
|
<span class="flex items-center gap-4">
|
|
<span
|
|
class="hidden aspect-square w-32 shrink-0 overflow-hidden sm:block"
|
|
>
|
|
<img
|
|
src="/images/fantasy-books.jpg"
|
|
alt="Fantasy bookshelf"
|
|
loading="lazy"
|
|
decoding="async"
|
|
class="h-full w-full object-cover"
|
|
/>
|
|
</span>
|
|
<span class="flex flex-col gap-1 px-5 py-4 sm:px-0 sm:py-0">
|
|
<span
|
|
class="font-mono text-xs uppercase tracking-[0.18em]"
|
|
style="color: var(--color-text-subtle);"
|
|
>
|
|
Reading & Media
|
|
</span>
|
|
<span
|
|
class="font-sans text-lg font-semibold"
|
|
style="color: var(--color-text);"
|
|
>
|
|
Deep in the Cosmere, catching up on anime, and always three
|
|
books ahead on my to-read list.
|
|
</span>
|
|
</span>
|
|
</span>
|
|
<Icon
|
|
name="arrow-right"
|
|
class="h-6 w-6 shrink-0 transition-transform group-hover:translate-x-1 sm:ml-4"
|
|
style="color: var(--color-accent);"
|
|
/>
|
|
</a>
|
|
</Reveal>
|
|
</div>
|
|
</section>
|
|
</BaseLayout>
|