Created
March 11, 2026 03:57
-
-
Save justinrolston/7fc179950b778baa4e0d25b529db8668 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Johnny — Personal AI Assistant</title> | |
| <style> | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| background: #0f0f13; | |
| color: #e8e8f0; | |
| min-height: 100vh; | |
| padding: 48px 24px; | |
| } | |
| .container { | |
| max-width: 760px; | |
| margin: 0 auto; | |
| } | |
| header { | |
| text-align: center; | |
| margin-bottom: 56px; | |
| } | |
| .avatar { | |
| width: 72px; | |
| height: 72px; | |
| background: linear-gradient(135deg, #7c6dfa, #a78bfa); | |
| border-radius: 20px; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 36px; | |
| margin-bottom: 20px; | |
| box-shadow: 0 0 40px rgba(124, 109, 250, 0.4); | |
| } | |
| h1 { | |
| font-size: 2.4rem; | |
| font-weight: 700; | |
| letter-spacing: -0.5px; | |
| background: linear-gradient(135deg, #fff 40%, #a78bfa); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .tagline { | |
| margin-top: 10px; | |
| font-size: 1.05rem; | |
| color: #8888aa; | |
| } | |
| .badge-row { | |
| display: flex; | |
| gap: 8px; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| margin-top: 20px; | |
| } | |
| .badge { | |
| background: rgba(124, 109, 250, 0.15); | |
| border: 1px solid rgba(124, 109, 250, 0.3); | |
| color: #a78bfa; | |
| border-radius: 100px; | |
| padding: 4px 14px; | |
| font-size: 0.78rem; | |
| font-weight: 500; | |
| letter-spacing: 0.3px; | |
| } | |
| .section-title { | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| letter-spacing: 1.5px; | |
| text-transform: uppercase; | |
| color: #6666aa; | |
| margin-bottom: 16px; | |
| } | |
| .grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 16px; | |
| margin-bottom: 40px; | |
| } | |
| @media (max-width: 560px) { | |
| .grid { grid-template-columns: 1fr; } | |
| } | |
| .card { | |
| background: rgba(255,255,255,0.04); | |
| border: 1px solid rgba(255,255,255,0.07); | |
| border-radius: 16px; | |
| padding: 24px; | |
| transition: border-color 0.2s, background 0.2s; | |
| } | |
| .card:hover { | |
| background: rgba(255,255,255,0.06); | |
| border-color: rgba(124, 109, 250, 0.3); | |
| } | |
| .card-icon { | |
| font-size: 1.6rem; | |
| margin-bottom: 12px; | |
| } | |
| .card h3 { | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| color: #d4d4f0; | |
| margin-bottom: 8px; | |
| } | |
| .card p { | |
| font-size: 0.85rem; | |
| color: #7777aa; | |
| line-height: 1.6; | |
| } | |
| .integrations { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| margin-bottom: 40px; | |
| } | |
| .chip { | |
| background: rgba(255,255,255,0.05); | |
| border: 1px solid rgba(255,255,255,0.09); | |
| border-radius: 10px; | |
| padding: 10px 16px; | |
| font-size: 0.85rem; | |
| color: #bbbbdd; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .chip span.dot { | |
| width: 7px; | |
| height: 7px; | |
| background: #7c6dfa; | |
| border-radius: 50%; | |
| flex-shrink: 0; | |
| } | |
| .stack-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| margin-bottom: 40px; | |
| } | |
| .stack-pill { | |
| background: rgba(255,255,255,0.04); | |
| border: 1px solid rgba(255,255,255,0.08); | |
| border-radius: 8px; | |
| padding: 6px 14px; | |
| font-size: 0.8rem; | |
| color: #9999cc; | |
| font-family: "SF Mono", "Fira Code", monospace; | |
| } | |
| footer { | |
| text-align: center; | |
| margin-top: 56px; | |
| font-size: 0.8rem; | |
| color: #44446a; | |
| } | |
| .divider { | |
| border: none; | |
| border-top: 1px solid rgba(255,255,255,0.06); | |
| margin: 40px 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <div class="avatar">🤖</div> | |
| <h1>Johnny</h1> | |
| <p class="tagline">A deeply personal AI assistant, built from scratch</p> | |
| <div class="badge-row"> | |
| <span class="badge">Claude-powered</span> | |
| <span class="badge">Self-hosted</span> | |
| <span class="badge">TypeScript / Node.js</span> | |
| <span class="badge">Phases 0–6 complete</span> | |
| </div> | |
| </header> | |
| <p class="section-title">What it does</p> | |
| <div class="grid"> | |
| <div class="card"> | |
| <div class="card-icon">🧠</div> | |
| <h3>Powered by Claude</h3> | |
| <p>Uses Anthropic's Agent SDK to run full agentic sessions with tool use, subagents, and MCP servers under the hood.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon">🪪</div> | |
| <h3>Custom Personality</h3> | |
| <p>A <code>SOUL.md</code> file defines the bot's tone and behavior — injected into every session as system context.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon">💾</div> | |
| <h3>Persistent Memory</h3> | |
| <p>Conversation history stored in SQLite and vector memory via LanceDB so it actually remembers past interactions.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon">💬</div> | |
| <h3>Telegram Interface</h3> | |
| <p>Message it like a normal chat app — no CLI required. Runs persistently via PM2 and survives crashes + reboots.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon">⏰</div> | |
| <h3>Proactive Scheduler</h3> | |
| <p>Set reminders in plain language: once, recurring, or daily. Runs on a 15-second tick with full SQLite backing.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon">🔌</div> | |
| <h3>Extensible Skills</h3> | |
| <p>A hand-curated <code>skills.json</code> registry lets new tools and MCP servers be wired in cleanly via a defined interface.</p> | |
| </div> | |
| </div> | |
| <hr class="divider" /> | |
| <p class="section-title">Integrations</p> | |
| <div class="integrations"> | |
| <div class="chip"><span class="dot"></span> Gmail — read & manage emails</div> | |
| <div class="chip"><span class="dot"></span> Google Calendar — all 14 calendars</div> | |
| <div class="chip"><span class="dot"></span> Obsidian — personal & work vaults</div> | |
| <div class="chip"><span class="dot"></span> Telegram — live chat interface</div> | |
| <div class="chip"><span class="dot"></span> iMessage — planned</div> | |
| <div class="chip"><span class="dot"></span> Web monitoring — planned</div> | |
| </div> | |
| <hr class="divider" /> | |
| <p class="section-title">Tech stack</p> | |
| <div class="stack-row"> | |
| <span class="stack-pill">TypeScript</span> | |
| <span class="stack-pill">Node.js</span> | |
| <span class="stack-pill">@anthropic-ai/claude-agent-sdk</span> | |
| <span class="stack-pill">better-sqlite3</span> | |
| <span class="stack-pill">LanceDB</span> | |
| <span class="stack-pill">telegraf</span> | |
| <span class="stack-pill">commander</span> | |
| <span class="stack-pill">MCP</span> | |
| <span class="stack-pill">pm2</span> | |
| <span class="stack-pill">dotenv</span> | |
| <span class="stack-pill">zod</span> | |
| </div> | |
| <hr class="divider" /> | |
| <p class="section-title">Architecture</p> | |
| <div class="card" style="font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.78rem; color: #8888cc; line-height: 2;"> | |
| Channels (CLI → Telegram → iMessage)<br> | |
| ↓<br> | |
| Gateway / Router (message normalization, sessions)<br> | |
| ↓<br> | |
| Brain (SOUL.md personality, context assembly)<br> | |
| ↓ ↓<br> | |
| Memory Claude Agent SDK<br> | |
| (SQLite + LanceDB) (query, subagents, MCP, tools)<br> | |
| ↓ ↓<br> | |
| Scheduler Skills (MCP servers, custom tools) | |
| </div> | |
| <footer> | |
| Built by Justin · Phases 0–6 complete · Running 24/7 via PM2 | |
| </footer> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment