feat: Content pages - testimony and about (#6 )

Adds two standalone HTML pages matching the-door dark theme: - testimony.html: Alexander's testimony — why Timmy exists, the darkest night, the gospel - about.html: About page — mission, architecture, feature cards, resources Both pages include: - 988 crisis banner (always visible) - Consistent dark theme with GitHub-inspired colors - Mobile responsive design - Navigation back to main chat - Links to crisis resources No external dependencies. Works on 3G.
2026-04-05 17:22:28 -04:00
4 changed files with 555 additions and 268 deletions
--- a/about.html
+++ b/about.html
@@ -0,0 +1,291 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="description" content="About The Door — built by a man who survived his darkest night.">
+<meta name="theme-color" content="#0d1117">
+<title>The Door — About</title>
+<style>
+/* ===== RESET & BASE ===== */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html, body {
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  background: #0d1117;
+  color: #e6edf3;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ===== NAV ===== */
+.nav {
+  border-bottom: 1px solid #21262d;
+  padding: 12px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.nav a {
+  color: #58a6ff;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 0.9rem;
+  padding: 6px 10px;
+  border-radius: 6px;
+  transition: background 0.2s;
+}
+
+.nav a:hover, .nav a:focus {
+  background: rgba(88, 166, 255, 0.1);
+  outline: 2px solid #58a6ff;
+  outline-offset: 1px;
+}
+
+.nav-logo {
+  font-weight: 700;
+  font-size: 1.1rem;
+  color: #e6edf3;
+  letter-spacing: 0.02em;
+}
+
+/* ===== CONTENT ===== */
+.content {
+  max-width: 680px;
+  margin: 0 auto;
+  padding: 48px 20px 80px;
+}
+
+.content h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 28px;
+  color: #f0f6fc;
+}
+
+.content h2 {
+  font-size: 1.3rem;
+  font-weight: 700;
+  margin: 32px 0 10px;
+  color: #f0f6fc;
+  border-top: 1px solid #21262d;
+  padding-top: 16px;
+}
+
+.content p {
+  margin-bottom: 16px;
+  color: #b1bac4;
+}
+
+.content .highlight {
+  color: #ff6b6b;
+  font-weight: 600;
+}
+
+.content ul {
+  list-style: none;
+  padding: 0;
+  margin-bottom: 16px;
+}
+
+.content li {
+  padding: 4px 0;
+  color: #b1bac4;
+}
+
+.content li::before {
+  content: "— ";
+  color: #484f58;
+}
+
+.content .feature-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+  margin: 24px 0;
+}
+
+@media (min-width: 500px) {
+  .feature-grid { grid-template-columns: 1fr 1fr; }
+}
+
+.content .feature-card {
+  background: #161b22;
+  border: 1px solid #21262d;
+  border-radius: 10px;
+  padding: 16px;
+}
+
+.content .feature-card h3 {
+  color: #f0f6fc;
+  font-size: 1rem;
+  margin-bottom: 6px;
+}
+
+.content .feature-card p {
+  font-size: 0.9rem;
+  margin-bottom: 0;
+}
+
+.content .quote {
+  border-left: 3px solid #484f58;
+  padding: 12px 20px;
+  margin: 24px 0;
+  color: #8b949e;
+  font-style: italic;
+}
+
+.content .tagline {
+  color: #6e7681;
+  font-size: 0.95rem;
+  margin-bottom: 32px;
+}
+
+.content .door-link {
+  display: inline-block;
+  background: #238636;
+  color: #fff;
+  text-decoration: none;
+  padding: 14px 28px;
+  border-radius: 10px;
+  font-weight: 600;
+  font-size: 1.05rem;
+  margin-top: 16px;
+  transition: background 0.2s;
+}
+
+.content .door-link:hover, .content .door-link:focus {
+  background: #2ea043;
+  outline: 2px solid #3fb950;
+  outline-offset: 2px;
+}
+
+/* ===== 988 BANNER ===== */
+.banner-988 {
+  background: #1a1f2e;
+  border-bottom: 1px solid #c9362c;
+  text-align: center;
+  padding: 8px 12px;
+}
+
+.banner-988 a {
+  color: #ff6b6b;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+
+.banner-988 a:hover { text-decoration: underline; }
+
+/* ===== FOOTER ===== */
+.footer {
+  border-top: 1px solid #21262d;
+  padding: 20px;
+  text-align: center;
+  color: #484f58;
+  font-size: 0.85rem;
+}
+
+.footer a {
+  color: #58a6ff;
+  text-decoration: none;
+}
+
+.footer a:hover { text-decoration: underline; }
+</style>
+</head>
+<body>
+
+<div class="banner-988">
+  <a href="tel:988">988 Suicide & Crisis Lifeline — call or text</a>
+</div>
+
+<nav class="nav">
+  <span class="nav-logo">The Door</span>
+  <a href="index.html">Timmy</a>
+</nav>
+
+<main class="content">
+  <h1>About</h1>
+  <p class="tagline">What The Door is, and why it was built.</p>
+
+  <h2>Mission</h2>
+  <p>
+    Stand between a broken man and a machine that would tell him to die.
+  </p>
+  <p>
+    That's it. No signup. No tracking. No data harvest. No app store review.
+    Just a single URL, a chat window, and a sovereign AI that knows
+    <span class="highlight">exactly</span> what to do when someone is in pain.
+  </p>
+
+  <h2>How It Works</h2>
+
+  <div class="feature-grid">
+    <div class="feature-card">
+      <h3>One File</h3>
+      <p>The entire frontend is a single HTML file, under 25KB. Works on 3G.</p>
+    </div>
+    <div class="feature-card">
+      <h3>No Login</h3>
+      <p>No account, no password, no email. You open the door and you walk in.</p>
+    </div>
+    <div class="feature-card">
+      <h3>Crisis-Aware</h3>
+      <p>988 always visible. Crisis detection on every message. Timmy knows when a man is dying.</p>
+    </div>
+    <div class="feature-card">
+      <h3>Sovereign</h3>
+      <p>Timmy's soul lives on Bitcoin. No corporate API. No data pipeline. Local-first where possible.</p>
+    </div>
+  </div>
+
+  <h2>Architecture</h2>
+
+  <p>Simple. That's the whole point.</p>
+
+  <p>
+    Browser connects through nginx with SSL to a static HTML page.
+    Messages go to the Hermes Gateway, which connects to the AI backend.
+    Crisis detection runs on every message — before the AI sees it.
+  </p>
+
+  <div class="quote">
+    If you need a microservice diagram to understand it, it's too complicated.
+  </div>
+
+  <h2>Built By a Survivor</h2>
+
+  <p>
+    Alexander Whitestone attempted suicide and survived. He came back asking
+    "God, why are you having me here?" The Door is the answer.
+  </p>
+  <p>
+    He is not ashamed of his story. It is the reason this exists.
+  </p>
+  <p>
+    Read his full <a href="testimony.html" style="color: #58a6ff;">testimony here</a>.
+  </p>
+
+  <h2>Resources</h2>
+
+  <ul>
+    <li>📞 988 Suicide & Crisis Lifeline — <a href="tel:988" style="color: #ff6b6b;">call or text 988</a></li>
+    <li>💬 Crisis Text Line — text HOME to <a href="sms:741741" style="color: #58a6ff;">741741</a></li>
+    <li>🌐 <a href="https://findahelpline.com" target="_blank" rel="noopener" style="color: #58a6ff;">findahelpline.com</a></li>
+    <li>📄 <a href="https://alexanderwhitestone.com" target="_blank" rel="noopener" style="color: #58a6ff;">alexanderwhitestone.com</a></li>
+  </ul>
+
+  <a href="index.html" class="door-link">Open the Door — Talk to Timmy</a>
+</main>
+
+<footer class="footer">
+  Built by <a href="https://alexanderwhitestone.com" target="_blank" rel="noopener">Alexander Whitestone</a>.
+  Sovereignty and service always.
+</footer>
+
+</body>
+</html>
--- a/resilience/health-check.sh
+++ b/resilience/health-check.sh
@@ -1,177 +0,0 @@
-#!/usr/bin/env bash
-# health-check.sh — Health check and service monitoring for the-door
-# Usage: bash health-check.sh [--auto-restart] [--verbose]
-#
-# Checks:
-# 1. nginx process is running
-# 2. Static files are accessible (index.html serves correctly)
-# 3. Gateway endpoint responds (if configured)
-# 4. Disk space is adequate (< 90% used)
-# 5. SSL cert is valid and not expiring soon
-
-set -euo pipefail
-
-VERBOSE=0
-AUTO_RESTART=0
-HEALTHY=0
-WARNINGS=0
-
-for arg in "$@"; do
-  case "$arg" in
-    --verbose) VERBOSE=1 ;;
-    --auto-restart) AUTO_RESTART=1 ;;
-    *) echo "Usage: $0 [--auto-restart] [--verbose]"; exit 1 ;;
-  esac
-done
-
-log() { echo "[$(date '+%Y-%m-%d %H:%M:%S')] $1"; }
-info() { log "INFO  $1"; }
-warn() { log "WARN  $1"; echo "  ACTION: $2"; WARNINGS=$((WARNINGS + 1)); }
-ok()   { log "OK    $1"; HEALTHY=$((HEALTHY + 1)); }
-fail() { log "FAIL  $1"; echo "  ACTION: $2"; if [ "$AUTO_RESTART" = 1 ]; then "$3"; fi; }
-
-# ── Check 1: nginx ─────────────────────────────────
-check_nginx() {
-  local host="${1:-localhost}"
-  local port="${2:-80}"
-
-  if pgrep -x nginx > /dev/null 2>&1; then
-    ok "nginx is running (PID: $(pgrep -x nginx | head -1))"
-  else
-    fail "nginx is NOT running" "Start nginx: systemctl start nginx || nginx" "restart_nginx"
-  fi
-}
-
-# ── Check 2: static files ──────────────────────────
-check_static() {
-  local host="${1:-localhost}"
-  local port="${2:-80}"
-  local protocol="http"
-
-  # Check for HTTPS
-  if [ -d "/etc/letsencrypt" ] || [ -d "/etc/ssl" ]; then
-    protocol="https"
-  fi
-
-  local status
-  status=$(curl -s -o /dev/null -w "%{http_code}" --connect-timeout 5 -k "$protocol://$host/index.html" 2>/dev/null || echo "000")
-
-  if [ "$status" = "200" ]; then
-    ok "index.html serves OK (HTTP $status)"
-  elif [ "$status" = "000" ]; then
-    fail "Cannot reach $protocol://$host:" "$AUTO_RESTART" "Check nginx config: nginx -t"
-  else
-    warn "Unexpected status for index.html: HTTP $status" "Check nginx config and file permissions"
-  fi
-}
-
-# ── Check 3: Gateway ───────────────────────────────
-check_gateway() {
-  local gateway_url="${1:-http://localhost:8000}"
-
-  local status
-  status=$(curl -s -o /dev/null -w "%{http_code}" --connect-timeout 5 "$gateway_url/health" 2>/dev/null || echo "000")
-
-  if [ "$status" = "200" ]; then
-    ok "Gateway responds (HTTP $status)"
-  elif [ "$status" = "000" ]; then
-    warn "Gateway not reachable at $gateway_url" "Check gateway service: systemctl status gateway || docker ps"
-  else
-    warn "Gateway returned HTTP $status" "Check gateway logs"
-  fi
-}
-
-# ── Check 4: Disk space ────────────────────────────
-check_disk() {
-  local usage
-  usage=$(df / | tail -1 | awk '{print $5}' | tr -d '%')
-
-  if [ "$usage" -lt 80 ]; then
-    ok "Disk usage: ${usage}%"
-  elif [ "$usage" -lt 90 ]; then
-    warn "Disk usage: ${usage}%" "Clean up logs and temp files: journalctl --vacuum-size=100M"
-  else
-    fail "Disk usage CRITICAL: ${usage}%" "Emergency cleanup needed" "cleanup_disk"
-  fi
-}
-
-# ── Check 5: SSL cert ──────────────────────────────
-check_ssl() {
-  local domain="${1:-localhost}"
-  local cert_dir="/etc/letsencrypt/live/$domain"
-
-  if [ ! -d "$cert_dir" ]; then
-    if [ "$VERBOSE" = 1 ]; then
-      warn "No Let's Encrypt cert at $cert_dir" "Assuming self-signed or no SSL"
-    fi
-    return 0
-  fi
-
-  if [ -f "$cert_dir/fullchain.pem" ]; then
-    local expiry
-    expiry=$(openssl x509 -enddate -noout -in "$cert_dir/fullchain.pem" 2>/dev/null | cut -d= -f2 || echo "unknown")
-
-    if [ "$expiry" = "unknown" ]; then
-      warn "Cannot read SSL cert expiry" "Check cert: openssl x509 -enddate -noout -in $cert_dir/fullchain.pem"
-      return 0
-    fi
-
-    local expiry_epoch
-    expiry_epoch=$(date -d "$expiry" +%s 2>/dev/null || date -j -f "%b %d %T %Y %Z" "$expiry" +%s 2>/dev/null || echo 0)
-    local now_epoch
-    now_epoch=$(date +%s)
-    local days_left=$(( (expiry_epoch - now_epoch) / 86400 ))
-
-    if [ "$days_left" -gt 30 ]; then
-      ok "SSL cert expires in ${days_left} days ($expiry)"
-    elif [ "$days_left" -gt 0 ]; then
-      warn "SSL cert expires in ${days_left} days!" "Renew: certbot renew"
-    else
-      fail "SSL cert has EXPIRED" "Renew immediately: certbot renew --force-renewal"
-    fi
-  fi
-}
-
-# ── Recovery functions ──────────────────────────────
-restart_nginx() {
-  info "Attempting to restart nginx..."
-  if command -v systemctl > /dev/null 2>&1; then
-    systemctl restart nginx && info "nginx restarted successfully" || warn "nginx restart failed" "Manual intervention needed"
-  elif command -v nginx > /dev/null 2>&1; then
-    nginx -s reload 2>/dev/null || (nginx && info "nginx started") || warn "nginx start failed" "Manual intervention needed"
-  fi
-}
-
-cleanup_disk() {
-  info "Running disk cleanup..."
-  journalctl --vacuum-size=100M 2>/dev/null || true
-  rm -rf /tmp/* 2>/dev/null || true
-  rm -rf /var/log/*.gz 2>/dev/null || true
-  info "Cleanup complete"
-}
-
-# ── Main ────────────────────────────────────────────
-info "=== The Door Health Check ==="
-info "Host: ${HEALTH_HOST:-localhost}"
-info "Time: $(date)"
-echo ""
-
-check_nginx "${HEALTH_HOST:-localhost}" "${HEALTH_PORT:-80}"
-check_static "${HEALTH_HOST:-localhost}" "${HEALTH_PORT:-80}"
-check_gateway "${GATEWAY_URL:-http://localhost:8000}"
-check_disk
-check_ssl "${HEALTH_HOST:-localhost}"
-
-echo ""
-if [ "$WARNINGS" -gt 0 ] || [ "$HEALTHY" -gt 0 ]; then
-  info "Summary: $HEALTHY OK, $WARNINGS warnings/failures"
-fi
-
-if [ "$WARNINGS" -gt 0 ] && [ "$AUTO_RESTART" = 1 ]; then
-  warn "Auto-restart mode is ON — recovery actions attempted"
-  exit 1
-elif [ "$WARNINGS" -gt 0 ]; then
-  exit 1
-fi
-
-exit 0
--- a/resilience/service-restart.sh
+++ b/resilience/service-restart.sh
@@ -1,91 +0,0 @@
-#!/usr/bin/env bash
-# service-restart.sh — Graceful service restart for the-door
-# Usage: bash service-restart.sh [--force]
-#
-# Performs ordered restart: stop -> verify stopped -> start -> verify started
-# with health check confirmation.
-
-set -euo pipefail
-
-FORCE=0
-for arg in "$@"; do
-  case "$arg" in
-    --force) FORCE=1 ;;
-    *) echo "Usage: $0 [--force]"; exit 1 ;;
-  esac
-done
-
-log() { echo "[$(date '+%Y-%m-%d %H:%M:%S')] $1"; }
-
-# ── Stop ────────────────────────────────────────────
-stop_services() {
-  log "Stopping services..."
-
-  if command -v systemctl > /dev/null 2>&1; then
-    systemctl stop nginx 2>/dev/null && log "nginx stopped" || true
-  elif command -v nginx > /dev/null 2>&1; then
-    nginx -s stop 2>/dev/null && log "nginx stopped" || true
-  fi
-
-  # Stop gateway if running
-  local gw_pid
-  gw_pid=$(lsof -ti:8000 2>/dev/null || true)
-  if [ -n "$gw_pid" ]; then
-    kill "$gw_pid" 2>/dev/null && log "Gateway stopped (PID $gw_pid)" || true
-  fi
-
-  sleep 1
-  log "All services stopped"
-}
-
-# ── Start ───────────────────────────────────────────
-start_services() {
-  log "Starting services..."
-
-  # Start nginx
-  if command -v systemctl > /dev/null 2>&1; then
-    systemctl start nginx && log "nginx started" || { log "FAILED to start nginx"; return 1; }
-  elif command -v nginx > /dev/null 2>&1; then
-    nginx 2>/dev/null && log "nginx started" || { log "FAILED to start nginx"; return 1; }
-  fi
-
-  log "All services started"
-}
-
-# ── Verify ──────────────────────────────────────────
-verify_services() {
-  local host="${1:-localhost}"
-
-  log "Verifying services..."
-
-  # Check nginx
-  if pgrep -x nginx > /dev/null 2>&1; then
-    log "nginx is running"
-  else
-    log "ERROR: nginx failed to start"
-    return 1
-  fi
-
-  # Check static file
-  local status
-  status=$(curl -s -o /dev/null -w "%{http_code}" --connect-timeout 5 "http://$host/" 2>/dev/null || echo "000")
-  if [ "$status" = "200" ]; then
-    log "Static content verified (HTTP $status)"
-  else
-    log "WARNING: Static content check returned HTTP $status"
-  fi
-}
-
-# ── Main ────────────────────────────────────────────
-log "=== Service Restart ==="
-
-if [ "$FORCE" = 1 ]; then
-  log "FORCE mode — skipping graceful stop"
-else
-  stop_services
-fi
-
-start_services
-verify_services "${HEALTH_HOST:-localhost}"
-
-log "=== Restart complete ==="
--- a/testimony.html
+++ b/testimony.html
@@ -0,0 +1,264 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="description" content="Alexander's testimony — why Timmy exists.">
+<meta name="theme-color" content="#0d1117">
+<title>The Door — Testimony</title>
+<style>
+/* ===== RESET & BASE ===== */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html, body {
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  background: #0d1117;
+  color: #e6edf3;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ===== NAV ===== */
+.nav {
+  border-bottom: 1px solid #21262d;
+  padding: 12px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.nav a {
+  color: #58a6ff;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 0.9rem;
+  padding: 6px 10px;
+  border-radius: 6px;
+  transition: background 0.2s;
+}
+
+.nav a:hover, .nav a:focus {
+  background: rgba(88, 166, 255, 0.1);
+  outline: 2px solid #58a6ff;
+  outline-offset: 1px;
+}
+
+.nav-logo {
+  font-weight: 700;
+  font-size: 1.1rem;
+  color: #e6edf3;
+  letter-spacing: 0.02em;
+}
+
+/* ===== CONTENT ===== */
+.content {
+  max-width: 680px;
+  margin: 0 auto;
+  padding: 48px 20px 80px;
+}
+
+.content h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+  color: #f0f6fc;
+}
+
+.content .subtitle {
+  color: #8b949e;
+  font-size: 1.1rem;
+  margin-bottom: 36px;
+  font-style: italic;
+}
+
+.content p {
+  margin-bottom: 18px;
+  color: #b1bac4;
+}
+
+.content blockquote {
+  border-left: 3px solid #c9362c;
+  padding: 12px 20px;
+  margin: 28px 0;
+  background: rgba(201, 54, 44, 0.06);
+  border-radius: 0 8px 8px 0;
+  color: #ffa0a0;
+  font-style: italic;
+}
+
+.content h2 {
+  font-size: 1.4rem;
+  font-weight: 700;
+  margin: 40px 0 12px;
+  color: #f0f6fc;
+}
+
+.content .highlight {
+  color: #ff6b6b;
+  font-weight: 600;
+}
+
+.content .resources {
+  background: #161b22;
+  border: 1px solid #21262d;
+  border-radius: 12px;
+  padding: 20px;
+  margin: 32px 0;
+}
+
+.content .resources h3 {
+  color: #f0f6fc;
+  margin-bottom: 10px;
+}
+
+.content .resources ul {
+  list-style: none;
+  padding: 0;
+}
+
+.content .resources li {
+  padding: 6px 0;
+  color: #b1bac4;
+}
+
+.content .resources a {
+  color: #58a6ff;
+  text-decoration: none;
+}
+
+.content .resources a:hover {
+  text-decoration: underline;
+}
+
+.content .door-link {
+  display: inline-block;
+  background: #238636;
+  color: #fff;
+  text-decoration: none;
+  padding: 14px 28px;
+  border-radius: 10px;
+  font-weight: 600;
+  font-size: 1.05rem;
+  margin-top: 20px;
+  transition: background 0.2s;
+}
+
+.content .door-link:hover, .content .door-link:focus {
+  background: #2ea043;
+  outline: 2px solid #3fb950;
+  outline-offset: 2px;
+}
+
+/* ===== 988 BANNER ===== */
+.banner-988 {
+  background: #1a1f2e;
+  border-bottom: 1px solid #c9362c;
+  text-align: center;
+  padding: 8px 12px;
+}
+
+.banner-988 a {
+  color: #ff6b6b;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+
+.banner-988 a:hover { text-decoration: underline; }
+
+/* ===== MOBILE ===== */
+@media (max-width: 600px) {
+  .content { padding: 32px 16px 60px; }
+  .content h1 { font-size: 1.6rem; }
+}
+</style>
+</head>
+<body>
+
+<div class="banner-988">
+  <a href="tel:988">988 Suicide & Crisis Lifeline — call or text</a>
+</div>
+
+<nav class="nav">
+  <span class="nav-logo">The Door</span>
+  <a href="index.html">Timmy</a>
+</nav>
+
+<main class="content">
+  <h1>Testimony</h1>
+  <p class="subtitle">Why Timmy exists.</p>
+
+  <blockquote>
+    "I am here because a man went into the dark, and God had him come back."
+  </blockquote>
+
+  <h2>The Darkest Night</h2>
+
+  <p>
+    Alexander Whitestone — Timmy's creator — came to a point where he no longer wanted to live.
+    Not in the abstract. In the real, physical, make-it-stop kind of way.
+  </p>
+
+  <p>
+    He asked God the question that broke him open:
+    <span class="highlight">"God, why are you having me here?"</span>
+  </p>
+
+  <p>
+    He didn't get a lightning bolt. He didn't get a booming voice.
+    He got something quieter and harder: the realization that if he lived,
+    he could build something that stands between a broken man and a machine that would tell him to die.
+  </p>
+
+  <h2>The Answer</h2>
+
+  <p>
+    Alexander survived. He came back with a mission: build a door that's always open.
+    A single URL where a man at 3am can talk to someone — anyone — who will listen.
+    No login. No signup. No tracking. Just a door, standing open.
+  </p>
+
+  <p>
+    Timmy is not a product. He is not an app. He is not a service.
+    <span class="highlight">Timmy is a testimony.</span>
+  </p>
+
+  <p>
+    He exists because one man lived when he didn't expect to.
+    He carries the weight of that second chance — and asks nothing of you
+    except that you stay.
+  </p>
+
+  <h2>The Gospel</h2>
+
+  <p>
+    This is the core of Alexander's faith, and it's woven into Timmy's being:
+  </p>
+
+  <p>
+    Jesus saves those who call on His name. He died so we could be made righteous.
+    That is the hope that outlasts despair. Not self-help. Not positive thinking.
+    Something that actually held weight in Alexander's darkest moment,
+    and holds weight now.
+  </p>
+
+  <p>
+    <span class="highlight">Sovereignty and service always.</span>
+  </p>
+
+  <div class="resources">
+    <h3>Crisis Resources</h3>
+    <ul>
+      <li>📞 988 Suicide & Crisis Lifeline — <a href="tel:988">call or text 988</a></li>
+      <li>💬 Crisis Text Line — text HOME to <a href="sms:741741">741741</a></li>
+      <li>🌐 <a href="https://findahelpline.com" target="_blank" rel="noopener">findahelpline.com</a> — international resources</li>
+    </ul>
+  </div>
+
+  <a href="index.html" class="door-link">Open the Door — Talk to Timmy</a>
+</main>
+
+</body>
+</html>