first commit

.dockerignore

@@ -0,0 +1,20 @@
+node_modules
+dist
+.astro
+
+.git
+.gitignore
+
+.DS_Store
+Thumbs.db
+
+.idea
+.vscode
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+.env
+.env.*

.gitignore

@@ -0,0 +1,18 @@
+node_modules/
+dist/
+.astro/
+
+.env
+.env.*
+!.env.example
+
+.DS_Store
+Thumbs.db
+
+.idea/
+.vscode/
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*

astro.config.mjs

@@ -0,0 +1,5 @@
+import { defineConfig } from "astro/config";
+
+export default defineConfig({
+  site: "https://thelilfrog.com",
+});

docker-compose.yml

@@ -0,0 +1,6 @@
+services:
+  server:
+    build: .
+    restart: unless-stopped
+    ports:
+      - "8080:80"

dockerfile

@@ -0,0 +1,59 @@
+FROM node:25-alpine3.22 AS build-page
+
+COPY . /src
+
+RUN cd /src \
+    && apk add pnpm \
+    && pnpm install \
+    && pnpm run build
+
+# Stage 1: build
+
+FROM debian:13 AS build-server
+
+ARG NGINX_VERSION=1.30.0
+ARG ZSTD_MODULE_VERSION=0.1.1
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    ca-certificates \
+    curl \
+    libpcre2-dev \
+    libssl-dev \
+    zlib1g-dev \
+    libzstd-dev \
+    tar \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /build
+
+RUN curl -fsSLO "https://nginx.org/download/nginx-${NGINX_VERSION}.tar.gz" \
+    && tar -xzf "nginx-${NGINX_VERSION}.tar.gz" \
+    && curl -fsSL "https://github.com/tokers/zstd-nginx-module/archive/refs/tags/${ZSTD_MODULE_VERSION}.tar.gz" -o zstd-nginx-module.tar.gz \
+    && tar -xzf zstd-nginx-module.tar.gz
+
+WORKDIR /build/nginx-${NGINX_VERSION}
+
+RUN ./configure \
+    --prefix=/etc/nginx \
+    --sbin-path=/usr/sbin/nginx \
+    --conf-path=/etc/nginx/nginx.conf \
+    --pid-path=/run/nginx.pid \
+    --with-http_ssl_module \
+    --with-http_v2_module \
+    --with-http_gzip_static_module \
+    --add-module=/build/zstd-nginx-module-${ZSTD_MODULE_VERSION} \
+    && make -j"$(nproc)" \
+    && make install
+
+# Stage 2: hardened runtime
+
+FROM dhi.io/nginx:1.30.0-debian13
+
+COPY --from=build-server /usr/sbin/nginx /usr/sbin/nginx
+COPY --from=build-server /etc/nginx /etc/nginx
+COPY --from=build-page /src/dist /usr/share/nginx/html
+
+EXPOSE 80 443
+
+CMD ["-g", "daemon off;"]

package.json

@@ -0,0 +1,16 @@
+{
+  "name": "front-page",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "7.0.1",
+    "astro": "5.13.5"
+  }
+}

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+allowBuilds:
+  esbuild: true
+  sharp: true

public/favicon.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-labelledby="title">
+  <title>Checkpoint</title>
+  <defs>
+    <linearGradient id="checkpoint-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#7dd3fc" />
+      <stop offset="100%" stop-color="#60a5fa" />
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="18" fill="#0f1115" />
+  <path
+    d="M20 23.5a3.5 3.5 0 0 1 3.5-3.5h17a3.5 3.5 0 0 1 3.5 3.5v17a3.5 3.5 0 0 1-3.5 3.5h-17a3.5 3.5 0 0 1-3.5-3.5z"
+    fill="none"
+    stroke="url(#checkpoint-gradient)"
+    stroke-width="4"
+  />
+  <circle cx="32" cy="32" r="6" fill="url(#checkpoint-gradient)" />
+</svg>

src/components/Card.astro

