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:
Bob Roberts
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:
|
Inspired by [Aider](https://github.com/Aider-AI/aider), Claude OS now uses a revolutionary two-phase approach:
|
||||||
|
|
||||||
**Phase 1 - Structural Index (INSTANT):**
|
**Phase 1 - Structural Index (INSTANT):**
|
||||||
|
|
||||||
- **Tree-sitter parsing** - Language-agnostic AST extraction (supports 40+ languages)
|
- **Tree-sitter parsing** - Language-agnostic AST extraction (supports 40+ languages)
|
||||||
- **No embeddings needed** - Parse syntax, extract symbols, zero LLM calls
|
- **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!)
|
- **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
|
- **PageRank scoring** - Identifies most important files automatically
|
||||||
|
|
||||||
**Phase 2 - Semantic Index (SELECTIVE):**
|
**Phase 2 - Semantic Index (SELECTIVE):**
|
||||||
|
|
||||||
- **Top 20% only** - Embed most important files (based on PageRank)
|
- **Top 20% only** - Embed most important files (based on PageRank)
|
||||||
- **Documentation first** - Full embedding for docs, specs, README
|
- **Documentation first** - Full embedding for docs, specs, README
|
||||||
- **Background processing** - Runs while you code, no waiting
|
- **Background processing** - Runs while you code, no waiting
|
||||||
|
|
@ -478,6 +480,7 @@ Claude OS gives you powerful slash commands and automatic triggers.
|
||||||
**Automatic Triggers:**
|
**Automatic Triggers:**
|
||||||
|
|
||||||
When you say phrases like these, Claude automatically saves to memories:
|
When you say phrases like these, Claude automatically saves to memories:
|
||||||
|
|
||||||
- "Remember this:"
|
- "Remember this:"
|
||||||
- "Save this:"
|
- "Save this:"
|
||||||
- "Document this:"
|
- "Document this:"
|
||||||
|
|
@ -637,12 +640,12 @@ This is the **compounding intelligence** that happens when AI actually understan
|
||||||
│ CLAUDE OS ECOSYSTEM v2.0 │
|
│ CLAUDE OS ECOSYSTEM v2.0 │
|
||||||
│ (Now with Hybrid Indexing!) │
|
│ (Now with Hybrid Indexing!) │
|
||||||
│ │
|
│ │
|
||||||
│ ┌──────────────┐ ┌──────────────┐ ┌─────────────────────────┐ │
|
│ ┌──────────────┐ ┌──────────────┐ ┌─────────────────────────┐ │
|
||||||
│ │ Real-Time │ │ Memory │ │ ⚡ NEW: Code Structure│ │
|
│ │ Real-Time │ │ Memory │ │ ⚡ NEW: Code Structure │ │
|
||||||
│ │ Learning │ │ System │ │ (Tree-sitter AST) │ │
|
│ │ Learning │ │ System │ │ (Tree-sitter AST) │ │
|
||||||
│ │ (Redis) │ │ (MCP) │ │ 38,406 symbols! │ │
|
│ │ (Redis) │ │ (MCP) │ │ 38,406 symbols! │ │
|
||||||
│ │ <1ms │ │ Instant │ │ 3 seconds to index │ │
|
│ │ <1ms │ │ Instant │ │ 3 seconds to index │ │
|
||||||
│ └──────┬───────┘ └──────┬───────┘ └───────────┬─────────────┘ │
|
│ └──────┬───────┘ └──────┬───────┘ └───────────┬─────────────┘ │
|
||||||
│ │ │ │ │
|
│ │ │ │ │
|
||||||
│ └──────────────────┼──────────────────────┘ │
|
│ └──────────────────┼──────────────────────┘ │
|
||||||
│ │ │
|
│ │ │
|
||||||
|
|
@ -670,7 +673,7 @@ This is the **compounding intelligence** that happens when AI actually understan
|
||||||
│ ┌──────────────────▼─────────────────────────┐ │
|
│ ┌──────────────────▼─────────────────────────┐ │
|
||||||
│ │ Claude Code Interface │ │
|
│ │ Claude Code Interface │ │
|
||||||
│ │ (Your AI with 600-1000x faster indexing!) │ │
|
│ │ (Your AI with 600-1000x faster indexing!) │ │
|
||||||
│ └─────────────────────────────────────────────┘ │
|
│ └─────────────────────────────────────────────┘ │
|
||||||
└─────────────────────────────────────────────────────────────────────┘
|
└─────────────────────────────────────────────────────────────────────┘
|
||||||
|
|
||||||
Performance: Pistn (10,000 Ruby files) indexed in 3 seconds ⚡
|
Performance: Pistn (10,000 Ruby files) indexed in 3 seconds ⚡
|
||||||
|
|
@ -733,7 +736,7 @@ Performance: Pistn (10,000 Ruby files) indexed in 3 seconds ⚡
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# 1. Install Claude OS (one-time, 3 minutes)
|
# 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
|
cd claude-os
|
||||||
./install.sh
|
./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