ebbb1ec8d9
- 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>
289 lines
14 KiB
XML
289 lines
14 KiB
XML
<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>
|