@@ -0,0 +1,50 @@
+---
+interface Props {
+  title: string;
+  description: string;
+  href: string;
+  cta: string;
+  icon: "gitea" | "github" | "steam" | "psn" | "xbox" | "switch";
+  accent?: "primary" | "default";
+}
+
+const {
+  title,
+  description,
+  href,
+  cta,
+  icon,
+  accent = "default",
+} = Astro.props;
+
+const icons = {
+  gitea: "fa-brands fa-git-alt",
+  github: "fa-brands fa-github",
+  steam: "fa-brands fa-steam",
+  psn: "fa-brands fa-playstation",
+  xbox: "fa-brands fa-xbox",
+  switch: "fa-solid fa-gamepad",
+} satisfies Record<Props["icon"], string>;
+---
+
+<article class:list={["card", accent === "primary" && "card-primary"]}>
+  <a
+    class="card-link"
+    href={href}
+    target="_blank"
+    rel="noreferrer"
+    aria-label={`${cta}: ${title}`}
+  >
+    <span class="card-icon" aria-hidden="true">
+      <i class={icons[icon]} aria-hidden="true"></i>
+    </span>
+    <div class="card-copy">
+      <div class="card-header">
+        <h3>{title}</h3>
+        <span class="card-arrow" aria-hidden="true">↗</span>
+      </div>
+      <p>{description}</p>
+    </div>
+    <span class="card-cta">{cta}</span>
+  </a>
+</article>

src/components/Section.astro

@@ -0,0 +1,21 @@
+---
+interface Props {
+  title: string;
+  description?: string;
+  id: string;
+  columns?: "2" | "4";
+}
+
+const { title, description, id, columns = "4" } = Astro.props;
+---
+
+<section class="section shell" aria-labelledby={id}>
+  <div class="section-copy">
+    <p class="section-kicker">Section</p>
+    <h2 id={id}>{title}</h2>
+    {description && <p class="section-description">{description}</p>}
+  </div>
+  <div class="section-grid" data-columns={columns}>
+    <slot />
+  </div>
+</section>

src/data/links.ts

@@ -0,0 +1,64 @@
+export type HubLink = {
+  title: string;
+  description: string;
+  href: string;
+  cta: string;
+  icon: "gitea" | "github" | "steam" | "psn" | "xbox" | "switch";
+  accent?: "primary" | "default";
+};
+
+export const hero = {
+  eyebrow: "Welcome",
+  title: "thelilfrog.com",
+  subtitle: "Code and places to play.",
+  hostname: "thelilfrog.com",
+};
+
+export const codeLinks: HubLink[] = [
+  {
+    title: "Gitea",
+    description: "Primary forge for repositories, issues, and the home copy of everything.",
+    href: "https://git.thelilfrog.com",
+    cta: "Open Gitea",
+    icon: "gitea",
+    accent: "primary",
+  },
+  {
+    title: "GitHub",
+    description: "Public mirror for backup visibility, collaboration, and easy sharing.",
+    href: "https://github.com/thelilfrog",
+    cta: "View Mirror",
+    icon: "github",
+  },
+];
+
+export const playLinks: HubLink[] = [
+  {
+    title: "Steam",
+    description: "PC library, profile, and the usual late-night backlog.",
+    href: "https://steamcommunity.com/id/thelilfrog",
+    cta: "Visit Steam",
+    icon: "steam",
+  },
+  {
+    title: "PSN",
+    description: "PlayStation profile for trophies, sessions, and console favorites.",
+    href: "https://psnprofiles.com/thelilfrog",
+    cta: "Open PSN",
+    icon: "psn",
+  },
+  {
+    title: "Xbox",
+    description: "Gamertag hub for achievements, multiplayer, and cloud saves.",
+    href: "https://account.xbox.com/en-us/profile?gamertag=thelilfrog",
+    cta: "Open Xbox",
+    icon: "xbox",
+  },
+  {
+    title: "Nintendo Switch",
+    description: "Friend code landing spot for handheld sessions and couch co-op.",
+    href: "https://lounge.nintendo.com/friendcode/2726-3500-6033/CyfSj4RsBV",
+    cta: "Open Switch",
+    icon: "switch",
+  },
+];

src/layouts/Layout.astro

