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 @@
- Interview Prep Book + Interview Prep DevNinja
Home
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 + + + - - - - + - +
-
+
-

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.

-
+
+
-
-
-

Interview Labs

-

55 FAANG-frequency prompts with interviewer intent, Junior→Principal expectations, and production examples.

-
-
- - - +
+
-
-

Guides & roadmaps

-

Role paths, comparisons, company prep, and behavioral — structured for interviews, not docs.

+ -
-
-
Structure
-

Interview playbook

-

The universal answer structure every lab card follows.

-
-
-
Paths
-

Learning paths

-

Backend, AI, Data, DevOps, and Staff/Principal roadmaps with prerequisites.

-
-
-
Revision
-

Cheat sheets

-

Flashcards and one-pagers for the night before.

-
-
-
Trade-offs
-

Comparisons

-

Kafka vs RabbitMQ, Redis vs Memcached, REST vs GraphQL, SQL vs NoSQL.

-
-
-
Companies
-

Company guides

-

Google, Amazon, Meta, Microsoft, Netflix, Uber, AI labs, enterprise.

-
-
-
Behavioral
-

Behavioral & HR

-

STAR stories, Leadership Principles, resume deep-dives, mock prompts.

-
+
+ +
+
-
-
-

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.

+
+ +
+
diff --git a/js/home.js b/js/home.js index ad8fa48..86de7f2 100644 --- a/js/home.js +++ b/js/home.js @@ -40,12 +40,12 @@ const strip = document.getElementById("diagram-strip"); const featured = [ - { file: "hash-map.svg", href: "chapters/03-arrays.html", label: "Hash map" }, { file: "load-balancer.svg", href: "chapters/21-scaling.html", label: "Load balancer" }, - { file: "url-shortener.svg", href: "chapters/28-url-shortener.html", label: "URL shortener" }, - { file: "rag.svg", href: "chapters/37-rag.html", label: "RAG" }, - { file: "agent-loop.svg", href: "chapters/39-agents.html", label: "Agent loop" }, - { file: "mcp.svg", href: "chapters/40-mcp.html", label: "MCP" }, + { file: "url-shortener-detailed.svg", href: "chapters/28-url-shortener.html", label: "URL shortener" }, + { file: "rag-detailed.svg", href: "chapters/37-rag.html", label: "RAG pipeline" }, + { file: "kafka-partitions.svg", href: "chapters/26-queues.html", label: "Kafka partitions" }, + { file: "uber-matching.svg", href: "chapters/34-uber.html", label: "Uber matching" }, + { file: "feed-hybrid-fanout.svg", href: "chapters/30-instagram.html", label: "Feed fanout" }, ]; strip.innerHTML = featured .map( diff --git a/js/nav.js b/js/nav.js index 0abea00..d5568e3 100644 --- a/js/nav.js +++ b/js/nav.js @@ -16,7 +16,7 @@ ]; sidebar.innerHTML = ` - Interview Prep Book + Interview Prep DevNinja ${groups .map((g) => { const items = chapters.filter((c) => c.part === g.key); diff --git a/scripts/assemble_ai_chapters.py b/scripts/assemble_ai_chapters.py index 97ee909..e4f7e9d 100644 --- a/scripts/assemble_ai_chapters.py +++ b/scripts/assemble_ai_chapters.py @@ -34,10 +34,7 @@ def wrap(slug: str, num: str | None, title: str, body: str) -> str: {html.escape(heading)} — Interview Prep - - - - + @@ -49,7 +46,7 @@ def wrap(slug: str, num: str | None, title: str, body: str) -> str:
diff --git a/scripts/build_chapters.py b/scripts/build_chapters.py index 2df40c8..73cbeba 100644 --- a/scripts/build_chapters.py +++ b/scripts/build_chapters.py @@ -435,10 +435,7 @@ def main() -> None: {html.escape(heading)} — Interview Prep - - - - + @@ -450,7 +447,7 @@ def main() -> None:
diff --git a/scripts/interview_helpers.py b/scripts/interview_helpers.py index 99a3e08..3f40b87 100644 --- a/scripts/interview_helpers.py +++ b/scripts/interview_helpers.py @@ -92,9 +92,6 @@ def drill_section(title: str, intro: str, items: list[str], lab_href: str | None {heading} — Interview Prep - - - @@ -107,7 +104,7 @@ def drill_section(title: str, intro: str, items: list[str], lab_href: str | None