donnemartin · mayankjain25 · Mar 22, 2026 · Mar 22, 2026
diff --git a/website/css/styles.css b/website/css/styles.css
diff --git a/website/docs/index.html b/website/docs/index.html
diff --git a/website/images/0vBc0hN.png b/website/images/0vBc0hN.png
diff --git a/website/images/4edXG0T.png b/website/images/4edXG0T.png
diff --git a/website/images/4j99mhe.png b/website/images/4j99mhe.png
diff --git a/website/images/54GYsSx.png b/website/images/54GYsSx.png
diff --git a/website/images/5KeocQs.jpg b/website/images/5KeocQs.jpg
diff --git a/website/images/C9ioGtn.png b/website/images/C9ioGtn.png
diff --git a/website/images/IOyLj4i.jpg b/website/images/IOyLj4i.jpg
diff --git a/website/images/JdAsdvG.jpg b/website/images/JdAsdvG.jpg
diff --git a/website/images/MzExP06.png b/website/images/MzExP06.png
diff --git a/website/images/ONjORqk.png b/website/images/ONjORqk.png
diff --git a/website/images/OfVllex.png b/website/images/OfVllex.png
diff --git a/website/images/Q6z24La.png b/website/images/Q6z24La.png
diff --git a/website/images/TcUo2fw.png b/website/images/TcUo2fw.png
diff --git a/website/images/U3qV33e.png b/website/images/U3qV33e.png
diff --git a/website/images/V5q57vU.png b/website/images/V5q57vU.png
diff --git a/website/images/Xkm5CXz.png b/website/images/Xkm5CXz.png
diff --git a/website/images/b4YtAEN.png b/website/images/b4YtAEN.png
diff --git a/website/images/bWxPtQA.png b/website/images/bWxPtQA.png
diff --git a/website/images/bgLMI2u.png b/website/images/bgLMI2u.png
diff --git a/website/images/cdCv5g7.png b/website/images/cdCv5g7.png
diff --git a/website/images/fNcl65g.png b/website/images/fNcl65g.png
diff --git a/website/images/h81n9iK.png b/website/images/h81n9iK.png
diff --git a/website/images/h9TAuGI.jpg b/website/images/h9TAuGI.jpg
diff --git a/website/images/iF4Mkb5.png b/website/images/iF4Mkb5.png
diff --git a/website/images/jj3A5N8.png b/website/images/jj3A5N8.png
diff --git a/website/images/jrUBAF7.png b/website/images/jrUBAF7.png
diff --git a/website/images/krAHLGg.png b/website/images/krAHLGg.png
diff --git a/website/images/kxtjqgE.png b/website/images/kxtjqgE.png
diff --git a/website/images/n16iOGk.png b/website/images/n16iOGk.png
diff --git a/website/images/n41Azff.png b/website/images/n41Azff.png
diff --git a/website/images/rgSrvjG.png b/website/images/rgSrvjG.png
diff --git a/website/images/wU8x5Id.png b/website/images/wU8x5Id.png
diff --git a/website/images/wXGqG5f.png b/website/images/wXGqG5f.png
diff --git a/website/images/yB5SYwm.png b/website/images/yB5SYwm.png
diff --git a/website/images/yzDrJtA.jpg b/website/images/yzDrJtA.jpg
diff --git a/website/images/zdCAkB3.png b/website/images/zdCAkB3.png
diff --git a/website/index.html b/website/index.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>System Design Primer — Learn Large-Scale System Design</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/styles.css">
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🏗️</text></svg>">
+</head>
+<body class="homepage-body">
+    <!-- Top Navigation -->
+    <nav class="homepage-nav animate-fade-in">
+        <a href="/" class="homepage-nav-logo">
+            <span class="logo-icon">🏗️</span>
+            <span>System Design Primer</span>
+        </a>
+        <div class="homepage-nav-actions">
+            <a href="https://github.com/donnemartin/system-design-primer" target="_blank" rel="noopener" class="homepage-nav-link" title="View on GitHub">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+            </a>
+            <button class="homepage-theme-toggle" id="themeToggle" aria-label="Toggle theme">
+                <svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+                <svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+            </button>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="homepage-hero">
+        <div class="homepage-bg">
+            <div class="homepage-grid"></div>
+            <div class="homepage-glow homepage-glow-1"></div>
+            <div class="homepage-glow homepage-glow-2"></div>
+            <div class="homepage-glow homepage-glow-3"></div>
+        </div>
+        <div class="homepage-content">
+            <div class="homepage-badge animate-fade-in">Open Source &bull; 250k+ Stars &bull; Community Driven</div>
+            <h1 class="homepage-title animate-fade-in-up">
+                The System Design<br>
+                <span class="homepage-title-accent">Primer</span>
+            </h1>
+            <p class="homepage-subtitle animate-fade-in-up delay-1">Learn how to design large-scale systems. Prep for the system design interview. An organized, interactive collection of resources to help you build systems at scale.</p>
+            <div class="homepage-stats animate-fade-in-up delay-2">
+                <div class="homepage-stat">
+                    <span class="homepage-stat-number" data-target="38">0</span>
+                    <span class="homepage-stat-label">Chapters</span>
+                </div>
+                <div class="homepage-stat-divider"></div>
+                <div class="homepage-stat">
+                    <span class="homepage-stat-number" data-target="8">0</span>
+                    <span class="homepage-stat-label">Parts</span>
+                </div>
+                <div class="homepage-stat-divider"></div>
+                <div class="homepage-stat">
+                    <span class="homepage-stat-number" data-target="14">0</span>
+                    <span class="homepage-stat-label">Practice Problems</span>
+                </div>
+            </div>
+            <div class="homepage-actions animate-fade-in-up delay-3">
+                <a href="docs/" class="homepage-btn-primary">
+                    <span>Start Learning</span>
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
+                </a>
+                <a href="docs/#resume" class="homepage-btn-secondary">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="13 17 18 12 13 7"/><polyline points="6 17 11 12 6 7"/></svg>
+                    <span>Resume Progress</span>
+                </a>
+            </div>
+            <div class="homepage-topics animate-fade-in-up delay-4">
+                <span class="homepage-topic">Scalability</span>
+                <span class="homepage-topic">Load Balancing</span>
+                <span class="homepage-topic">Caching</span>
+                <span class="homepage-topic">Database</span>
+                <span class="homepage-topic">CDN</span>
+                <span class="homepage-topic">Microservices</span>
+                <span class="homepage-topic">REST</span>
+                <span class="homepage-topic">CAP Theorem</span>
+            </div>
+        </div>
+    </section>
+
+    <!-- Features Section -->
+    <section class="homepage-features animate-fade-in-up delay-4">
+        <div class="homepage-features-grid">
+            <div class="homepage-feature-card">
+                <div class="homepage-feature-icon">📚</div>
+                <h3>38 Chapters</h3>
+                <p>Comprehensive coverage from core concepts to advanced system design patterns.</p>
+            </div>
+            <div class="homepage-feature-card">
+                <div class="homepage-feature-icon">🎯</div>
+                <h3>Interview Ready</h3>
+                <p>Practice real system design interview questions with detailed solutions.</p>
+            </div>
+            <div class="homepage-feature-card">
+                <div class="homepage-feature-icon">📝</div>
+                <h3>Personal Notes</h3>
+                <p>Take notes per chapter with auto-save. Your study companion, built in.</p>
+            </div>
+            <div class="homepage-feature-card">
+                <div class="homepage-feature-icon">🌙</div>
+                <h3>Dark &amp; Light</h3>
+                <p>Beautiful reading experience in both themes. Easy on your eyes, day or night.</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="homepage-footer">
+        <p>Built from <a href="https://github.com/donnemartin/system-design-primer" target="_blank" rel="noopener">system-design-primer</a> by Donne Martin. Interactive edition.</p>
+    </footer>
+
+    <script>
+    (function() {
+        // Restore theme
+        var saved = localStorage.getItem('sdp_theme');
+        if (saved) document.documentElement.setAttribute('data-theme', saved);
+
+        // Theme toggle
+        document.getElementById('themeToggle').addEventListener('click', function() {
+            var current = document.documentElement.getAttribute('data-theme');
+            var next = current === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', next);
+            localStorage.setItem('sdp_theme', next);
+        });
+
+        // Counter animations
+        setTimeout(function() {
+            document.querySelectorAll('.homepage-stat-number[data-target]').forEach(function(el) {
+                var target = parseInt(el.getAttribute('data-target'));
+                var duration = 1200;
+                var start = performance.now();
+                function tick(now) {
+                    var elapsed = now - start;
+                    var progress = Math.min(elapsed / duration, 1);
+                    var eased = 1 - Math.pow(1 - progress, 3);
+                    el.textContent = Math.round(target * eased);
+                    if (progress < 1) requestAnimationFrame(tick);
+                }
+                requestAnimationFrame(tick);
+            });
+        }, 600);
+    })();
+    </script>
+</body>
+</html>