@@ -0,0 +1,36 @@
+---
+import "@fortawesome/fontawesome-free/css/all.min.css";
+import "../styles/global.css";
+
+interface Props {
+  title?: string;
+  description?: string;
+}
+
+const {
+  title = "Checkpoint",
+  description = "A minimal personal hub for code, mirrors, and places to play.",
+} = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content={description} />
+    <meta name="theme-color" content="#0f1115" />
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:type" content="website" />
+    <meta property="og:image" content="/favicon.svg" />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>{title}</title>
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>

src/pages/index.astro

@@ -0,0 +1,48 @@
+---
+import Card from "../components/Card.astro";
+import Section from "../components/Section.astro";
+import Layout from "../layouts/Layout.astro";
+import { codeLinks, hero, playLinks } from "../data/links";
+---
+
+<Layout
+  title="Checkpoint"
+  description="A minimal personal hub linking code forges and gaming profiles."
+>
+  <main>
+    <section class="hero shell" aria-labelledby="hero-title">
+      <div class="hero-copy">
+        <p class="hero-eyebrow">{hero.eyebrow}</p>
+        <h1 id="hero-title">{hero.title}</h1>
+        <p class="hero-subtitle">{hero.subtitle}</p>
+      </div>
+      <div class="hero-meta" aria-label="Quick details">
+        <p>Signals from a personal node.</p>
+        <span>{hero.hostname}</span>
+      </div>
+    </section>
+
+    <Section
+      id="code"
+      title="Code"
+      columns="2"
+      description="The primary forge lives on Gitea, with GitHub kept in sync as a public mirror."
+    >
+      {codeLinks.map((link) => <Card {...link} />)}
+    </Section>
+
+    <Section
+      id="play"
+      title="Play"
+      columns="4"
+      description="A few places to find me when the terminal is closed and the backlog wins."
+    >
+      {playLinks.map((link) => <Card {...link} />)}
+    </Section>
+  </main>
+
+  <footer class="shell footer">
+    <p>Checkpoint. Quiet links to code, mirrors, and co-op nights.</p>
+    <small>{hero.hostname}</small>
+  </footer>
+</Layout>

src/styles/global.css

