Add GitHub Pages brochure and presentation
- Create docs/ folder for GitHub Pages deployment - Add Bootstrap 5 brochure (docs/index.html) with smooth scroll - Add reveal.js presentation (presentation.html) for slide decks - Copy architecture diagram to docs/assets/ - Update WHAT_IS_CLAUDE_OS.md with v2.0 features Features: - Beautiful single-page scrollable brochure - AOS scroll animations - Fully responsive Bootstrap grid - Brand colors (cyan/purple/pink gradients) - Architecture diagram embedded - All 12 sections from WHAT_IS_CLAUDE_OS Ready to deploy to: https://brobertsaz.github.io/claude-os/ 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
0481358370
commit
ebbb1ec8d9
5 changed files with 2108 additions and 8 deletions
|
|
@ -206,6 +206,7 @@ Git Hooks Installed (auto-indexing on every commit)
|
|||
Inspired by [Aider](https://github.com/Aider-AI/aider), Claude OS now uses a revolutionary two-phase approach:
|
||||
|
||||
**Phase 1 - Structural Index (INSTANT):**
|
||||
|
||||
- **Tree-sitter parsing** - Language-agnostic AST extraction (supports 40+ languages)
|
||||
- **No embeddings needed** - Parse syntax, extract symbols, zero LLM calls
|
||||
- **Blazing fast** - 10,000 Ruby files indexed in **30 seconds** (vs 3-5 hours before!)
|
||||
|
|
@ -214,6 +215,7 @@ Inspired by [Aider](https://github.com/Aider-AI/aider), Claude OS now uses a rev
|
|||
- **PageRank scoring** - Identifies most important files automatically
|
||||
|
||||
**Phase 2 - Semantic Index (SELECTIVE):**
|
||||
|
||||
- **Top 20% only** - Embed most important files (based on PageRank)
|
||||
- **Documentation first** - Full embedding for docs, specs, README
|
||||
- **Background processing** - Runs while you code, no waiting
|
||||
|
|
@ -478,6 +480,7 @@ Claude OS gives you powerful slash commands and automatic triggers.
|
|||
**Automatic Triggers:**
|
||||
|
||||
When you say phrases like these, Claude automatically saves to memories:
|
||||
|
||||
- "Remember this:"
|
||||
- "Save this:"
|
||||
- "Document this:"
|
||||
|
|
@ -638,7 +641,7 @@ This is the **compounding intelligence** that happens when AI actually understan
|
|||
│ (Now with Hybrid Indexing!) │
|
||||
│ │
|
||||
│ ┌──────────────┐ ┌──────────────┐ ┌─────────────────────────┐ │
|
||||
│ │ Real-Time │ │ Memory │ │ ⚡ NEW: Code Structure│ │
|
||||
│ │ Real-Time │ │ Memory │ │ ⚡ NEW: Code Structure │ │
|
||||
│ │ Learning │ │ System │ │ (Tree-sitter AST) │ │
|
||||
│ │ (Redis) │ │ (MCP) │ │ 38,406 symbols! │ │
|
||||
│ │ <1ms │ │ Instant │ │ 3 seconds to index │ │
|
||||
|
|
@ -733,7 +736,7 @@ Performance: Pistn (10,000 Ruby files) indexed in 3 seconds ⚡
|
|||
|
||||
```bash
|
||||
# 1. Install Claude OS (one-time, 3 minutes)
|
||||
git clone https://github.com/your-org/claude-os.git
|
||||
git clone https://github.co/brobertsaz/claude-os.git
|
||||
cd claude-os
|
||||
./install.sh
|
||||
|
||||
|
|
|
|||
641
brochure.html
Normal file
641
brochure.html
Normal file
|
|
@ -0,0 +1,641 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Claude OS - The AI Operating System That Never Forgets</title>
|
||||
|
||||
<!-- Bootstrap 5 -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- AOS (Animate On Scroll) -->
|
||||
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--cyan: #00D9FF;
|
||||
--purple: #8B5CF6;
|
||||
--pink: #FF00FF;
|
||||
--dark-bg: #0F172A;
|
||||
--darker-bg: #1E293B;
|
||||
}
|
||||
|
||||
* {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(135deg, var(--dark-bg) 0%, var(--darker-bg) 100%);
|
||||
color: #ffffff;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Gradient Text */
|
||||
.gradient-text {
|
||||
background: linear-gradient(90deg, var(--cyan) 0%, var(--purple) 50%, var(--pink) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
section {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
section.half-height {
|
||||
min-height: 50vh;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hero h2 {
|
||||
font-size: 2rem;
|
||||
color: #cbd5e1;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.hero .emoji-row {
|
||||
font-size: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
/* Problem Box */
|
||||
.problem-box {
|
||||
background: rgba(255, 0, 0, 0.1);
|
||||
border-left: 4px solid #ef4444;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.problem-box pre {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
padding: 1.5rem;
|
||||
border-radius: 6px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.problem-box code {
|
||||
color: #fca5a5;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Architecture Image */
|
||||
.architecture-img {
|
||||
max-width: 100%;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 0 40px rgba(0, 217, 255, 0.3);
|
||||
}
|
||||
|
||||
/* Metric Badge */
|
||||
.metric-badge {
|
||||
display: inline-block;
|
||||
font-size: 2.5rem;
|
||||
color: var(--cyan);
|
||||
font-weight: 700;
|
||||
text-shadow: 0 0 20px rgba(0, 217, 255, 0.6);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
/* Pillar Cards */
|
||||
.pillar-card {
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
border: 2px solid var(--purple);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
height: 100%;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
|
||||
}
|
||||
|
||||
.pillar-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 0 30px rgba(139, 92, 246, 0.4);
|
||||
}
|
||||
|
||||
.pillar-card h4 {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.pillar-card.cyan {
|
||||
border-color: var(--cyan);
|
||||
}
|
||||
|
||||
.pillar-card.purple {
|
||||
border-color: var(--purple);
|
||||
}
|
||||
|
||||
.pillar-card.pink {
|
||||
border-color: var(--pink);
|
||||
}
|
||||
|
||||
/* Two Column Section */
|
||||
.two-col-section h3 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.two-col-section ul {
|
||||
font-size: 1.1rem;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
table {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
table thead {
|
||||
background: var(--purple);
|
||||
}
|
||||
|
||||
table th {
|
||||
padding: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
table td {
|
||||
padding: 0.8rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
table tbody tr:hover {
|
||||
background: rgba(139, 92, 246, 0.1);
|
||||
}
|
||||
|
||||
/* Code Block */
|
||||
.code-block {
|
||||
background: rgba(30, 41, 59, 0.9);
|
||||
border: 1px solid var(--purple);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
|
||||
}
|
||||
|
||||
.code-block code {
|
||||
color: var(--cyan);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* CTA Button */
|
||||
.cta-button {
|
||||
display: inline-block;
|
||||
background: linear-gradient(90deg, var(--cyan) 0%, var(--purple) 100%);
|
||||
color: white;
|
||||
padding: 1.2rem 3rem;
|
||||
border-radius: 10px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
margin: 2rem 0;
|
||||
box-shadow: 0 0 30px rgba(0, 217, 255, 0.5);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 50px rgba(0, 217, 255, 0.8);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Highlight */
|
||||
.highlight {
|
||||
color: var(--cyan);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Section Titles */
|
||||
h2.section-title {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h2.section-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
section {
|
||||
min-height: auto;
|
||||
padding: 60px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Navbar (optional sticky nav) */
|
||||
.navbar-custom {
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.navbar-custom .nav-link {
|
||||
color: #cbd5e1 !important;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.navbar-custom .nav-link:hover {
|
||||
color: var(--cyan) !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero" id="hero">
|
||||
<div class="container">
|
||||
<h1 class="gradient-text" data-aos="fade-down">Claude OS</h1>
|
||||
<h2 data-aos="fade-up" data-aos-delay="200">
|
||||
The AI Operating System<br>That Never Forgets
|
||||
</h2>
|
||||
<div class="emoji-row" data-aos="fade-up" data-aos-delay="400">
|
||||
<span>🧠 Persistent Memory</span>
|
||||
<span>⚡ 600-1000x Faster</span>
|
||||
<span>🚀 Zero Setup</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Problem Section -->
|
||||
<section id="problem">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 offset-lg-1">
|
||||
<h2 class="section-title gradient-text" data-aos="fade-right">The Problem You're Facing</h2>
|
||||
<div class="problem-box" data-aos="fade-up">
|
||||
<p class="fs-5"><strong>Every. Single. Time.</strong></p>
|
||||
<pre><code>You: "Claude, add a feature to our auth system"
|
||||
Claude: "Based on common best practices..."
|
||||
You: "No no no—we have custom JWT, 2FA,
|
||||
timezone handling... This is all wrong."
|
||||
Claude: "Oh! I didn't know that."
|
||||
You: *starts typing 30-minute context document*</code></pre>
|
||||
</div>
|
||||
<p class="text-center fs-3 mt-4" data-aos="zoom-in" data-aos-delay="200">
|
||||
<span class="highlight">Claude is brilliant. But Claude starts from ZERO every conversation.</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Solution + Architecture -->
|
||||
<section id="solution">
|
||||
<div class="container">
|
||||
<h2 class="section-title gradient-text text-center" data-aos="fade-down">Enter Claude OS</h2>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-10">
|
||||
<img src="frontend/public/assets/claude-os-architecture.svg"
|
||||
alt="Claude OS Architecture"
|
||||
class="architecture-img"
|
||||
data-aos="zoom-in"
|
||||
data-aos-delay="200">
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-4" data-aos="fade-up" data-aos-delay="400">
|
||||
<div class="metric-badge">10,000 files indexed in 3 seconds</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- What It Does -->
|
||||
<section id="what-it-does">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 offset-lg-1">
|
||||
<h2 class="section-title gradient-text" data-aos="fade-right">What Claude OS Does</h2>
|
||||
<ul class="fs-5" data-aos="fade-up">
|
||||
<li class="mb-3"><strong class="highlight">Remembers everything</strong> about your project across all sessions</li>
|
||||
<li class="mb-3"><strong class="highlight">Learns automatically</strong> from every conversation, commit, and decision</li>
|
||||
<li class="mb-3"><strong class="highlight">Understands your codebase</strong> like a senior developer</li>
|
||||
<li class="mb-3"><strong class="highlight">Detects patterns</strong> in real-time as you work</li>
|
||||
<li class="mb-3"><strong class="highlight">Adapts its responses</strong> to match YOUR coding style</li>
|
||||
<li class="mb-3"><strong class="highlight">Never forgets</strong> — context persists forever</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6 Pillars -->
|
||||
<section id="pillars">
|
||||
<div class="container">
|
||||
<h2 class="section-title gradient-text text-center" data-aos="fade-down">6 Core Pillars</h2>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
|
||||
<div class="pillar-card cyan">
|
||||
<h4 class="gradient-text">🧠 Real-Time Learning</h4>
|
||||
<p>Redis Pub/Sub with <1ms latency. Automatically detects 10+ pattern types from your conversations.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">
|
||||
<div class="pillar-card purple">
|
||||
<h4 class="gradient-text">💾 Memory MCP</h4>
|
||||
<p>Persistent memory across sessions. Natural language save and instant recall.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200">
|
||||
<div class="pillar-card pink">
|
||||
<h4 class="gradient-text">📚 Semantic Knowledge</h4>
|
||||
<p>Vector embeddings for deep understanding. Instant semantic search across your codebase.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
|
||||
<div class="pillar-card cyan">
|
||||
<h4 class="gradient-text">📊 Code Structure</h4>
|
||||
<p><strong>NEW!</strong> Tree-sitter AST parsing. 38,406 symbols indexed in 3 seconds.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="400">
|
||||
<div class="pillar-card purple">
|
||||
<h4 class="gradient-text">🔍 Analyze-Project</h4>
|
||||
<p>Hybrid indexing (structural + semantic). Git hooks for automatic updates.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="500">
|
||||
<div class="pillar-card pink">
|
||||
<h4 class="gradient-text">🎯 Session Management</h4>
|
||||
<p>Auto-resume sessions with full context preservation. Zero cold starts.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Hybrid Indexing -->
|
||||
<section id="hybrid-indexing" class="two-col-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title gradient-text text-center" data-aos="fade-down">⚡ NEW: Hybrid Indexing</h2>
|
||||
<div class="row g-5">
|
||||
<div class="col-md-6" data-aos="fade-right">
|
||||
<h3 style="color: var(--cyan);">Phase 1: Structural</h3>
|
||||
<ul>
|
||||
<li>Tree-sitter AST parsing</li>
|
||||
<li>Extract all symbols</li>
|
||||
<li>Build dependency graph</li>
|
||||
<li>PageRank scoring</li>
|
||||
<li><strong class="metric-badge" style="font-size: 2rem;">3 seconds</strong> for 10k files!</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6" data-aos="fade-left">
|
||||
<h3 style="color: var(--purple);">Phase 2: Semantic</h3>
|
||||
<ul>
|
||||
<li>Top 20% most important files</li>
|
||||
<li>Full documentation embedding</li>
|
||||
<li>80% reduction in chunks</li>
|
||||
<li>Runs in background</li>
|
||||
<li><strong>Optional, while you code</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-5" data-aos="zoom-in">
|
||||
<p class="fs-2 gradient-text">600-1000x faster than before!</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Performance Metrics -->
|
||||
<section id="performance">
|
||||
<div class="container">
|
||||
<h2 class="section-title gradient-text text-center" data-aos="fade-down">Real Performance Numbers</h2>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-10">
|
||||
<div class="table-responsive" data-aos="fade-up">
|
||||
<table class="table table-dark table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Project</th>
|
||||
<th>Before (Full Embed)</th>
|
||||
<th>After (Hybrid)</th>
|
||||
<th>Speedup</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Pistn (10k Ruby files)</strong></td>
|
||||
<td>3-5 hours</td>
|
||||
<td><span class="highlight fs-5">3 seconds</span></td>
|
||||
<td><span class="highlight">600-1000x</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Start coding</strong></td>
|
||||
<td>After full index</td>
|
||||
<td><span class="highlight">Immediately!</span></td>
|
||||
<td>Instant</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Chunks indexed</strong></td>
|
||||
<td>100,000+</td>
|
||||
<td>~20,000</td>
|
||||
<td>80% reduction</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Query speed</strong></td>
|
||||
<td>Semantic only</td>
|
||||
<td>Structural + Semantic</td>
|
||||
<td>Faster!</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Comparison -->
|
||||
<section id="comparison">
|
||||
<div class="container">
|
||||
<h2 class="section-title gradient-text text-center" data-aos="fade-down">How It Compares</h2>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-10">
|
||||
<div class="table-responsive" data-aos="fade-up">
|
||||
<table class="table table-dark table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Feature</th>
|
||||
<th>Claude Alone</th>
|
||||
<th>ChatGPT</th>
|
||||
<th>Copilot</th>
|
||||
<th>Claude OS</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Remembers your code</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td><span class="highlight">✅ Perfectly</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Understands architecture</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td><span class="highlight">✅ Completely</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Indexes 10k files</strong></td>
|
||||
<td>N/A</td>
|
||||
<td>N/A</td>
|
||||
<td>N/A</td>
|
||||
<td><span class="highlight fs-5">✅ 3 seconds</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Learns from decisions</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td><span class="highlight">✅ Automatically</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Session management</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td><span class="highlight">✅ Built-in</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Free & open source</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td><span class="highlight">✅ 100%</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Use Cases -->
|
||||
<section id="use-cases" class="two-col-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title gradient-text text-center" data-aos="fade-down">You Need This If You...</h2>
|
||||
<div class="row g-5">
|
||||
<div class="col-md-6" data-aos="fade-right">
|
||||
<ul class="fs-5">
|
||||
<li class="mb-3">Work on multiple projects</li>
|
||||
<li class="mb-3">Have team members leaving</li>
|
||||
<li class="mb-3">Work long-term on same project</li>
|
||||
<li class="mb-3">Care about code consistency</li>
|
||||
<li class="mb-3">Want faster development</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6" data-aos="fade-left">
|
||||
<ul class="fs-5">
|
||||
<li class="mb-3">Debug tricky issues</li>
|
||||
<li class="mb-3">Onboard new developers</li>
|
||||
<li class="mb-3">Maintain architectural consistency</li>
|
||||
<li class="mb-3">Document as you go</li>
|
||||
<li class="mb-3">Make better decisions</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Getting Started -->
|
||||
<section id="getting-started">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 offset-lg-1">
|
||||
<h2 class="section-title gradient-text text-center" data-aos="fade-down">Getting Started in 3 Steps</h2>
|
||||
<div class="code-block" data-aos="fade-up">
|
||||
<pre><code># 1. Install Claude OS (one-time, 3 minutes)
|
||||
git clone https://github.com/brobertsaz/claude-os.git
|
||||
cd claude-os
|
||||
./install.sh
|
||||
|
||||
# 2. Start Claude OS
|
||||
./start.sh
|
||||
|
||||
# 3. Initialize your project (2 minutes)
|
||||
cd /path/to/your/project
|
||||
/claude-os-init
|
||||
# Answer a few questions, done!</code></pre>
|
||||
</div>
|
||||
<p class="text-center fs-4 mt-4" data-aos="zoom-in" data-aos-delay="200">
|
||||
<span class="highlight">Now every conversation includes your complete project knowledge.</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- The Magic -->
|
||||
<section id="magic" class="half-height">
|
||||
<div class="container text-center">
|
||||
<h2 class="section-title gradient-text" data-aos="fade-down">The Real Magic ✨</h2>
|
||||
<p class="fs-3 mb-4" data-aos="fade-up" data-aos-delay="200">
|
||||
Claude OS doesn't make Claude <strong class="highlight">smarter</strong>.
|
||||
</p>
|
||||
<p class="fs-3 mb-5" data-aos="fade-up" data-aos-delay="400">
|
||||
Claude OS makes Claude <strong class="highlight">USEFUL</strong> for your specific project.
|
||||
</p>
|
||||
<p class="fs-2 gradient-text" data-aos="zoom-in" data-aos-delay="600">
|
||||
Generic Intelligence → Practical Expertise
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section id="cta" class="half-height">
|
||||
<div class="container text-center">
|
||||
<h2 class="section-title gradient-text" data-aos="fade-down">Stop Starting From Zero</h2>
|
||||
<p class="fs-4 mb-4" data-aos="fade-up" data-aos-delay="200">
|
||||
Start building with an AI that knows your code<br>as well as you do.
|
||||
</p>
|
||||
<div data-aos="zoom-in" data-aos-delay="400">
|
||||
<a href="https://github.com/brobertsaz/claude-os" class="cta-button">
|
||||
Get Claude OS Now
|
||||
</a>
|
||||
</div>
|
||||
<p class="mt-5" style="opacity: 0.8;" data-aos="fade-up" data-aos-delay="600">
|
||||
100% Free & Open Source<br>
|
||||
<small>Built with ❤️ by developers who got tired of starting every conversation from zero</small>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- AOS JS -->
|
||||
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
||||
|
||||
<script>
|
||||
// Initialize AOS
|
||||
AOS.init({
|
||||
duration: 800,
|
||||
once: true,
|
||||
offset: 100
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
289
docs/assets/claude-os-architecture.svg
Normal file
289
docs/assets/claude-os-architecture.svg
Normal file
|
|
@ -0,0 +1,289 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" style="background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);">
|
||||
<defs>
|
||||
<!-- Gradient definitions -->
|
||||
<linearGradient id="cyanGlow" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#00D9FF;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#00D9FF;stop-opacity:0.6" />
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="purpleGlow" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#8B5CF6;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#8B5CF6;stop-opacity:0.6" />
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="pinkGlow" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#FF00FF;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#FF00FF;stop-opacity:0.6" />
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="cyanPurpleGlow" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#00D9FF;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#8B5CF6;stop-opacity:0.6" />
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="purplePinkGlow" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#8B5CF6;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#FF00FF;stop-opacity:0.6" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Glow filters -->
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="4" result="coloredBlur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<filter id="strongGlow">
|
||||
<feGaussianBlur stdDeviation="8" result="coloredBlur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Stars pattern -->
|
||||
<pattern id="stars" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
|
||||
<circle cx="10" cy="20" r="1" fill="white" opacity="0.3"/>
|
||||
<circle cx="40" cy="50" r="0.5" fill="white" opacity="0.5"/>
|
||||
<circle cx="70" cy="10" r="1.5" fill="white" opacity="0.2"/>
|
||||
<circle cx="85" cy="80" r="0.8" fill="white" opacity="0.4"/>
|
||||
<circle cx="25" cy="90" r="1" fill="white" opacity="0.3"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<!-- Background stars -->
|
||||
<rect width="1920" height="1080" fill="url(#stars)" opacity="0.5"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="960" y="80" font-family="Arial, sans-serif" font-size="48" font-weight="bold" fill="#FFFFFF" text-anchor="middle" filter="url(#glow)">
|
||||
CLAUDE OS ARCHITECTURE
|
||||
</text>
|
||||
|
||||
<!-- Center Hub -->
|
||||
<g id="centerHub">
|
||||
<circle cx="960" cy="540" r="140" fill="none" stroke="url(#cyanGlow)" stroke-width="3" filter="url(#strongGlow)"/>
|
||||
<circle cx="960" cy="540" r="135" fill="#1E293B" opacity="0.9"/>
|
||||
|
||||
<!-- Circuit pattern inside hub -->
|
||||
<line x1="880" y1="540" x2="1040" y2="540" stroke="#00D9FF" stroke-width="1" opacity="0.3"/>
|
||||
<line x1="960" y1="460" x2="960" y2="620" stroke="#00D9FF" stroke-width="1" opacity="0.3"/>
|
||||
<circle cx="920" cy="500" r="3" fill="#00D9FF" opacity="0.5"/>
|
||||
<circle cx="1000" cy="580" r="3" fill="#00D9FF" opacity="0.5"/>
|
||||
|
||||
<text x="960" y="510" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#00D9FF" text-anchor="middle">
|
||||
Semantic Knowledge Base
|
||||
</text>
|
||||
<text x="960" y="540" font-family="Arial, sans-serif" font-size="16" fill="#FFFFFF" text-anchor="middle" opacity="0.8">
|
||||
SQLite + sqlite-vec
|
||||
</text>
|
||||
<text x="960" y="565" font-family="Arial, sans-serif" font-size="16" fill="#FFFFFF" text-anchor="middle" opacity="0.8">
|
||||
800+ indexed chunks
|
||||
</text>
|
||||
<text x="960" y="590" font-family="Arial, sans-serif" font-size="16" fill="#FFFFFF" text-anchor="middle" opacity="0.8">
|
||||
Vector embeddings
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- Component 1: TOP-LEFT - Real-Time Learning -->
|
||||
<g id="component1">
|
||||
<rect x="200" y="200" width="280" height="160" rx="15" fill="#1E293B" stroke="url(#cyanGlow)" stroke-width="2" filter="url(#glow)"/>
|
||||
<line x1="210" y1="220" x2="260" y2="220" stroke="#00D9FF" stroke-width="1" opacity="0.3"/>
|
||||
<circle cx="265" cy="220" r="2" fill="#00D9FF" opacity="0.5"/>
|
||||
|
||||
<text x="340" y="235" font-family="Arial, sans-serif" font-size="22" font-weight="bold" fill="#00D9FF" text-anchor="middle">
|
||||
🧠 Real-Time Learning
|
||||
</text>
|
||||
<text x="340" y="265" font-family="Arial, sans-serif" font-size="16" fill="#FFFFFF" text-anchor="middle" opacity="0.8">
|
||||
Redis Pub/Sub
|
||||
</text>
|
||||
<text x="340" y="290" font-family="Arial, sans-serif" font-size="16" fill="#FFFFFF" text-anchor="middle" opacity="0.8">
|
||||
<1ms latency
|
||||
</text>
|
||||
<text x="340" y="315" font-family="Arial, sans-serif" font-size="16" fill="#FFFFFF" text-anchor="middle" opacity="0.8">
|
||||
10+ patterns
|
||||
</text>
|
||||
<text x="340" y="345" font-family="Arial, sans-serif" font-size="14" fill="#00D9FF" text-anchor="middle" opacity="0.6">
|
||||
(Cyan glow)
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- Component 2: TOP-RIGHT - Memory MCP -->
|
||||
<g id="component2">
|
||||
<rect x="1440" y="200" width="280" height="160" rx="15" fill="#1E293B" stroke="url(#purpleGlow)" stroke-width="2" filter="url(#glow)"/>
|
||||
<line x1="1450" y1="220" x2="1500" y2="220" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
|
||||
<circle cx="1505" cy="220" r="2" fill="#8B5CF6" opacity="0.5"/>
|
||||
|
||||
<text x="1580" y="235" font-family="Arial, sans-serif" font-size="22" font-weight="bold" fill="#8B5CF6" text-anchor="middle">
|
||||
💾 Memory MCP
|
||||
</text>
|
||||
<text x="1580" y="265" font-family="Arial, sans-serif" font-size="16" fill="#FFFFFF" text-anchor="middle" opacity="0.8">
|
||||
Persistent Memory
|
||||
</text>
|
||||
<text x="1580" y="290" font-family="Arial, sans-serif" font-size="16" fill="#FFFFFF" text-anchor="middle" opacity="0.8">
|
||||
Instant Recall
|
||||
</text>
|
||||
<text x="1580" y="315" font-family="Arial, sans-serif" font-size="16" fill="#FFFFFF" text-anchor="middle" opacity="0.8">
|
||||
Natural Language
|
||||
</text>
|
||||
<text x="1580" y="345" font-family="Arial, sans-serif" font-size="14" fill="#8B5CF6" text-anchor="middle" opacity="0.6">
|
||||
(Purple glow)
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- Component 3: RIGHT - Analyze-Project -->
|
||||
<g id="component3">
|
||||
<rect x="1440" y="460" width="280" height="160" rx="15" fill="#1E293B" stroke="url(#pinkGlow)" stroke-width="2" filter="url(#glow)"/>
|
||||
<line x1="1450" y1="480" x2="1500" y2="480" stroke="#FF00FF" stroke-width="1" opacity="0.3"/>
|
||||
<circle cx="1505" cy="480" r="2" fill="#FF00FF" opacity="0.5"/>
|
||||
|
||||
<text x="1580" y="495" font-family="Arial, sans-serif" font-size="22" font-weight="bold" fill="#FF00FF" text-anchor="middle">
|
||||
🔍 Analyze-Project
|
||||
</text>
|
||||
<text x="1580" y="525" font-family="Arial, sans-serif" font-size="16" fill="#FFFFFF" text-anchor="middle" opacity="0.8">
|
||||
Git Hooks
|
||||
</text>
|
||||
<text x="1580" y="550" font-family="Arial, sans-serif" font-size="16" fill="#FFFFFF" text-anchor="middle" opacity="0.8">
|
||||
Auto-Index
|
||||
</text>
|
||||
<text x="1580" y="575" font-family="Arial, sans-serif" font-size="16" fill="#FFFFFF" text-anchor="middle" opacity="0.8">
|
||||
Smart Docs
|
||||
</text>
|
||||
<text x="1580" y="605" font-family="Arial, sans-serif" font-size="14" fill="#FF00FF" text-anchor="middle" opacity="0.6">
|
||||
(Pink glow)
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- Component 4: BOTTOM-RIGHT - Session Management -->
|
||||
<g id="component4">
|
||||
<rect x="1440" y="720" width="280" height="160" rx="15" fill="#1E293B" stroke="url(#purplePinkGlow)" stroke-width="2" filter="url(#glow)"/>
|
||||
<line x1="1450" y1="740" x2="1500" y2="740" stroke="#FF00FF" stroke-width="1" opacity="0.3"/>
|
||||
<circle cx="1505" cy="740" r="2" fill="#8B5CF6" opacity="0.5"/>
|
||||
|
||||
<text x="1580" y="755" font-family="Arial, sans-serif" font-size="22" font-weight="bold" fill="#FF00FF" text-anchor="middle">
|
||||
🎯 Session Management
|
||||
</text>
|
||||
<text x="1580" y="785" font-family="Arial, sans-serif" font-size="16" fill="#FFFFFF" text-anchor="middle" opacity="0.8">
|
||||
Auto Resume
|
||||
</text>
|
||||
<text x="1580" y="810" font-family="Arial, sans-serif" font-size="16" fill="#FFFFFF" text-anchor="middle" opacity="0.8">
|
||||
Context Preservation
|
||||
</text>
|
||||
<text x="1580" y="835" font-family="Arial, sans-serif" font-size="16" fill="#FFFFFF" text-anchor="middle" opacity="0.8">
|
||||
Zero Cold Start
|
||||
</text>
|
||||
<text x="1580" y="865" font-family="Arial, sans-serif" font-size="14" fill="#FF00FF" text-anchor="middle" opacity="0.6">
|
||||
(Purple-pink glow)
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- Component 5: BOTTOM-LEFT - Semantic Search -->
|
||||
<g id="component5">
|
||||
<rect x="200" y="720" width="280" height="160" rx="15" fill="#1E293B" stroke="url(#cyanPurpleGlow)" stroke-width="2" filter="url(#glow)"/>
|
||||
<line x1="210" y1="740" x2="260" y2="740" stroke="#00D9FF" stroke-width="1" opacity="0.3"/>
|
||||
<circle cx="265" cy="740" r="2" fill="#8B5CF6" opacity="0.5"/>
|
||||
|
||||
<text x="340" y="755" font-family="Arial, sans-serif" font-size="22" font-weight="bold" fill="#00D9FF" text-anchor="middle">
|
||||
📚 Semantic Search
|
||||
</text>
|
||||
<text x="340" y="785" font-family="Arial, sans-serif" font-size="16" fill="#FFFFFF" text-anchor="middle" opacity="0.8">
|
||||
Vector Similarity
|
||||
</text>
|
||||
<text x="340" y="810" font-family="Arial, sans-serif" font-size="16" fill="#FFFFFF" text-anchor="middle" opacity="0.8">
|
||||
Code Understanding
|
||||
</text>
|
||||
<text x="340" y="835" font-family="Arial, sans-serif" font-size="16" fill="#FFFFFF" text-anchor="middle" opacity="0.8">
|
||||
Pattern Recognition
|
||||
</text>
|
||||
<text x="340" y="865" font-family="Arial, sans-serif" font-size="14" fill="#8B5CF6" text-anchor="middle" opacity="0.6">
|
||||
(Cyan-purple glow)
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- Connection lines (circuit traces) -->
|
||||
<!-- Component 1 to Center -->
|
||||
<line x1="480" y1="280" x2="820" y2="540" stroke="#00D9FF" stroke-width="2" opacity="0.6" filter="url(#glow)"/>
|
||||
<circle cx="480" cy="280" r="4" fill="#00D9FF" filter="url(#glow)"/>
|
||||
|
||||
<!-- Component 2 to Center -->
|
||||
<line x1="1440" y1="280" x2="1100" y2="540" stroke="#8B5CF6" stroke-width="2" opacity="0.6" filter="url(#glow)"/>
|
||||
<circle cx="1440" cy="280" r="4" fill="#8B5CF6" filter="url(#glow)"/>
|
||||
|
||||
<!-- Component 3 to Center -->
|
||||
<line x1="1440" y1="540" x2="1100" y2="540" stroke="#FF00FF" stroke-width="2" opacity="0.6" filter="url(#glow)"/>
|
||||
<circle cx="1440" cy="540" r="4" fill="#FF00FF" filter="url(#glow)"/>
|
||||
|
||||
<!-- Component 4 to Center -->
|
||||
<line x1="1440" y1="800" x2="1100" y2="540" stroke="#FF00FF" stroke-width="2" opacity="0.6" filter="url(#glow)"/>
|
||||
<circle cx="1440" cy="800" r="4" fill="#FF00FF" filter="url(#glow)"/>
|
||||
|
||||
<!-- Component 5 to Center -->
|
||||
<line x1="480" y1="800" x2="820" y2="540" stroke="#00D9FF" stroke-width="2" opacity="0.6" filter="url(#glow)"/>
|
||||
<circle cx="480" cy="800" r="4" fill="#00D9FF" filter="url(#glow)"/>
|
||||
|
||||
<!-- Flow Path: Center to MCP Server to Claude Code to Developer -->
|
||||
<g id="flowPath">
|
||||
<!-- Vertical connection from center hub down -->
|
||||
<line x1="960" y1="680" x2="960" y2="900" stroke="#00D9FF" stroke-width="3" opacity="0.5" stroke-dasharray="5,5" filter="url(#glow)"/>
|
||||
|
||||
<!-- MCP Server box -->
|
||||
<rect x="320" y="900" width="200" height="60" rx="10" fill="#1E293B" stroke="#00D9FF" stroke-width="2" opacity="0.9" filter="url(#glow)"/>
|
||||
<text x="420" y="925" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#00D9FF" text-anchor="middle">
|
||||
MCP Server
|
||||
</text>
|
||||
<text x="420" y="948" font-family="Arial, sans-serif" font-size="15" fill="#FFFFFF" text-anchor="middle" opacity="0.8">
|
||||
(port 8051)
|
||||
</text>
|
||||
|
||||
<!-- Arrow from center to MCP -->
|
||||
<line x1="520" y1="930" x2="740" y2="930" stroke="#00D9FF" stroke-width="3" opacity="0.8" filter="url(#glow)"/>
|
||||
<polygon points="740,930 730,925 730,935" fill="#00D9FF" opacity="0.8"/>
|
||||
|
||||
<!-- Claude Code Interface box -->
|
||||
<rect x="740" y="900" width="200" height="60" rx="10" fill="#1E293B" stroke="#8B5CF6" stroke-width="2" opacity="0.9" filter="url(#glow)"/>
|
||||
<text x="840" y="925" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#8B5CF6" text-anchor="middle">
|
||||
Claude Code
|
||||
</text>
|
||||
<text x="840" y="948" font-family="Arial, sans-serif" font-size="15" fill="#FFFFFF" text-anchor="middle" opacity="0.8">
|
||||
Interface
|
||||
</text>
|
||||
|
||||
<!-- Arrow from MCP to Claude Code -->
|
||||
<line x1="940" y1="930" x2="1160" y2="930" stroke="#8B5CF6" stroke-width="3" opacity="0.8" filter="url(#glow)"/>
|
||||
<polygon points="1160,930 1150,925 1150,935" fill="#8B5CF6" opacity="0.8"/>
|
||||
|
||||
<!-- Developer box -->
|
||||
<rect x="1160" y="900" width="200" height="60" rx="10" fill="#1E293B" stroke="#FF00FF" stroke-width="2" opacity="0.9" filter="url(#glow)"/>
|
||||
<text x="1260" y="925" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#FF00FF" text-anchor="middle">
|
||||
Developer
|
||||
</text>
|
||||
<text x="1260" y="948" font-family="Arial, sans-serif" font-size="15" fill="#FFFFFF" text-anchor="middle" opacity="0.8">
|
||||
(You!)
|
||||
</text>
|
||||
|
||||
<!-- Arrow pointing right for emphasis -->
|
||||
<line x1="1360" y1="930" x2="1420" y2="930" stroke="#FF00FF" stroke-width="3" opacity="0.8" filter="url(#glow)"/>
|
||||
<polygon points="1420,930 1410,925 1410,935" fill="#FF00FF" opacity="0.8"/>
|
||||
</g>
|
||||
|
||||
<!-- Bottom Panel: Data Flow -->
|
||||
<g id="bottomPanel">
|
||||
<rect x="360" y="980" width="1200" height="60" rx="10" fill="#1E293B" stroke="#00D9FF" stroke-width="2" opacity="0.9" filter="url(#glow)"/>
|
||||
|
||||
<text x="960" y="1005" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#FFFFFF" text-anchor="middle">
|
||||
Data Flow Pipeline:
|
||||
</text>
|
||||
<text x="960" y="1028" font-family="Arial, sans-serif" font-size="16" fill="#00D9FF" text-anchor="middle">
|
||||
Git Commit → 3s indexing → SQLite → MCP → Claude → You
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- Decorative circuit lines in background -->
|
||||
<line x1="100" y1="100" x2="300" y2="100" stroke="#00D9FF" stroke-width="1" opacity="0.1"/>
|
||||
<line x1="1620" y1="100" x2="1820" y2="100" stroke="#FF00FF" stroke-width="1" opacity="0.1"/>
|
||||
<line x1="100" y1="950" x2="300" y2="950" stroke="#8B5CF6" stroke-width="1" opacity="0.1"/>
|
||||
<circle cx="150" cy="100" r="3" fill="#00D9FF" opacity="0.2"/>
|
||||
<circle cx="1770" cy="100" r="3" fill="#FF00FF" opacity="0.2"/>
|
||||
<circle cx="150" cy="950" r="3" fill="#8B5CF6" opacity="0.2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 14 KiB |
641
docs/index.html
Normal file
641
docs/index.html
Normal file
|
|
@ -0,0 +1,641 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Claude OS - The AI Operating System That Never Forgets</title>
|
||||
|
||||
<!-- Bootstrap 5 -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- AOS (Animate On Scroll) -->
|
||||
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--cyan: #00D9FF;
|
||||
--purple: #8B5CF6;
|
||||
--pink: #FF00FF;
|
||||
--dark-bg: #0F172A;
|
||||
--darker-bg: #1E293B;
|
||||
}
|
||||
|
||||
* {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(135deg, var(--dark-bg) 0%, var(--darker-bg) 100%);
|
||||
color: #ffffff;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Gradient Text */
|
||||
.gradient-text {
|
||||
background: linear-gradient(90deg, var(--cyan) 0%, var(--purple) 50%, var(--pink) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
section {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
section.half-height {
|
||||
min-height: 50vh;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hero h2 {
|
||||
font-size: 2rem;
|
||||
color: #cbd5e1;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.hero .emoji-row {
|
||||
font-size: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
/* Problem Box */
|
||||
.problem-box {
|
||||
background: rgba(255, 0, 0, 0.1);
|
||||
border-left: 4px solid #ef4444;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.problem-box pre {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
padding: 1.5rem;
|
||||
border-radius: 6px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.problem-box code {
|
||||
color: #fca5a5;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Architecture Image */
|
||||
.architecture-img {
|
||||
max-width: 100%;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 0 40px rgba(0, 217, 255, 0.3);
|
||||
}
|
||||
|
||||
/* Metric Badge */
|
||||
.metric-badge {
|
||||
display: inline-block;
|
||||
font-size: 2.5rem;
|
||||
color: var(--cyan);
|
||||
font-weight: 700;
|
||||
text-shadow: 0 0 20px rgba(0, 217, 255, 0.6);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
/* Pillar Cards */
|
||||
.pillar-card {
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
border: 2px solid var(--purple);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
height: 100%;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
|
||||
}
|
||||
|
||||
.pillar-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 0 30px rgba(139, 92, 246, 0.4);
|
||||
}
|
||||
|
||||
.pillar-card h4 {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.pillar-card.cyan {
|
||||
border-color: var(--cyan);
|
||||
}
|
||||
|
||||
.pillar-card.purple {
|
||||
border-color: var(--purple);
|
||||
}
|
||||
|
||||
.pillar-card.pink {
|
||||
border-color: var(--pink);
|
||||
}
|
||||
|
||||
/* Two Column Section */
|
||||
.two-col-section h3 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.two-col-section ul {
|
||||
font-size: 1.1rem;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
table {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
table thead {
|
||||
background: var(--purple);
|
||||
}
|
||||
|
||||
table th {
|
||||
padding: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
table td {
|
||||
padding: 0.8rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
table tbody tr:hover {
|
||||
background: rgba(139, 92, 246, 0.1);
|
||||
}
|
||||
|
||||
/* Code Block */
|
||||
.code-block {
|
||||
background: rgba(30, 41, 59, 0.9);
|
||||
border: 1px solid var(--purple);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
|
||||
}
|
||||
|
||||
.code-block code {
|
||||
color: var(--cyan);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* CTA Button */
|
||||
.cta-button {
|
||||
display: inline-block;
|
||||
background: linear-gradient(90deg, var(--cyan) 0%, var(--purple) 100%);
|
||||
color: white;
|
||||
padding: 1.2rem 3rem;
|
||||
border-radius: 10px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
margin: 2rem 0;
|
||||
box-shadow: 0 0 30px rgba(0, 217, 255, 0.5);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 50px rgba(0, 217, 255, 0.8);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Highlight */
|
||||
.highlight {
|
||||
color: var(--cyan);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Section Titles */
|
||||
h2.section-title {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h2.section-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
section {
|
||||
min-height: auto;
|
||||
padding: 60px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Navbar (optional sticky nav) */
|
||||
.navbar-custom {
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.navbar-custom .nav-link {
|
||||
color: #cbd5e1 !important;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.navbar-custom .nav-link:hover {
|
||||
color: var(--cyan) !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero" id="hero">
|
||||
<div class="container">
|
||||
<h1 class="gradient-text" data-aos="fade-down">Claude OS</h1>
|
||||
<h2 data-aos="fade-up" data-aos-delay="200">
|
||||
The AI Operating System<br>That Never Forgets
|
||||
</h2>
|
||||
<div class="emoji-row" data-aos="fade-up" data-aos-delay="400">
|
||||
<span>🧠 Persistent Memory</span>
|
||||
<span>⚡ 600-1000x Faster</span>
|
||||
<span>🚀 Zero Setup</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Problem Section -->
|
||||
<section id="problem">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 offset-lg-1">
|
||||
<h2 class="section-title gradient-text" data-aos="fade-right">The Problem You're Facing</h2>
|
||||
<div class="problem-box" data-aos="fade-up">
|
||||
<p class="fs-5"><strong>Every. Single. Time.</strong></p>
|
||||
<pre><code>You: "Claude, add a feature to our auth system"
|
||||
Claude: "Based on common best practices..."
|
||||
You: "No no no—we have custom JWT, 2FA,
|
||||
timezone handling... This is all wrong."
|
||||
Claude: "Oh! I didn't know that."
|
||||
You: *starts typing 30-minute context document*</code></pre>
|
||||
</div>
|
||||
<p class="text-center fs-3 mt-4" data-aos="zoom-in" data-aos-delay="200">
|
||||
<span class="highlight">Claude is brilliant. But Claude starts from ZERO every conversation.</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Solution + Architecture -->
|
||||
<section id="solution">
|
||||
<div class="container">
|
||||
<h2 class="section-title gradient-text text-center" data-aos="fade-down">Enter Claude OS</h2>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-10">
|
||||
<img src="assets/claude-os-architecture.svg"
|
||||
alt="Claude OS Architecture"
|
||||
class="architecture-img"
|
||||
data-aos="zoom-in"
|
||||
data-aos-delay="200">
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-4" data-aos="fade-up" data-aos-delay="400">
|
||||
<div class="metric-badge">10,000 files indexed in 3 seconds</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- What It Does -->
|
||||
<section id="what-it-does">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 offset-lg-1">
|
||||
<h2 class="section-title gradient-text" data-aos="fade-right">What Claude OS Does</h2>
|
||||
<ul class="fs-5" data-aos="fade-up">
|
||||
<li class="mb-3"><strong class="highlight">Remembers everything</strong> about your project across all sessions</li>
|
||||
<li class="mb-3"><strong class="highlight">Learns automatically</strong> from every conversation, commit, and decision</li>
|
||||
<li class="mb-3"><strong class="highlight">Understands your codebase</strong> like a senior developer</li>
|
||||
<li class="mb-3"><strong class="highlight">Detects patterns</strong> in real-time as you work</li>
|
||||
<li class="mb-3"><strong class="highlight">Adapts its responses</strong> to match YOUR coding style</li>
|
||||
<li class="mb-3"><strong class="highlight">Never forgets</strong> — context persists forever</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6 Pillars -->
|
||||
<section id="pillars">
|
||||
<div class="container">
|
||||
<h2 class="section-title gradient-text text-center" data-aos="fade-down">6 Core Pillars</h2>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
|
||||
<div class="pillar-card cyan">
|
||||
<h4 class="gradient-text">🧠 Real-Time Learning</h4>
|
||||
<p>Redis Pub/Sub with <1ms latency. Automatically detects 10+ pattern types from your conversations.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">
|
||||
<div class="pillar-card purple">
|
||||
<h4 class="gradient-text">💾 Memory MCP</h4>
|
||||
<p>Persistent memory across sessions. Natural language save and instant recall.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200">
|
||||
<div class="pillar-card pink">
|
||||
<h4 class="gradient-text">📚 Semantic Knowledge</h4>
|
||||
<p>Vector embeddings for deep understanding. Instant semantic search across your codebase.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
|
||||
<div class="pillar-card cyan">
|
||||
<h4 class="gradient-text">📊 Code Structure</h4>
|
||||
<p><strong>NEW!</strong> Tree-sitter AST parsing. 38,406 symbols indexed in 3 seconds.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="400">
|
||||
<div class="pillar-card purple">
|
||||
<h4 class="gradient-text">🔍 Analyze-Project</h4>
|
||||
<p>Hybrid indexing (structural + semantic). Git hooks for automatic updates.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="500">
|
||||
<div class="pillar-card pink">
|
||||
<h4 class="gradient-text">🎯 Session Management</h4>
|
||||
<p>Auto-resume sessions with full context preservation. Zero cold starts.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Hybrid Indexing -->
|
||||
<section id="hybrid-indexing" class="two-col-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title gradient-text text-center" data-aos="fade-down">⚡ NEW: Hybrid Indexing</h2>
|
||||
<div class="row g-5">
|
||||
<div class="col-md-6" data-aos="fade-right">
|
||||
<h3 style="color: var(--cyan);">Phase 1: Structural</h3>
|
||||
<ul>
|
||||
<li>Tree-sitter AST parsing</li>
|
||||
<li>Extract all symbols</li>
|
||||
<li>Build dependency graph</li>
|
||||
<li>PageRank scoring</li>
|
||||
<li><strong class="metric-badge" style="font-size: 2rem;">3 seconds</strong> for 10k files!</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6" data-aos="fade-left">
|
||||
<h3 style="color: var(--purple);">Phase 2: Semantic</h3>
|
||||
<ul>
|
||||
<li>Top 20% most important files</li>
|
||||
<li>Full documentation embedding</li>
|
||||
<li>80% reduction in chunks</li>
|
||||
<li>Runs in background</li>
|
||||
<li><strong>Optional, while you code</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-5" data-aos="zoom-in">
|
||||
<p class="fs-2 gradient-text">600-1000x faster than before!</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Performance Metrics -->
|
||||
<section id="performance">
|
||||
<div class="container">
|
||||
<h2 class="section-title gradient-text text-center" data-aos="fade-down">Real Performance Numbers</h2>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-10">
|
||||
<div class="table-responsive" data-aos="fade-up">
|
||||
<table class="table table-dark table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Project</th>
|
||||
<th>Before (Full Embed)</th>
|
||||
<th>After (Hybrid)</th>
|
||||
<th>Speedup</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Pistn (10k Ruby files)</strong></td>
|
||||
<td>3-5 hours</td>
|
||||
<td><span class="highlight fs-5">3 seconds</span></td>
|
||||
<td><span class="highlight">600-1000x</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Start coding</strong></td>
|
||||
<td>After full index</td>
|
||||
<td><span class="highlight">Immediately!</span></td>
|
||||
<td>Instant</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Chunks indexed</strong></td>
|
||||
<td>100,000+</td>
|
||||
<td>~20,000</td>
|
||||
<td>80% reduction</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Query speed</strong></td>
|
||||
<td>Semantic only</td>
|
||||
<td>Structural + Semantic</td>
|
||||
<td>Faster!</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Comparison -->
|
||||
<section id="comparison">
|
||||
<div class="container">
|
||||
<h2 class="section-title gradient-text text-center" data-aos="fade-down">How It Compares</h2>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-10">
|
||||
<div class="table-responsive" data-aos="fade-up">
|
||||
<table class="table table-dark table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Feature</th>
|
||||
<th>Claude Alone</th>
|
||||
<th>ChatGPT</th>
|
||||
<th>Copilot</th>
|
||||
<th>Claude OS</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Remembers your code</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td><span class="highlight">✅ Perfectly</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Understands architecture</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td><span class="highlight">✅ Completely</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Indexes 10k files</strong></td>
|
||||
<td>N/A</td>
|
||||
<td>N/A</td>
|
||||
<td>N/A</td>
|
||||
<td><span class="highlight fs-5">✅ 3 seconds</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Learns from decisions</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td><span class="highlight">✅ Automatically</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Session management</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td><span class="highlight">✅ Built-in</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Free & open source</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td><span class="highlight">✅ 100%</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Use Cases -->
|
||||
<section id="use-cases" class="two-col-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title gradient-text text-center" data-aos="fade-down">You Need This If You...</h2>
|
||||
<div class="row g-5">
|
||||
<div class="col-md-6" data-aos="fade-right">
|
||||
<ul class="fs-5">
|
||||
<li class="mb-3">Work on multiple projects</li>
|
||||
<li class="mb-3">Have team members leaving</li>
|
||||
<li class="mb-3">Work long-term on same project</li>
|
||||
<li class="mb-3">Care about code consistency</li>
|
||||
<li class="mb-3">Want faster development</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6" data-aos="fade-left">
|
||||
<ul class="fs-5">
|
||||
<li class="mb-3">Debug tricky issues</li>
|
||||
<li class="mb-3">Onboard new developers</li>
|
||||
<li class="mb-3">Maintain architectural consistency</li>
|
||||
<li class="mb-3">Document as you go</li>
|
||||
<li class="mb-3">Make better decisions</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Getting Started -->
|
||||
<section id="getting-started">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 offset-lg-1">
|
||||
<h2 class="section-title gradient-text text-center" data-aos="fade-down">Getting Started in 3 Steps</h2>
|
||||
<div class="code-block" data-aos="fade-up">
|
||||
<pre><code># 1. Install Claude OS (one-time, 3 minutes)
|
||||
git clone https://github.com/brobertsaz/claude-os.git
|
||||
cd claude-os
|
||||
./install.sh
|
||||
|
||||
# 2. Start Claude OS
|
||||
./start.sh
|
||||
|
||||
# 3. Initialize your project (2 minutes)
|
||||
cd /path/to/your/project
|
||||
/claude-os-init
|
||||
# Answer a few questions, done!</code></pre>
|
||||
</div>
|
||||
<p class="text-center fs-4 mt-4" data-aos="zoom-in" data-aos-delay="200">
|
||||
<span class="highlight">Now every conversation includes your complete project knowledge.</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- The Magic -->
|
||||
<section id="magic" class="half-height">
|
||||
<div class="container text-center">
|
||||
<h2 class="section-title gradient-text" data-aos="fade-down">The Real Magic ✨</h2>
|
||||
<p class="fs-3 mb-4" data-aos="fade-up" data-aos-delay="200">
|
||||
Claude OS doesn't make Claude <strong class="highlight">smarter</strong>.
|
||||
</p>
|
||||
<p class="fs-3 mb-5" data-aos="fade-up" data-aos-delay="400">
|
||||
Claude OS makes Claude <strong class="highlight">USEFUL</strong> for your specific project.
|
||||
</p>
|
||||
<p class="fs-2 gradient-text" data-aos="zoom-in" data-aos-delay="600">
|
||||
Generic Intelligence → Practical Expertise
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section id="cta" class="half-height">
|
||||
<div class="container text-center">
|
||||
<h2 class="section-title gradient-text" data-aos="fade-down">Stop Starting From Zero</h2>
|
||||
<p class="fs-4 mb-4" data-aos="fade-up" data-aos-delay="200">
|
||||
Start building with an AI that knows your code<br>as well as you do.
|
||||
</p>
|
||||
<div data-aos="zoom-in" data-aos-delay="400">
|
||||
<a href="https://github.com/brobertsaz/claude-os" class="cta-button">
|
||||
Get Claude OS Now
|
||||
</a>
|
||||
</div>
|
||||
<p class="mt-5" style="opacity: 0.8;" data-aos="fade-up" data-aos-delay="600">
|
||||
100% Free & Open Source<br>
|
||||
<small>Built with ❤️ by developers who got tired of starting every conversation from zero</small>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- AOS JS -->
|
||||
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
||||
|
||||
<script>
|
||||
// Initialize AOS
|
||||
AOS.init({
|
||||
duration: 800,
|
||||
once: true,
|
||||
offset: 100
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
526
presentation.html
Normal file
526
presentation.html
Normal file
|
|
@ -0,0 +1,526 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Claude OS - The AI Operating System That Never Forgets</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.6.0/dist/reveal.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.6.0/dist/theme/black.css">
|
||||
<style>
|
||||
:root {
|
||||
--cyan: #00D9FF;
|
||||
--purple: #8B5CF6;
|
||||
--pink: #FF00FF;
|
||||
--dark-bg: #0F172A;
|
||||
--darker-bg: #1E293B;
|
||||
}
|
||||
|
||||
.reveal {
|
||||
background: linear-gradient(135deg, var(--dark-bg) 0%, var(--darker-bg) 100%);
|
||||
}
|
||||
|
||||
.reveal h1, .reveal h2, .reveal h3 {
|
||||
background: linear-gradient(90deg, var(--cyan) 0%, var(--purple) 50%, var(--pink) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-transform: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.reveal {
|
||||
font-size: 28px; /* Reduced from default 40px */
|
||||
}
|
||||
|
||||
.reveal h1 {
|
||||
font-size: 2.5em;
|
||||
text-shadow: 0 0 20px rgba(0, 217, 255, 0.3);
|
||||
}
|
||||
|
||||
.reveal h2 {
|
||||
font-size: 1.8em;
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.reveal h3 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.reveal .slides {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.reveal .slides section {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 40px 120px 40px 40px;
|
||||
}
|
||||
|
||||
.reveal .title-slide {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reveal ul {
|
||||
font-size: 0.8em;
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.reveal li {
|
||||
margin: 8px 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.reveal p {
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.reveal img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.reveal strong {
|
||||
color: var(--cyan);
|
||||
}
|
||||
|
||||
.reveal .highlight {
|
||||
background: linear-gradient(90deg, var(--cyan) 0%, var(--purple) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-weight: 700;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.reveal .metric {
|
||||
font-size: 1.5em;
|
||||
color: var(--cyan);
|
||||
font-weight: 700;
|
||||
text-shadow: 0 0 15px rgba(0, 217, 255, 0.5);
|
||||
}
|
||||
|
||||
.reveal .problem {
|
||||
background: rgba(255, 0, 0, 0.1);
|
||||
border-left: 4px solid #FF0000;
|
||||
padding: 12px 15px;
|
||||
margin: 12px 0;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.reveal .solution {
|
||||
background: rgba(0, 217, 255, 0.1);
|
||||
border-left: 4px solid var(--cyan);
|
||||
padding: 12px 15px;
|
||||
margin: 12px 0;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.reveal pre {
|
||||
font-size: 0.45em;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.reveal table {
|
||||
font-size: 0.5em;
|
||||
margin: 15px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.reveal table th {
|
||||
background: var(--purple);
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.reveal table td {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.reveal .emoji {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.reveal .fragment.highlight-current-cyan.visible.current-fragment {
|
||||
color: var(--cyan);
|
||||
text-shadow: 0 0 10px rgba(0, 217, 255, 0.8);
|
||||
}
|
||||
|
||||
.reveal code {
|
||||
color: var(--pink);
|
||||
background: rgba(139, 92, 246, 0.1);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.reveal pre {
|
||||
background: rgba(30, 41, 59, 0.9);
|
||||
border: 1px solid var(--purple);
|
||||
box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
.reveal pre code {
|
||||
background: transparent;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.two-column {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 30px;
|
||||
align-items: start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pillar-card {
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
border: 2px solid var(--purple);
|
||||
border-radius: 8px;
|
||||
padding: 10px 15px;
|
||||
margin: 6px 0;
|
||||
box-shadow: 0 0 15px rgba(139, 92, 246, 0.2);
|
||||
}
|
||||
|
||||
.pillar-card h3 {
|
||||
margin: 0 0 5px 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.pillar-card p {
|
||||
margin: 0;
|
||||
font-size: 0.75em;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: inline-block;
|
||||
background: linear-gradient(90deg, var(--cyan) 0%, var(--purple) 100%);
|
||||
color: white;
|
||||
padding: 20px 40px;
|
||||
border-radius: 10px;
|
||||
font-size: 1.5em;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
margin: 20px 0;
|
||||
box-shadow: 0 0 30px rgba(0, 217, 255, 0.5);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 50px rgba(0, 217, 255, 0.8);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="reveal">
|
||||
<div class="slides">
|
||||
<!-- Slide 1: Title -->
|
||||
<section class="title-slide">
|
||||
<h1>Claude OS</h1>
|
||||
<h2 style="color: white;">The AI Operating System<br>That Never Forgets</h2>
|
||||
<p style="font-size: 1.2em; margin-top: 40px;">
|
||||
<span class="emoji">🧠</span> Persistent Memory
|
||||
<span class="emoji">⚡</span> 600-1000x Faster
|
||||
<span class="emoji">🚀</span> Zero Setup
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Slide 2: The Problem -->
|
||||
<section>
|
||||
<h2>The Problem You're Facing</h2>
|
||||
<div class="problem">
|
||||
<p><strong>Every. Single. Time.</strong></p>
|
||||
<pre><code class="language-plaintext">You: "Claude, add a feature to our auth system"
|
||||
Claude: "Based on common best practices..."
|
||||
You: "No no no—we have custom JWT, 2FA,
|
||||
timezone handling... This is all wrong."
|
||||
Claude: "Oh! I didn't know that."
|
||||
You: *starts typing 30-minute context document*</code></pre>
|
||||
</div>
|
||||
<p class="fragment" style="font-size: 1.3em; text-align: center; margin-top: 40px;">
|
||||
<span class="highlight">Claude is brilliant. But Claude starts from ZERO every conversation.</span>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Slide 3: The Solution + Architecture -->
|
||||
<section>
|
||||
<h2>Enter Claude OS</h2>
|
||||
<img src="frontend/public/assets/claude-os-architecture.svg" alt="Architecture" style="width: 100%; max-width: 1200px;">
|
||||
<p class="fragment" style="text-align: center; margin-top: 20px;">
|
||||
<span class="metric">10,000 files indexed in 3 seconds</span>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Slide 4: What It Does -->
|
||||
<section>
|
||||
<h2 style="margin-bottom: 25px;">What Claude OS Does</h2>
|
||||
<ul style="font-size: 0.85em; line-height: 1.8;">
|
||||
<li class="fragment"><strong>Remembers everything</strong> about your project across all sessions</li>
|
||||
<li class="fragment"><strong>Learns automatically</strong> from every conversation, commit, and decision</li>
|
||||
<li class="fragment"><strong>Understands your codebase</strong> like a senior developer</li>
|
||||
<li class="fragment"><strong>Detects patterns</strong> in real-time as you work</li>
|
||||
<li class="fragment"><strong>Adapts its responses</strong> to match YOUR coding style</li>
|
||||
<li class="fragment"><strong>Never forgets</strong> — context persists forever</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Slide 5: The 6 Pillars -->
|
||||
<section>
|
||||
<h2 style="margin-bottom: 20px;">6 Core Pillars</h2>
|
||||
<div class="two-column" style="font-size: 0.75em; gap: 20px;">
|
||||
<div class="pillar-card fragment">
|
||||
<h3>🧠 Real-Time Learning</h3>
|
||||
<p>Redis Pub/Sub <1ms | 10+ patterns</p>
|
||||
</div>
|
||||
<div class="pillar-card fragment">
|
||||
<h3>💾 Memory MCP</h3>
|
||||
<p>Persistent memory | Natural language</p>
|
||||
</div>
|
||||
<div class="pillar-card fragment">
|
||||
<h3>📚 Semantic Knowledge</h3>
|
||||
<p>Vector embeddings | Instant search</p>
|
||||
</div>
|
||||
<div class="pillar-card fragment">
|
||||
<h3>📊 Code Structure</h3>
|
||||
<p><strong>NEW!</strong> Tree-sitter AST | 3 sec indexing</p>
|
||||
</div>
|
||||
<div class="pillar-card fragment">
|
||||
<h3>🔍 Analyze-Project</h3>
|
||||
<p>Hybrid indexing | Git hooks</p>
|
||||
</div>
|
||||
<div class="pillar-card fragment">
|
||||
<h3>🎯 Session Management</h3>
|
||||
<p>Auto-resume | Zero cold starts</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Slide 6: Hybrid Indexing -->
|
||||
<section>
|
||||
<h2 style="margin-bottom: 20px;">⚡ NEW: Hybrid Indexing</h2>
|
||||
<div class="two-column" style="gap: 30px;">
|
||||
<div>
|
||||
<h3 style="color: var(--cyan); font-size: 1.3em; margin-bottom: 15px;">Phase 1: Structural</h3>
|
||||
<ul style="font-size: 0.85em; line-height: 1.6;">
|
||||
<li>Tree-sitter AST parsing</li>
|
||||
<li>Extract all symbols</li>
|
||||
<li>Build dependency graph</li>
|
||||
<li>PageRank scoring</li>
|
||||
<li><strong class="metric" style="font-size: 1.5em;">3 seconds</strong> for 10k files!</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 style="color: var(--purple); font-size: 1.3em; margin-bottom: 15px;">Phase 2: Semantic</h3>
|
||||
<ul style="font-size: 0.85em; line-height: 1.6;">
|
||||
<li>Top 20% most important files</li>
|
||||
<li>Full documentation embedding</li>
|
||||
<li>80% reduction in chunks</li>
|
||||
<li>Runs in background</li>
|
||||
<li><strong>Optional, while you code</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p class="fragment" style="text-align: center; margin-top: 30px; font-size: 1.3em;">
|
||||
<span class="highlight">600-1000x faster than before!</span>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Slide 7: Performance Metrics -->
|
||||
<section>
|
||||
<h2>Real Performance Numbers</h2>
|
||||
<table style="width: 100%; margin-top: 40px;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Project</th>
|
||||
<th>Before (Full Embed)</th>
|
||||
<th>After (Hybrid)</th>
|
||||
<th>Speedup</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Pistn (10k Ruby files)</strong></td>
|
||||
<td>3-5 hours</td>
|
||||
<td><span class="metric" style="font-size: 1.3em;">3 seconds</span></td>
|
||||
<td><span style="color: var(--cyan);">600-1000x</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Start coding</strong></td>
|
||||
<td>After full index</td>
|
||||
<td><span style="color: var(--cyan);">Immediately!</span></td>
|
||||
<td>Instant</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Chunks indexed</strong></td>
|
||||
<td>100,000+</td>
|
||||
<td>~20,000</td>
|
||||
<td>80% reduction</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Query speed</strong></td>
|
||||
<td>Semantic only</td>
|
||||
<td>Structural + Semantic</td>
|
||||
<td>Faster!</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<!-- Slide 8: Comparison -->
|
||||
<section>
|
||||
<h2>How It Compares</h2>
|
||||
<table style="font-size: 0.6em;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Feature</th>
|
||||
<th>Claude Alone</th>
|
||||
<th>ChatGPT</th>
|
||||
<th>Copilot</th>
|
||||
<th>Claude OS</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Remembers your code</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td><span style="color: var(--cyan);">✅ Perfectly</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Understands architecture</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td><span style="color: var(--cyan);">✅ Completely</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Indexes 10k files</strong></td>
|
||||
<td>N/A</td>
|
||||
<td>N/A</td>
|
||||
<td>N/A</td>
|
||||
<td><span class="metric" style="font-size: 1.2em;">✅ 3 seconds</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Learns from decisions</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td><span style="color: var(--cyan);">✅ Automatically</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Session management</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td><span style="color: var(--cyan);">✅ Built-in</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Free & open source</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td>❌</td>
|
||||
<td><span style="color: var(--cyan);">✅ 100%</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<!-- Slide 9: Use Cases -->
|
||||
<section>
|
||||
<h2 style="margin-bottom: 25px;">You Need This If You...</h2>
|
||||
<div class="two-column" style="font-size: 0.8em; gap: 30px;">
|
||||
<ul style="line-height: 1.8;">
|
||||
<li class="fragment">Work on multiple projects</li>
|
||||
<li class="fragment">Have team members leaving</li>
|
||||
<li class="fragment">Work long-term on same project</li>
|
||||
<li class="fragment">Care about code consistency</li>
|
||||
<li class="fragment">Want faster development</li>
|
||||
</ul>
|
||||
<ul style="line-height: 1.8;">
|
||||
<li class="fragment">Debug tricky issues</li>
|
||||
<li class="fragment">Onboard new developers</li>
|
||||
<li class="fragment">Maintain architectural consistency</li>
|
||||
<li class="fragment">Document as you go</li>
|
||||
<li class="fragment">Make better decisions</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Slide 10: Getting Started -->
|
||||
<section>
|
||||
<h2 style="margin-bottom: 20px;">Getting Started in 3 Steps</h2>
|
||||
<pre style="font-size: 0.5em; margin: 10px 0;"><code class="language-bash"># 1. Install Claude OS (one-time, 3 minutes)
|
||||
git clone https://github.com/brobertsaz/claude-os.git
|
||||
cd claude-os
|
||||
./install.sh
|
||||
|
||||
# 2. Start Claude OS
|
||||
./start.sh
|
||||
|
||||
# 3. Initialize your project (2 minutes)
|
||||
cd /path/to/your/project
|
||||
/claude-os-init
|
||||
# Answer a few questions, done!</code></pre>
|
||||
<p class="fragment" style="text-align: center; margin-top: 20px; font-size: 1.2em;">
|
||||
<span class="highlight">Now every conversation includes your complete project knowledge.</span>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Slide 11: The Magic -->
|
||||
<section class="title-slide">
|
||||
<h2>The Real Magic ✨</h2>
|
||||
<p style="font-size: 1.3em; margin: 40px auto; max-width: 800px;">
|
||||
Claude OS doesn't make Claude <strong style="color: var(--cyan);">smarter</strong>.
|
||||
</p>
|
||||
<p class="fragment" style="font-size: 1.3em; margin: 40px auto; max-width: 800px;">
|
||||
Claude OS makes Claude <strong style="color: var(--purple);">USEFUL</strong> for your specific project.
|
||||
</p>
|
||||
<p class="fragment" style="font-size: 1.5em; margin-top: 60px;">
|
||||
<span class="highlight">Generic Intelligence → Practical Expertise</span>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Slide 12: Call to Action -->
|
||||
<section class="title-slide">
|
||||
<h2>Stop Starting From Zero</h2>
|
||||
<p style="font-size: 1.3em; margin: 40px 0;">
|
||||
Start building with an AI that knows your code<br>as well as you do.
|
||||
</p>
|
||||
<div style="margin-top: 60px;">
|
||||
<a href="https://github.com/brobertsaz/claude-os" class="cta-button">
|
||||
Get Claude OS Now
|
||||
</a>
|
||||
</div>
|
||||
<p style="margin-top: 60px; font-size: 0.9em; opacity: 0.8;">
|
||||
100% Free & Open Source<br>
|
||||
<span style="font-size: 0.8em;">Built with ❤️ by developers who got tired of starting every conversation from zero</span>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/reveal.js@4.6.0/dist/reveal.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/reveal.js@4.6.0/plugin/highlight/highlight.js"></script>
|
||||
<script>
|
||||
Reveal.initialize({
|
||||
hash: true,
|
||||
transition: 'slide',
|
||||
transitionSpeed: 'default',
|
||||
backgroundTransition: 'fade',
|
||||
center: false,
|
||||
controls: true,
|
||||
progress: true,
|
||||
slideNumber: true,
|
||||
plugins: [ RevealHighlight ]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue