Initial commit: project directory page + README
- Vercel-inspired clean design with Geist font - 6 project cards with status badges - 8 service links - Responsive layout
This commit is contained in:
@@ -1,3 +1,40 @@
|
|||||||
# project-directory
|
# Ourpad — Project Directory
|
||||||
|
|
||||||
Directory of Ourpad projects and self-hosted services
|
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*
|
||||||
|
|||||||
+455
@@ -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 & 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 & 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>
|
||||||
Reference in New Issue
Block a user