@@ -0,0 +1,307 @@
+:root {
+  --bg: #0f1115;
+  --bg-elevated: rgba(19, 23, 30, 0.86);
+  --surface: rgba(255, 255, 255, 0.04);
+  --surface-strong: rgba(255, 255, 255, 0.08);
+  --border: rgba(255, 255, 255, 0.1);
+  --border-strong: rgba(165, 252, 125, 0.28);
+  --text: #f4f7fb;
+  --muted: #a4adbb;
+  --accent: #96fc7d;
+  --accent-strong: #60fa68;
+  --shadow: 0 20px 45px rgba(0, 0, 0, 0.28);
+  --radius-lg: 24px;
+  --radius-md: 18px;
+  --shell: min(1080px, calc(100vw - 2rem));
+  color-scheme: dark;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    sans-serif;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background:
+    radial-gradient(circle at top left, rgba(96, 250, 114, 0.12), transparent 30%),
+    radial-gradient(circle at top right, rgba(125, 252, 125, 0.1), transparent 28%),
+    linear-gradient(180deg, #11141b 0%, var(--bg) 35%, #0b0d12 100%);
+  color: var(--text);
+  line-height: 1.6;
+}
+
+body::before,
+body::after {
+  content: "";
+  position: fixed;
+  inset: auto;
+  pointer-events: none;
+  filter: blur(80px);
+  opacity: 0.3;
+  z-index: 0;
+}
+
+body::before {
+  top: 8rem;
+  left: -2rem;
+  width: 12rem;
+  height: 12rem;
+  background: rgba(96, 250, 106, 0.25);
+}
+
+body::after {
+  right: 0;
+  bottom: 8rem;
+  width: 16rem;
+  height: 16rem;
+  background: rgba(34, 197, 94, 0.12);
+}
+
+main,
+footer {
+  position: relative;
+  z-index: 1;
+}
+
+a {
+  color: inherit;
+}
+
+p,
+h1,
+h2,
+h3 {
+  margin: 0;
+}
+
+.shell {
+  width: var(--shell);
+  margin: 0 auto;
+}
+
+.hero {
+  display: grid;
+  gap: 1.5rem;
+  padding: 5.5rem 0 3rem;
+}
+
+.hero-copy {
+  display: grid;
+  gap: 0.9rem;
+  max-width: 42rem;
+}
+
+.hero-eyebrow,
+.section-kicker {
+  color: var(--accent);
+  font-size: 0.82rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.hero h1 {
+  font-size: clamp(3rem, 8vw, 5.8rem);
+  line-height: 0.95;
+  letter-spacing: -0.05em;
+}
+
+.hero-subtitle {
+  max-width: 30rem;
+  color: var(--muted);
+  font-size: clamp(1.05rem, 2.8vw, 1.35rem);
+}
+
+.hero-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.85rem 1rem;
+  align-items: center;
+  width: fit-content;
+  padding: 0.9rem 1rem;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.03);
+  box-shadow: var(--shadow);
+}
+
+.hero-meta p {
+  color: var(--muted);
+}
+
+.hero-meta span,
+.footer small {
+  color: var(--text);
+  font-family:
+    ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+  font-size: 0.85rem;
+}
+
+.section {
+  display: grid;
+  gap: 1.25rem;
+  padding: 1.5rem 0;
+}
+
+.section-copy {
+  display: grid;
+  gap: 0.55rem;
+  max-width: 40rem;
+}
+
+.section h2 {
+  font-size: clamp(1.8rem, 4vw, 2.4rem);
+  letter-spacing: -0.03em;
+}
+
+.section-description,
+.card-copy p,
+.footer p {
+  color: var(--muted);
+}
+
+.section-grid {
+  display: grid;
+  gap: 1rem;
+}
+
+.card {
+  position: relative;
+}
+
+.card-link {
+  display: grid;
+  gap: 1.2rem;
+  height: 100%;
+  padding: 1.25rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
+    var(--bg-elevated);
+  box-shadow: var(--shadow);
+  text-decoration: none;
+  transition:
+    transform 180ms ease,
+    border-color 180ms ease,
+    box-shadow 180ms ease,
+    background 180ms ease;
+}
+
+.card-link:hover,
+.card-link:focus-visible {
+  transform: translateY(-4px) scale(1.01);
+  border-color: var(--border-strong);
+  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.36);
+  background:
+    linear-gradient(180deg, rgba(136, 252, 125, 0.08), rgba(255, 255, 255, 0.03)),
+    var(--bg-elevated);
+}
+
+.card-link:focus-visible {
+  outline: 2px solid rgba(125, 252, 142, 0.65);
+  outline-offset: 3px;
+}
+
+.card-primary .card-link {
+  border-color: rgba(125, 252, 129, 0.22);
+  background:
+    linear-gradient(180deg, rgba(125, 252, 131, 0.12), rgba(255, 255, 255, 0.03)),
+    var(--bg-elevated);
+}
+
+.card-icon {
+  display: inline-flex;
+  width: 2.75rem;
+  height: 2.75rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: var(--surface);
+  color: var(--accent);
+}
+
+.card-icon i {
+  font-size: 1.25rem;
+  line-height: 1;
+}
+
+.card-copy {
+  display: grid;
+  gap: 0.55rem;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: start;
+}
+
+.card-header h3 {
+  font-size: 1.2rem;
+  letter-spacing: -0.02em;
+}
+
+.card-arrow {
+  color: var(--accent);
+  font-size: 1.15rem;
+  transition: transform 180ms ease;
+}
+
+.card-link:hover .card-arrow,
+.card-link:focus-visible .card-arrow {
+  transform: translate(2px, -2px);
+}
+
+.card-cta {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.55rem 0.8rem;
+  border-radius: 999px;
+  background: var(--surface);
+  color: var(--text);
+  font-size: 0.92rem;
+  font-weight: 600;
+}
+
+.footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 0.75rem 1rem;
+  align-items: center;
+  padding: 2rem 0 3rem;
+}
+
+@media (min-width: 720px) {
+  .hero {
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: end;
+    gap: 2rem;
+    min-height: 55vh;
+  }
+
+  .section-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 960px) {
+  .section-grid[data-columns="4"] {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}

tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "baseUrl": "."
+  }
+}