shawn/project-directory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
db395201c10422b38c6f8916da41f14f059f92e2
project-directory/index.html
T
shawn db395201c1 Initial commit: project directory page + README 
- Vercel-inspired clean design with Geist font
- 6 project cards with status badges
- 8 service links
- Responsive layout
2026-05-17 22:53:06 -04:00

456 lines
13 KiB
HTML
Raw Blame History

<!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>
Reference in New Issue View Git Blame Copy Permalink