diff --git a/README.md b/README.md
index e41ce79..95fdff4 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
# Interview Prep
-Coding, system design, and AI in one place — published as a real HTML book, rewritten for how interviewers score answers.
+FAANG-style interview preparation for coding, system design, and AI — a DevNinja product site.
**Live site:** [https://interview-prep.devninja.in/](https://interview-prep.devninja.in/)
@@ -8,11 +8,11 @@ Coding, system design, and AI in one place — published as a real HTML book, re
1. **Competitive Programming** — patterns from arrays and hashing through graphs, DP, and bit manipulation (Python & Java).
2. **System Design** — fundamentals, building blocks, and case studies (URL shortener, WhatsApp, Instagram, Amazon, S3, YouTube, Uber).
-3. **AI Engineering** — a deep story-driven path: LLMs, prompting, RAG, memory, agents, MCP, skills, and designing a full assistant (`content/ai/`).
-4. **Interview Labs** — 55 FAANG-frequency questions (20 coding, 18 system design, 17 AI) with why-asked, level expectations (Junior→Principal), expected arcs, follow-ups, common mistakes, and production examples.
+3. **AI Engineering** — LLMs, prompting, RAG, memory, agents, MCP, skills, and designing a full assistant (`content/ai/`).
+4. **Interview Labs** — 55 FAANG-frequency questions with why-asked, level expectations, expected arcs, follow-ups, mistakes, and production examples.
5. **Guides** — interview playbook, role learning paths, comparisons, company guides, behavioral/HR, and cheat sheets.
-Chapters are normal web pages (selectable text + code blocks). Topic diagrams are freshly drawn SVGs — not PDF page screenshots. Labs track practiced questions in the browser (localStorage).
+The site uses the **DevNinja** visual system (sky primary, zinc neutrals, system typography) shared with [devninja.in](https://devninja.in/).
## Local preview
@@ -22,15 +22,15 @@ python3 -m http.server 8080
Then open `http://localhost:8080` or any file under `chapters/`.
-## Regenerate from the PDF / diagrams
+## Regenerate
```bash
pip install pymupdf
-python3 scripts/generate_diagrams.py # native SVG topic diagrams
-python3 scripts/build_chapters.py # HTML chapters from PDF (skips hand-authored AI; re-applies interview labs)
-python3 scripts/assemble_ai_chapters.py # deep AI section from content/ai/
-python3 scripts/assemble_interview.py # Interview Labs + enrichment + chapter drills
-python3 scripts/assemble_guides.py # Playbook, paths, comparisons, companies, behavioral
+python3 scripts/generate_diagrams.py
+python3 scripts/build_chapters.py
+python3 scripts/assemble_ai_chapters.py
+python3 scripts/assemble_interview.py
+python3 scripts/assemble_guides.py
```
## Cloudflare Workers
@@ -38,26 +38,4 @@ python3 scripts/assemble_guides.py # Playbook, paths, comparisons, compani
Primary URL: [https://interview-prep.devninja.in/](https://interview-prep.devninja.in/)
- `src/index.js` serves `env.ASSETS`
-- `.assetsignore` excludes `.git`
-- Deploy command: `npx wrangler deploy`
-
-## Files
-
-| Path | Purpose |
-|------|---------|
-| `index.html` | Landing page & table of contents |
-| `chapters/` | HTML chapters (text, code, embedded diagrams) |
-| `chapters/interview-*.html` | Coding / System Design / AI Interview Labs |
-| `chapters/*-playbook|paths|comparisons|…` | Interview guides |
-| `assets/diagrams/` | Diagram images only |
-| `assets/interview-prep.pdf` | Original PDF |
-| `assets/nav.json` | Chapter navigation |
-| `scripts/assemble_interview.py` | Builds labs, injects enrichment + topic drills |
-| `scripts/assemble_guides.py` | Builds guide pages |
-| `scripts/interview_enrichment.py` | Per-question interviewer lens data |
-| `read.html` | Redirects into the chapter reader |
-
-## Keyboard (reader)
-
-- `←` / `→` — previous / next chapter
-- `Esc` — close mobile contents
+- Deploy: `npx wrangler deploy`
diff --git a/chapters/00-how-to-use.html b/chapters/00-how-to-use.html
index 2b7895f..c57624b 100644
--- a/chapters/00-how-to-use.html
+++ b/chapters/00-how-to-use.html
@@ -5,10 +5,7 @@
00 · How to use this book — Interview Prep
-
-
-
-
+
@@ -19,7 +16,7 @@
diff --git a/chapters/01-approaching.html b/chapters/01-approaching.html
index f5fdd81..8d796e6 100644
--- a/chapters/01-approaching.html
+++ b/chapters/01-approaching.html
@@ -5,10 +5,7 @@
01 · Approaching any problem — Interview Prep
-
-
-
-
+
@@ -19,7 +16,7 @@
diff --git a/chapters/02-big-o.html b/chapters/02-big-o.html
index 67b2ade..92e91f6 100644
--- a/chapters/02-big-o.html
+++ b/chapters/02-big-o.html
@@ -5,10 +5,7 @@
02 · Big O and complexity — Interview Prep
-
-
-
-
+
@@ -19,7 +16,7 @@
diff --git a/chapters/03-arrays.html b/chapters/03-arrays.html
index 31bcd48..f753cd3 100644
--- a/chapters/03-arrays.html
+++ b/chapters/03-arrays.html
@@ -5,10 +5,7 @@
03 · Arrays and hashing — Interview Prep
-
-
-
-
+
@@ -20,7 +17,7 @@
diff --git a/chapters/04-two-pointers.html b/chapters/04-two-pointers.html
index f0cc902..caed389 100644
--- a/chapters/04-two-pointers.html
+++ b/chapters/04-two-pointers.html
@@ -5,10 +5,7 @@
04 · Two pointers — Interview Prep
-
-
-
-
+
@@ -20,7 +17,7 @@
diff --git a/chapters/05-sliding-window.html b/chapters/05-sliding-window.html
index 108b94f..e6b401c 100644
--- a/chapters/05-sliding-window.html
+++ b/chapters/05-sliding-window.html
@@ -5,10 +5,7 @@
05 · Sliding window — Interview Prep
-
-
-
-
+
@@ -20,7 +17,7 @@
diff --git a/chapters/06-stack.html b/chapters/06-stack.html
index b4c07ba..961cd01 100644
--- a/chapters/06-stack.html
+++ b/chapters/06-stack.html
@@ -5,10 +5,7 @@
06 · Stack — Interview Prep
-
-
-
-
+
@@ -19,7 +16,7 @@
diff --git a/chapters/07-binary-search.html b/chapters/07-binary-search.html
index f7ebc24..36d02f5 100644
--- a/chapters/07-binary-search.html
+++ b/chapters/07-binary-search.html
@@ -5,10 +5,7 @@
07 · Binary search — Interview Prep
-
-
-
-
+
@@ -20,7 +17,7 @@
diff --git a/chapters/08-linked-lists.html b/chapters/08-linked-lists.html
index 2ead62a..ef0636a 100644
--- a/chapters/08-linked-lists.html
+++ b/chapters/08-linked-lists.html
@@ -5,10 +5,7 @@
08 · Linked lists — Interview Prep
-
-
-
-
+
@@ -20,7 +17,7 @@
diff --git a/chapters/09-trees.html b/chapters/09-trees.html
index 7b0fa75..9ac177e 100644
--- a/chapters/09-trees.html
+++ b/chapters/09-trees.html
@@ -5,10 +5,7 @@
09 · Trees and BST — Interview Prep
-
-
-
-
+
@@ -20,7 +17,7 @@
diff --git a/chapters/10-heaps.html b/chapters/10-heaps.html
index 4d02fae..24ff027 100644
--- a/chapters/10-heaps.html
+++ b/chapters/10-heaps.html
@@ -5,10 +5,7 @@
10 · Heaps and priority queues — Interview Prep
-
-
-
-
+
@@ -19,7 +16,7 @@
diff --git a/chapters/11-backtracking.html b/chapters/11-backtracking.html
index 52c9f9d..7b49643 100644
--- a/chapters/11-backtracking.html
+++ b/chapters/11-backtracking.html
@@ -5,10 +5,7 @@
11 · Backtracking — Interview Prep
-
-
-
-
+
@@ -19,7 +16,7 @@
diff --git a/chapters/12-graphs.html b/chapters/12-graphs.html
index 0d7235e..69dc036 100644
--- a/chapters/12-graphs.html
+++ b/chapters/12-graphs.html
@@ -5,10 +5,7 @@
12 · Graphs, BFS, DFS — Interview Prep
-
-
-
-
+
@@ -20,7 +17,7 @@
diff --git a/chapters/13-dp.html b/chapters/13-dp.html
index a68bf97..4721363 100644
--- a/chapters/13-dp.html
+++ b/chapters/13-dp.html
@@ -5,10 +5,7 @@
13 · Dynamic programming — Interview Prep
-
-
-
-
+
@@ -20,7 +17,7 @@
diff --git a/chapters/14-greedy.html b/chapters/14-greedy.html
index e29b3ed..ea0b34f 100644
--- a/chapters/14-greedy.html
+++ b/chapters/14-greedy.html
@@ -5,10 +5,7 @@
14 · Greedy — Interview Prep
-
-
-
-
+
@@ -19,7 +16,7 @@
diff --git a/chapters/15-intervals.html b/chapters/15-intervals.html
index fdaaaea..af7b324 100644
--- a/chapters/15-intervals.html
+++ b/chapters/15-intervals.html
@@ -5,10 +5,7 @@
15 · Intervals — Interview Prep
-
-
-
-
+
@@ -20,7 +17,7 @@
diff --git a/chapters/16-bits.html b/chapters/16-bits.html
index a824678..1120706 100644
--- a/chapters/16-bits.html
+++ b/chapters/16-bits.html
@@ -5,10 +5,7 @@
16 · Bit manipulation — Interview Prep
-
-
-
-
+
@@ -19,7 +16,7 @@
diff --git a/chapters/17-cheat-sheet.html b/chapters/17-cheat-sheet.html
index f1f9f88..7d0553d 100644
--- a/chapters/17-cheat-sheet.html
+++ b/chapters/17-cheat-sheet.html
@@ -5,10 +5,7 @@
17 · Pattern cheat sheet — Interview Prep
-
-
-
-
+
@@ -19,7 +16,7 @@
diff --git a/chapters/18-study-plan.html b/chapters/18-study-plan.html
index 4e02c52..ff55c3f 100644
--- a/chapters/18-study-plan.html
+++ b/chapters/18-study-plan.html
@@ -5,10 +5,7 @@
18 · A study plan that works — Interview Prep
-
-
-
-
+
@@ -19,7 +16,7 @@
diff --git a/chapters/19-approaching-sd.html b/chapters/19-approaching-sd.html
index 8956b3f..4d67591 100644
--- a/chapters/19-approaching-sd.html
+++ b/chapters/19-approaching-sd.html
@@ -5,10 +5,7 @@
19 · Approaching system design — Interview Prep
-
-
-
-
+
@@ -19,7 +16,7 @@
diff --git a/chapters/20-estimation.html b/chapters/20-estimation.html
index 3c26420..07dbacd 100644
--- a/chapters/20-estimation.html
+++ b/chapters/20-estimation.html
@@ -5,10 +5,7 @@
20 · Estimation and key numbers — Interview Prep
-
-
-
-
+
@@ -19,7 +16,7 @@
diff --git a/chapters/21-scaling.html b/chapters/21-scaling.html
index 1e3e333..84dde49 100644
--- a/chapters/21-scaling.html
+++ b/chapters/21-scaling.html
@@ -5,10 +5,7 @@
21 · Scaling and load balancing — Interview Prep
-
-
-
-
+
@@ -20,7 +17,7 @@
diff --git a/chapters/22-caching.html b/chapters/22-caching.html
index 0bb2b21..2b5b221 100644
--- a/chapters/22-caching.html
+++ b/chapters/22-caching.html
@@ -5,10 +5,7 @@
22 · Caching and CDNs — Interview Prep
-
-
-
-
+
@@ -20,7 +17,7 @@
diff --git a/chapters/23-databases.html b/chapters/23-databases.html
index 769348e..06851e5 100644
--- a/chapters/23-databases.html
+++ b/chapters/23-databases.html
@@ -5,10 +5,7 @@
23 · SQL vs NoSQL — Interview Prep
-
-
-
-
+
@@ -19,7 +16,7 @@
diff --git a/chapters/24-replication.html b/chapters/24-replication.html
index b8d5855..ffb1032 100644
--- a/chapters/24-replication.html
+++ b/chapters/24-replication.html
@@ -5,10 +5,7 @@
24 · Replication and sharding — Interview Prep
-
-
-
-
+
@@ -19,7 +16,7 @@
diff --git a/chapters/25-cap.html b/chapters/25-cap.html
index d9bdc09..a0ea25d 100644
--- a/chapters/25-cap.html
+++ b/chapters/25-cap.html
@@ -5,10 +5,7 @@
25 · CAP and consistency — Interview Prep
-
-
-
-
+
@@ -19,7 +16,7 @@
diff --git a/chapters/26-queues.html b/chapters/26-queues.html
index b5913c8..7f1b527 100644
--- a/chapters/26-queues.html
+++ b/chapters/26-queues.html
@@ -5,10 +5,7 @@
26 · Queues and async — Interview Prep
-
-
-
-
+
@@ -20,7 +17,7 @@
diff --git a/chapters/27-building-blocks.html b/chapters/27-building-blocks.html
index e09145f..92fe81c 100644
--- a/chapters/27-building-blocks.html
+++ b/chapters/27-building-blocks.html
@@ -5,10 +5,7 @@
27 · More building blocks — Interview Prep
-
-
-
-
+
@@ -19,7 +16,7 @@
diff --git a/chapters/28-url-shortener.html b/chapters/28-url-shortener.html
index 3d4755e..ed3f15a 100644
--- a/chapters/28-url-shortener.html
+++ b/chapters/28-url-shortener.html
@@ -5,10 +5,7 @@
28 · Design: URL shortener — Interview Prep
-
-
-
-
+
@@ -20,7 +17,7 @@
diff --git a/chapters/29-whatsapp.html b/chapters/29-whatsapp.html
index 672aee3..fe8b93f 100644
--- a/chapters/29-whatsapp.html
+++ b/chapters/29-whatsapp.html
@@ -5,10 +5,7 @@
29 · Design: WhatsApp — Interview Prep
-
-
-
-
+
@@ -20,7 +17,7 @@
diff --git a/chapters/30-instagram.html b/chapters/30-instagram.html
index 90b0c71..c2f9fc8 100644
--- a/chapters/30-instagram.html
+++ b/chapters/30-instagram.html
@@ -5,10 +5,7 @@
30 · Design: Instagram — Interview Prep
-
-
-
-
+
@@ -20,7 +17,7 @@
diff --git a/chapters/31-amazon.html b/chapters/31-amazon.html
index dc680b1..21189af 100644
--- a/chapters/31-amazon.html
+++ b/chapters/31-amazon.html
@@ -5,10 +5,7 @@
31 · Design: Amazon — Interview Prep
-
-
-
-
+
@@ -19,7 +16,7 @@
diff --git a/chapters/32-s3.html b/chapters/32-s3.html
index d69304e..abce6c7 100644
--- a/chapters/32-s3.html
+++ b/chapters/32-s3.html
@@ -5,10 +5,7 @@
32 · Design: Amazon S3 — Interview Prep
-
-
-
-
+
@@ -19,7 +16,7 @@
diff --git a/chapters/33-youtube.html b/chapters/33-youtube.html
index 2ec457a..d0325c0 100644
--- a/chapters/33-youtube.html
+++ b/chapters/33-youtube.html
@@ -5,10 +5,7 @@
33 · Design: YouTube — Interview Prep
-
-
-
-
+
@@ -20,7 +17,7 @@
diff --git a/chapters/34-uber.html b/chapters/34-uber.html
index 02bd280..38ad502 100644
--- a/chapters/34-uber.html
+++ b/chapters/34-uber.html
@@ -5,10 +5,7 @@
34 · Design: Uber — Interview Prep
-
-
-
-
+
@@ -20,7 +17,7 @@
diff --git a/chapters/35-llms.html b/chapters/35-llms.html
index 079864f..f5db7ce 100644
--- a/chapters/35-llms.html
+++ b/chapters/35-llms.html
@@ -5,10 +5,7 @@
35 · How LLMs work — Interview Prep
-
-
-
-
+
@@ -20,7 +17,7 @@
diff --git a/chapters/36-prompting.html b/chapters/36-prompting.html
index 04057c5..a30e53d 100644
--- a/chapters/36-prompting.html
+++ b/chapters/36-prompting.html
@@ -5,10 +5,7 @@
36 · Prompting patterns — Interview Prep
-
-
-
-
+
@@ -20,7 +17,7 @@
diff --git a/chapters/37-rag.html b/chapters/37-rag.html
index 4092fde..a9a2814 100644
--- a/chapters/37-rag.html
+++ b/chapters/37-rag.html
@@ -5,10 +5,7 @@
37 · RAG — Interview Prep
-
-
-
-
+
@@ -20,7 +17,7 @@
diff --git a/chapters/38-memory.html b/chapters/38-memory.html
index 6324abf..40a5cfc 100644
--- a/chapters/38-memory.html
+++ b/chapters/38-memory.html
@@ -5,10 +5,7 @@
38 · Memory — Interview Prep
-
-
-
-
+
@@ -20,7 +17,7 @@
diff --git a/chapters/39-agents.html b/chapters/39-agents.html
index 910f2c1..ecaba56 100644
--- a/chapters/39-agents.html
+++ b/chapters/39-agents.html
@@ -5,10 +5,7 @@
39 · Agentic patterns — Interview Prep
-
-
-
-
+
@@ -20,7 +17,7 @@
diff --git a/chapters/40-mcp.html b/chapters/40-mcp.html
index df98cec..ba5f5d0 100644
--- a/chapters/40-mcp.html
+++ b/chapters/40-mcp.html
@@ -5,10 +5,7 @@
40 · MCP — Interview Prep
-
-
-
-
+
@@ -20,7 +17,7 @@
diff --git a/chapters/41-skills.html b/chapters/41-skills.html
index 9588c46..e1f3493 100644
--- a/chapters/41-skills.html
+++ b/chapters/41-skills.html
@@ -5,10 +5,7 @@
41 · Skills — Interview Prep
-
-
-
-
+
@@ -19,7 +16,7 @@
diff --git a/chapters/42-ai-agent.html b/chapters/42-ai-agent.html
index a64f947..d393bbe 100644
--- a/chapters/42-ai-agent.html
+++ b/chapters/42-ai-agent.html
@@ -5,10 +5,7 @@
42 · Design: an AI agent — Interview Prep
-
-
-
-
+
@@ -20,7 +17,7 @@
diff --git a/chapters/behavioral.html b/chapters/behavioral.html
index ab7ae6e..38b4646 100644
--- a/chapters/behavioral.html
+++ b/chapters/behavioral.html
@@ -5,9 +5,6 @@
Behavioral, HR, and resume interviews — Interview Prep
-
-
-
@@ -20,7 +17,7 @@
diff --git a/chapters/cheat-sheets.html b/chapters/cheat-sheets.html
index c10b5e1..3e9b3df 100644
--- a/chapters/cheat-sheets.html
+++ b/chapters/cheat-sheets.html
@@ -5,9 +5,6 @@
Cheat sheets & flashcards — Interview Prep
-
-
-
@@ -20,7 +17,7 @@
diff --git a/chapters/company-guides.html b/chapters/company-guides.html
index e6afc98..0abc1c4 100644
--- a/chapters/company-guides.html
+++ b/chapters/company-guides.html
@@ -5,9 +5,6 @@
Company-specific interview guides — Interview Prep
-
-
-
@@ -20,7 +17,7 @@
diff --git a/chapters/comparisons.html b/chapters/comparisons.html
index 1fc03c9..0a99a7f 100644
--- a/chapters/comparisons.html
+++ b/chapters/comparisons.html
@@ -5,9 +5,6 @@
Technology comparisons for interviews — Interview Prep
-
-
-
@@ -20,7 +17,7 @@
diff --git a/chapters/contents.html b/chapters/contents.html
index bc582b4..921c47e 100644
--- a/chapters/contents.html
+++ b/chapters/contents.html
@@ -5,10 +5,7 @@
Contents — Interview Prep
-
-
-
-
+
@@ -19,7 +16,7 @@
diff --git a/chapters/cover.html b/chapters/cover.html
index e4cace6..c26f667 100644
--- a/chapters/cover.html
+++ b/chapters/cover.html
@@ -5,10 +5,7 @@
Cover — Interview Prep
-
-
-
-
+
@@ -19,7 +16,7 @@
diff --git a/chapters/interview-ai.html b/chapters/interview-ai.html
index d0c1a08..0a60d45 100644
--- a/chapters/interview-ai.html
+++ b/chapters/interview-ai.html
@@ -5,9 +5,6 @@
AI interview questions — Interview Prep
-
-
-
@@ -20,7 +17,7 @@
diff --git a/chapters/interview-cp.html b/chapters/interview-cp.html
index 20542c7..8af1a24 100644
--- a/chapters/interview-cp.html
+++ b/chapters/interview-cp.html
@@ -5,9 +5,6 @@
Coding interview questions — Interview Prep
-
-
-
@@ -20,7 +17,7 @@
diff --git a/chapters/interview-playbook.html b/chapters/interview-playbook.html
index 98335f0..12ebf29 100644
--- a/chapters/interview-playbook.html
+++ b/chapters/interview-playbook.html
@@ -5,9 +5,6 @@
Interview-focused playbook — Interview Prep
-
-
-
@@ -20,7 +17,7 @@
diff --git a/chapters/interview-sd.html b/chapters/interview-sd.html
index dc203ac..de07d35 100644
--- a/chapters/interview-sd.html
+++ b/chapters/interview-sd.html
@@ -5,9 +5,6 @@
System design interview questions — Interview Prep
-
-
-
@@ -20,7 +17,7 @@
diff --git a/chapters/learning-paths.html b/chapters/learning-paths.html
index 01478aa..886085c 100644
--- a/chapters/learning-paths.html
+++ b/chapters/learning-paths.html
@@ -5,9 +5,6 @@
Learning paths by role — Interview Prep
-
-
-
@@ -20,7 +17,7 @@
diff --git a/chapters/part-ai.html b/chapters/part-ai.html
index cf89b3a..1e07a7b 100644
--- a/chapters/part-ai.html
+++ b/chapters/part-ai.html
@@ -5,10 +5,7 @@
Part Three: AI Engineering — Interview Prep
-
-
-
-
+
@@ -19,7 +16,7 @@
diff --git a/chapters/part-cp.html b/chapters/part-cp.html
index 6799512..ad3bd79 100644
--- a/chapters/part-cp.html
+++ b/chapters/part-cp.html
@@ -5,10 +5,7 @@
Part One: Competitive Programming — Interview Prep
-
-
-
-
+
@@ -19,7 +16,7 @@
diff --git a/chapters/part-sd.html b/chapters/part-sd.html
index f12d438..9081a00 100644
--- a/chapters/part-sd.html
+++ b/chapters/part-sd.html
@@ -5,10 +5,7 @@
Part Two: System Design — Interview Prep
-
-
-
-
+
@@ -19,7 +16,7 @@
diff --git a/css/chapter.css b/css/chapter.css
index e41c399..9f3e3ee 100644
--- a/css/chapter.css
+++ b/css/chapter.css
@@ -1,9 +1,5 @@
-/* Chapter reading experience — real HTML text, not page screenshots */
-
body.chapter-page {
- background:
- radial-gradient(900px 420px at 0% 0%, rgba(13, 122, 111, 0.08), transparent 55%),
- linear-gradient(180deg, #eef3f0 0%, var(--paper) 35%, #e8efe9 100%);
+ background: var(--gray-50);
min-height: 100vh;
}
@@ -14,8 +10,8 @@ body.chapter-page {
}
.chapter-page .sidebar {
- background: rgba(243, 246, 244, 0.96);
- border-right: 1px solid var(--line);
+ background: var(--surface);
+ border-right: 1px solid var(--border);
position: sticky;
top: 0;
height: 100vh;
@@ -36,9 +32,9 @@ body.chapter-page {
display: flex;
align-items: center;
gap: 0.75rem;
- padding: 0.85rem 1.25rem;
- border-bottom: 1px solid var(--line);
- background: rgba(243, 246, 244, 0.88);
+ padding: 0.75rem 1.25rem;
+ border-bottom: 1px solid var(--border);
+ background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(10px);
position: sticky;
top: 0;
@@ -49,51 +45,53 @@ body.chapter-page {
flex: 1;
}
-.btn-small {
- padding: 0.45rem 0.9rem;
- font-size: 0.85rem;
-}
-
.chapter-article {
- width: min(760px, calc(100% - 2.5rem));
+ width: min(820px, calc(100% - 2.5rem));
margin: 0 auto;
padding: 2rem 0 4.5rem;
}
.part-eyebrow {
margin: 0 0 0.75rem;
- font-size: 0.75rem;
- letter-spacing: 0.16em;
+ font-size: var(--text-xs);
+ letter-spacing: 0.08em;
text-transform: uppercase;
- color: var(--accent);
+ color: var(--primary-700);
font-weight: 700;
}
.chapter-hero {
margin-bottom: 2rem;
padding-bottom: 1.25rem;
- border-bottom: 1px solid var(--line);
+ border-bottom: 1px solid var(--border);
}
.chapter-num {
margin: 0 0 0.4rem;
font-family: var(--font-mono);
font-size: 0.85rem;
- color: var(--accent);
+ color: var(--primary-600);
}
.chapter-hero h1 {
margin: 0;
- font-family: var(--font-display);
- font-size: clamp(2rem, 5vw, 3rem);
- letter-spacing: -0.03em;
- line-height: 1.1;
+ font-family: var(--font-sans);
+ font-size: clamp(1.85rem, 4vw, 2.5rem);
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ line-height: 1.15;
+ color: var(--text-primary);
+}
+
+.lab-hero-note {
+ margin: 0.75rem 0 0;
+ color: var(--text-secondary);
}
.chapter-body {
- font-size: 1.05rem;
+ font-size: 1.02rem;
line-height: 1.7;
- color: var(--ink);
+ color: var(--text-primary);
}
.chapter-body > * + * {
@@ -102,49 +100,58 @@ body.chapter-page {
.chapter-body p {
margin: 0;
- color: var(--ink-soft);
+ color: var(--text-secondary);
}
.chapter-body h2,
.chapter-body h3 {
margin: 2rem 0 0;
- font-family: var(--font-display);
+ font-family: var(--font-sans);
+ font-weight: 650;
letter-spacing: -0.02em;
- line-height: 1.2;
- color: var(--ink);
+ line-height: 1.25;
+ color: var(--text-primary);
}
.chapter-body h2 {
- font-size: 1.45rem;
+ font-size: 1.4rem;
}
.chapter-body h3 {
font-size: 1.15rem;
}
+.chapter-body a {
+ color: var(--primary-700);
+ text-decoration: underline;
+ text-decoration-thickness: 1px;
+ text-underline-offset: 2px;
+}
+
.section-label {
- font-family: var(--font-body) !important;
+ font-family: var(--font-sans) !important;
font-size: 0.78rem !important;
- letter-spacing: 0.14em;
+ letter-spacing: 0.08em;
text-transform: uppercase;
- color: var(--accent) !important;
+ color: var(--primary-700) !important;
font-weight: 700;
}
.code-block {
margin: 1.35rem 0;
- border: 1px solid rgba(15, 28, 36, 0.12);
- background: #0f1c24;
+ border: 1px solid var(--gray-700);
+ background: var(--gray-900);
overflow: hidden;
- box-shadow: var(--shadow);
+ border-radius: var(--radius-lg);
+ box-shadow: var(--shadow-sm);
}
.code-lang {
padding: 0.45rem 0.85rem;
font-family: var(--font-mono);
font-size: 0.72rem;
- letter-spacing: 0.12em;
- color: #7fb4f0;
+ letter-spacing: 0.08em;
+ color: var(--primary-500);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
@@ -159,23 +166,21 @@ pre.code code {
font-family: var(--font-mono);
font-size: 0.86rem;
line-height: 1.55;
- color: #e8ecf6;
+ color: #e5e7eb;
white-space: pre;
}
figure.diagram {
- /* architecture figures: full-bleed within article column */
margin: 1.75rem 0;
background: #fff;
- border: 1px solid var(--line);
- box-shadow: var(--shadow);
+ border: 1px solid var(--border);
+ border-radius: var(--radius-lg);
+ box-shadow: var(--shadow-sm);
overflow: hidden;
}
figure.diagram.native {
background: #fbfcfd;
- border: 1px solid rgba(15, 28, 36, 0.12);
- box-shadow: 0 1px 2px rgba(21, 32, 43, 0.06);
}
figure.diagram img {
@@ -188,16 +193,17 @@ figure.diagram img {
figure.diagram figcaption {
padding: 0.7rem 0.9rem;
font-size: 0.85rem;
- color: var(--ink-soft);
- border-top: 1px solid var(--line);
+ color: var(--text-secondary);
+ border-top: 1px solid var(--border);
}
.table-wrap {
margin: 1.35rem 0 1.6rem;
overflow-x: auto;
- border: 1px solid var(--line);
+ border: 1px solid var(--border);
background: #fff;
- box-shadow: var(--shadow);
+ border-radius: var(--radius-lg);
+ box-shadow: var(--shadow-sm);
}
.table-wrap table {
@@ -212,8 +218,8 @@ figure.diagram figcaption {
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.04em;
- color: var(--accent);
- border-bottom: 1px solid var(--line);
+ color: var(--primary-700);
+ border-bottom: 1px solid var(--border);
}
.table-wrap th,
@@ -221,16 +227,16 @@ figure.diagram figcaption {
padding: 0.7rem 0.85rem;
text-align: left;
vertical-align: top;
- border-bottom: 1px solid rgba(15, 28, 36, 0.08);
- color: var(--ink-soft);
+ border-bottom: 1px solid var(--border-light);
+ color: var(--text-secondary);
}
.table-wrap th {
font-size: 0.8rem;
letter-spacing: 0.04em;
text-transform: uppercase;
- color: var(--ink);
- background: rgba(13, 122, 111, 0.06);
+ color: var(--text-primary);
+ background: var(--primary-50);
font-weight: 700;
}
@@ -240,25 +246,17 @@ figure.diagram figcaption {
.table-wrap td:first-child {
font-weight: 650;
- color: var(--ink);
+ color: var(--text-primary);
white-space: nowrap;
}
-.diagram-card img {
- aspect-ratio: 16 / 10;
- object-fit: contain;
- object-position: center;
- background: #f7faf8;
- padding: 0.5rem;
-}
-
.chapter-pager {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-top: 3rem;
padding-top: 1.5rem;
- border-top: 1px solid var(--line);
+ border-top: 1px solid var(--border);
}
.chapter-pager a {
@@ -267,19 +265,20 @@ figure.diagram figcaption {
gap: 0.2rem;
max-width: 45%;
padding: 0.85rem 0;
- color: var(--ink-soft);
+ color: var(--text-secondary);
transition: color 0.2s ease;
+ text-decoration: none;
}
.chapter-pager a:hover {
- color: var(--accent-deep);
+ color: var(--primary-700);
}
.chapter-pager .dir {
font-size: 0.72rem;
- letter-spacing: 0.12em;
+ letter-spacing: 0.08em;
text-transform: uppercase;
- color: var(--accent);
+ color: var(--primary-600);
}
.chapter-pager .next {
@@ -289,9 +288,9 @@ figure.diagram figcaption {
.chapter-page .toc-group-title {
font-size: 0.7rem;
- letter-spacing: 0.14em;
+ letter-spacing: 0.08em;
text-transform: uppercase;
- color: var(--accent);
+ color: var(--primary-700);
padding: 0.45rem 0.65rem;
font-weight: 700;
}
@@ -299,22 +298,23 @@ figure.diagram figcaption {
.chapter-page .toc-item {
display: block;
padding: 0.42rem 0.65rem;
- border-radius: 8px;
- color: var(--ink-soft);
+ border-radius: var(--radius-md);
+ color: var(--text-secondary);
font-size: 0.88rem;
+ text-decoration: none;
}
.chapter-page .toc-item:hover,
.chapter-page .toc-item.active {
- background: var(--accent-glow);
- color: var(--accent-deep);
+ background: var(--primary-50);
+ color: var(--primary-700);
}
.chapter-page .toc-item .num {
font-family: var(--font-mono);
font-size: 0.72rem;
margin-right: 0.35rem;
- opacity: 0.8;
+ opacity: 0.85;
}
@media (max-width: 900px) {
@@ -329,7 +329,7 @@ figure.diagram figcaption {
z-index: 80;
transform: translateX(-105%);
transition: transform 0.3s var(--ease);
- box-shadow: var(--shadow);
+ box-shadow: var(--shadow-lg);
}
body.sidebar-open .chapter-page .sidebar,
diff --git a/css/interview.css b/css/interview.css
index c3edf26..ff6fb11 100644
--- a/css/interview.css
+++ b/css/interview.css
@@ -1,8 +1,8 @@
-/* Interview Q&A drills */
+/* Interview Q&A drills — DevNinja theme */
.interview-drill {
margin-top: 2.75rem;
padding-top: 1.75rem;
- border-top: 1px solid var(--line);
+ border-top: 1px solid var(--border);
}
.interview-drill > h2 {
@@ -10,15 +10,17 @@
}
.drill-intro {
- color: var(--ink-soft);
+ color: var(--text-secondary);
margin: 0.5rem 0 1.25rem !important;
}
.qa {
- border: 1px solid var(--line);
- background: #fff;
+ border: 1px solid var(--border);
+ background: var(--surface);
margin: 0.75rem 0;
overflow: hidden;
+ border-radius: var(--radius-lg);
+ box-shadow: var(--shadow-sm);
}
.qa + .qa {
@@ -30,7 +32,7 @@
list-style: none;
padding: 0.95rem 1rem;
font-weight: 650;
- color: var(--ink);
+ color: var(--text-primary);
display: flex;
gap: 0.65rem;
align-items: flex-start;
@@ -43,7 +45,7 @@
.qa summary::before {
content: "+";
font-family: var(--font-mono);
- color: var(--accent);
+ color: var(--primary-600);
flex: 0 0 auto;
margin-top: 0.05rem;
}
@@ -53,12 +55,12 @@
}
.qa summary:hover {
- background: rgba(13, 122, 111, 0.05);
+ background: var(--primary-50);
}
.qa-body {
padding: 0 1rem 1.1rem;
- border-top: 1px solid rgba(15, 28, 36, 0.06);
+ border-top: 1px solid var(--border-light);
}
.qa-body > * + * {
@@ -69,22 +71,22 @@
display: inline-block;
font-family: var(--font-mono);
font-size: 0.72rem;
- letter-spacing: 0.1em;
+ letter-spacing: 0.08em;
text-transform: uppercase;
- color: var(--accent);
+ color: var(--primary-700);
font-weight: 700;
margin-bottom: 0.25rem;
}
.qa-meta {
font-size: 0.86rem;
- color: var(--ink-soft);
+ color: var(--text-muted);
margin: 0 !important;
}
.lab-hero-note {
margin: 0.75rem 0 0;
- color: var(--ink-soft);
+ color: var(--text-secondary);
}
.qa-body ul {
@@ -113,8 +115,9 @@
.qa-diagram {
margin: 1rem 0 0.35rem !important;
background: #fbfcfd;
- border: 1px solid rgba(15, 28, 36, 0.12);
- box-shadow: 0 1px 2px rgba(21, 32, 43, 0.06);
+ border: 1px solid var(--border);
+ border-radius: var(--radius-lg);
+ box-shadow: var(--shadow-sm);
overflow: hidden;
}
@@ -128,8 +131,9 @@
.qa-callout {
margin-top: 0.85rem;
padding: 0.85rem 1rem;
- background: rgba(13, 122, 111, 0.06);
- border-left: 3px solid var(--accent);
+ background: var(--primary-50);
+ border-left: 3px solid var(--primary-500);
+ border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.qa-callout .qa-label {
@@ -145,19 +149,19 @@
}
.lab-toc a {
- color: var(--ink);
+ color: var(--text-primary);
text-decoration: none;
font-weight: 550;
}
.lab-toc a:hover {
- color: var(--accent);
+ color: var(--primary-700);
}
.lab-toc span {
font-family: var(--font-mono);
font-size: 0.78rem;
- color: var(--accent);
+ color: var(--primary-600);
margin-right: 0.45rem;
}
@@ -167,24 +171,24 @@
}
.chapter-page .part a:hover {
- color: var(--accent);
+ color: var(--primary-700);
}
-/* Interview lens + guide chrome */
.page-meta-bar {
display: flex;
flex-wrap: wrap;
gap: 0.55rem 1.1rem;
margin: 0.85rem 0 1.15rem;
padding: 0.7rem 0.9rem;
- background: linear-gradient(135deg, rgba(13, 122, 111, 0.07), rgba(15, 28, 36, 0.03));
- border: 1px solid rgba(15, 28, 36, 0.08);
+ background: var(--primary-50);
+ border: 1px solid var(--border);
+ border-radius: var(--radius-md);
font-size: 0.86rem;
- color: var(--ink-soft);
+ color: var(--text-secondary);
}
.page-meta-bar strong {
- color: var(--ink);
+ color: var(--text-primary);
font-weight: 650;
margin-right: 0.25rem;
}
@@ -196,7 +200,7 @@
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
- color: var(--accent);
+ color: var(--primary-700);
font-weight: 700;
margin-bottom: 0.4rem;
}
@@ -204,20 +208,21 @@
.level-table th[scope="row"] {
white-space: nowrap;
width: 6.5rem;
- color: var(--ink);
+ color: var(--text-primary);
font-weight: 650;
}
.learn-box {
margin: 1rem 0 1.35rem;
padding: 0.9rem 1rem;
- border-left: 3px solid var(--accent);
- background: rgba(13, 122, 111, 0.05);
+ border-left: 3px solid var(--primary-500);
+ background: var(--primary-50);
+ border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.learn-box-next {
- border-left-color: #0f1c24;
- background: rgba(15, 28, 36, 0.04);
+ border-left-color: var(--gray-800);
+ background: var(--surface-muted);
}
.learn-box .qa-label {
@@ -230,30 +235,6 @@
padding-left: 1.2rem;
}
-.table-wrap {
- overflow-x: auto;
- margin: 0.75rem 0 1rem;
-}
-
-.table-wrap table {
- width: 100%;
- border-collapse: collapse;
- font-size: 0.92rem;
-}
-
-.table-wrap th,
-.table-wrap td {
- border: 1px solid rgba(15, 28, 36, 0.1);
- padding: 0.55rem 0.7rem;
- text-align: left;
- vertical-align: top;
-}
-
-.table-wrap thead th {
- background: rgba(13, 122, 111, 0.08);
- font-weight: 650;
-}
-
.progress-bar-wrap {
display: flex;
align-items: center;
@@ -266,7 +247,7 @@
flex: 1;
min-width: 140px;
height: 0.55rem;
- background: rgba(15, 28, 36, 0.08);
+ background: var(--gray-200);
border-radius: 999px;
overflow: hidden;
}
@@ -275,18 +256,18 @@
display: block;
height: 100%;
width: 0%;
- background: var(--accent);
+ background: var(--primary-600);
transition: width 0.25s ease;
}
.progress-label {
font-size: 0.84rem;
- color: var(--ink-soft);
+ color: var(--text-muted);
font-family: var(--font-mono);
}
.qa.done > summary {
- background: rgba(13, 122, 111, 0.07);
+ background: var(--primary-50);
}
.mark-done {
@@ -297,17 +278,19 @@
.mark-done button {
font: inherit;
cursor: pointer;
- border: 1px solid var(--line);
+ border: 1px solid var(--border);
background: #fff;
+ border-radius: var(--radius-md);
padding: 0.35rem 0.7rem;
- color: var(--ink);
+ color: var(--text-primary);
}
.mark-done button:hover {
- border-color: var(--accent);
- color: var(--accent);
+ border-color: var(--primary-500);
+ color: var(--primary-700);
+ background: var(--primary-50);
}
.toc-item .num.guide {
- color: #8a5a2b;
+ color: #b45309;
}
diff --git a/css/styles.css b/css/styles.css
index 39d9712..aa860c4 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,19 +1,94 @@
+/* DevNinja design system — Interview Prep site */
:root {
- --ink: #0f1c24;
- --ink-soft: #3a4a54;
- --paper: #f3f6f4;
- --paper-2: #e7eeea;
- --mist: #c5d5ce;
- --accent: #0d7a6f;
- --accent-deep: #09564e;
- --accent-glow: rgba(13, 122, 111, 0.18);
- --line: rgba(15, 28, 36, 0.12);
- --shadow: 0 24px 60px rgba(15, 28, 36, 0.14);
- --font-display: "Fraunces", "Georgia", serif;
- --font-body: "Manrope", "Segoe UI", sans-serif;
- --font-mono: "IBM Plex Mono", ui-monospace, monospace;
- --sidebar-w: 300px;
+ /* Primary — sky blue (matches devninja.in) */
+ --primary-50: #f0f9ff;
+ --primary-100: #e0f2fe;
+ --primary-500: #0ea5e9;
+ --primary-600: #0284c7;
+ --primary-700: #0369a1;
+ --primary-900: #0c4a6e;
+
+ /* Neutrals — GitHub/Vercel inspired */
+ --gray-50: #fafafa;
+ --gray-100: #f4f4f5;
+ --gray-200: #e4e4e7;
+ --gray-300: #d4d4d8;
+ --gray-400: #a1a1aa;
+ --gray-500: #71717a;
+ --gray-600: #52525b;
+ --gray-700: #3f3f46;
+ --gray-800: #27272a;
+ --gray-900: #18181b;
+
+ --surface: #ffffff;
+ --surface-elevated: #fafafa;
+ --surface-muted: #f4f4f5;
+ --border: #e4e4e7;
+ --border-light: #f4f4f5;
+ --text-primary: #18181b;
+ --text-secondary: #52525b;
+ --text-muted: #71717a;
+ --text-accent: #0ea5e9;
+
+ --cat-coding: #10b981;
+ --cat-sd: #0ea5e9;
+ --cat-ai: #8b5cf6;
+ --cat-guide: #f59e0b;
+
+ --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+ --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+ --text-xs: 0.75rem;
+ --text-sm: 0.875rem;
+ --text-base: 1rem;
+ --text-lg: 1.125rem;
+ --text-xl: 1.25rem;
+ --text-2xl: 1.5rem;
+ --text-3xl: 1.875rem;
+ --text-4xl: 2.25rem;
+ --text-5xl: 3rem;
+
+ --space-1: 0.25rem;
+ --space-2: 0.5rem;
+ --space-3: 0.75rem;
+ --space-4: 1rem;
+ --space-5: 1.25rem;
+ --space-6: 1.5rem;
+ --space-8: 2rem;
+ --space-10: 2.5rem;
+ --space-12: 3rem;
+ --space-16: 4rem;
+ --space-20: 5rem;
+
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+ --radius-sm: 0.25rem;
+ --radius-md: 0.375rem;
+ --radius-lg: 0.5rem;
+ --radius-xl: 0.75rem;
+
+ --max-width: 1280px;
+ --header-height: 64px;
+ --sidebar-w: 280px;
+ --transition-fast: 150ms ease;
+ --transition-base: 200ms ease;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
+
+ /* Compatibility aliases used by chapter/interview CSS */
+ --ink: var(--text-primary);
+ --ink-soft: var(--text-secondary);
+ --paper: var(--gray-50);
+ --paper-2: var(--gray-100);
+ --mist: var(--gray-300);
+ --accent: var(--primary-600);
+ --accent-deep: var(--primary-700);
+ --accent-glow: rgba(14, 165, 233, 0.14);
+ --line: var(--border);
+ --shadow: var(--shadow-md);
+ --font-display: var(--font-sans);
+ --font-body: var(--font-sans);
}
*,
@@ -28,14 +103,13 @@ html {
body {
margin: 0;
- color: var(--ink);
- font-family: var(--font-body);
- background:
- radial-gradient(1200px 600px at 10% -10%, rgba(13, 122, 111, 0.14), transparent 55%),
- radial-gradient(900px 500px at 100% 0%, rgba(45, 90, 120, 0.12), transparent 50%),
- linear-gradient(180deg, #eef3f0 0%, var(--paper) 40%, #e8efe9 100%);
+ color: var(--text-primary);
+ font-family: var(--font-sans);
+ font-size: var(--text-base);
+ line-height: 1.6;
+ background: var(--surface);
min-height: 100vh;
- line-height: 1.55;
+ -webkit-font-smoothing: antialiased;
}
a {
@@ -52,7 +126,7 @@ img {
position: absolute;
left: -999px;
top: 0;
- background: var(--ink);
+ background: var(--gray-900);
color: white;
padding: 0.6rem 1rem;
z-index: 1000;
@@ -63,71 +137,82 @@ img {
top: 1rem;
}
-/* ——— Landing ——— */
+.container {
+ width: min(100% - 2rem, var(--max-width));
+ margin-inline: auto;
+}
+
+/* ——— Header (DevNinja-style) ——— */
.site-header {
+ position: sticky;
+ top: 0;
+ z-index: 50;
+ height: var(--header-height);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
- padding: 1.25rem clamp(1.25rem, 4vw, 3rem);
- position: sticky;
- top: 0;
- z-index: 50;
- backdrop-filter: blur(14px);
- background: rgba(243, 246, 244, 0.78);
- border-bottom: 1px solid transparent;
- transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
+ padding: 0 clamp(1rem, 3vw, 2rem);
+ background: rgba(255, 255, 255, 0.92);
+ backdrop-filter: blur(12px);
+ border-bottom: 1px solid var(--border);
}
.site-header.is-scrolled {
- border-bottom-color: var(--line);
- background: rgba(243, 246, 244, 0.92);
+ box-shadow: var(--shadow-sm);
}
.brand {
- display: flex;
+ display: inline-flex;
align-items: baseline;
- gap: 0.55rem;
- font-family: var(--font-display);
- font-weight: 600;
- font-size: 1.15rem;
+ gap: 0.45rem;
+ font-size: var(--text-xl);
+ font-weight: 700;
+ color: var(--text-primary);
letter-spacing: -0.02em;
}
.brand span {
- color: var(--accent);
- font-weight: 500;
- font-size: 0.78rem;
- letter-spacing: 0.14em;
- text-transform: uppercase;
- font-family: var(--font-body);
+ font-size: var(--text-xs);
+ font-weight: 600;
+ color: var(--primary-600);
+ letter-spacing: 0.04em;
+ text-transform: none;
}
.nav-links {
display: flex;
- gap: 1.25rem;
+ gap: 0.35rem;
align-items: center;
- font-size: 0.92rem;
- color: var(--ink-soft);
+ font-size: var(--text-sm);
+ font-weight: 500;
+ color: var(--text-secondary);
+}
+
+.nav-links > a:not(.btn) {
+ padding: 0.4rem 0.7rem;
+ border-radius: var(--radius-md);
+ transition: var(--transition-fast);
}
-.nav-links a:hover {
- color: var(--accent-deep);
+.nav-links > a:not(.btn):hover {
+ color: var(--text-primary);
+ background: var(--surface-muted);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
- gap: 0.5rem;
- padding: 0.85rem 1.35rem;
- border-radius: 999px;
+ gap: 0.45rem;
+ padding: 0.6rem 1rem;
+ border-radius: var(--radius-md);
border: 1px solid transparent;
- font-family: var(--font-body);
- font-weight: 650;
- font-size: 0.95rem;
+ font-family: inherit;
+ font-weight: 600;
+ font-size: var(--text-sm);
cursor: pointer;
- transition: transform 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
+ transition: var(--transition-base);
}
.btn:hover {
@@ -135,227 +220,318 @@ img {
}
.btn-primary {
- background: var(--ink);
- color: #f7fbf9;
- box-shadow: 0 10px 28px rgba(15, 28, 36, 0.22);
+ background: var(--primary-600);
+ color: #fff;
+ box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
- background: var(--accent-deep);
+ background: var(--primary-700);
}
.btn-ghost {
- background: transparent;
- border-color: var(--line);
- color: var(--ink);
+ background: var(--surface);
+ border-color: var(--border);
+ color: var(--text-primary);
}
.btn-ghost:hover {
- border-color: var(--accent);
- background: var(--accent-glow);
+ border-color: var(--primary-500);
+ background: var(--primary-50);
+ color: var(--primary-700);
+}
+
+.btn-small {
+ padding: 0.4rem 0.75rem;
+ font-size: var(--text-xs);
}
+/* ——— Hero ——— */
.hero {
position: relative;
- min-height: calc(100vh - 72px);
- display: grid;
- align-items: end;
- padding: clamp(2rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 7vw, 5rem);
+ text-align: center;
+ padding: clamp(3.5rem, 8vw, 6rem) 1rem clamp(3rem, 6vw, 4.5rem);
+ background: linear-gradient(135deg, var(--primary-50) 0%, var(--surface) 58%, #fff 100%);
+ border-bottom: 1px solid var(--border-light);
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
- inset: 0;
- background:
- linear-gradient(120deg, rgba(15, 28, 36, 0.72) 0%, rgba(15, 28, 36, 0.35) 42%, rgba(15, 28, 36, 0.15) 100%),
- url("../assets/cover.jpg") center / cover no-repeat;
- transform: scale(1.04);
- animation: hero-drift 18s var(--ease) infinite alternate;
- z-index: 0;
-}
-
-@keyframes hero-drift {
- from { transform: scale(1.04) translate3d(0, 0, 0); }
- to { transform: scale(1.08) translate3d(-1.2%, -0.8%, 0); }
+ inset: auto -10% -40% auto;
+ width: min(520px, 70vw);
+ height: min(520px, 70vw);
+ border-radius: 50%;
+ background: radial-gradient(circle, rgba(14, 165, 233, 0.16), transparent 68%);
+ pointer-events: none;
}
.hero-content {
position: relative;
z-index: 1;
- max-width: 42rem;
- color: #f4f8f6;
- animation: rise 0.9s var(--ease) both;
+ width: min(720px, 100%);
+ margin-inline: auto;
}
-@keyframes rise {
- from { opacity: 0; transform: translateY(18px); }
- to { opacity: 1; transform: translateY(0); }
+.hero-kicker {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+ margin: 0 0 1rem;
+ padding: 0.3rem 0.7rem;
+ border: 1px solid var(--border);
+ border-radius: var(--radius-md);
+ background: var(--surface);
+ color: var(--text-secondary);
+ font-size: var(--text-xs);
+ font-weight: 600;
}
-.hero-kicker {
- font-size: 0.78rem;
- letter-spacing: 0.18em;
- text-transform: uppercase;
- opacity: 0.8;
- margin-bottom: 1rem;
+.hero-kicker a {
+ color: var(--primary-600);
}
.hero h1 {
margin: 0;
- font-family: var(--font-display);
- font-weight: 600;
- font-size: clamp(3.4rem, 10vw, 6.4rem);
- line-height: 0.92;
- letter-spacing: -0.04em;
+ font-size: clamp(2.4rem, 6vw, 3.4rem);
+ font-weight: 700;
+ letter-spacing: -0.03em;
+ line-height: 1.1;
+ color: var(--text-primary);
}
.hero p {
- margin: 1.25rem 0 0;
- font-size: clamp(1.05rem, 2.2vw, 1.25rem);
- max-width: 34rem;
- opacity: 0.92;
+ margin: 1rem auto 0;
+ max-width: 38rem;
+ font-size: var(--text-lg);
+ color: var(--text-secondary);
+ line-height: 1.55;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
- gap: 0.75rem;
+ justify-content: center;
+ gap: 0.65rem;
margin-top: 1.75rem;
}
-.hero .btn-primary {
- background: #f7fbf9;
- color: var(--ink);
+.hero-stats {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 1.5rem 2rem;
+ margin-top: 2.25rem;
+ color: var(--text-muted);
+ font-size: var(--text-sm);
}
-.hero .btn-primary:hover {
- background: #ffffff;
+.hero-stats strong {
+ display: block;
+ color: var(--text-primary);
+ font-size: var(--text-2xl);
+ font-weight: 700;
+ letter-spacing: -0.02em;
}
-.hero .btn-ghost {
- border-color: rgba(247, 251, 249, 0.35);
- color: #f7fbf9;
+/* ——— Sections ——— */
+.section {
+ padding: clamp(2.75rem, 6vw, 4.5rem) 0;
}
-.section {
- padding: clamp(3rem, 7vw, 5.5rem) clamp(1.25rem, 4vw, 3rem);
+.section-alt {
+ background: var(--surface-elevated);
+ border-block: 1px solid var(--border-light);
}
.section-head {
- max-width: 40rem;
- margin-bottom: 2rem;
+ width: min(40rem, 100%);
+ margin: 0 auto 2rem;
+ text-align: center;
+ padding-inline: 1rem;
}
.section-head h2 {
- margin: 0 0 0.6rem;
- font-family: var(--font-display);
- font-size: clamp(1.8rem, 4vw, 2.6rem);
- letter-spacing: -0.03em;
- line-height: 1.1;
+ margin: 0 0 0.55rem;
+ font-size: clamp(1.55rem, 3.5vw, 2rem);
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ color: var(--text-primary);
}
.section-head p {
margin: 0;
- color: var(--ink-soft);
+ color: var(--text-secondary);
+ font-size: var(--text-base);
}
+/* Interactive destination tiles */
.parts {
display: grid;
- gap: 1.25rem;
+ gap: 1rem;
+ width: min(100% - 2rem, var(--max-width));
+ margin-inline: auto;
}
-@media (min-width: 860px) {
+@media (min-width: 760px) {
.parts {
grid-template-columns: repeat(3, 1fr);
}
}
+@media (min-width: 1100px) {
+ .parts.parts-wide {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
+
.part {
- padding: 1.5rem 0 0.5rem;
- border-top: 1px solid var(--line);
- animation: rise 0.8s var(--ease) both;
+ background: var(--surface);
+ border: 1px solid var(--border);
+ border-radius: var(--radius-lg);
+ padding: 1.35rem 1.25rem;
+ box-shadow: var(--shadow-sm);
+ transition: var(--transition-base);
+ height: 100%;
}
-.part:nth-child(2) { animation-delay: 0.08s; }
-.part:nth-child(3) { animation-delay: 0.16s; }
+.part:hover {
+ border-color: var(--primary-500);
+ box-shadow: var(--shadow-md);
+ transform: translateY(-2px);
+}
.part-label {
- font-size: 0.75rem;
- letter-spacing: 0.16em;
- text-transform: uppercase;
- color: var(--accent);
+ display: inline-block;
margin-bottom: 0.55rem;
+ padding: 0.15rem 0.5rem;
+ border-radius: var(--radius-sm);
+ background: var(--primary-50);
+ color: var(--primary-700);
+ font-size: var(--text-xs);
+ font-weight: 600;
}
+.part-label.coding { background: #ecfdf5; color: #047857; }
+.part-label.sd { background: var(--primary-50); color: var(--primary-700); }
+.part-label.ai { background: #f5f3ff; color: #6d28d9; }
+.part-label.guide { background: #fffbeb; color: #b45309; }
+
.part h3 {
- margin: 0 0 0.55rem;
- font-family: var(--font-display);
- font-size: 1.55rem;
- letter-spacing: -0.02em;
+ margin: 0 0 0.45rem;
+ font-size: var(--text-lg);
+ font-weight: 650;
+ letter-spacing: -0.01em;
+ line-height: 1.35;
}
.part h3 a {
color: inherit;
- text-decoration: none;
}
.part h3 a:hover {
- color: var(--accent);
+ color: var(--primary-700);
}
.part p {
margin: 0;
- color: var(--ink-soft);
- font-size: 0.98rem;
+ color: var(--text-secondary);
+ font-size: var(--text-sm);
+ line-height: 1.55;
+}
+
+.ecosystem {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 0.5rem;
+ width: min(100% - 2rem, 52rem);
+ margin: 0 auto;
+}
+
+.ecosystem a {
+ padding: 0.45rem 0.8rem;
+ border: 1px solid var(--border);
+ border-radius: var(--radius-md);
+ background: var(--surface);
+ color: var(--text-secondary);
+ font-size: var(--text-sm);
+ font-weight: 500;
+ transition: var(--transition-fast);
+}
+
+.ecosystem a:hover {
+ border-color: var(--primary-500);
+ color: var(--primary-700);
+ background: var(--primary-50);
}
+/* TOC */
.toc-grid {
display: grid;
- gap: 2rem;
+ gap: 1.25rem;
+ width: min(100% - 2rem, var(--max-width));
+ margin-inline: auto;
}
@media (min-width: 900px) {
.toc-grid {
- grid-template-columns: repeat(3, 1fr);
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media (min-width: 1100px) {
+ .toc-grid {
+ grid-template-columns: repeat(4, 1fr);
}
}
+.toc-col {
+ background: var(--surface);
+ border: 1px solid var(--border);
+ border-radius: var(--radius-lg);
+ padding: 1rem 1rem 0.75rem;
+ box-shadow: var(--shadow-sm);
+}
+
.toc-col h3 {
- margin: 0 0 0.85rem;
- font-family: var(--font-display);
- font-size: 1.25rem;
+ margin: 0 0 0.75rem;
padding-bottom: 0.55rem;
- border-bottom: 1px solid var(--line);
+ border-bottom: 1px solid var(--border-light);
+ font-size: var(--text-sm);
+ font-weight: 700;
+ color: var(--text-primary);
}
.toc-col ol {
list-style: none;
margin: 0;
padding: 0;
+ max-height: 22rem;
+ overflow: auto;
}
.toc-col li a {
display: grid;
- grid-template-columns: 2.2rem 1fr;
- gap: 0.4rem;
- padding: 0.42rem 0;
- border-bottom: 1px solid rgba(15, 28, 36, 0.05);
- color: var(--ink-soft);
- font-size: 0.94rem;
- transition: color 0.2s ease, padding-left 0.2s var(--ease);
+ grid-template-columns: 2.4rem 1fr;
+ gap: 0.35rem;
+ padding: 0.38rem 0.2rem;
+ border-bottom: 1px solid var(--border-light);
+ color: var(--text-secondary);
+ font-size: var(--text-sm);
+ transition: var(--transition-fast);
}
.toc-col li a:hover {
- color: var(--accent-deep);
+ color: var(--primary-700);
padding-left: 0.25rem;
}
.toc-col li .num {
font-family: var(--font-mono);
- font-size: 0.78rem;
- color: var(--accent);
+ font-size: 0.72rem;
+ color: var(--primary-600);
padding-top: 0.15rem;
}
@@ -365,108 +541,76 @@ img {
grid-auto-columns: minmax(220px, 280px);
gap: 1rem;
overflow-x: auto;
- padding-bottom: 0.5rem;
+ padding: 0.25rem 1rem 0.75rem;
+ width: min(100%, var(--max-width));
+ margin-inline: auto;
scroll-snap-type: x mandatory;
}
.diagram-card {
scroll-snap-align: start;
- border: 1px solid var(--line);
+ border: 1px solid var(--border);
+ border-radius: var(--radius-lg);
overflow: hidden;
- background: white;
- box-shadow: var(--shadow);
- transition: transform 0.3s var(--ease);
+ background: var(--surface);
+ box-shadow: var(--shadow-sm);
+ transition: var(--transition-base);
}
.diagram-card:hover {
- transform: translateY(-4px);
+ transform: translateY(-2px);
+ border-color: var(--primary-500);
+ box-shadow: var(--shadow-md);
}
.diagram-card img {
aspect-ratio: 16 / 10;
object-fit: contain;
object-position: center;
- background: #f7faf8;
+ background: var(--gray-50);
padding: 0.65rem;
}
.diagram-card figcaption {
padding: 0.7rem 0.85rem;
- font-size: 0.82rem;
- color: var(--ink-soft);
+ font-size: var(--text-sm);
+ color: var(--text-secondary);
+ border-top: 1px solid var(--border-light);
}
.site-footer {
- padding: 2rem clamp(1.25rem, 4vw, 3rem) 3rem;
- border-top: 1px solid var(--line);
- color: var(--ink-soft);
- font-size: 0.9rem;
+ padding: 2.5rem clamp(1rem, 3vw, 2rem) 2rem;
+ border-top: 1px solid var(--border);
+ background: var(--surface-elevated);
+ color: var(--text-secondary);
+ font-size: var(--text-sm);
+}
+
+.footer-inner {
+ width: min(100%, var(--max-width));
+ margin-inline: auto;
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: space-between;
+ align-items: flex-start;
}
-/* ——— Reader ——— */
-body.reader {
- background: #dfe7e2;
- overflow: hidden;
- height: 100vh;
-}
-
-.reader-shell {
- display: grid;
- grid-template-columns: var(--sidebar-w) 1fr;
- height: 100vh;
+.site-footer a:hover {
+ color: var(--primary-700);
}
+/* ——— Shared reader / sidebar chrome ——— */
.sidebar {
- background: rgba(243, 246, 244, 0.96);
- border-right: 1px solid var(--line);
- display: flex;
- flex-direction: column;
- min-height: 0;
-}
-
-.sidebar-top {
- padding: 1rem 1rem 0.75rem;
- border-bottom: 1px solid var(--line);
-}
-
-.sidebar-top .brand {
- margin-bottom: 0.75rem;
-}
-
-.search {
- width: 100%;
- border: 1px solid var(--line);
- background: white;
- border-radius: 10px;
- padding: 0.65rem 0.8rem;
- font: inherit;
- color: var(--ink);
-}
-
-.search:focus {
- outline: 2px solid var(--accent-glow);
- border-color: var(--accent);
-}
-
-.toc-scroll {
- overflow: auto;
- padding: 0.75rem 0.5rem 1.5rem;
- flex: 1;
-}
-
-.toc-group {
- margin-bottom: 0.85rem;
+ background: var(--surface);
+ border-right: 1px solid var(--border);
}
.toc-group-title {
- font-size: 0.7rem;
- letter-spacing: 0.14em;
+ font-size: var(--text-xs);
+ letter-spacing: 0.08em;
text-transform: uppercase;
- color: var(--accent);
+ color: var(--primary-700);
padding: 0.45rem 0.65rem;
font-weight: 700;
}
@@ -478,151 +622,221 @@ body.reader {
border: 0;
background: transparent;
font: inherit;
- color: var(--ink-soft);
- padding: 0.45rem 0.65rem;
- border-radius: 8px;
+ color: var(--text-secondary);
+ padding: 0.42rem 0.65rem;
+ border-radius: var(--radius-md);
cursor: pointer;
- font-size: 0.88rem;
+ font-size: var(--text-sm);
}
.toc-item:hover,
.toc-item.active {
- background: var(--accent-glow);
- color: var(--accent-deep);
+ background: var(--primary-50);
+ color: var(--primary-700);
}
.toc-item .num {
font-family: var(--font-mono);
font-size: 0.72rem;
margin-right: 0.4rem;
- opacity: 0.8;
+ opacity: 0.85;
}
-.reader-main {
- display: grid;
- grid-template-rows: auto 1fr auto;
- min-width: 0;
- min-height: 0;
+.icon-btn {
+ border: 1px solid var(--border);
+ background: var(--surface);
+ width: 2.2rem;
+ height: 2.2rem;
+ border-radius: var(--radius-md);
+ cursor: pointer;
+ font: inherit;
+ color: var(--text-primary);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.icon-btn:hover:not(:disabled) {
+ border-color: var(--primary-500);
+ background: var(--primary-50);
+}
+
+.menu-toggle {
+ display: none;
}
-.reader-toolbar {
+/* ——— Homepage product layout ——— */
+.header-inner {
+ width: min(100%, var(--max-width));
+ margin-inline: auto;
+ height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
- gap: 0.75rem;
- padding: 0.7rem 1rem;
- background: rgba(243, 246, 244, 0.9);
- border-bottom: 1px solid var(--line);
- backdrop-filter: blur(10px);
+ gap: 1rem;
}
-.reader-title {
- font-family: var(--font-display);
- font-size: 1rem;
- letter-spacing: -0.02em;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
+.home-page .site-header {
+ padding-inline: clamp(1rem, 3vw, 1.5rem);
}
-.toolbar-controls {
- display: flex;
- align-items: center;
- gap: 0.45rem;
+.hero-lead {
+ margin: 1rem auto 0;
+ max-width: 40rem;
+ font-size: var(--text-lg);
+ color: var(--text-secondary);
+ line-height: 1.55;
}
-.icon-btn {
- border: 1px solid var(--line);
- background: white;
- width: 2.2rem;
- height: 2.2rem;
- border-radius: 8px;
- cursor: pointer;
- font: inherit;
- color: var(--ink);
- display: inline-flex;
- align-items: center;
- justify-content: center;
+.section-head-left {
+ margin-left: 0;
+ margin-right: 0;
+ text-align: left;
+ padding-inline: 0;
+ width: min(42rem, 100%);
}
-.icon-btn:hover:not(:disabled) {
- border-color: var(--accent);
- background: var(--accent-glow);
+.feature-grid,
+.lab-grid,
+.guide-grid {
+ display: grid;
+ gap: 1rem;
}
-.icon-btn:disabled {
- opacity: 0.4;
- cursor: not-allowed;
+@media (min-width: 800px) {
+ .feature-grid,
+ .lab-grid {
+ grid-template-columns: repeat(3, 1fr);
+ }
+
+ .guide-grid {
+ grid-template-columns: repeat(3, 1fr);
+ }
}
-.page-indicator {
- font-family: var(--font-mono);
- font-size: 0.8rem;
- color: var(--ink-soft);
- min-width: 5.5rem;
- text-align: center;
+@media (min-width: 1100px) {
+ .guide-grid {
+ grid-template-columns: repeat(6, 1fr);
+ }
}
-.page-stage {
- overflow: auto;
- padding: 1.25rem;
+.feature-card,
+.lab-card,
+.guide-card {
display: flex;
- justify-content: center;
- align-items: flex-start;
+ flex-direction: column;
+ background: var(--surface);
+ border: 1px solid var(--border);
+ border-radius: var(--radius-lg);
+ padding: 1.35rem 1.25rem;
+ box-shadow: var(--shadow-sm);
+ transition: var(--transition-base);
+ color: inherit;
+ text-decoration: none;
+ min-height: 100%;
}
-.page-frame {
- width: min(860px, 100%);
- background: white;
- box-shadow: var(--shadow);
- border: 1px solid rgba(15, 28, 36, 0.08);
- overflow: hidden;
- animation: page-in 0.35s var(--ease);
+.feature-card:hover,
+.lab-card:hover,
+.guide-card:hover {
+ border-color: var(--primary-500);
+ box-shadow: var(--shadow-md);
+ transform: translateY(-2px);
}
-@keyframes page-in {
- from { opacity: 0; transform: translateY(8px); }
- to { opacity: 1; transform: translateY(0); }
+.feature-index {
+ font-family: var(--font-mono);
+ font-size: var(--text-xs);
+ font-weight: 700;
+ color: var(--primary-600);
+ margin-bottom: 0.85rem;
}
-.page-frame img {
- width: 100%;
- height: auto;
+.feature-card h3,
+.lab-card h3,
+.guide-card h3 {
+ margin: 0 0 0.45rem;
+ font-size: var(--text-lg);
+ font-weight: 650;
+ letter-spacing: -0.01em;
+ line-height: 1.3;
+ color: var(--text-primary);
}
-.reader-footer {
+.guide-card h3 {
+ font-size: var(--text-base);
+}
+
+.feature-card p,
+.lab-card p,
+.guide-card p {
+ margin: 0;
+ color: var(--text-secondary);
+ font-size: var(--text-sm);
+ line-height: 1.55;
+ flex: 1;
+}
+
+.feature-cta {
+ margin-top: 1.1rem;
+ font-size: var(--text-sm);
+ font-weight: 600;
+ color: var(--primary-700);
+}
+
+.lab-card-top {
display: flex;
- justify-content: space-between;
align-items: center;
+ justify-content: space-between;
gap: 0.75rem;
- padding: 0.65rem 1rem;
- border-top: 1px solid var(--line);
- background: rgba(243, 246, 244, 0.92);
- font-size: 0.85rem;
- color: var(--ink-soft);
+ margin-bottom: 0.75rem;
}
-.menu-toggle {
- display: none;
+.lab-card-top .part-label {
+ margin-bottom: 0;
}
-@media (max-width: 900px) {
- .reader-shell {
- grid-template-columns: 1fr;
- }
+.lab-count {
+ font-family: var(--font-mono);
+ font-size: var(--text-xs);
+ color: var(--text-muted);
+}
- .sidebar {
- position: fixed;
- inset: 0 auto 0 0;
- width: min(86vw, 320px);
- z-index: 80;
- transform: translateX(-105%);
- transition: transform 0.3s var(--ease);
- box-shadow: var(--shadow);
- }
+.lab-card.compact {
+ padding: 1.15rem 1.1rem;
+}
+
+.guide-card {
+ padding: 1.1rem 1rem;
+}
- body.sidebar-open .sidebar {
- transform: translateX(0);
+.home-page .toc-grid {
+ width: 100%;
+}
+
+.home-page .diagram-strip {
+ width: min(100% - 2rem, var(--max-width));
+}
+
+.home-page .ecosystem {
+ width: 100%;
+ justify-content: flex-start;
+ margin: 0;
+}
+
+.footer-links {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.85rem;
+}
+
+.footer-links a {
+ color: var(--text-secondary);
+}
+
+@media (max-width: 900px) {
+ .nav-links .hide-sm {
+ display: none;
}
.menu-toggle {
@@ -633,15 +847,11 @@ body.reader {
display: none;
position: fixed;
inset: 0;
- background: rgba(15, 28, 36, 0.35);
+ background: rgba(24, 24, 27, 0.35);
z-index: 70;
}
body.sidebar-open .sidebar-backdrop {
display: block;
}
-
- .nav-links .hide-sm {
- display: none;
- }
}
diff --git a/index.html b/index.html
index a743cf2..d84e068 100644
--- a/index.html
+++ b/index.html
@@ -3,160 +3,230 @@
- Interview Prep — Competitive Programming, System Design & AI
-
-
-
+ Interview Prep — DevNinja
+
+
+
-
-
-
-
+
-
+
Skip to content
-
+
-
Coding · System design · AI · interview-ready
+
DevNinja · Interview preparation
Interview Prep
-
- Three parts in one book — plus Interview Labs rewritten for how interviewers actually score you:
- why they ask, level bars, expected arcs, follow-ups, mistakes, and production examples.
+
+ Prepare for coding, system design, and AI interviews the way hiring loops actually score you —
+ expected answers, level bars, follow-ups, and production-ready diagrams.
-
-
-
One book. Three tracks.
-
Real HTML chapters — selectable text, syntax-styled code, and diagrams only where a picture helps.
-
-
-
- Part one
- Competitive Programming
- Arrays to DP, graphs, and bit tricks — patterns that unlock most coding interview problems.
-
-
- Part two
- System Design
- Building blocks plus walkthroughs for URL shorteners, chat, feeds, storage, video, and ride hailing.
-
-
- Part three
- AI Engineering
- A deep, story-driven path: how LLMs work, prompting, RAG, memory, agents, MCP, skills, and designing a full assistant.
-
+
+
+
+
Start here
+
Three paths. Pick the one that matches your next interview.
+
+
+
+ 01
+ Learn the scoring lens
+ Why interviewers ask, what they evaluate, and the answer structure to hit every time.
+ Open playbook →
+
+
+ 02
+ Practice Interview Labs
+ 55 FAANG-frequency prompts across coding, system design, and AI with deep solutions.
+ Browse labs →
+
+
+ 03
+ Target a company
+ Google, Amazon, Meta, Microsoft, Netflix, Uber, and AI platform interview patterns.
+ Company guides →
+
+
-
-
-
Interview Labs
-
55 FAANG-frequency prompts with interviewer intent, Junior→Principal expectations, and production examples.
-
-
-
- Coding
-
- Why asked, level bars, step-by-step solutions, follow-ups, common mistakes, and real-world uses.
-
-
- System design
-
- Whiteboard tracks with diagrams, trade-offs, and company-scale failure modes.
-
-
- AI
-
- RAG, agents, serving, eval, and security — scored the way AI hiring loops score.
-
+
+
+
+
Interview Labs
+
Expandable questions with interviewer intent, Junior→Principal expectations, and production examples.
+
+
-
-
Guides & roadmaps
-
Role paths, comparisons, company prep, and behavioral — structured for interviews, not docs.
+
+
+
Guides & roadmaps
+
Structured preparation — comparisons, behavioral, revision, and role-based paths.
+
+
-
-
- Structure
-
- The universal answer structure every lab card follows.
-
-
- Paths
-
- Backend, AI, Data, DevOps, and Staff/Principal roadmaps with prerequisites.
-
-
- Revision
-
- Flashcards and one-pagers for the night before.
-
-
- Trade-offs
-
- Kafka vs RabbitMQ, Redis vs Memcached, REST vs GraphQL, SQL vs NoSQL.
-
-
- Companies
-
- Google, Amazon, Meta, Microsoft, Netflix, Uber, AI labs, enterprise.
-
-
- Behavioral
-
- STAR stories, Leadership Principles, resume deep-dives, mock prompts.
-
+
+
+
+
+
+
Knowledge tracks
+
Deep topic pages with code, diagrams, and interview drills.
+
+
-
-
-
Contents
-
Jump into any chapter. Each one is a normal web page you can search, copy, and skim.
+
+
+
+
Browse all topics
+
Every guide and chapter — searchable HTML pages, not PDF screenshots.
+
+
-
-
-
-
Diagrams from the book
-
Architecture sketches redrawn as clean SVGs for each topic — not photographed PDF pages.
+
+
+
+
Architecture diagrams
+
Whiteboard-ready figures for request flows, components, and algorithms.
+
+
+
+
+
+
More from DevNinja
+
Interview Prep is part of the DevNinja engineering ecosystem.
+
+
+
+