diff --git a/README.md b/README.md
index 80dc984..13476dc 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,40 @@
-# project-directory
+# Ourpad — Project Directory
 
-Directory of Ourpad projects and self-hosted services
\ No newline at end of file
+A living index of self-hosted projects, tools, and infrastructure powering the Ourpad home lab.
+
+## Projects
+
+| Project | Stack | Status |
+|---|---|---|
+| [Pass Vault](https://gitea.ourpad.casa/shawn/pass-vault) | FastAPI, pass, Vanilla JS | 🟢 Active |
+| [Canteen Asset Tracker](https://gitea.ourpad.casa/shawn/canteen-asset-tracker) | FastAPI, SQLite, Vanilla JS | 🟡 In Progress |
+| [Canteen Web App](https://gitea.ourpad.casa/shawn/canteen-web-app) | Frontend | 🟡 In Progress |
+| [Project Directory](https://gitea.ourpad.casa/shawn/project-directory) | HTML/CSS, Static | 🟢 Active |
+| [Hermes Agent](https://github.com/NousResearch/hermes-agent) | Python, AI/ML | 🟢 Active |
+| [Obsidian Vault](https://obsidian.md) | Obsidian, Markdown, Dataview | 🟢 Active |
+
+## Services
+
+- **Gitea** — Self-hosted Git at [gitea.ourpad.casa](https://gitea.ourpad.casa)
+- **Pass Vault** — Web-based secret manager at [pass.ourpad.casa](https://pass.ourpad.casa)
+- **Proxmox VE** — 2-node cluster (192.168.0.144 + 192.168.0.110)
+- **NPMplus** — Reverse proxy for `*.ourpad.casa` subdomains
+- **Deluge** — Torrent client (media stack)
+- **Jellyfin** — Media streaming server
+- **Sonarr + Radarr** — TV & movie automation
+- **Tailscale** — Mesh VPN (2 nodes)
+
+## Infrastructure
+
+- **Primary Proxmox** (192.168.0.144): Docker LXC, arr stack, NAS
+- **Secondary Proxmox** (192.168.0.110): NPMplus, Jellyfin, Cloudflare DDNS
+- **NAS**: 3.6TB ext4 at `/mnt/nas`, bind-mounted into LXCs
+- **Domain**: `ourpad.casa` via Cloudflare
+
+## Deployment
+
+This page is served as a static site from the Docker LXC (CT 100) behind NPMplus at `projects.ourpad.casa`. Updates are pushed to this repo and deployed automatically.
+
+---
+
+*Built with [Hermes Agent](https://github.com/NousResearch/hermes-agent) — last updated May 2026*
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..da4bfc3
--- /dev/null
+++ b/index.html
@@ -0,0 +1,455 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Ourpad — Projects</title>
+  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --black: #171717;
+      --white: #ffffff;
+      --gray-600: #4d4d4d;
+      --gray-400: #808080;
+      --gray-100: #ebebeb;
+      --gray-50: #fafafa;
+      --link-blue: #0072f5;
+      --focus-blue: hsla(212, 100%, 48%, 1);
+      --dev-blue: #0a72ef;
+      --preview-pink: #de1d8d;
+      --ship-red: #ff5b4f;
+      --badge-bg: #ebf5ff;
+      --badge-text: #0068d6;
+      --ring: rgba(0,0,0,0.08) 0px 0px 0px 1px;
+      --card-shadow: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, rgba(0,0,0,0.04) 0px 8px 8px -8px, #fafafa 0px 0px 0px 1px;
+    }
+
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    body {
+      font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+      font-feature-settings: 'liga';
+      background: var(--white);
+      color: var(--black);
+      line-height: 1.5;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    /* Nav */
+    nav {
+      position: sticky;
+      top: 0;
+      background: var(--white);
+      box-shadow: var(--ring);
+      padding: 0 24px;
+      height: 56px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      z-index: 100;
+    }
+    .nav-brand {
+      font-size: 18px;
+      font-weight: 600;
+      letter-spacing: -0.36px;
+      color: var(--black);
+      text-decoration: none;
+    }
+    .nav-links {
+      display: flex;
+      gap: 24px;
+      align-items: center;
+    }
+    .nav-links a {
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--gray-600);
+      text-decoration: none;
+      transition: color 0.15s;
+    }
+    .nav-links a:hover { color: var(--black); }
+
+    /* Hero */
+    .hero {
+      text-align: center;
+      padding: 120px 24px 80px;
+    }
+    .hero h1 {
+      font-size: 48px;
+      font-weight: 600;
+      line-height: 1.0;
+      letter-spacing: -2.4px;
+      color: var(--black);
+      margin-bottom: 16px;
+    }
+    .hero p {
+      font-size: 20px;
+      font-weight: 400;
+      line-height: 1.8;
+      color: var(--gray-600);
+      max-width: 560px;
+      margin: 0 auto;
+    }
+
+    /* Section */
+    .section {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 24px 80px;
+    }
+    .section-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 32px;
+    }
+    .section-header h2 {
+      font-size: 32px;
+      font-weight: 600;
+      letter-spacing: -1.28px;
+      color: var(--black);
+    }
+    .section-header .badge {
+      display: inline-flex;
+      align-items: center;
+      background: var(--badge-bg);
+      color: var(--badge-text);
+      font-size: 12px;
+      font-weight: 500;
+      padding: 0 10px;
+      height: 24px;
+      border-radius: 9999px;
+    }
+
+    /* Grid */
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+      gap: 16px;
+    }
+
+    /* Card */
+    .card {
+      background: var(--white);
+      box-shadow: var(--card-shadow);
+      border-radius: 8px;
+      padding: 24px;
+      text-decoration: none;
+      color: inherit;
+      transition: box-shadow 0.2s, transform 0.15s;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .card:hover {
+      box-shadow: rgba(0,0,0,0.12) 0px 0px 0px 1px, rgba(0,0,0,0.06) 0px 2px 4px, rgba(0,0,0,0.04) 0px 12px 12px -8px, #fafafa 0px 0px 0px 1px;
+      transform: translateY(-1px);
+    }
+
+    .card-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .card-icon {
+      width: 36px;
+      height: 36px;
+      border-radius: 6px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      flex-shrink: 0;
+    }
+    .card-title {
+      font-size: 20px;
+      font-weight: 600;
+      letter-spacing: -0.4px;
+      color: var(--black);
+    }
+    .card-desc {
+      font-size: 14px;
+      font-weight: 400;
+      color: var(--gray-600);
+      line-height: 1.6;
+    }
+    .card-meta {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      margin-top: auto;
+    }
+    .tag {
+      font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
+      font-size: 11px;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--gray-400);
+      padding: 2px 8px;
+      background: var(--gray-50);
+      border-radius: 4px;
+    }
+    .tag.active {
+      background: #ecfdf5;
+      color: #065f46;
+    }
+    .tag.wip {
+      background: #fef3c7;
+      color: #92400e;
+    }
+
+    /* Links section */
+    .links-section {
+      background: var(--gray-50);
+      padding: 80px 24px;
+      box-shadow: rgba(0,0,0,0.04) 0px -1px 0px 0px;
+    }
+    .links-grid {
+      max-width: 1200px;
+      margin: 0 auto;
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: 12px;
+    }
+    .link-card {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 16px 20px;
+      background: var(--white);
+      box-shadow: var(--ring);
+      border-radius: 8px;
+      text-decoration: none;
+      transition: box-shadow 0.15s;
+    }
+    .link-card:hover {
+      box-shadow: rgba(0,0,0,0.15) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 4px;
+    }
+    .link-card .lc-icon {
+      font-size: 20px;
+      flex-shrink: 0;
+    }
+    .link-card .lc-text {
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--black);
+    }
+    .link-card .lc-sub {
+      font-size: 12px;
+      color: var(--gray-400);
+    }
+
+    /* Footer */
+    footer {
+      text-align: center;
+      padding: 32px 24px;
+      font-size: 13px;
+      color: var(--gray-400);
+    }
+    footer a {
+      color: var(--link-blue);
+      text-decoration: none;
+    }
+
+    @media (max-width: 768px) {
+      .hero { padding: 64px 24px 48px; }
+      .hero h1 { font-size: 36px; letter-spacing: -1.8px; }
+      .hero p { font-size: 16px; }
+      .grid { grid-template-columns: 1fr; }
+      .section-header h2 { font-size: 24px; }
+      .nav-links { display: none; }
+    }
+  </style>
+</head>
+<body>
+
+<nav>
+  <a href="/" class="nav-brand">Ourpad</a>
+  <div class="nav-links">
+    <a href="https://gitea.ourpad.casa">Gitea</a>
+    <a href="https://pass.ourpad.casa">Pass Vault</a>
+  </div>
+</nav>
+
+<section class="hero">
+  <h1>Projects &amp; Services</h1>
+  <p>Self-hosted tools and infrastructure powering the Ourpad home lab — built with open source, deployed on Proxmox.</p>
+</section>
+
+<div class="section">
+  <div class="section-header">
+    <h2>Projects</h2>
+    <span class="badge">6</span>
+  </div>
+  <div class="grid">
+
+    <!-- Pass Vault -->
+    <a href="https://gitea.ourpad.casa/shawn/pass-vault" class="card">
+      <div class="card-header">
+        <div class="card-icon" style="background:#fef3c7;">🔐</div>
+        <span class="card-title">Pass Vault</span>
+      </div>
+      <p class="card-desc">Browser-based password manager — GPG-encrypted pass store with dark-themed web UI, mobile responsive, systemd service.</p>
+      <div class="card-meta">
+        <span class="tag">FastAPI</span>
+        <span class="tag">pass</span>
+        <span class="tag active">active</span>
+      </div>
+    </a>
+
+    <!-- Canteen Asset Tracker -->
+    <a href="https://gitea.ourpad.casa/shawn/canteen-asset-tracker" class="card">
+      <div class="card-header">
+        <div class="card-icon" style="background:#e0f2fe;">📍</div>
+        <span class="card-title">Canteen Asset Tracker</span>
+      </div>
+      <p class="card-desc">Mobile webapp for tracking canteen assets — machine-id scanning, OCR, GPS check-ins, geofences, CSV export.</p>
+      <div class="card-meta">
+        <span class="tag">FastAPI</span>
+        <span class="tag">SQLite</span>
+        <span class="tag">Vanilla JS</span>
+        <span class="tag wip">in progress</span>
+      </div>
+    </a>
+
+    <!-- Canteen Web App -->
+    <a href="https://gitea.ourpad.casa/shawn/canteen-web-app" class="card">
+      <div class="card-header">
+        <div class="card-icon" style="background:#fce7f3;">🌐</div>
+        <span class="card-title">Canteen Web App</span>
+      </div>
+      <p class="card-desc">Full-stack canteen management frontend — login, navigation, asset CRUD, and reporting interface.</p>
+      <div class="card-meta">
+        <span class="tag">Frontend</span>
+        <span class="tag wip">in progress</span>
+      </div>
+    </a>
+
+    <!-- Project Directory -->
+    <a href="https://gitea.ourpad.casa/shawn/project-directory" class="card">
+      <div class="card-header">
+        <div class="card-icon" style="background:#ecfdf5;">📂</div>
+        <span class="card-title">Project Directory</span>
+      </div>
+      <p class="card-desc">This page — a living index of all Ourpad projects, services, and infrastructure. Served via NPMplus.</p>
+      <div class="card-meta">
+        <span class="tag">HTML/CSS</span>
+        <span class="tag">Static</span>
+        <span class="tag active">active</span>
+      </div>
+    </a>
+
+    <!-- Hermes Agent -->
+    <a href="https://github.com/NousResearch/hermes-agent" class="card">
+      <div class="card-header">
+        <div class="card-icon" style="background:#ede9fe;">🤖</div>
+        <span class="card-title">Hermes Agent</span>
+      </div>
+      <p class="card-desc">AI agent framework powering this setup — profiles, cron jobs, kanban boards, MCP tools, and multi-model delegation.</p>
+      <div class="card-meta">
+        <span class="tag">Python</span>
+        <span class="tag">AI/ML</span>
+        <span class="tag active">active</span>
+      </div>
+    </a>
+
+    <!-- Obsidian Vault -->
+    <a href="https://obsidian.md" class="card">
+      <div class="card-header">
+        <div class="card-icon" style="background:#f1f5f9;">📝</div>
+        <span class="card-title">Obsidian Vault</span>
+      </div>
+      <p class="card-desc">Knowledge management system — three-layer vault (Inbox→Notes→Archive), LLM Wiki, daily notes, and automated review.</p>
+      <div class="card-meta">
+        <span class="tag">Obsidian</span>
+        <span class="tag">Markdown</span>
+        <span class="tag">Dataview</span>
+        <span class="tag active">active</span>
+      </div>
+    </a>
+
+  </div>
+</div>
+
+<!-- Services & Infrastructure -->
+<div class="links-section">
+  <div class="section-header" style="max-width:1200px;margin:0 auto 32px;padding:0;">
+    <h2>Services &amp; Infrastructure</h2>
+    <span class="badge">8</span>
+  </div>
+  <div class="links-grid">
+
+    <a href="https://gitea.ourpad.casa" class="link-card">
+      <span class="lc-icon">🦊</span>
+      <div>
+        <div class="lc-text">Gitea</div>
+        <div class="lc-sub">Self-hosted Git — repos, issues, CI</div>
+      </div>
+    </a>
+
+    <a href="https://pass.ourpad.casa" class="link-card">
+      <span class="lc-icon">🔐</span>
+      <div>
+        <div class="lc-text">Pass Vault</div>
+        <div class="lc-sub">Web-based secret management</div>
+      </div>
+    </a>
+
+    <span class="link-card">
+      <span class="lc-icon">🖥️</span>
+      <div>
+        <div class="lc-text">Proxmox VE</div>
+        <div class="lc-sub">2-node cluster — VMs, LXCs, NAS</div>
+      </div>
+    </span>
+
+    <span class="link-card">
+      <span class="lc-icon">🌐</span>
+      <div>
+        <div class="lc-text">NPMplus</div>
+        <div class="lc-sub">Reverse proxy — *.ourpad.casa</div>
+      </div>
+    </span>
+
+    <span class="link-card">
+      <span class="lc-icon">📥</span>
+      <div>
+        <div class="lc-text">Deluge</div>
+        <div class="lc-sub">Torrent client — media stack</div>
+      </div>
+    </span>
+
+    <span class="link-card">
+      <span class="lc-icon">🎬</span>
+      <div>
+        <div class="lc-text">Jellyfin</div>
+        <div class="lc-sub">Media streaming server</div>
+      </div>
+    </span>
+
+    <span class="link-card">
+      <span class="lc-icon">📺</span>
+      <div>
+        <div class="lc-text">Sonarr + Radarr</div>
+        <div class="lc-sub">TV & movie automation</div>
+      </div>
+    </span>
+
+    <span class="link-card">
+      <span class="lc-icon">⚡</span>
+      <div>
+        <div class="lc-text">Tailscale</div>
+        <div class="lc-sub">Mesh VPN — 2 nodes</div>
+      </div>
+    </span>
+
+  </div>
+</div>
+
+<footer>
+  <p>Built with <a href="https://github.com/NousResearch/hermes-agent">Hermes Agent</a> · Served via <a href="https://gitea.ourpad.casa">Gitea</a> + NPMplus · <a href="https://gitea.ourpad.casa/shawn/project-directory">Source</a></p>
+</footer>
+
+</body>
+</html>
