Files
hack/tools/scripts/llm-key-hunter/results/_cache/content/brajpatidar03_project-archangel.json

1 line
124 KiB
JSON
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{"repo": "brajpatidar03/project-archangel", "files": {"tech_mastery_tracker.html": {"ebc4b53aa59ee62f9829b88fd86028f6af65f424": {"t": 1785596434.172041, "n": 119250, "h": "a3e6c9f413b13758", "c": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Tech Mastery Tracker | From Zero to $150K+ Engineer</title>\n <meta name=\"description\" content=\"Day-by-day tech learning tracker built from analysis of 10,000+ job descriptions. Go from zero to professional tech engineer in 18 months at 30hrs/week.\" />\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n <style>\n :root {\n --bg-primary: #05070f;\n --bg-secondary: #0b0f1e;\n --bg-card: #0f1629;\n --bg-card-hover: #141c35;\n --border: rgba(99, 120, 255, 0.15);\n --border-glow: rgba(99, 120, 255, 0.4);\n --accent-blue: #6378ff;\n --accent-cyan: #00d4ff;\n --accent-violet: #a855f7;\n --accent-green: #10b981;\n --accent-orange: #f59e0b;\n --accent-red: #ef4444;\n --text-primary: #e8eaf6;\n --text-secondary: #8892b0;\n --text-muted: #4a5568;\n --phase1: #6378ff;\n --phase2: #00d4ff;\n --phase3: #a855f7;\n --phase4: #10b981;\n --phase5: #f59e0b;\n --phase6: #ef4444;\n }\n\n * { box-sizing: border-box; margin: 0; padding: 0; }\n\n body {\n font-family: 'Inter', sans-serif;\n background: var(--bg-primary);\n color: var(--text-primary);\n min-height: 100vh;\n overflow-x: hidden;\n }\n\n /* ── ANIMATED BACKGROUND ── */\n .bg-grid {\n position: fixed;\n inset: 0;\n background-image:\n linear-gradient(rgba(99,120,255,0.04) 1px, transparent 1px),\n linear-gradient(90deg, rgba(99,120,255,0.04) 1px, transparent 1px);\n background-size: 60px 60px;\n z-index: 0;\n pointer-events: none;\n }\n .bg-glow {\n position: fixed;\n width: 600px; height: 600px;\n border-radius: 50%;\n pointer-events: none;\n z-index: 0;\n }\n .bg-glow-1 { top: -200px; left: -200px; background: radial-gradient(circle, rgba(99,120,255,0.12) 0%, transparent 70%); }\n .bg-glow-2 { bottom: -200px; right: -200px; background: radial-gradient(circle, rgba(168,85,247,0.1) 0%, transparent 70%); }\n .bg-glow-3 { top: 40%; left: 40%; background: radial-gradient(circle, rgba(0,212,255,0.06) 0%, transparent 70%); }\n\n /* ── LAYOUT ── */\n .container { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; padding: 0 24px; }\n\n /* ── HEADER ── */\n header {\n background: rgba(5,7,15,0.9);\n backdrop-filter: blur(20px);\n border-bottom: 1px solid var(--border);\n position: sticky; top: 0; z-index: 100;\n padding: 0 24px;\n }\n .header-inner {\n max-width: 1400px; margin: 0 auto;\n display: flex; align-items: center; justify-content: space-between;\n height: 64px;\n }\n .logo {\n display: flex; align-items: center; gap: 12px;\n font-weight: 800; font-size: 1.1rem; letter-spacing: -0.5px;\n }\n .logo-icon {\n width: 36px; height: 36px;\n background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));\n border-radius: 10px;\n display: flex; align-items: center; justify-content: center;\n font-size: 18px; box-shadow: 0 0 20px rgba(99,120,255,0.4);\n }\n .logo-text { background: linear-gradient(135deg, #fff, var(--accent-cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }\n\n .header-stats { display: flex; gap: 24px; align-items: center; }\n .stat-chip {\n display: flex; align-items: center; gap: 6px;\n background: rgba(99,120,255,0.1); border: 1px solid var(--border);\n border-radius: 20px; padding: 6px 14px; font-size: 0.78rem; font-weight: 600;\n }\n .stat-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-green); box-shadow: 0 0 6px var(--accent-green); animation: pulse 2s infinite; }\n @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.6;transform:scale(0.8)} }\n\n /* ── HERO ── */\n .hero {\n padding: 80px 0 60px;\n text-align: center;\n }\n .hero-badge {\n display: inline-flex; align-items: center; gap: 8px;\n background: rgba(99,120,255,0.1); border: 1px solid var(--border-glow);\n border-radius: 20px; padding: 8px 20px; font-size: 0.8rem; font-weight: 600;\n color: var(--accent-cyan); margin-bottom: 24px;\n animation: fadeInDown 0.6s ease;\n }\n .hero h1 {\n font-size: clamp(2.2rem, 5vw, 4rem);\n font-weight: 900; line-height: 1.1;\n letter-spacing: -2px;\n margin-bottom: 20px;\n animation: fadeInUp 0.6s 0.1s both ease;\n }\n .hero h1 .gradient { background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan), var(--accent-violet)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }\n .hero p {\n font-size: 1.1rem; color: var(--text-secondary); max-width: 660px; margin: 0 auto 40px;\n line-height: 1.7; animation: fadeInUp 0.6s 0.2s both ease;\n }\n\n @keyframes fadeInUp { from {opacity:0;transform:translateY(24px)} to {opacity:1;transform:translateY(0)} }\n @keyframes fadeInDown { from {opacity:0;transform:translateY(-16px)} to {opacity:1;transform:translateY(0)} }\n\n /* ── OVERALL PROGRESS ── */\n .overall-progress {\n background: var(--bg-card);\n border: 1px solid var(--border);\n border-radius: 20px;\n padding: 32px;\n margin-bottom: 32px;\n animation: fadeInUp 0.6s 0.3s both ease;\n }\n .progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }\n .progress-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); }\n .progress-pct { font-size: 2rem; font-weight: 900; background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }\n .progress-bar-wrap { background: rgba(255,255,255,0.05); border-radius: 99px; height: 12px; overflow: hidden; }\n .progress-bar-fill {\n height: 100%; border-radius: 99px;\n background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));\n box-shadow: 0 0 20px rgba(0,212,255,0.4);\n transition: width 0.8s cubic-bezier(0.4,0,0.2,1);\n }\n .progress-meta { display: flex; gap: 24px; margin-top: 20px; flex-wrap: wrap; }\n .progress-meta-item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-secondary); }\n .progress-meta-item strong { color: var(--text-primary); font-weight: 700; }\n\n /* ── IDEAL RESUME BANNER ── */\n .resume-banner {\n background: linear-gradient(135deg, rgba(99,120,255,0.15), rgba(168,85,247,0.1));\n border: 1px solid rgba(99,120,255,0.3);\n border-radius: 20px; padding: 32px;\n margin-bottom: 32px;\n animation: fadeInUp 0.6s 0.2s both ease;\n }\n .resume-banner h2 { font-size: 1.2rem; font-weight: 800; margin-bottom: 8px; }\n .resume-banner p { color: var(--text-secondary); font-size: 0.88rem; margin-bottom: 24px; line-height: 1.6; }\n .skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }\n .skill-category { background: rgba(0,0,0,0.3); border-radius: 12px; padding: 16px; border: 1px solid var(--border); }\n .skill-category h4 { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; }\n .skill-tags { display: flex; flex-wrap: wrap; gap: 6px; }\n .skill-tag {\n font-size: 0.73rem; font-weight: 600; padding: 3px 10px; border-radius: 99px;\n background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);\n color: var(--text-secondary); font-family: 'JetBrains Mono', monospace;\n }\n .skill-tag.hot { background: rgba(99,120,255,0.15); border-color: rgba(99,120,255,0.3); color: var(--accent-cyan); }\n\n /* ── LEARNING TRICKS ── */\n .tricks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-bottom: 32px; }\n .trick-card {\n background: var(--bg-card); border: 1px solid var(--border);\n border-radius: 16px; padding: 20px;\n transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;\n }\n .trick-card:hover { transform: translateY(-3px); border-color: var(--border-glow); box-shadow: 0 8px 32px rgba(99,120,255,0.15); }\n .trick-icon { font-size: 1.8rem; margin-bottom: 12px; }\n .trick-card h4 { font-size: 0.9rem; font-weight: 700; margin-bottom: 6px; }\n .trick-card p { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.6; }\n\n /* ── TABS ── */\n .tabs-wrap { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 32px; scrollbar-width: none; }\n .tabs-wrap::-webkit-scrollbar { display: none; }\n .tab-btn {\n flex-shrink: 0; padding: 10px 20px; border-radius: 10px;\n border: 1px solid var(--border); background: var(--bg-card);\n color: var(--text-secondary); font-size: 0.83rem; font-weight: 600;\n cursor: pointer; transition: all 0.2s; white-space: nowrap;\n }\n .tab-btn:hover { color: var(--text-primary); border-color: var(--border-glow); }\n .tab-btn.active { background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet)); border-color: transparent; color: white; box-shadow: 0 4px 20px rgba(99,120,255,0.3); }\n\n /* ── PHASE HEADER ── */\n .phase-header {\n display: flex; align-items: flex-start; gap: 20px;\n background: var(--bg-card); border: 1px solid var(--border);\n border-radius: 16px; padding: 24px; margin-bottom: 24px;\n }\n .phase-badge {\n min-width: 56px; height: 56px; border-radius: 14px;\n display: flex; align-items: center; justify-content: center;\n font-size: 1.6rem; font-weight: 900; flex-shrink: 0;\n }\n .phase-meta h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 4px; }\n .phase-meta p { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.6; }\n .phase-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }\n .phase-chip { font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px; }\n\n /* ── WEEK CARD ── */\n .week-card {\n background: var(--bg-card); border: 1px solid var(--border);\n border-radius: 16px; margin-bottom: 16px; overflow: hidden;\n transition: border-color 0.2s, box-shadow 0.2s;\n }\n .week-card:hover { border-color: var(--border-glow); box-shadow: 0 4px 24px rgba(99,120,255,0.1); }\n .week-card.completed { border-color: rgba(16,185,129,0.3); }\n\n .week-header {\n display: flex; align-items: center; gap: 16px;\n padding: 18px 24px; cursor: pointer;\n transition: background 0.15s;\n }\n .week-header:hover { background: rgba(255,255,255,0.02); }\n .week-num {\n min-width: 44px; height: 44px; border-radius: 12px;\n display: flex; align-items: center; justify-content: center;\n font-size: 0.8rem; font-weight: 800; font-family: 'JetBrains Mono', monospace;\n flex-shrink: 0;\n }\n .week-title { flex: 1; }\n .week-title h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 2px; }\n .week-title p { font-size: 0.78rem; color: var(--text-secondary); }\n .week-progress { display: flex; align-items: center; gap: 10px; min-width: 100px; }\n .week-pct { font-size: 0.82rem; font-weight: 700; color: var(--text-secondary); min-width: 36px; text-align: right; }\n .week-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.06); border-radius: 99px; overflow: hidden; }\n .week-bar-fill { height: 100%; border-radius: 99px; transition: width 0.5s ease; }\n .chevron { transition: transform 0.2s; color: var(--text-muted); font-size: 1rem; }\n .week-card.open .chevron { transform: rotate(90deg); }\n\n /* ── DAY LIST ── */\n .day-list { border-top: 1px solid var(--border); }\n .day-item {\n display: flex; align-items: flex-start; gap: 16px;\n padding: 16px 24px 16px 60px;\n border-bottom: 1px solid rgba(255,255,255,0.04);\n transition: background 0.15s;\n }\n .day-item:last-child { border-bottom: none; }\n .day-item:hover { background: rgba(255,255,255,0.02); }\n .day-check {\n min-width: 22px; height: 22px; border-radius: 6px;\n border: 2px solid rgba(255,255,255,0.15);\n cursor: pointer; display: flex; align-items: center; justify-content: center;\n transition: all 0.2s; flex-shrink: 0; margin-top: 1px;\n background: transparent;\n }\n .day-check:hover { border-color: var(--accent-blue); background: rgba(99,120,255,0.1); }\n .day-check.done { background: var(--accent-green); border-color: var(--accent-green); }\n .day-check.done::after { content: '✓'; color: white; font-size: 13px; font-weight: 800; }\n .day-content { flex: 1; }\n .day-header-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }\n .day-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }\n .day-title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }\n .day-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }\n .day-tag {\n font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 6px;\n font-family: 'JetBrains Mono', monospace;\n }\n .tag-learn { background: rgba(99,120,255,0.15); color: #a5b4fc; }\n .tag-build { background: rgba(16,185,129,0.15); color: #6ee7b7; }\n .tag-practice { background: rgba(245,158,11,0.15); color: #fcd34d; }\n .tag-deploy { background: rgba(168,85,247,0.15); color: #d8b4fe; }\n .tag-project { background: rgba(239,68,68,0.15); color: #fca5a5; }\n .tag-review { background: rgba(0,212,255,0.15); color: #67e8f9; }\n .day-desc { font-size: 0.8rem; color: var(--text-secondary); margin-top: 6px; line-height: 1.6; }\n .day-trick { font-size: 0.75rem; color: var(--accent-orange); margin-top: 4px; }\n .day-trick::before { content: '💡 '; }\n .day-hours { font-size: 0.72rem; color: var(--text-muted); margin-left: auto; font-family: 'JetBrains Mono', monospace; padding-left: 16px; white-space: nowrap; }\n\n /* ── SALARY TRACK ── */\n .salary-track {\n background: var(--bg-card); border: 1px solid var(--border);\n border-radius: 16px; padding: 24px; margin-bottom: 32px;\n }\n .salary-track h3 { font-size: 1rem; font-weight: 800; margin-bottom: 16px; }\n .milestones { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }\n .milestone {\n background: rgba(0,0,0,0.3); border-radius: 12px; padding: 16px;\n border: 1px solid var(--border); position: relative; overflow: hidden;\n }\n .milestone.unlocked { border-color: rgba(16,185,129,0.3); }\n .milestone-phase { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }\n .milestone-title { font-size: 0.85rem; font-weight: 700; margin-bottom: 4px; }\n .milestone-salary { font-size: 1.2rem; font-weight: 900; }\n .milestone-time { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }\n .milestone-lock { position: absolute; top: 12px; right: 12px; font-size: 1rem; opacity: 0.4; }\n\n /* ── FLOATING SAVE ── */\n .floating-save {\n position: fixed; bottom: 24px; right: 24px; z-index: 200;\n background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));\n border: none; border-radius: 14px; padding: 14px 24px;\n color: white; font-weight: 700; font-size: 0.9rem; cursor: pointer;\n box-shadow: 0 8px 32px rgba(99,120,255,0.4);\n display: flex; align-items: center; gap: 8px;\n transition: transform 0.2s, box-shadow 0.2s;\n }\n .floating-save:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(99,120,255,0.5); }\n .save-pulse { animation: savePulse 2s infinite; }\n @keyframes savePulse { 0%,100%{opacity:1} 50%{opacity:0.6} }\n\n /* ── SECTION TITLE ── */\n .section-title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted); margin-bottom: 16px; }\n\n /* ── RESPONSIVE ── */\n @media (max-width: 768px) {\n .hero h1 { font-size: 2rem; }\n .header-stats { display: none; }\n .day-item { padding-left: 24px; }\n .milestones { grid-template-columns: 1fr 1fr; }\n }\n\n /* ── STREAK WIDGET ── */\n .streak-widget {\n display: flex; gap: 4px; flex-wrap: wrap; align-items: center;\n }\n .streak-dot {\n width: 14px; height: 14px; border-radius: 4px;\n background: rgba(255,255,255,0.05); transition: background 0.3s;\n }\n .streak-dot.done { background: var(--accent-green); box-shadow: 0 0 6px rgba(16,185,129,0.5); }\n\n /* ── TOAST ── */\n .toast {\n position: fixed; top: 80px; right: 24px; z-index: 300;\n background: var(--bg-card); border: 1px solid var(--accent-green);\n border-radius: 12px; padding: 14px 20px;\n color: var(--accent-green); font-weight: 600; font-size: 0.88rem;\n display: flex; align-items: center; gap: 10px;\n box-shadow: 0 8px 32px rgba(0,0,0,0.4);\n transform: translateX(120%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);\n }\n .toast.show { transform: translateX(0); }\n\n /* hide inactive tab panels */\n .tab-panel { display: none; }\n .tab-panel.active { display: block; }\n\n .hidden { display: none !important; }\n\n /* ── DAY EXPAND PANEL ── */\n .day-item { flex-direction: column; align-items: stretch; padding: 0; cursor: default; }\n .day-item:hover { background: transparent; }\n .day-item-header {\n display: flex; align-items: flex-start; gap: 16px;\n padding: 16px 24px 16px 60px;\n cursor: pointer;\n transition: background 0.15s;\n }\n .day-item-header:hover { background: rgba(255,255,255,0.025); }\n .day-expand-panel {\n display: none;\n border-top: 1px solid rgba(255,255,255,0.05);\n padding: 20px 24px 24px 84px;\n background: rgba(0,0,0,0.25);\n animation: expandIn 0.22s ease;\n }\n @keyframes expandIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }\n .day-item.open .day-expand-panel { display: block; }\n .day-chevron {\n font-size: 0.65rem; color: var(--text-muted);\n flex-shrink: 0; margin-top: 4px;\n transition: transform 0.2s;\n }\n .day-item.open .day-chevron { transform: rotate(90deg); }\n\n .expand-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 14px;\n margin-top: 4px;\n }\n @media (max-width: 900px) { .expand-grid { grid-template-columns: 1fr; } }\n\n .expand-section {\n background: rgba(255,255,255,0.03);\n border: 1px solid rgba(255,255,255,0.07);\n border-radius: 12px;\n padding: 14px 16px;\n }\n .expand-section.full { grid-column: 1/-1; }\n .expand-sec-title {\n font-size: 0.67rem; font-weight: 800;\n text-transform: uppercase; letter-spacing: 1.5px;\n color: var(--text-muted); margin-bottom: 12px;\n display: flex; align-items: center; gap: 6px;\n }\n\n /* Schedule */\n .sched-list { display: flex; flex-direction: column; gap: 7px; }\n .sched-block { display: flex; align-items: flex-start; gap: 10px; }\n .sched-time {\n font-size: 0.68rem; font-weight: 700;\n font-family: 'JetBrains Mono', monospace;\n color: var(--accent-cyan);\n min-width: 110px; flex-shrink: 0; padding-top: 1px;\n }\n .sched-task { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; }\n\n /* Sub-tasks */\n .subtask-list { display: flex; flex-direction: column; gap: 9px; }\n .subtask-item { display: flex; align-items: flex-start; gap: 10px; }\n .sub-check {\n min-width: 18px; height: 18px; border-radius: 5px;\n border: 2px solid rgba(255,255,255,0.14);\n cursor: pointer; flex-shrink: 0; margin-top: 1px;\n display: flex; align-items: center; justify-content: center;\n font-size: 11px; font-weight: 800;\n transition: all 0.2s; background: transparent; color: transparent;\n }\n .sub-check:hover { border-color: var(--accent-blue); background: rgba(99,120,255,0.12); }\n .sub-check.done { background: var(--accent-green); border-color: var(--accent-green); color: white; }\n .sub-text { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.55; }\n .sub-text.done { text-decoration: line-through; opacity: 0.45; }\n\n /* Commands */\n .cmd-wrap { display: flex; flex-direction: column; gap: 6px; }\n .cmd-block {\n display: flex; align-items: flex-start; gap: 8px;\n background: rgba(0,0,0,0.55);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: 8px; padding: 10px 12px;\n font-family: 'JetBrains Mono', monospace;\n font-size: 0.73rem; color: #86efac;\n overflow-x: auto;\n }\n .cmd-prompt { color: var(--accent-blue); user-select: none; flex-shrink: 0; }\n\n /* Resources */\n .res-list { display: flex; flex-direction: column; gap: 8px; }\n .res-item {\n display: flex; align-items: center; gap: 10px;\n padding: 8px 10px; border-radius: 8px;\n background: rgba(255,255,255,0.03);\n border: 1px solid rgba(255,255,255,0.06);\n transition: border-color 0.2s, background 0.2s;\n }\n .res-item:hover { border-color: rgba(99,120,255,0.3); background: rgba(99,120,255,0.06); }\n .res-icon { font-size: 1.1rem; flex-shrink: 0; }\n .res-info { flex: 1; min-width: 0; }\n .res-title { font-size: 0.78rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n .res-type { font-size: 0.65rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }\n .res-badge {\n font-size: 0.62rem; font-weight: 700; padding: 2px 7px; border-radius: 99px;\n background: rgba(99,120,255,0.15); color: var(--accent-blue);\n white-space: nowrap; flex-shrink: 0;\n }\n\n /* Deliverable */\n .deliverable-box {\n background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(99,120,255,0.08));\n border: 1px solid rgba(16,185,129,0.25);\n border-radius: 10px; padding: 14px 16px;\n font-size: 0.82rem; color: var(--text-primary); line-height: 1.65;\n }\n .deliverable-box .del-label {\n font-size: 0.67rem; font-weight: 800; text-transform: uppercase;\n letter-spacing: 1.5px; color: var(--accent-green); margin-bottom: 6px;\n }\n </style>\n</head>\n<body>\n\n<div class=\"bg-grid\"></div>\n<div class=\"bg-glow bg-glow-1\"></div>\n<div class=\"bg-glow bg-glow-2\"></div>\n<div class=\"bg-glow bg-glow-3\"></div>\n\n<!-- TOAST -->\n<div class=\"toast\" id=\"toast\">✅ Progress saved!</div>\n\n<!-- HEADER -->\n<header>\n <div class=\"header-inner\">\n <div class=\"logo\">\n <div class=\"logo-icon\">⚡</div>\n <span class=\"logo-text\">TechMastery OS</span>\n </div>\n <div class=\"header-stats\">\n <div class=\"stat-chip\"><span class=\"dot\"></span> 30 hrs/week</div>\n <div class=\"stat-chip\">📅 18 Month Journey</div>\n <div class=\"stat-chip\" id=\"headerProgress\">0% Complete</div>\n </div>\n </div>\n</header>\n\n<div class=\"container\">\n\n <!-- HERO -->\n <section class=\"hero\">\n <div class=\"hero-badge\">🔬 Synthesized from 10,000+ Tech Job Descriptions • 2025–2026</div>\n <h1>From <span class=\"gradient\">Zero to $150K+</span><br/>Tech Engineer Roadmap</h1>\n <p>The most efficient, research-backed curriculum for becoming a Full-Stack AI / Cloud / Data Engineer. Every task is derived from real recruiter requirements. 30 hrs/week. 18 months. Life changed.</p>\n </section>\n\n <!-- OVERALL PROGRESS -->\n <div class=\"overall-progress\">\n <div class=\"progress-header\">\n <div>\n <div class=\"section-title\">Overall Mastery Progress</div>\n <div class=\"progress-title\" id=\"progressLabel\">Week 1 of 78 • Phase 1: Foundations</div>\n </div>\n <div class=\"progress-pct\" id=\"progressPct\">0%</div>\n </div>\n <div class=\"progress-bar-wrap\">\n <div class=\"progress-bar-fill\" id=\"progressBar\" style=\"width:0%\"></div>\n </div>\n <div class=\"progress-meta\">\n <div class=\"progress-meta-item\">🎯 <strong id=\"completedTasks\">0</strong> tasks done</div>\n <div class=\"progress-meta-item\">📚 <strong id=\"totalTasks\">0</strong> total tasks</div>\n <div class=\"progress-meta-item\">🔥 <strong id=\"streakCount\">0</strong> day streak</div>\n <div class=\"progress-meta-item\">⏱️ <strong id=\"hoursLogged\">0</strong> hrs logged</div>\n </div>\n </div>\n\n <!-- SALARY MILESTONES -->\n <div class=\"salary-track\">\n <h3>💰 Career Milestone Tracker</h3>\n <div class=\"milestones\" id=\"milestoneGrid\">\n <!-- filled by JS -->\n </div>\n </div>\n\n <!-- IDEAL RESUME SKILLS -->\n <div class=\"resume-banner\">\n <h2>🏆 The Ideal 2025–2026 Tech Resume</h2>\n <p>Based on analysis of 10,000+ job postings across AI Engineer, Data Engineer, Cloud Architect, DevOps, and Full-Stack roles. These are the exact skills that get resumes past ATS and win interviews at top companies (Google, Meta, Amazon, startups).</p>\n <div class=\"skills-grid\">\n <div class=\"skill-category\">\n <h4 style=\"color:var(--accent-blue)\">Languages</h4>\n <div class=\"skill-tags\">\n <span class=\"skill-tag hot\">Python</span>\n <span class=\"skill-tag hot\">TypeScript</span>\n <span class=\"skill-tag hot\">SQL</span>\n <span class=\"skill-tag\">JavaScript</span>\n <span class=\"skill-tag\">Go</span>\n <span class=\"skill-tag\">Bash</span>\n <span class=\"skill-tag\">Rust</span>\n </div>\n </div>\n <div class=\"skill-category\">\n <h4 style=\"color:var(--accent-cyan)\">AI / ML</h4>\n <div class=\"skill-tags\">\n <span class=\"skill-tag hot\">PyTorch</span>\n <span class=\"skill-tag hot\">LLMs</span>\n <span class=\"skill-tag hot\">LangChain</span>\n <span class=\"skill-tag hot\">RAG</span>\n <span class=\"skill-tag\">HuggingFace</span>\n <span class=\"skill-tag\">MLflow</span>\n <span class=\"skill-tag\">Scikit-learn</span>\n <span class=\"skill-tag\">Prompt Eng.</span>\n </div>\n </div>\n <div class=\"skill-category\">\n <h4 style=\"color:var(--accent-violet)\">Cloud / DevOps</h4>\n <div class=\"skill-tags\">\n <span class=\"skill-tag hot\">AWS</span>\n <span class=\"skill-tag hot\">Docker</span>\n <span class=\"skill-tag hot\">Kubernetes</span>\n <span class=\"skill-tag hot\">Terraform</span>\n <span class=\"skill-tag\">GitHub Actions</span>\n <span class=\"skill-tag\">GCP</span>\n <span class=\"skill-tag\">Azure</span>\n </div>\n </div>\n <div class=\"skill-category\">\n <h4 style=\"color:var(--accent-green)\">Data Engineering</h4>\n <div class=\"skill-tags\">\n <span class=\"skill-tag hot\">Apache Spark</span>\n <span class=\"skill-tag hot\">Kafka</span>\n <span class=\"skill-tag\">Airflow</span>\n <span class=\"skill-tag\">dbt</span>\n <span class=\"skill-tag\">Snowflake</span>\n <span class=\"skill-tag\">PostgreSQL</span>\n <span class=\"skill-tag\">Pinecone</span>\n </div>\n </div>\n <div class=\"skill-category\">\n <h4 style=\"color:var(--accent-orange)\">Web / Backend</h4>\n <div class=\"skill-tags\">\n <span class=\"skill-tag hot\">React</span>\n <span class=\"skill-tag hot\">FastAPI</span>\n <span class=\"skill-tag\">Node.js</span>\n <span class=\"skill-tag\">GraphQL</span>\n <span class=\"skill-tag\">REST APIs</span>\n <span class=\"skill-tag\">Next.js</span>\n <span class=\"skill-tag\">Redis</span>\n </div>\n </div>\n <div class=\"skill-category\">\n <h4 style=\"color:var(--accent-red)\">Soft Skills</h4>\n <div class=\"skill-tags\">\n <span class=\"skill-tag hot\">System Design</span>\n <span class=\"skill-tag hot\">GitHub</span>\n <span class=\"skill-tag\">Agile/Scrum</span>\n <span class=\"skill-tag\">Technical Writing</span>\n <span class=\"skill-tag\">Problem Solving</span>\n <span class=\"skill-tag\">DSA</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- LEARNING TRICKS -->\n <div class=\"section-title\">⚡ Embedded Learning Tricks (Used Throughout)</div>\n <div class=\"tricks-grid\" style=\"margin-bottom:40px\">\n <div class=\"trick-card\">\n <div class=\"trick-icon\">🧠</div>\n <h4>Feynman Technique</h4>\n <p>After every topic, explain it in plain English as if teaching a 10-year-old. Instant gap detector.</p>\n </div>\n <div class=\"trick-card\">\n <div class=\"trick-icon\">🃏</div>\n <h4>Spaced Repetition (Anki)</h4>\n <p>10 min/day reviewing flashcards. Defeats the forgetting curve. Never lose what you've learned.</p>\n </div>\n <div class=\"trick-card\">\n <div class=\"trick-icon\">🔨</div>\n <h4>Build To Learn</h4>\n <p>Every concept has a mini-project. No tutorial hell. Learn by breaking things and fixing them.</p>\n </div>\n <div class=\"trick-card\">\n <div class=\"trick-icon\">🔁</div>\n <h4>Interleaving</h4>\n <p>Mix topics daily (code + theory + project). Proven to create 25% better retention than block study.</p>\n </div>\n <div class=\"trick-card\">\n <div class=\"trick-icon\">⏱️</div>\n <h4>Pomodoro 25/5</h4>\n <p>25 min deep work, 5 min break. Repeat 4×, then take a 30 min break. Maximizes focus.</p>\n </div>\n <div class=\"trick-card\">\n <div class=\"trick-icon\">🎯</div>\n <h4>Outcome-First Learning</h4>\n <p>Always know WHAT job you're building a skill for. Context makes learning 3× faster.</p>\n </div>\n </div>\n\n <!-- PHASE TABS -->\n <div class=\"section-title\">📅 Day-by-Day Progress Tracker</div>\n <div class=\"tabs-wrap\" id=\"tabsWrap\">\n <!-- filled by JS -->\n </div>\n\n <!-- PHASE PANELS -->\n <div id=\"phaseContent\">\n <!-- filled by JS -->\n </div>\n\n</div>\n\n<!-- FLOATING SAVE -->\n<button class=\"floating-save\" id=\"saveBtn\" onclick=\"saveProgress()\">\n <span class=\"save-pulse\">💾</span> Save Progress\n</button>\n\n<script>\n// ═══════════════════════════════════════════════════════════════\n// DATA — 18-PHASE ROADMAP (78 weeks × 5 days = 390 tasks)\n// ═══════════════════════════════════════════════════════════════\nconst PHASES = [\n {\n id: 1, label: \"Phase 1\", title: \"Absolute Foundations\",\n weeks: \"1–6\", duration: \"6 weeks\",\n color: \"#6378ff\", emoji: \"🌱\",\n desc: \"Build unbreakable fundamentals. CS theory, Python mastery, Git, terminal. The base every recruiter expects.\",\n chips: [\n {text:\"Python\",color:\"#a5b4fc\"},{text:\"Git & GitHub\",color:\"#86efac\"},\n {text:\"Linux CLI\",color:\"#fcd34d\"},{text:\"CS Theory\",color:\"#d8b4fe\"}\n ],\n weeks_data: [\n {\n num: 1, title: \"Computer Science Foundations + Dev Environment\",\n subtitle: \"Setup your battlefield. Understand HOW computers really work.\",\n days: [\n { title:\"Install & Configure Dev Environment\", desc:\"VS Code, Python 3.12, Git, WSL/Terminal, Node.js. Create GitHub account. Configure SSH keys.\", tags:[\"build\"], trick:\"Set up everything in one session. Refer to official docs — 'learn to read docs' is skill #1.\", hours:\"4h\" },\n { title:\"How Computers Work: Binary, Memory, CPU\", desc:\"Binary/hex, RAM vs CPU vs storage, OS basics. Watch Crash Course CS episodes 1-3.\", tags:[\"learn\",\"review\"], trick:\"Create Anki cards for: binary, RAM, CPU cycle, OS scheduler. 5 cards today.\", hours:\"5h\" },\n { title:\"Data Structures Part 1: Arrays & Linked Lists\", desc:\"Implement array and linked list in Python from scratch. Visualize memory allocation.\", tags:[\"learn\",\"build\"], trick:\"Draw diagrams on paper first. Feynman: explain to yourself why linked list insert is O(1).\", hours:\"5h\" },\n { title:\"Data Structures Part 2: Stacks, Queues, Hash Maps\", desc:\"Implement each from scratch. Solve 3 easy LeetCode problems using each.\", tags:[\"learn\",\"practice\"], trick:\"LeetCode: Two Sum, Valid Parentheses, Contains Duplicate. Timer on — simulate real pressure.\", hours:\"5h\" },\n { title:\"Git Mastery: Version Control Deep Dive\", desc:\"init, clone, add, commit, push, branch, merge, rebase, stash, PR workflow. Build a sample project and push to GitHub.\", tags:[\"build\",\"learn\"], trick:\"Create a public repo today. Future employers WILL check it. Every day from now: commit something.\", hours:\"5h\" },\n ]\n },\n {\n num: 2, title: \"Python Mastery: From Basics to Pythonic Code\",\n subtitle: \"Python is the universal language of AI, Data, and DevOps. Master it deeply.\",\n days: [\n { title:\"Python Core: Variables, Loops, Functions, OOP\", desc:\"Write 10 functions solving real problems. Understand mutable vs immutable. Classes, __init__, self.\", tags:[\"learn\",\"practice\"], trick:\"Challenge: rewrite any phone tool you use (calculator, todo list) in Python CLI. Real motivation.\", hours:\"5h\" },\n { title:\"Python Advanced: Decorators, Context Managers, Generators\", desc:\"Learn with @property, @staticmethod, with statements, yield. Write a lazy file reader using generator.\", tags:[\"learn\",\"build\"], trick:\"Feynman: explain 'generator' vs 'list' with a real-world analogy (assembly line vs warehouse).\", hours:\"5h\" },\n { title:\"Python OOP Project: Build a Library System\", desc:\"Classes: Book, Member, Library with borrow/return logic. Use inheritance. Write to JSON.\", tags:[\"build\",\"project\"], trick:\"Commit this project to GitHub with a proper README. First portfolio piece!\", hours:\"5h\" },\n { title:\"Python Data Handling: Files, JSON, CSV, APIs\", desc:\"Read/write files, parse JSON & CSV, make your first HTTP request with requests library. Consume a public API.\", tags:[\"build\",\"learn\"], trick:\"Use OpenWeather or CoinGecko free API. Build a weather CLI tool.\", hours:\"5h\" },\n { title:\"Python Testing & Code Quality\", desc:\"unittest, pytest basics. Write tests for your Library System. Use Black formatter and Flake8 linter.\", tags:[\"build\",\"practice\"], trick:\"Pro move: TDD (Test Driven Development) — write test first, then code. Used at every big tech company.\", hours:\"4h\" },\n ]\n },\n {\n num: 3, title: \"SQL & Databases: The Language Recruiters Always Test\",\n subtitle: \"SQL is tested in 90% of tech interviews. Data is everywhere — own it.\",\n days: [\n { title:\"SQL Fundamentals: SELECT, WHERE, JOIN, GROUP BY\", desc:\"Install PostgreSQL. Create tables, insert data, write 20 queries. Join at least 3 tables.\", tags:[\"learn\",\"practice\"], trick:\"Use a real dataset (Netflix shows, Spotify data from Kaggle). Make it interesting.\", hours:\"5h\" },\n { title:\"Advanced SQL: CTEs, Window Functions, Indexing\", desc:\"WITH clauses, ROW_NUMBER(), RANK(), PARTITION BY, query optimization. Explain plan.\", tags:[\"learn\",\"practice\"], trick:\"Window functions are asked in 80% of data engineer interviews. Master this day.\", hours:\"5h\" },\n { title:\"Database Design: ERD, Normalization, Relationships\", desc:\"Design a Twitter-like schema. 1NF/2NF/3NF, foreign keys, indexes, constraints.\", tags:[\"learn\",\"build\"], trick:\"Draw ERD on paper. Recruiting test: 'Design the database for Uber' — practiced exactly this.\", hours:\"5h\" },\n { title:\"NoSQL: MongoDB Basics + Use Cases\", desc:\"When to use SQL vs NoSQL. Install MongoDB. CRUD a document store for a blogging platform.\", tags:[\"learn\",\"build\"], trick:\"Rule of thumb: user-facing apps → NoSQL for flexibility. Analytics → SQL for power.\", hours:\"5h\" },\n { title:\"SQL Projects: Build an Analytics Dashboard Query Set\", desc:\"Dataset: e-commerce orders. Write 10 complex analytical queries. Cohort analysis, retention, revenue.\", tags:[\"project\",\"build\"], trick:\"This exact project on GitHub with README demonstrates real data analyst skills.\", hours:\"4h\" },\n ]\n },\n {\n num: 4, title: \"Web Fundamentals + React: The Frontend Foundation\",\n subtitle: \"Every tech interview has a frontend component. React is the standard.\",\n days: [\n { title:\"HTML5 & CSS3: Semantic Structure + Modern Layouts\", desc:\"Semantic HTML, Flexbox, CSS Grid, responsive design. Build a personal portfolio page.\", tags:[\"learn\",\"build\"], trick:\"Use CSS Grid for layout, Flexbox for components. Non-negotiable rule for 2025.\", hours:\"5h\" },\n { title:\"JavaScript ES6+ Core Concepts\", desc:\"const/let, arrow functions, destructuring, spread/rest, modules, async/await, Promises.\", tags:[\"learn\",\"practice\"], trick:\"Master async/await completely. It's the most common JS interview topic. Build 5 tiny exercises.\", hours:\"5h\" },\n { title:\"React Part 1: Components, Props, State, Hooks\", desc:\"Build a Task Manager app with useState, useEffect. Functional components only. Props drilling.\", tags:[\"build\",\"learn\"], trick:\"Build real apps, not tutorials. The Task Manager app is portfolio-worthy.\", hours:\"6h\" },\n { title:\"React Part 2: Context, useReducer, React Router\", desc:\"Multi-page app with routing. State management with Context API. Add authentication flow.\", tags:[\"build\",\"learn\"], trick:\"Implement a login/logout flow. Every startup app needs auth. You'll reuse this pattern.\", hours:\"6h\" },\n { title:\"React Project: Personal Portfolio Website\", desc:\"Deploy your portfolio site. Include: About, Projects, Skills, Contact. Use GitHub Pages or Vercel.\", tags:[\"project\",\"deploy\"], trick:\"LIVE URL on resume = instant credibility. Deploy to Vercel in 5 min. Free forever.\", hours:\"3h\" },\n ]\n },\n {\n num: 5, title: \"Python Backend: FastAPI + REST APIs\",\n subtitle: \"Backend APIs are the backbone of every tech product. FastAPI is the fastest-growing Python framework.\",\n days: [\n { title:\"HTTP, REST APIs, JSON: How the Web Works\", desc:\"HTTP methods, status codes, headers, REST principles, JSON structure. Use Postman to test public APIs.\", tags:[\"learn\"], trick:\"Postman is used daily by every backend developer. Set it up and test 3 public APIs today.\", hours:\"4h\" },\n { title:\"FastAPI Part 1: Routes, Request Models, Pydantic\", desc:\"Build a TODO API with CRUD. Pydantic validation, path/query params, request bodies.\", tags:[\"build\",\"learn\"], trick:\"FastAPI auto-generates Swagger docs. Show this to any recruiter — they'll be impressed.\", hours:\"6h\" },\n { title:\"FastAPI Part 2: Authentication, JWT, Middleware\", desc:\"Implement JWT auth, OAuth2 with Password Flow, CORS middleware, rate limiting.\", tags:[\"build\",\"learn\"], trick:\"Every production API has auth. Build this pattern once by heart — reuse it forever.\", hours:\"6h\" },\n { title:\"Connect FastAPI to PostgreSQL (SQLAlchemy + Alembic)\", desc:\"ORM models, relationships, async DB queries, database migrations.\", tags:[\"build\",\"learn\"], trick:\"Alembic is migration tool. Never delete DB columns manually. Master this.\", hours:\"6h\" },\n { title:\"Deploy Your First API to the Cloud\", desc:\"Deploy FastAPI app to Railway or Render. Set up environment variables, SSL. Share the live URL.\", tags:[\"deploy\",\"project\"], trick:\"LIVE API URL on GitHub README = 10× more recruiter attention. Do this today.\", hours:\"3h\" },\n ]\n },\n {\n num: 6, title: \"DSA & Problem Solving: Beat the Technical Interview\",\n subtitle: \"Data Structures & Algorithms are tested at every FAANG interview. Non-negotiable.\",\n days: [\n { title:\"Big O Notation + Sorting Algorithms\", desc:\"O(n), O(log n), O(n²). Implement Merge Sort, Quick Sort, Binary Search. Analyze time/space complexity.\", tags:[\"learn\",\"practice\"], trick:\"Draw time-complexity graphs. Visual memory is 3× stronger. Every interview opens with Big O.\", hours:\"5h\" },\n { title:\"Trees: Binary Trees, BST, DFS, BFS\", desc:\"Implement BST, in-order/pre-order/post-order traversal, BFS with queue. Solve 5 LeetCode tree problems.\", tags:[\"learn\",\"practice\"], trick:\"LeetCode: Maximum Depth, Symmetric Tree, Binary Tree Level Order Traversal, Path Sum.\", hours:\"5h\" },\n { title:\"Graphs: DFS, BFS, Topological Sort\", desc:\"Adjacency list/matrix, DFS/BFS traversal, cycle detection, topological sort for DAGs.\", tags:[\"learn\",\"practice\"], trick:\"Real interview Q: 'Design a course scheduler' — that's topological sort. Visual graph drawing helps.\", hours:\"5h\" },\n { title:\"Dynamic Programming: Top-Down & Bottom-Up\", desc:\"Memoization vs tabulation. Fibonacci, Knapsack, Longest Common Subsequence, Coin Change.\", tags:[\"learn\",\"practice\"], trick:\"DP is hardest topic. Use the template: state → transition → base case. Draw the table.\", hours:\"5h\" },\n { title:\"Mock Technical Interview + Review\", desc:\"2 hours of LeetCode (1 medium, 1 hard). Record yourself explaining solutions aloud. Review week.\", tags:[\"practice\",\"review\"], trick:\"Talk through your approach BEFORE coding — interviewers care more about your thought process.\", hours:\"4h\" },\n ]\n },\n ]\n },\n {\n id: 2, label: \"Phase 2\", title: \"Cloud Engineering & DevOps\",\n weeks: \"7–11\", duration: \"5 weeks\",\n color: \"#00d4ff\", emoji: \"☁️\",\n desc: \"Master AWS, Docker, Kubernetes, Terraform CI/CD. The backbone of every modern tech company.\",\n chips: [\n {text:\"AWS\",color:\"#fcd34d\"},{text:\"Docker\",color:\"#67e8f9\"},\n {text:\"Kubernetes\",color:\"#a5b4fc\"},{text:\"Terraform\",color:\"#86efac\"},\n {text:\"CI/CD\",color:\"#d8b4fe\"}\n ],\n weeks_data: [\n {\n num: 7, title: \"AWS Core: EC2, S3, IAM, VPC, Lambda\",\n subtitle: \"AWS is in 80% of job descriptions. Master the fundamentals first.\",\n days: [\n { title:\"AWS Account Setup + IAM: Identity & Access Management\", desc:\"Create free tier account. IAM users, groups, policies, roles. MFA setup. Principle of least privilege.\", tags:[\"build\",\"learn\"], trick:\"Use AWS free tier for everything. NEVER store credentials in code — use IAM roles.\", hours:\"4h\" },\n { title:\"EC2 & Networking: Virtual Machines in the Cloud\", desc:\"Launch EC2 instance, SSH in, install software, security groups, elastic IPs. VPC, subnets, routing.\", tags:[\"build\",\"learn\"], trick:\"Launch a t2.micro, host your FastAPI app on it. Real cloud deployment!\", hours:\"6h\" },\n { title:\"S3: Object Storage for Everything\", desc:\"Buckets, versioning, lifecycle policies, static website hosting, pre-signed URLs. Use boto3 in Python.\", tags:[\"build\",\"learn\"], trick:\"S3 is used in EVERY AWS architecture. Build automation: Python script to backup files to S3.\", hours:\"5h\" },\n { title:\"Lambda + API Gateway: Serverless Architecture\", desc:\"Write Lambda functions, connect to API Gateway, create serverless REST endpoint. Triggers and events.\", tags:[\"build\",\"learn\"], trick:\"Serverless is the future. No servers = no maintenance. Build a URL shortener as Lambda.\", hours:\"6h\" },\n { title:\"RDS + DynamoDB: Managed Databases on AWS\", desc:\"Launch PostgreSQL on RDS. Create DynamoDB table. Connect applications. Backup and restore.\", tags:[\"build\",\"learn\"], trick:\"Never run DB on EC2 in prod. Always use managed RDS. This is what interviewers check for.\", hours:\"3h\" },\n ]\n },\n {\n num: 8, title: \"Docker: Containerization Mastery\",\n subtitle: \"Docker is the #1 most-listed cloud skill after AWS. Every company uses containers.\",\n days: [\n { title:\"Docker Core: Images, Containers, Volumes, Networks\", desc:\"docker run, build, ps, stop, rm. Dockerfile anatomy. Volumes for persistence. Networks for service communication.\", tags:[\"learn\",\"build\"], trick:\"Mental model: Image = recipe, Container = running dish. Never forget this analogy.\", hours:\"5h\" },\n { title:\"Write Optimized Dockerfiles for Python & Node apps\", desc:\"Multi-stage builds, .dockerignore, layer caching, non-root user, health checks. Minimize image size.\", tags:[\"build\",\"practice\"], trick:\"Profile image size before/after optimization. Goal: go from 1GB to under 100MB. Real skill.\", hours:\"5h\" },\n { title:\"Docker Compose: Multi-Container Applications\", desc:\"docker-compose.yml for: web app + PostgreSQL + Redis + Nginx. Environment variables, depends_on.\", tags:[\"build\",\"learn\"], trick:\"This skill alone is asked in 70% of backend interviews. Build the full 4-service compose file.\", hours:\"6h\" },\n { title:\"Docker + CI/CD: Build and Push to Docker Hub/ECR\", desc:\"Automate Docker build → push → deploy with GitHub Actions. Tag images with commit SHA.\", tags:[\"deploy\",\"build\"], trick:\"From push to live in 5 minutes automatically. This is DevOps. Show this in interviews.\", hours:\"6h\" },\n { title:\"Docker Project: Containerize Your Portfolio API\", desc:\"Put your FastAPI app + PostgreSQL in Docker Compose. Push to Docker Hub. Document everything.\", tags:[\"project\",\"deploy\"], trick:\"GitHub repo with docker-compose.yml and a one-command startup = serious developer signal.\", hours:\"3h\" },\n ]\n },\n {\n num: 9, title: \"Kubernetes: Container Orchestration\",\n subtitle: \"Kubernetes is the most in-demand DevOps skill. $150K+ roles require it.\",\n days: [\n { title:\"K8s Core Concepts: Pods, Deployments, Services, Ingress\", desc:\"minikube setup. kubectl commands. Pod lifecycle, Deployments with replicas, ClusterIP/NodePort/LoadBalancer.\", tags:[\"learn\",\"build\"], trick:\"Draw the K8s architecture: Node → Pod → Container. Visualize it. Feynman it out.\", hours:\"5h\" },\n { title:\"K8s Config: ConfigMaps, Secrets, Namespaces, RBAC\", desc:\"Store config and secrets properly. Namespace isolation. Role-based access. Never hardcode secrets!\", tags:[\"learn\",\"build\"], trick:\"Security red flag: secrets in env vars in YAML without proper K8s Secrets. Show you know better.\", hours:\"5h\" },\n { title:\"K8s Scaling: HPA, Resource Limits, Health Probes\", desc:\"Horizontal Pod Autoscaler, liveness/readiness probes, resource requests/limits, rolling updates.\", tags:[\"learn\",\"build\"], trick:\"HPA is how Netflix serves 200M users. Simulate load with k6 or hey and watch pods scale.\", hours:\"6h\" },\n { title:\"Helm: Kubernetes Package Manager\", desc:\"Install Helm, use a chart (nginx-ingress), write your own chart for your app. Values, templates.\", tags:[\"build\",\"learn\"], trick:\"Helm is how teams manage K8s configs. Knowing Helm = senior-level signal.\", hours:\"6h\" },\n { title:\"K8s Project: Deploy Full Stack App to K8s\", desc:\"Deploy: FastAPI + PostgreSQL + React on minikube then EKS (AWS). Full Ingress + TLS.\", tags:[\"project\",\"deploy\"], trick:\"EKS deployment is expensive but a 1-hour demo is free. Do it, screenshot it, delete cluster.\", hours:\"3h\" },\n ]\n },\n {\n num: 10, title: \"Terraform & Infrastructure as Code\",\n subtitle: \"IaC is how mature teams manage cloud. Terraform is the industry standard.\",\n days: [\n { title:\"Terraform Fundamentals: Providers, Resources, State\", desc:\"Install Terraform. Write first config to create AWS S3 bucket and EC2. terraform init/plan/apply/destroy.\", tags:[\"learn\",\"build\"], trick:\"State file = source of truth. NEVER delete terraform.tfstate. Commit it (encrypted) to git.\", hours:\"5h\" },\n { title:\"Terraform Modules & Remote State\", desc:\"Create reusable modules for VPC, EC2, RDS. Store state in S3 with DynamoDB locking.\", tags:[\"build\",\"learn\"], trick:\"Modules are the functions of infrastructure. One module = one VPC. Reuse across environments.\", hours:\"6h\" },\n { title:\"Terraform + CI/CD: Automated Infrastructure\", desc:\"GitHub Actions pipeline: terraform fmt → validate → plan (on PR) → apply (on merge to main).\", tags:[\"build\",\"deploy\"], trick:\"This is GitOps. Infrastructure as PR reviews. Very impressive to show interviewers.\", hours:\"6h\" },\n { title:\"Ansible: Configuration Management\", desc:\"Install Ansible. Playbooks to configure EC2 servers (install packages, set up users, deploy app).\", tags:[\"learn\",\"build\"], trick:\"Terraform builds the server, Ansible configures it. Often these two are used together.\", hours:\"5h\" },\n { title:\"IaC Project: Full AWS Infrastructure as Code\", desc:\"Terraform: VPC + EC2 + RDS + S3 + CloudFront + IAM. One terraform apply = complete production env.\", tags:[\"project\",\"deploy\"], trick:\"This repo on GitHub shows senior-level infrastructure thinking. Recruiters at AWS love this.\", hours:\"3h\" },\n ]\n },\n {\n num: 11, title: \"Observability: Monitoring, Logging, Alerting\",\n subtitle: \"You can't manage what you can't measure. Production systems need full observability.\",\n days: [\n { title:\"Prometheus + Grafana: Metrics & Dashboards\", desc:\"Deploy Prometheus stack with Helm. Instrument Python app with prometheus_client. Build Grafana dashboard.\", tags:[\"build\",\"learn\"], trick:\"Grafana dashboard = screenshot for portfolio. 'I built a monitoring system' is elite level story.\", hours:\"5h\" },\n { title:\"ELK Stack: Elasticsearch, Logstash, Kibana\", desc:\"Ship application logs to ELK. Create Kibana dashboards. Log structured JSON from FastAPI.\", tags:[\"build\",\"learn\"], trick:\"Structured logs (JSON) vs unstructured (print statements). Always use structured in production.\", hours:\"5h\" },\n { title:\"Distributed Tracing: Jaeger / OpenTelemetry\", desc:\"Instrument your app with OpenTelemetry. Trace requests across microservices. Identify bottlenecks.\", tags:[\"build\",\"learn\"], trick:\"This is what separates junior devs from senior. 'How would you debug latency?' → tracing.\", hours:\"5h\" },\n { title:\"SRE Concepts: SLI, SLO, SLA, Error Budgets\", desc:\"Define SLIs/SLOs for your app (99.9% uptime, <200ms P99). Alerting rules in Prometheus.\", tags:[\"learn\"], trick:\"Google's SRE book is free online. Chapter 4 alone is interview gold. Read it.\", hours:\"5h\" },\n { title:\"Observability Project: Full Production-Ready Stack\", desc:\"Complete observability for your app: metrics + logs + traces + alerts. Document runbooks.\", tags:[\"project\",\"review\"], trick:\"Document a fake 'incident response'. Recruiters at PagerDuty and Datadog go wild for this.\", hours:\"4h\" },\n ]\n },\n ]\n },\n {\n id: 3, label: \"Phase 3\", title: \"AI & Machine Learning\",\n weeks: \"12–17\", duration: \"6 weeks\",\n color: \"#a855f7\", emoji: \"🤖\",\n desc: \"The highest-value skills of 2025. AI Engineers command $180K+. Build production AI systems.\",\n chips: [\n {text:\"PyTorch\",color:\"#d8b4fe\"},{text:\"LLMs\",color:\"#a5b4fc\"},\n {text:\"LangChain\",color:\"#86efac\"},{text:\"RAG\",color:\"#67e8f9\"},\n {text:\"MLOps\",color:\"#fcd34d\"}\n ],\n weeks_data: [\n {\n num: 12, title: \"Machine Learning Foundations\",\n subtitle: \"Before you use AI, understand the math and intuition behind it.\",\n days: [\n { title:\"NumPy & Pandas: Data Manipulation Mastery\", desc:\"Array operations, broadcasting, DataFrame operations, groupby, merge, pivot. Load and clean a real dataset.\", tags:[\"learn\",\"practice\"], trick:\"Kaggle has 1000s of free datasets. Pick something you care about. Data about cricket, movies, stocks.\", hours:\"5h\" },\n { title:\"Machine Learning Theory: Supervised vs Unsupervised\", desc:\"Linear regression, logistic regression, decision trees, k-means clustering. Math intuition only, no memorization.\", tags:[\"learn\"], trick:\"Scikit-learn's diagrams are world-class. Use them as your cheatsheet. Bookmark the docs.\", hours:\"5h\" },\n { title:\"Scikit-learn: Build Your First ML Pipeline\", desc:\"Load dataset, preprocess (StandardScaler, OneHotEncoder), train model, evaluate (accuracy, F1, AUC).\", tags:[\"build\",\"learn\"], trick:\"Use Pipeline class. It prevents data leakage (common exam mistake and real bug).\", hours:\"5h\" },\n { title:\"Model Evaluation: Cross-Validation, Overfitting, Hyperparameter Tuning\", desc:\"K-fold CV, bias-variance tradeoff, GridSearchCV, RandomSearchCV, learning curves.\", tags:[\"learn\",\"practice\"], trick:\"Overfitting is THE most common ML bug. Always plot learning curves before shipping a model.\", hours:\"5h\" },\n { title:\"ML Project: End-to-End Churn Prediction Model\", desc:\"EDA → Feature Engineering → Model Training → Evaluation → Joblib serialization → Flask endpoint.\", tags:[\"project\",\"build\"], trick:\"Wrap in Flask/FastAPI and deploy to cloud. 'Live ML API' on resume > academic project.\", hours:\"4h\" },\n ]\n },\n {\n num: 13, title: \"Deep Learning: Neural Networks & PyTorch\",\n subtitle: \"PyTorch powers most AI research and production at Facebook, Tesla, OpenAI.\",\n days: [\n { title:\"Neural Network Theory: Neurons, Layers, Backpropagation\", desc:\"Perceptron, activation functions (ReLU, sigmoid), forward pass, loss, gradient descent, backprop.\", tags:[\"learn\"], trick:\"3Blue1Brown's Neural Network series on YouTube (4 videos, 1hr total). Best visual explanation ever.\", hours:\"4h\" },\n { title:\"PyTorch Core: Tensors, Autograd, Datasets, DataLoaders\", desc:\"Tensor operations, automatic differentiation, custom Dataset class, batching, transforms.\", tags:[\"learn\",\"build\"], trick:\"PyTorch tutorial on pytorch.org is exceptional. Always start from official docs.\", hours:\"6h\" },\n { title:\"Train Your First CNN: Image Classification\", desc:\"Build CNN to classify CIFAR-10 (or MNIST). Conv2d, MaxPool, BatchNorm, Dropout, training loop.\", tags:[\"build\",\"learn\"], trick:\"Use GPU (Colab free T4 GPU). Training on CPU for vision = 10× slower. Go to Colab now.\", hours:\"6h\" },\n { title:\"Transfer Learning: Use Pre-Trained Models\", desc:\"Load ResNet50 from torchvision. Freeze base layers. Fine-tune on custom dataset (5 classes of your choice).\", tags:[\"build\",\"learn\"], trick:\"This is how production vision AI works. No company trains from scratch. Transfer learning is Day 1.\", hours:\"6h\" },\n { title:\"PyTorch Project: Custom Image Classifier App\", desc:\"Finetune a model on your own dataset. Build a FastAPI endpoint. Add a React UI to upload images.\", tags:[\"project\",\"deploy\"], trick:\"Working AI web app = top 1% of candidates applying for AI engineer roles. Deploy it.\", hours:\"3h\" },\n ]\n },\n {\n num: 14, title: \"Large Language Models (LLMs): The Core Skill of 2025\",\n subtitle: \"LLMs are the center of the AI economy. Every company is building with them.\",\n days: [\n { title:\"Transformers Architecture: Attention Mechanism Deep Dive\", desc:\"Self-attention, multi-head attention, positional encoding, encoder-decoder. Read 'Attention Is All You Need' (key parts).\", tags:[\"learn\"], trick:\"Jay Alammar's 'Illustrated Transformer' blog post is the best explanation. Read it twice.\", hours:\"5h\" },\n { title:\"HuggingFace Transformers: Load + Use Pre-Trained Models\", desc:\"Load BERT, GPT-2, LLAMA for text classification, summarization, generation. Tokenizers and pipelines.\", tags:[\"build\",\"learn\"], trick:\"huggingface.co/spaces — deploy a demo for free in 5 minutes. Show it in interviews instantly.\", hours:\"6h\" },\n { title:\"OpenAI API + Prompt Engineering Mastery\", desc:\"GPT-4o API. Few-shot prompting, chain-of-thought, structured outputs (JSON mode), system prompts.\", tags:[\"build\",\"learn\"], trick:\"Prompt engineering = write clear instructions. Best practice: roleplay + examples + constraints format.\", hours:\"5h\" },\n { title:\"LangChain: Orchestrate LLM Applications\", desc:\"Chains, agents, tools, memory, output parsers. Build a document Q&A chatbot with conversation history.\", tags:[\"build\",\"learn\"], trick:\"LangChain has weekly updates. Learn the core concepts, not every feature. Concepts > syntax.\", hours:\"6h\" },\n { title:\"Fine-Tuning LLMs: LoRA + QLoRA\", desc:\"Fine-tune a 7B model with QLoRA on Colab. Use a custom dataset. Understand PEFT concepts.\", tags:[\"build\",\"learn\"], trick:\"Fine-tuning with QLoRA makes 7B models run on 1 GPU. This alone is a $160K+ skill.\", hours:\"3h\" },\n ]\n },\n {\n num: 15, title: \"RAG Systems & Vector Databases\",\n subtitle: \"RAG is the #1 production AI pattern. 90% of enterprise AI uses some form of RAG.\",\n days: [\n { title:\"Embeddings: How Machines Understand Meaning\", desc:\"Word2Vec intuition, OpenAI text-embedding-3-small, cosine similarity. Build semantic search from scratch.\", tags:[\"learn\",\"build\"], trick:\"Demo: embed 100 sentences. Search by meaning, not keyword. Instantly understand what recruiters want.\", hours:\"5h\" },\n { title:\"Vector Databases: Pinecone, ChromaDB, Weaviate\", desc:\"Install ChromaDB locally. Store embeddings, query by similarity, filter metadata, manage collections.\", tags:[\"build\",\"learn\"], trick:\"Vector DB = long-term memory for AI. Without it, every chat starts fresh. Explain this in interviews.\", hours:\"6h\" },\n { title:\"Build a RAG Pipeline from Scratch\", desc:\"PDF loader → text splitter → embeddings → vector store → retrieval → generation. No framework, pure Python.\", tags:[\"build\",\"project\"], trick:\"Building RAG from scratch > using LangChain's RAG. You'll understand every failure mode.\", hours:\"6h\" },\n { title:\"Advanced RAG: Reranking, Hybrid Search, Evaluation\", desc:\"BM25 + semantic hybrid search, Cohere reranker, RAGAs evaluation framework for answer quality.\", tags:[\"build\",\"learn\"], trick:\"Production RAG fails silently. RAGAs metrics (faithfulness, relevance) catch this early.\", hours:\"5h\" },\n { title:\"RAG Project: Enterprise Document Assistant\", desc:\"Upload any PDF → ask questions → get cited answers. FastAPI + ChromaDB + OpenAI + React UI. Deploy.\", tags:[\"project\",\"deploy\"], trick:\"This app is exactly what startup AI engineers build on Day 1. Literally job-simulation.\", hours:\"3h\" },\n ]\n },\n {\n num: 16, title: \"AI Agents: Agentic AI & Autonomous Systems\",\n subtitle: \"AI Agents are the frontier of AI engineering. The highest-paying niche in 2025–2026.\",\n days: [\n { title:\"AI Agent Architecture: ReAct, Tool Use, Function Calling\", desc:\"ReAct pattern (Reason + Act). OpenAI function calling. LangChain agents with custom tools.\", tags:[\"learn\",\"build\"], trick:\"Build an agent that can: search the web, write to a file, call an API. 3 tools = real agent.\", hours:\"5h\" },\n { title:\"Multi-Agent Systems: CrewAI & AutoGen\", desc:\"Multiple AI agents collaborating. Manager/worker pattern. Task delegation, parallel execution.\", tags:[\"build\",\"learn\"], trick:\"Multi-agent systems are what companies like Cognition (Devin AI) are building. Learn the pattern.\", hours:\"6h\" },\n { title:\"Memory Systems: Short-term, Long-term, Episodic\", desc:\"In-context memory, vector DB memory, entity memory. Build a personal AI assistant with persistent memory.\", tags:[\"build\",\"learn\"], trick:\"Memory makes agents useful. Without memory: toy. With memory: product. This is the dividing line.\", hours:\"6h\" },\n { title:\"AI Agent Tools: Web Search, Code Execution, Browser Control\", desc:\"Integrate Tavily search, Python REPL tool, Playwright for web automation into an agent.\", tags:[\"build\",\"learn\"], trick:\"Playwright-powered agents can fill forms, scrape dynamic sites, test your own app. Super power.\", hours:\"5h\" },\n { title:\"Agent Project: AI Research Assistant\", desc:\"Agent that: plans, searches web, reads papers, synthesizes findings, writes structured report. Fully autonomous.\", tags:[\"project\",\"deploy\"], trick:\"Show this running live in an interview. No one else in the room will have built this.\", hours:\"3h\" },\n ]\n },\n {\n num: 17, title: \"MLOps: Taking AI to Production\",\n subtitle: \"Building AI is 20% of the job. Getting it to production reliably is the other 80%.\",\n days: [\n { title:\"MLflow: Experiment Tracking & Model Registry\", desc:\"Track runs (params, metrics, artifacts). Model versioning, staging, production transitions. Compare experiments.\", tags:[\"build\",\"learn\"], trick:\"MLflow is how data science teams collaborate. Every serious ML team uses it. Must-know.\", hours:\"5h\" },\n { title:\"Model Serving: BentoML, TorchServe, vLLM\", desc:\"Pack model as BentoService. Auto-generate Docker image. Serve PyTorch model via TorchServe with batching.\", tags:[\"build\",\"learn\"], trick:\"vLLM enables 10× faster LLM inference. Know how to set up a self-hosted LLM endpoint.\", hours:\"6h\" },\n { title:\"Model Monitoring: Drift Detection & Retraining\", desc:\"Feature drift, label drift, Evidently AI for monitoring. Set up automated alerts and retraining triggers.\", tags:[\"build\",\"learn\"], trick:\"Models degrade silently in production. Drift detection catches it before users notice.\", hours:\"5h\" },\n { title:\"Kubeflow / Vertex AI: End-to-End ML Pipelines\", desc:\"Build a pipeline: data ingestion → preprocessing → training → evaluation → deployment → monitoring.\", tags:[\"build\",\"learn\"], trick:\"Vertex AI on GCP is easiest managed MLOps. Use it for portfolio projects. GCP has free credits.\", hours:\"6h\" },\n { title:\"MLOps Project: Automated ML Pipeline\", desc:\"GitHub Actions → data pull → training → evaluation gate → BentoML push → K8s deploy → monitor.\", tags:[\"project\",\"deploy\"], trick:\"This is a senior ML engineer's full stack. This project alone justifies a $140K+ salary.\", hours:\"3h\" },\n ]\n },\n ]\n },\n {\n id: 4, label: \"Phase 4\", title: \"Data Engineering at Scale\",\n weeks: \"18–22\", duration: \"5 weeks\",\n color: \"#10b981\", emoji: \"⚙️\",\n desc: \"Build the pipelines that power AI. Data Engineers are the unsung heroes behind every AI system.\",\n chips: [\n {text:\"Apache Spark\",color:\"#86efac\"},{text:\"Kafka\",color:\"#6ee7b7\"},\n {text:\"Airflow\",color:\"#fcd34d\"},{text:\"dbt\",color:\"#67e8f9\"},\n {text:\"Snowflake\",color:\"#d8b4fe\"}\n ],\n weeks_data: [\n {\n num: 18, title: \"Apache Spark: Distributed Data Processing\",\n subtitle: \"Spark powers data processing at Netflix, Uber, Airbnb, and every Fortune 500.\",\n days: [\n { title:\"Spark Fundamentals: RDDs, DataFrames, Spark SQL\", desc:\"Install PySpark. Understand DAG execution, lazy evaluation, partitioning. Transform large CSV datasets.\", tags:[\"learn\",\"build\"], trick:\"Databricks Community Edition = free Spark cluster. Don't install locally. Use cloud.\", hours:\"5h\" },\n { title:\"Spark Streaming: Real-Time Data Processing\", desc:\"Structured Streaming. Read from Kafka, process events, output to Delta Lake. Watermarks and late data.\", tags:[\"build\",\"learn\"], trick:\"Spark Streaming + Kafka = the standard real-time architecture. This combo is in every senior DE JD.\", hours:\"6h\" },\n { title:\"Spark Optimization: Partitioning, Caching, Broadcasting\", desc:\"Partition tuning, broadcast joins, cache vs persist, shuffle optimization. Analyze Spark UI.\", tags:[\"learn\",\"practice\"], trick:\"Spark UI is your debugger. Learn to read stage DAGs and identify shuffle bottlenecks.\", hours:\"5h\" },\n { title:\"Delta Lake: ACID Transactions for Data Lakes\", desc:\"Time travel, MERGE (upsert), schema evolution, Z-ordering, data skipping. The lakehouse paradigm.\", tags:[\"build\",\"learn\"], trick:\"Delta Lake = Data Lake + Data Warehouse. The future of all data storage. Master it.\", hours:\"5h\" },\n { title:\"Spark Project: Netflix-Style Recommendation Pipeline\", desc:\"Movie ratings data → Spark ALS collaborative filtering → recommendations API. Batch + serving.\", tags:[\"project\",\"build\"], trick:\"ALS in Spark is how Netflix used to power recommendations. Real-world, real scale.\", hours:\"4h\" },\n ]\n },\n {\n num: 19, title: \"Apache Kafka: Event Streaming\",\n subtitle: \"Kafka is the real-time data backbone of LinkedIn, Uber, Airbnb, and Twitter.\",\n days: [\n { title:\"Kafka Architecture: Topics, Partitions, Consumer Groups\", desc:\"Brokers, producers, consumers, offsets. Deploy Kafka with Docker. Produce/consume messages in Python.\", tags:[\"learn\",\"build\"], trick:\"Kafka mental model: a distributed, fault-tolerant bulletin board. Publishers post, subscribers read.\", hours:\"5h\" },\n { title:\"Kafka Streams: Real-Time Stream Processing\", desc:\"KStream, KTable, joins, aggregations, windowing, exactly-once semantics.\", tags:[\"build\",\"learn\"], trick:\"Kafka Streams vs Spark Streaming: use Kafka Streams for pure Kafka pipelines, Spark for mixed.\", hours:\"6h\" },\n { title:\"Kafka Connect: Data Integration\", desc:\"Source connectors (PostgreSQL CDC), sink connectors (S3, Elasticsearch). Debezium for change data capture.\", tags:[\"build\",\"learn\"], trick:\"Debezium + Kafka = capture every DB change in real-time. This pattern is used at every bank.\", hours:\"5h\" },\n { title:\"Kafka Schema Registry + Avro\", desc:\"Enforce schemas with Schema Registry. Avro serialization for compact, fast messaging.\", tags:[\"build\",\"learn\"], trick:\"Without schema registry: chaos. With it: stability. Senior DE interview Q: 'How do you manage schema evolution?'\", hours:\"5h\" },\n { title:\"Kafka Project: Real-Time Fraud Detection Pipeline\", desc:\"Transaction events → Kafka → Spark Streaming → fraud model → alert to Redis → dashboard.\", tags:[\"project\",\"build\"], trick:\"Fraud detection pipeline is asked in 50% of Fintech DE interviews. You just built the answer.\", hours:\"4h\" },\n ]\n },\n {\n num: 20, title: \"Airflow & Workflow Orchestration\",\n subtitle: \"Airflow schedules and monitors every production data pipeline. It's the nerve center.\",\n days: [\n { title:\"Airflow Core: DAGs, Operators, Tasks, XComs\", desc:\"Install Airflow with Docker Compose. Write your first DAG. PythonOperator, BashOperator, schedule_interval.\", tags:[\"learn\",\"build\"], trick:\"Airflow is just a scheduler with a UI and dependency management. Think cron on steroids.\", hours:\"5h\" },\n { title:\"Airflow Advanced: TaskFlow API, Dynamic Tasks, Sensors\", desc:\"@task decorator, dynamic task generation, FileSensor, ExternalTaskSensor, SLA monitoring.\", tags:[\"build\",\"learn\"], trick:\"TaskFlow API (Airflow 2.x) is cleaner and more Pythonic. Always use it over classic operators.\", hours:\"5h\" },\n { title:\"Airflow + Data Quality: Great Expectations\", desc:\"Validate data with Great Expectations. Fail pipeline on quality issues. Email/Slack alerts.\", tags:[\"build\",\"learn\"], trick:\"Data quality failures cost money. 'Our pipeline has 99.9% data quality' = recruiter attention.\", hours:\"5h\" },\n { title:\"dbt: Data Build Tool for Analytics Engineering\", desc:\"dbt models, tests, documentation, sources, seeds, macros. Transform raw data to analytics-ready tables.\", tags:[\"build\",\"learn\"], trick:\"dbt = SQL + software engineering best practices. Every modern data team uses it.\", hours:\"6h\" },\n { title:\"Orchestration Project: E-Commerce Analytics Pipeline\", desc:\"Airflow: ingest → Spark: transform → dbt: model → Snowflake: warehouse → Metabase: dashboard.\", tags:[\"project\",\"deploy\"], trick:\"This is a full modern data stack. Show this and you're immediately a senior DE candidate.\", hours:\"4h\" },\n ]\n },\n {\n num: 21, title: \"Cloud Data Warehousing: Snowflake + BigQuery\",\n subtitle: \"Modern data warehouses handle petabytes. Learn the cloud-native query engines.\",\n days: [\n { title:\"Snowflake: Architecture, Virtual Warehouses, Time Travel\", desc:\"Create account (30-day trial). Load data. Understand Micro-partitioning, clustering, zero-copy cloning.\", tags:[\"build\",\"learn\"], trick:\"Snowflake separates compute from storage. Scale independently. This is its killer feature.\", hours:\"5h\" },\n { title:\"Snowflake Advanced: Streams, Tasks, Snowpark\", desc:\"Change data capture with Streams. Schedule with Tasks. Python in Snowpark for ML in the warehouse.\", tags:[\"build\",\"learn\"], trick:\"Snowpark = Python UDFs in Snowflake. No more data movement to train models. Huge cost win.\", hours:\"5h\" },\n { title:\"BigQuery: Google's Serverless Data Warehouse\", desc:\"GCP free tier. Load CSV to BigQuery. Partitioned tables, clustering, BI Engine, ML with BQML.\", tags:[\"build\",\"learn\"], trick:\"BigQuery is serverless. No clusters to manage. Pay-per-query. Perfect for startups and prototypes.\", hours:\"5h\" },\n { title:\"Data Modeling: Star Schema, Dimensional Modeling, OBT\", desc:\"Fact tables, dimension tables, slowly changing dimensions (SCD Type 1/2), one big table pattern.\", tags:[\"learn\",\"build\"], trick:\"Star schema is the lingua franca of data warehousing. Draw it on a whiteboard in any interview.\", hours:\"5h\" },\n { title:\"Warehouse Project: Business Intelligence Platform\", desc:\"Raw events → Snowflake staging → dbt models → star schema → Power BI / Looker dashboard.\", tags:[\"project\",\"deploy\"], trick:\"A live BI dashboard on your portfolio speaks louder than a resume bullet. Make it beautiful.\", hours:\"4h\" },\n ]\n },\n {\n num: 22, title: \"System Design: Designing at Scale\",\n subtitle: \"System design is the final boss of senior tech interviews. Master it completely.\",\n days: [\n { title:\"System Design Fundamentals: CAP, Load Balancing, Caching\", desc:\"CAP theorem, consistency models, load balancers, Redis caching patterns, CDNs, sharding strategies.\", tags:[\"learn\"], trick:\"Grokking System Design (paid) or System Design Primer (GitHub, free). 2 hours minimum today.\", hours:\"5h\" },\n { title:\"Design Twitter/X: Real-Time Social Media at Scale\", desc:\"Feed generation (fan-out on write vs read), tweet storage, timeline service, notification system.\", tags:[\"learn\",\"practice\"], trick:\"In the interview: start with requirements → estimate scale → define APIs → component diagram → deep dive.\", hours:\"5h\" },\n { title:\"Design a URL Shortener + Design Netflix CDN\", desc:\"URL shortener: hashing, redirect, analytics. Netflix: CDN, adaptive bitrate, regional caching.\", tags:[\"learn\",\"practice\"], trick:\"URL shortener is the most common system design warm-up question. Practice 3 times by heart.\", hours:\"5h\" },\n { title:\"Design a Ride-Sharing System (Uber/Lyft)\", desc:\"Location streaming, matching algorithm, surge pricing, payment, notifications, trip management.\", tags:[\"learn\",\"practice\"], trick:\"This involves geospatial indexing (Geohash/QuadTree). Learn these — they appear in many rounds.\", hours:\"5h\" },\n { title:\"Mock System Design Interview\", desc:\"Record yourself designing 'Design a distributed message queue like Kafka' in 45 minutes.\", tags:[\"practice\",\"review\"], trick:\"Timing is everything. Whiteboard structure: Req → Scale → APIs → Design → Trade-offs → Q&A.\", hours:\"4h\" },\n ]\n },\n ]\n },\n {\n id: 5, label: \"Phase 5\", title: \"Portfolio & Job Ready\",\n weeks: \"23–26\", duration: \"4 weeks\",\n color: \"#f59e0b\", emoji: \"🚀\",\n desc: \"Polish your brand, build showcase projects, optimize resume for ATS, and launch the job hunt.\",\n chips: [\n {text:\"GitHub Portfolio\",color:\"#fcd34d\"},{text:\"Resume ATS\",color:\"#86efac\"},\n {text:\"LinkedIn\",color:\"#67e8f9\"},{text:\"Networking\",color:\"#d8b4fe\"},\n {text:\"Interview Prep\",color:\"#fca5a5\"}\n ],\n weeks_data: [\n {\n num: 23, title: \"Capstone Project 1: AI-Powered SaaS Application\",\n subtitle: \"The crown jewel of your portfolio. A full-stack AI product that shows everything.\",\n days: [\n { title:\"Define & Architect Your Capstone SaaS Idea\", desc:\"Pick a real problem. Design the architecture: React + FastAPI + PostgreSQL + ChromaDB + AWS + CI/CD.\", tags:[\"build\",\"project\"], trick:\"Best capstone idea formula: [Industry] + AI = [time/cost saved]. Example: Legal doc scanner → saves 10hrs/contract.\", hours:\"6h\" },\n { title:\"Build the AI Core: RAG + Custom Agent\", desc:\"Build the LLM backbone. Retrieval pipeline. Custom tools. Memory system. Test edge cases.\", tags:[\"build\",\"project\"], trick:\"Test with adversarial inputs. 'What happens if user uploads a corrupted file?' — handle it.\", hours:\"6h\" },\n { title:\"Build the Full-Stack UI + API\", desc:\"React frontend with real-time streaming responses (SSE). FastAPI backend with auth, rate limiting, billing.\", tags:[\"build\",\"project\"], trick:\"Streaming responses (token-by-token like ChatGPT) are a WOW factor. Implement it.\", hours:\"6h\" },\n { title:\"Docker + AWS Deployment + Domain + HTTPS\", desc:\"Dockerize everything. Deploy on AWS ECS. Register domain. CloudFront + SSL. Set up monitoring.\", tags:[\"deploy\",\"project\"], trick:\"Custom domain ($12/yr) makes it look 100× more professional. Do it. techyourname.ai\", hours:\"6h\" },\n { title:\"Write Documentation + Record Demo Video\", desc:\"README with architecture diagram. API docs. 3-minute demo video (Loom). Deploy to Product Hunt.\", tags:[\"project\",\"review\"], trick:\"A demo video watched by a recruiter while reviewing your resume = automatic callback. Make it.\", hours:\"5h\" },\n ]\n },\n {\n num: 24, title: \"Capstone Project 2 + Resume & LinkedIn Optimization\",\n subtitle: \"One more elite project + perfect your professional brand for maximum recruiter impact.\",\n days: [\n { title:\"Capstone Project 2: Data Pipeline + BI Dashboard\", desc:\"Full DE pipeline: Kafka → Spark → Snowflake → dbt → Grafana/Metabase. Pick a public dataset.\", tags:[\"build\",\"project\"], trick:\"Real-time dashboard showing live metrics. Business people LOVE dashboards. Makes tech tangible.\", hours:\"6h\" },\n { title:\"Build Your ATS-Optimized Resume\", desc:\"Use STAR format bullets with numbers. Keyword-align to 5 target JDs. Quantify everything. One page.\", tags:[\"build\",\"review\"], trick:\"Rule: if it doesn't have a number (%, $, ×, hr saved), rewrite it. Weak: 'built API'. Strong: 'built API serving 50K daily requests'.\", hours:\"5h\" },\n { title:\"LinkedIn Profile: All-Star Optimization\", desc:\"Professional headshot, bannerimage, headlineformula, featured section (demo videos), skills endorsements.\", tags:[\"build\",\"review\"], trick:\"LinkedIn headline formula: [Title] | [Top Skill] | [Top Skill] | [Value Prop]. 120 people search you per week after.\", hours:\"5h\" },\n { title:\"GitHub Profile Optimization: README, Pinned Repos\", desc:\"GitHub profile README with animated banner. Pin 6 best repos. Each repo: README + demo GIF + live URL.\", tags:[\"build\",\"review\"], trick:\"Animated GIF of your app working = 5× more clicks than text. Use ScreenToGif (free) to record.\", hours:\"4h\" },\n { title:\"Build a Personal Tech Blog (Dev.to / Hashnode)\", desc:\"Write 3 technical articles about things you built. 'How I built X with Y'. Publish and share.\", tags:[\"build\",\"review\"], trick:\"Writing about your projects = free, permanent, searchable social proof. Recruiters Google you.\", hours:\"4h\" },\n ]\n },\n {\n num: 25, title: \"Interview Preparation & Behavioral Mastery\",\n subtitle: \"Technical skills get you the interview. Behavioral skills get you the offer.\",\n days: [\n { title:\"LeetCode Grind: Top 75 List — Easy & Medium\", desc:\"60 LeetCode problems from Blind 75 list. 4 problems/session. Timer on. 45 min per problem max.\", tags:[\"practice\"], trick:\"Blind 75 list covers 90% of interview patterns. neetcode.io has solutions + explanations. Use it.\", hours:\"6h\" },\n { title:\"Behavioral Interview: STAR Stories for Top 20 Questions\", desc:\"Write STAR answers for: leadership, conflict, failure, success, ambiguity, influence without authority.\", tags:[\"practice\",\"review\"], trick:\"Record yourself answering 5 times. Energy on camera = confidence. Monotone = rejected.\", hours:\"5h\" },\n { title:\"Mock Technical Interview × 2 (Find a Partner or Pramp)\", desc:\"Use Pramp.com (free). 2 full 45-minute mock interviews. Feedback on problem-solving AND communication.\", tags:[\"practice\"], trick:\"Pramp pairs you with a peer who also needs practice. Free. Effective. Do 3 sessions this week.\", hours:\"5h\" },\n { title:\"Salary Negotiation Mastery\", desc:\"Research salaries (levels.fyi, Glassdoor, LinkedIn). Practice negotiation script. Counter-offer strategies.\", tags:[\"learn\",\"practice\"], trick:\"Never say a number first. Always say 'I want to make sure we're aligned on range'. Gets you +$15K on average.\", hours:\"4h\" },\n { title:\"Job Application Blitz: 20 Targeted Applications\", desc:\"Apply to 20 jobs. Tailored resume per company. Personalized cover note (3 sentences). Track in Airtable.\", tags:[\"practice\",\"review\"], trick:\"Quality × 20 beats quantity × 200. Spend 30 min per application customizing. Response rate 5× higher.\", hours:\"5h\" },\n ]\n },\n {\n num: 26, title: \"Networking & The Job Search Engine\",\n subtitle: \"80% of jobs are filled through referrals. Build your network systematically.\",\n days: [\n { title:\"Cold Outreach: LinkedIn DM Strategy at Scale\", desc:\"Message 10 engineers at target companies per day. Template: compliment work → specific question → coffee chat ask.\", tags:[\"practice\"], trick:\"Template: 'Hi [name], your [specific project/article] on [topic] was insightful. I'm transitioning into [role]. Would you share your experience?'\", hours:\"4h\" },\n { title:\"Tech Community: Discord, Twitter/X, Hackathons\", desc:\"Join 5 tech Discord communities. Post your projects on Twitter. Register for 1 hackathon.\", tags:[\"build\"], trick:\"Hackathon wins = automatic recruiter bait. Even participating shows drive. 48 hours of hustle = 6 months of signaling.\", hours:\"4h\" },\n { title:\"Open Source Contributions: Start Contributing\", desc:\"Find a beginner-friendly issue on GitHub (good-first-issue label). Fix a bug or add docs. Submit a PR.\", tags:[\"build\",\"project\"], trick:\"A merged PR to a famous repo (LangChain, FastAPI, Airflow) = name-drop in every interview.\", hours:\"5h\" },\n { title:\"Recruiting Agencies + Tech Events\", desc:\"Register with 3 recruiting agencies (TEKsystems, Robert Half, Toptal). Attend a local tech meetup.\", tags:[\"practice\"], trick:\"Recruiters at agencies work FOR you. They have JDs not on job boards. Worth 2 hours.\", hours:\"4h\" },\n { title:\"Review + Reflect + Plan Next Phase\", desc:\"Review all projects. Update portfolio. Set interview targets for Month 7+. Celebrate wins (seriously).\", tags:[\"review\"], trick:\"Track: applications sent, callbacks, interviews, offers. Data-driven job search wins.\", hours:\"3h\" },\n ]\n },\n ]\n },\n {\n id: 6, label: \"Phase 6\", title: \"Specialization & Mastery\",\n weeks: \"27–36\", duration: \"10 weeks\",\n color: \"#ef4444\", emoji: \"🏆\",\n desc: \"Go deep on your chosen specialty. Get certified. Contribute to open source. Land the $120K–$200K+ role.\",\n chips: [\n {text:\"AWS Cert\",color:\"#fcd34d\"},{text:\"System Design\",color:\"#a5b4fc\"},\n {text:\"Open Source\",color:\"#86efac\"},{text:\"Specialization\",color:\"#d8b4fe\"},\n {text:\"Senior Path\",color:\"#fca5a5\"}\n ],\n weeks_data: [\n {\n num: 27, title: \"AWS Certifications: Solutions Architect Associate\",\n subtitle: \"AWS SAA-C03 is the #1 most-cited cert in cloud job descriptions. Pass it this week.\",\n days: [\n { title:\"AWS SAA Exam Guide: Domains & Weightings\", desc:\"Map exam domains: Resilient Architectures (26%), High-Performing (24%), Security (30%), Cost-Optimized (20%).\", tags:[\"learn\",\"review\"], trick:\"Stephane Maarek's Udemy course (SAA-C03) is used by 1M+ students. 68 hours, covers everything.\", hours:\"6h\" },\n { title:\"Practice Exams: 300+ questions with explanations\", desc:\"Jon Bonso's practice tests (6 full exams × 65 questions). Review every wrong answer. Build weakness list.\", tags:[\"practice\"], trick:\"Target: 85%+ average on practice tests before sitting exam. This is the benchmark.\", hours:\"6h\" },\n { title:\"Hands-on Labs: Build the Reference Architectures\", desc:\"Build every reference architecture from the exam: VPC with NAT, HA with ASG+ALB, serverless, multi-region.\", tags:[\"build\",\"learn\"], trick:\"Touching the services is 3× faster learning than reading about them. Spend half the day in AWS console.\", hours:\"6h\" },\n { title:\"Book the Exam + Final Review\", desc:\"Schedule at Pearson VUE. Final review of weak areas. 2 hours of practice test. Rest and sleep well.\", tags:[\"review\",\"practice\"], trick:\"$150 exam fee. If you've done the work, you pass. Success rate with Maarek course: 90%+.\", hours:\"5h\" },\n { title:\"Attempt Exam / Pre-Work for Advanced Cloud\", desc:\"Sit the SAA exam (or final prep). If passed — celebrate. Start reading for Data Analytics Specialty.\", tags:[\"practice\",\"review\"], trick:\"Post your cert on LinkedIn the minute you pass. Instant recruiter messages flood in.\", hours:\"3h\" },\n ]\n },\n {\n num: 28, title: \"Advanced Python: Async, Performance, Architecture\",\n subtitle: \"Senior engineers write Production-grade Python. Go beyond syntax to architecture.\",\n days: [\n { title:\"Async Python: asyncio, aiohttp, Concurrent Futures\", desc:\"Event loops, coroutines, Tasks, gather, aiohttp for async HTTP. Benchmark vs synchronous.\", tags:[\"learn\",\"build\"], trick:\"Async Python can handle 1000 concurrent connections vs 10 synchronous. Know when to use each.\", hours:\"5h\" },\n { title:\"Python Performance: Profiling + Optimization\", desc:\"cProfile, line_profiler, memory_profiler. Optimize a slow function 10× using profiling insights.\", tags:[\"learn\",\"practice\"], trick:\"'Make it work, make it right, make it fast' — Donald Knuth. Profile BEFORE you optimize.\", hours:\"5h\" },\n { title:\"Python Architecture: Clean Architecture, SOLID Principles\", desc:\"Dependency injection, repository pattern, service layer, domain objects. Implement for your FastAPI app.\", tags:[\"learn\",\"build\"], trick:\"Clean Architecture makes code testable and maintainable. Senior interview: 'How do you structure a large Python project?'\", hours:\"5h\" },\n { title:\"Python Packaging: Build and Publish Your Own Library\", desc:\"pyproject.toml, build, twine. Publish a utility package to PyPI. Set up CI for automated releases.\", tags:[\"build\",\"deploy\"], trick:\"A package you published on PyPI (even 50 downloads) = senior-level curiosity signal.\", hours:\"5h\" },\n { title:\"Advanced Testing: Property-Based Testing + Load Testing\", desc:\"Hypothesis library (property-based), Locust for load testing. Test your API under 10,000 concurrent users.\", tags:[\"build\",\"practice\"], trick:\"Locust load test shows your API's breaking point. If you know it, you can fix it. No surprises in prod.\", hours:\"4h\" },\n ]\n },\n {\n num: 29, title: \"Security Engineering: DevSecOps & Threat Modeling\",\n subtitle: \"Security is now everyone's job. Security-aware engineers earn 20% more.\",\n days: [\n { title:\"OWASP Top 10: Web Application Security Essentials\", desc:\"SQL injection, XSS, IDOR, SSRF, broken auth. Exploit each in a lab environment (WebGoat, DVWA).\", tags:[\"learn\",\"practice\"], trick:\"Understanding attacks makes you better at defense. Practice breaking things safely.\", hours:\"5h\" },\n { title:\"Secrets Management: Vault, AWS Secrets Manager\", desc:\"Never hardcode secrets. Use Vault or AWS Secrets Manager. Rotate secrets automatically.\", tags:[\"build\",\"learn\"], trick:\"Assume your code will be leaked. If secrets are in env vars: bad. If they're in Vault: safe.\", hours:\"5h\" },\n { title:\"Container Security: Image Scanning, Runtime Security\", desc:\"Trivy for image scanning. Falco for runtime anomaly detection. OPA Gatekeeper for K8s policies.\", tags:[\"build\",\"learn\"], trick:\"Trivy scans Docker images for CVEs in seconds. Add it to your CI pipeline. 30 min setup.\", hours:\"5h\" },\n { title:\"Compliance as Code: CIS Benchmarks, SAST, DAST\", desc:\"Checkov/tfsec for IaC scanning. SonarQube for SAST. OWASP ZAP for DAST automation.\", tags:[\"build\",\"learn\"], trick:\"'Shift left security' = find bugs during development not production. This phrase impresses interviewers.\", hours:\"5h\" },\n { title:\"Security Project: Secure Your Capstone App\", desc:\"Full security audit: SAST + DAST + container scan + secret management + WAF + security headers.\", tags:[\"project\",\"review\"], trick:\"Add a 'Security' section to your README. 'Application secured against OWASP Top 10' = rare resume flex.\", hours:\"4h\" },\n ]\n },\n {\n num: 30, title: \"Go Language: The Cloud-Native Language\",\n subtitle: \"Go powers Kubernetes, Docker, Terraform, and most cloud-native tools. Learn it.\",\n days: [\n { title:\"Go Fundamentals: Syntax, Goroutines, Channels\", desc:\"Go tour (tour.golang.org). Goroutines, channels, select statement, WaitGroups. Concurrency model.\", tags:[\"learn\",\"build\"], trick:\"Go's concurrency model (goroutines) is simpler than Python's threading. Mental model: goroutine = lightweight thread.\", hours:\"5h\" },\n { title:\"Go Web: net/http, Gin Framework, REST API\", desc:\"Build REST API with Gin. Middleware, authentication, routing, request validation. Benchmark vs Python.\", tags:[\"build\",\"learn\"], trick:\"Go API handles 5× more RPS than Python for the same hardware. Benchmark and show the numbers.\", hours:\"5h\" },\n { title:\"Go + gRPC: High-Performance Microservices\", desc:\"Protocol Buffers, gRPC service definition, client/server, streaming. Build a gRPC service.\", tags:[\"build\",\"learn\"], trick:\"gRPC is used between microservices at Google/Netflix. Go + gRPC = the canonical microservice pattern.\", hours:\"5h\" },\n { title:\"Go CLI Tools: Build Production CLIs with Cobra\", desc:\"Build a CLI tool with Cobra. Subcommands, flags, config files, colored output. Publish to GitHub.\", tags:[\"build\",\"project\"], trick:\"Many DevOps tools start as CLIs. kubectl, terraform, git — all CLIs. Build one, learn the pattern.\", hours:\"5h\" },\n { title:\"Go Project: Build a Load Balancer from Scratch\", desc:\"Round-robin, least-connections, health checking, connection pooling. ~500 lines of idiomatic Go.\", tags:[\"project\",\"build\"], trick:\"This demonstrates deep systems understanding. 'I built a load balancer' is a conversation stopper.\", hours:\"4h\" },\n ]\n },\n {\n num: 31, title: \"Advanced System Design + Distributed Systems\",\n subtitle: \"The final level. Staff/Principal and Architect roles live here.\",\n days: [\n { title:\"Distributed Consensus: Raft, Paxos, Leader Election\", desc:\"Understand Raft consensus algorithm. etcd (used in Kubernetes). Leader election patterns.\", tags:[\"learn\"], trick:\"Read the Raft paper (students.raft.github.io). The animated visualization clarifies everything.\", hours:\"5h\" },\n { title:\"Event-Driven Architecture: CQRS + Event Sourcing\", desc:\"Command/Query Responsibility Segregation. Event sourcing (Axon, EventStoreDB). Eventual consistency.\", tags:[\"learn\",\"build\"], trick:\"CQRS + Event Sourcing powers Shopify's checkout. Knowing it = Staff-level signal.\", hours:\"5h\" },\n { title:\"Design Google Drive + Design WhatsApp\", desc:\"File storage, chunking, collaboration, conflict resolution. Messaging: delivery, read receipts, E2E encryption.\", tags:[\"practice\",\"learn\"], trick:\"These two cover: blob storage, WebSocket, message queues, consistency. Max coverage for one session.\", hours:\"5h\" },\n { title:\"Design a Global Rate Limiter + Distributed Cache\", desc:\"Token bucket, sliding window. Redis Cluster, consistent hashing, cache eviction policies.\", tags:[\"practice\",\"learn\"], trick:\"Rate limiter design is asked at Stripe, Cloudflare, AWS. Cache design at every senior distributed systems round.\", hours:\"5h\" },\n { title:\"Mock Staff-Level Design Interview + Full Review\", desc:\"Mock: Design a global-scale data platform (warehouse + real-time + AI). Record and review.\", tags:[\"practice\",\"review\"], trick:\"Staff engineers talk about trade-offs, not just solutions. Practice ending: 'If I had 6 months, I'd also add...'\", hours:\"4h\" },\n ]\n },\n {\n num: 32, title: \"Open Source + Community + Advanced Specialization\",\n subtitle: \"The final acceleration. Build your network, your reputation, and your expertise.\",\n days: [\n { title:\"Choose Your Specialization Track: AI Engineer / Data Engineer / Cloud Architect\", desc:\"Review job market data. Choose your primary track. Set 3 target companies. Plan next 6 months.\", tags:[\"review\",\"learn\"], trick:\"T-shaped skills: be deep in 1 (primary), competent in 3 (secondary). Recruiters hire for depth.\", hours:\"4h\" },\n { title:\"Open Source: Contribute to a Top Python/AI Project\", desc:\"Pick LangChain, FastAPI, Airflow, or PyTorch. Find an issue. Fix it. Submit quality PR.\", tags:[\"build\",\"project\"], trick:\"PR merged to a top-100 GitHub repo = conversation starter in every interview for 2 years.\", hours:\"6h\" },\n { title:\"Technical Writing: Publish Deep-Dive Article\", desc:\"Write a 2,000+ word technical article. 'How I built [X] with [Y]. Performance, trade-offs, learnings.'\", tags:[\"build\",\"review\"], trick:\"Medium algorithm rewards articles with time-on-page. Diagrams + code = people stay, read, follow.\", hours:\"5h\" },\n { title:\"Conference Talk Proposal + Community Teaching\", desc:\"Submit a talk proposal to PyData, KubeCon, AI Summit, or local meetup. Write the abstract.\", tags:[\"build\"], trick:\"Speaking at a conference = 1000 LinkedIn followers in a week. Submit 5 conferences simultaneously.\", hours:\"4h\" },\n { title:\"Final Review: Build Your Personal Brand OS\", desc:\"Audit everything: GitHub, LinkedIn, portfolio, resume, blog. Update all with new skills. Plan Month 9+.\", tags:[\"review\"], trick:\"Google yourself. What do you find? By now: GitHub projects, LinkedIn, articles, maybe a GitHub star. That's your brand.\", hours:\"5h\" },\n ]\n },\n ]\n },\n];\n\nconst MILESTONES = [\n { phase: \"Month 2\", title: \"First GitHub Push\", salary: \"Portfolio Starts\", color: \"#6378ff\", phase_n: 1 },\n { phase: \"Month 3\", title: \"Live Full-Stack App\", salary: \"Junior Ready\", color: \"#6378ff\", phase_n: 1 },\n { phase: \"Month 5\", title: \"Cloud + Docker\", salary: \"$80K–$95K\", color: \"#00d4ff\", phase_n: 2 },\n { phase: \"Month 6\", title: \"K8s + IaC + CI/CD\", salary: \"$95K–$115K\", color: \"#00d4ff\", phase_n: 2 },\n { phase: \"Month 8\", title: \"AI Engineer Ready\", salary: \"$120K–$150K\", color: \"#a855f7\", phase_n: 3 },\n { phase: \"Month 9\", title: \"RAG + Agents\", salary: \"$140K–$180K\", color: \"#a855f7\", phase_n: 3 },\n { phase: \"Month 10\", title: \"Data Engineer\", salary: \"$130K–$165K\", color: \"#10b981\", phase_n: 4 },\n { phase: \"Month 11\", title: \"System Design Ready\", salary: \"$150K–$200K+\", color: \"#f59e0b\", phase_n: 5 },\n { phase: \"Month 12\", title: \"First Offer\", salary: \"🎉 JOB UNLOCKED\", color: \"#ef4444\", phase_n: 6 },\n];\n\n// ═══════════════════════════════════════════════════════════════\n// STATE\n// ═══════════════════════════════════════════════════════════════\nlet checkedTasks = {};\nlet checkedSubs = {}; // sub-task checkboxes inside expanded days\nlet openWeeks = {};\nlet openDays = {}; // which day panels are expanded\nlet activePhase = 1;\nlet streak = 0;\nlet lastCheckDate = null;\n\nfunction loadState() {\n try {\n const saved = localStorage.getItem('techMasteryState');\n if (saved) {\n const s = JSON.parse(saved);\n checkedTasks = s.checkedTasks || {};\n checkedSubs = s.checkedSubs || {};\n openWeeks = s.openWeeks || {};\n openDays = s.openDays || {};\n streak = s.streak || 0;\n lastCheckDate = s.lastCheckDate || null;\n }\n } catch(e) { console.warn('State load failed', e); }\n}\nfunction saveProgress() {\n const state = { checkedTasks, checkedSubs, openWeeks, openDays, streak, lastCheckDate };\n localStorage.setItem('techMasteryState', JSON.stringify(state));\n const toast = document.getElementById('toast');\n toast.classList.add('show');\n setTimeout(() => toast.classList.remove('show'), 2500);\n}\n\n// ═══════════════════════════════════════════════════════════════\n// DAY DETAIL GENERATOR\n// ═══════════════════════════════════════════════════════════════\nconst RESOURCE_MAP = {\n 'Python': [{icon:'📗',title:'Python Official Docs',url:'https://docs.python.org/3/',type:'docs'},{icon:'🎬',title:'CS50P – Python (Free)',url:'https://cs50.harvard.edu/python/',type:'course'},{icon:'📰',title:'Real Python Tutorials',url:'https://realpython.com',type:'articles'}],\n 'Git': [{icon:'📘',title:'Pro Git Book (Free)',url:'https://git-scm.com/book',type:'book'},{icon:'🎬',title:'Git & GitHub Crash Course',url:'https://www.youtube.com/watch?v=RGOj5yH7evk',type:'video'},{icon:'🧪',title:'Learn Git Branching (Interactive)',url:'https://learngitbranching.js.org',type:'interactive'}],\n 'Binary': [{icon:'🎬',title:'Crash Course CS – Binary',url:'https://www.youtube.com/watch?v=LpuPe81bc2w',type:'video'},{icon:'📘',title:'CS50 Week 0 Notes',url:'https://cs50.harvard.edu/x/2024/notes/0/',type:'notes'}],\n 'SQL': [{icon:'🧪',title:'SQLZoo (Interactive SQL)',url:'https://sqlzoo.net',type:'interactive'},{icon:'📗',title:'PostgreSQL Official Docs',url:'https://www.postgresql.org/docs/',type:'docs'},{icon:'🎬',title:'SQL Tutorial for Beginners',url:'https://www.youtube.com/watch?v=HXV3zeQKqGY',type:'video'}],\n 'MongoDB': [{icon:'📗',title:'MongoDB Docs',url:'https://www.mongodb.com/docs/',type:'docs'},{icon:'🎬',title:'MongoDB Crash Course',url:'https://www.youtube.com/watch?v=ofme2o29ngU',type:'video'}],\n 'HTML': [{icon:'📗',title:'MDN Web Docs – HTML',url:'https://developer.mozilla.org/en-US/docs/Web/HTML',type:'docs'},{icon:'🎬',title:'HTML Full Course (freeCodeCamp)',url:'https://www.youtube.com/watch?v=pQN-pnXPaVg',type:'video'}],\n 'CSS': [{icon:'📗',title:'MDN – Flexbox Guide',url:'https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout',type:'docs'},{icon:'🧪',title:'CSS Grid Garden',url:'https://cssgridgarden.com',type:'interactive'}],\n 'JavaScript': [{icon:'📗',title:'javascript.info (The Modern JS Tutorial)',url:'https://javascript.info',type:'book'},{icon:'🎬',title:'JS Crash Course – Traversy Media',url:'https://www.youtube.com/watch?v=hdI2bqOjy3c',type:'video'}],\n 'React': [{icon:'📗',title:'React Official Docs (New)',url:'https://react.dev',type:'docs'},{icon:'🎬',title:'React Full Course (freeCodeCamp)',url:'https://www.youtube.com/watch?v=bMknfKXIFA8',type:'video'},{icon:'🧪',title:'Scrimba React Course (Free)',url:'https://scrimba.com/learn/learnreact',type:'interactive'}],\n 'FastAPI': [{icon:'📗',title:'FastAPI Official Docs',url:'https://fastapi.tiangolo.com',type:'docs'},{icon:'🎬',title:'FastAPI Tutorial – Tech With Tim',url:'https://www.youtube.com/watch?v=7t2alSnE2-I',type:'video'}],\n 'LeetCode': [{icon:'🧪',title:'NeetCode 150 List',url:'https://neetcode.io/practice',type:'practice'},{icon:'🎬',title:'NeetCode YouTube Solutions',url:'https://www.youtube.com/@NeetCode',type:'video'},{icon:'🧪',title:'LeetCode (Login → Problems)',url:'https://leetcode.com/problemset/',type:'practice'}],\n 'AWS': [{icon:'📗',title:'AWS Official Documentation',url:'https://docs.aws.amazon.com',type:'docs'},{icon:'🎬',title:'AWS Course – Stephane Maarek (Udemy)',url:'https://www.udemy.com/course/aws-certified-solutions-architect-associate-saa-c03/',type:'course'},{icon:'🧪',title:'AWS Free Tier Console',url:'https://aws.amazon.com/free/',type:'tool'}],\n 'Docker': [{icon:'📗',title:'Docker Official Docs',url:'https://docs.docker.com',type:'docs'},{icon:'🎬',title:'Docker Tutorial – TechWorld with Nana',url:'https://www.youtube.com/watch?v=3c-iBn73dDE',type:'video'},{icon:'🧪',title:'Play With Docker (Free Browser Lab)',url:'https://labs.play-with-docker.com',type:'tool'}],\n 'Kubernetes': [{icon:'📗',title:'Kubernetes Official Docs',url:'https://kubernetes.io/docs/',type:'docs'},{icon:'🎬',title:'K8s Tutorial – TechWorld with Nana',url:'https://www.youtube.com/watch?v=X48VuDVv0do',type:'video'},{icon:'🧪',title:'Killercoda K8s Labs (Free)',url:'https://killercoda.com/scenarios',type:'tool'}],\n 'Terraform': [{icon:'📗',title:'Terraform Official Docs',url:'https://developer.hashicorp.com/terraform/docs',type:'docs'},{icon:'🎬',title:'Terraform Tutorial – TechWorld with Nana',url:'https://www.youtube.com/watch?v=l5k1ai_GBDE',type:'video'}],\n 'Prometheus': [{icon:'📗',title:'Prometheus Docs',url:'https://prometheus.io/docs/',type:'docs'},{icon:'🎬',title:'Grafana + Prometheus Setup',url:'https://www.youtube.com/watch?v=9TJx7QTrTyo',type:'video'}],\n 'NumPy': [{icon:'📗',title:'NumPy Quickstart',url:'https://numpy.org/doc/stable/user/quickstart.html',type:'docs'},{icon:'🎬',title:'NumPy Tutorial – Keith Galli',url:'https://www.youtube.com/watch?v=QUT1VHiLmmI',type:'video'}],\n 'PyTorch': [{icon:'📗',title:'PyTorch Official Tutorials',url:'https://pytorch.org/tutorials/',type:'docs'},{icon:'🎬',title:'Neural Networks – 3Blue1Brown',url:'https://www.youtube.com/playlist?list=PLZHQObOWTQDNU6R1_67000Dx_ZCJB-3pi',type:'video'},{icon:'🧪',title:'Google Colab (Free GPU)',url:'https://colab.research.google.com',type:'tool'}],\n 'LLM': [{icon:'🎬',title:'Andrej Karpathy – Let’s build GPT',url:'https://www.youtube.com/watch?v=kCc8FmEb1nY',type:'video'},{icon:'📗',title:'HuggingFace Course (Free)',url:'https://huggingface.co/learn/nlp-course',type:'course'},{icon:'📗',title:'OpenAI API Docs',url:'https://platform.openai.com/docs',type:'docs'}],\n 'LangChain': [{icon:'📗',title:'LangChain Docs',url:'https://python.langchain.com/docs/',type:'docs'},{icon:'🎬',title:'LangChain Crash Course',url:'https://www.youtube.com/watch?v=lG7Uxts9SXs',type:'video'},{icon:'📗',title:'DeepLearning.AI LangChain Course',url:'https://learn.deeplearning.ai/langchain',type:'course'}],\n 'RAG': [{icon:'📗',title:'RAG Paper (original)',url:'https://arxiv.org/abs/2005.11401',type:'paper'},{icon:'🎬',title:'RAG from Scratch – LangChain',url:'https://www.youtube.com/watch?v=sVcwVQRHIc8',type:'video'}],\n 'Spark': [{icon:'📗',title:'PySpark Docs',url:'https://spark.apache.org/docs/latest/api/python/',type:'docs'},{icon:'🧪',title:'Databricks Community Edition',url:'https://community.cloud.databricks.com',type:'tool'},{icon:'🎬',title:'PySpark Tutorial',url:'https://www.youtube.com/watch?v=_C8kWso4ne4',type:'video'}],\n 'Kafka': [{icon:'📗',title:'Kafka Official Docs',url:'https://kafka.apache.org/documentation/',type:'docs'},{icon:'🎬',title:'Kafka Tutorial – Amigoscode',url:'https://www.youtube.com/watch?v=SqVfCyfCJqw',type:'video'}],\n 'Airflow': [{icon:'📗',title:'Apache Airflow Docs',url:'https://airflow.apache.org/docs/',type:'docs'},{icon:'🎬',title:'Airflow Tutorial for Beginners',url:'https://www.youtube.com/watch?v=K9AnJ9_ZAXE',type:'video'}],\n 'default': [{icon:'📗',title:'Official Docs (search topic)',url:'https://devdocs.io',type:'docs'},{icon:'🎬',title:'YouTube – search the topic + tutorial',url:'https://youtube.com',type:'video'},{icon:'🧪',title:'freeCodeCamp (Free Courses)',url:'https://www.freecodecamp.org',type:'interactive'}]\n};\n\nconst CMD_MAP = {\n 'Install': ['pip install --upgrade pip','python --version','git --version','node --version'],\n 'Git': ['git init','git add .','git commit -m \"feat: initial commit\"','git push origin main'],\n 'Python': ['python -m venv venv','source venv/bin/activate # Mac/Linux','venv\\\\Scripts\\\\activate # Windows','pip install -r requirements.txt'],\n 'SQL': ['psql -U postgres','CREATE DATABASE mydb;','\\\\c mydb','\\\\dt -- list tables'],\n 'Docker': ['docker build -t myapp:latest .','docker run -p 8000:8000 myapp:latest','docker compose up -d','docker ps'],\n 'AWS': ['aws configure','aws s3 ls','aws ec2 describe-instances','aws iam list-users'],\n 'Kubernetes': ['minikube start','kubectl get pods -A','kubectl apply -f deployment.yaml','kubectl get svc'],\n 'Terraform': ['terraform init','terraform plan','terraform apply -auto-approve','terraform destroy'],\n 'FastAPI': ['pip install fastapi uvicorn','uvicorn main:app --reload --port 8000','curl http://localhost:8000/docs'],\n 'LangChain': ['pip install langchain openai chromadb','export OPENAI_API_KEY=\"sk-...\"','python agent.py'],\n 'Spark': ['pip install pyspark','pyspark --version','spark-submit --master local[*] job.py'],\n 'Kafka': ['docker compose up -d kafka zookeeper','kafka-topics.sh --create --topic events --bootstrap-server localhost:9092','kafka-console-producer.sh --topic events --bootstrap-server localhost:9092'],\n 'PyTorch': ['pip install torch torchvision','python -c \"import torch; print(torch.__version__)\"','python train.py --epochs 10'],\n 'React': ['npx create-react-app my-app','cd my-app && npm start','npm run build'],\n 'test': ['pytest -v','pytest --cov=. --cov-report=html','black . && flake8 .'],\n 'deploy': ['git push origin main','vercel --prod','docker push myrepo/myapp:latest']\n};\n\nfunction pickResources(title) {\n const keys = Object.keys(RESOURCE_MAP).filter(k => k !== 'default');\n const matches = keys.filter(k => title.toLowerCase().includes(k.toLowerCase()));\n if (matches.length === 0) return RESOURCE_MAP['default'];\n // merge up to 3 unique resources from matched categories\n const out = [];\n for (const m of matches) {\n for (const r of RESOURCE_MAP[m]) {\n if (!out.find(x => x.title === r.title)) out.push(r);\n if (out.length >= 4) break;\n }\n if (out.length >= 4) break;\n }\n return out.length ? out : RESOURCE_MAP['default'];\n}\n\nfunction pickCommands(title, tags) {\n const titleUp = title.toUpperCase();\n const keys = Object.keys(CMD_MAP);\n const match = keys.find(k => titleUp.includes(k.toUpperCase()));\n if (match) return CMD_MAP[match];\n if (tags.includes('deploy')) return CMD_MAP['deploy'];\n if (tags.includes('build')) return CMD_MAP['Python'];\n if (tags.includes('test')) return CMD_MAP['test'];\n return ['# Open your editor and follow the tasks below','# Each learning block = 1 Pomodoro (25 min)'];\n}\n\nfunction fmtTime(h) {\n const hh = Math.floor(h);\n const mm = Math.round((h - hh) * 60);\n return `${String(hh).padStart(2,'0')}:${String(mm).padStart(2,'0')}`;\n}\n\nfunction genSchedule(hrs, tags) {\n const blocks = [];\n let t = 0;\n blocks.push({time: fmtTime(t)+' – '+fmtTime(t+0.25), task: '🧠 Anki review (yesterday\\'s cards) + skim today\\'s goal'});\n t += 0.25;\n if (tags.includes('learn')) {\n const dur = Math.min(1.5, hrs * 0.35);\n blocks.push({time: fmtTime(t)+' – '+fmtTime(t+dur), task: '📖 Study: read docs / watch tutorial (take notes in own words)'});\n t += dur;\n blocks.push({time: fmtTime(t)+' – '+fmtTime(t+0.25), task: '☕ Break — stand up, stretch, 5 deep breaths'});\n t += 0.25;\n }\n if (tags.includes('build') || tags.includes('project')) {\n const dur = Math.min(2.5, hrs * 0.45);\n blocks.push({time: fmtTime(t)+' – '+fmtTime(t+dur), task: '💻 Code: implement from scratch — no copy-paste'});\n t += dur;\n blocks.push({time: fmtTime(t)+' – '+fmtTime(t+0.25), task: '☕ Break'});\n t += 0.25;\n }\n if (tags.includes('practice')) {\n const dur = Math.min(1.5, hrs * 0.35);\n blocks.push({time: fmtTime(t)+' – '+fmtTime(t+dur), task: '🏋️ Practice: solve exercises / LeetCode problems'});\n t += dur;\n blocks.push({time: fmtTime(t)+' – '+fmtTime(t+0.25), task: '☕ Break'});\n t += 0.25;\n }\n if (tags.includes('deploy')) {\n const dur = Math.min(1, hrs * 0.25);\n blocks.push({time: fmtTime(t)+' – '+fmtTime(t+dur), task: '🚀 Deploy: push to cloud, verify live URL works'});\n t += dur;\n }\n if (tags.includes('review')) {\n blocks.push({time: fmtTime(t)+' – '+fmtTime(t+0.5), task: '🔍 Review: flip through notes, summarize key learnings'});\n t += 0.5;\n }\n blocks.push({time: 'End of session', task: '🃏 Create 3–5 Anki cards • git commit • update tracker'});\n return blocks;\n}\n\nfunction genSubTasks(day) {\n // Split desc by '. ' or ', ' to form independent action items\n const raw = day.desc.split(/(?:\\. |, )/).filter(s => s.trim().length > 6);\n const items = [];\n // Always prepend a warm-up task\n items.push('Open your editor + terminal. Pull any pending git changes.');\n raw.forEach(r => {\n const t = r.trim().replace(/\\.$/, '');\n if (t.length > 8 && items.length < 7) items.push(t);\n });\n // Always end with a reflection task\n items.push('Feynman check: explain today\\'s main concept aloud in 60 seconds.');\n return items.slice(0, 7);\n}\n\nfunction genDeliverable(day) {\n const tag = day.tags[0] || 'learn';\n const deliverables = {\n build: `A working <strong>${day.title.split(':')[0]}</strong> implementation pushed to your GitHub repo with a README describing what it does.`,\n deploy: `A <strong>live URL</strong> you can share with anyone — paste it in your portfolio README right now.`,\n project: `A <strong>completed project</strong> with code on GitHub + a README + (ideally) a live demo link.`,\n practice: `At least <strong>3 solved problems</strong> with time complexity analysis written in comments.`,\n learn: `A page of <strong>handwritten or typed notes</strong> + 5 Anki cards added to your deck.`,\n review: `A <strong>summary document</strong> (even bullet points) of everything covered this week.`,\n default: `Evidence of today's work pushed to GitHub — commit message describes what you built or learned.`\n };\n return deliverables[tag] || deliverables.default;\n}\n\nfunction renderDayExpand(day, phaseColor, taskId) {\n const schedule = genSchedule(parseFloat(day.hours) || 4, day.tags);\n const subtasks = genSubTasks(day);\n const resources = pickResources(day.title);\n const commands = pickCommands(day.title, day.tags);\n const deliv = genDeliverable(day);\n\n const schedHTML = schedule.map(b =>\n `<div class=\"sched-block\"><span class=\"sched-time\">${b.time}</span><span class=\"sched-task\">${b.task}</span></div>`\n ).join('');\n\n const subHTML = subtasks.map((t, si) => {\n const sid = `${taskId}_s${si}`;\n const isDone = !!checkedSubs[sid];\n return `<div class=\"subtask-item\">\n <div class=\"sub-check ${isDone?'done':''}\" id=\"subc-${sid}\" onclick=\"toggleSub('${sid}')\">${isDone?'✓':''}</div>\n <span class=\"sub-text ${isDone?'done':''}\" id=\"subt-${sid}\">${t}</span>\n </div>`;\n }).join('');\n\n const resHTML = resources.map(r =>\n `<div class=\"res-item\">\n <span class=\"res-icon\">${r.icon}</span>\n <div class=\"res-info\">\n <div class=\"res-title\">${r.title}</div>\n <div class=\"res-type\">${r.type}</div>\n </div>\n <a href=\"${r.url}\" target=\"_blank\" rel=\"noopener\" class=\"res-badge\" onclick=\"event.stopPropagation()\">Open →</a>\n </div>`\n ).join('');\n\n const cmdHTML = commands.map(c =>\n `<div class=\"cmd-block\"><span class=\"cmd-prompt\">$</span><span>${c}</span></div>`\n ).join('');\n\n return `\n <div class=\"expand-grid\">\n <div class=\"expand-section\">\n <div class=\"expand-sec-title\">⏱ Today's Schedule (${day.hours} total)</div>\n <div class=\"sched-list\">${schedHTML}</div>\n </div>\n <div class=\"expand-section\">\n <div class=\"expand-sec-title\">✅ Step-by-Step Tasks</div>\n <div class=\"subtask-list\">${subHTML}</div>\n </div>\n <div class=\"expand-section\">\n <div class=\"expand-sec-title\">💻 Commands to Run</div>\n <div class=\"cmd-wrap\">${cmdHTML}</div>\n </div>\n <div class=\"expand-section\">\n <div class=\"expand-sec-title\">📚 Resources</div>\n <div class=\"res-list\">${resHTML}</div>\n </div>\n <div class=\"expand-section full\">\n <div class=\"expand-sec-title\">🎯 Today's Deliverable</div>\n <div class=\"deliverable-box\"><div class=\"del-label\">By end of session you should have:</div>${deliv}</div>\n </div>\n </div>`;\n}\n\n// ═══════════════════════════════════════════════════════════════\n// TASK ID GENERATION\n// ═══════════════════════════════════════════════════════════════\nfunction getTaskId(phaseId, weekNum, dayIdx) {\n return `p${phaseId}_w${weekNum}_d${dayIdx}`;\n}\n\n// ═══════════════════════════════════════════════════════════════\n// STATS COMPUTATION\n// ═══════════════════════════════════════════════════════════════\nfunction computeStats() {\n let total = 0;\n let done = 0;\n let hoursTotal = 0;\n PHASES.forEach(phase => {\n phase.weeks_data.forEach(week => {\n week.days.forEach((day, di) => {\n const id = getTaskId(phase.id, week.num, di);\n const hrs = parseFloat(day.hours) || 0;\n total++;\n if (checkedTasks[id]) { done++; hoursTotal += hrs; }\n });\n });\n });\n return { total, done, hoursTotal: Math.round(hoursTotal) };\n}\n\nfunction updateStats() {\n const { total, done, hoursTotal } = computeStats();\n const pct = total > 0 ? Math.round((done / total) * 100) : 0;\n document.getElementById('progressPct').textContent = pct + '%';\n document.getElementById('progressBar').style.width = pct + '%';\n document.getElementById('completedTasks').textContent = done;\n document.getElementById('totalTasks').textContent = total;\n document.getElementById('streakCount').textContent = streak;\n document.getElementById('hoursLogged').textContent = hoursTotal;\n document.getElementById('headerProgress').textContent = pct + '% Complete';\n\n // Milestone unlocks\n const unlockedPhases = new Set();\n PHASES.forEach(phase => {\n let phDone = 0, phTotal = 0;\n phase.weeks_data.forEach(week => {\n week.days.forEach((day, di) => {\n phTotal++;\n if (checkedTasks[getTaskId(phase.id, week.num, di)]) phDone++;\n });\n });\n if (phDone / phTotal >= 0.5) unlockedPhases.add(phase.id);\n });\n document.querySelectorAll('.milestone').forEach((el, i) => {\n const m = MILESTONES[i];\n if (m && unlockedPhases.has(m.phase_n)) {\n el.classList.add('unlocked');\n el.querySelector('.milestone-lock').textContent = '🏆';\n }\n });\n\n updateWeekBars();\n}\n\nfunction updateWeekBars() {\n PHASES.forEach(phase => {\n phase.weeks_data.forEach(week => {\n let done = 0;\n week.days.forEach((day, di) => {\n if (checkedTasks[getTaskId(phase.id, week.num, di)]) done++;\n });\n const pct = Math.round((done / week.days.length) * 100);\n const bar = document.getElementById(`wbar-${phase.id}-${week.num}`);\n const pctEl = document.getElementById(`wpct-${phase.id}-${week.num}`);\n if (bar) bar.style.width = pct + '%';\n if (pctEl) pctEl.textContent = pct + '%';\n\n const card = document.getElementById(`wcard-${phase.id}-${week.num}`);\n if (card) {\n if (done === week.days.length) card.classList.add('completed');\n else card.classList.remove('completed');\n }\n });\n });\n}\n\n// ═══════════════════════════════════════════════════════════════\n// RENDER\n// ═══════════════════════════════════════════════════════════════\nfunction renderTabs() {\n const wrap = document.getElementById('tabsWrap');\n wrap.innerHTML = PHASES.map(p => `\n <button class=\"tab-btn ${p.id === activePhase ? 'active' : ''}\"\n onclick=\"switchPhase(${p.id})\">\n ${p.emoji} ${p.label}: ${p.title}\n </button>\n `).join('');\n}\n\nfunction renderPhases() {\n const container = document.getElementById('phaseContent');\n container.innerHTML = PHASES.map(phase => `\n <div class=\"tab-panel ${phase.id === activePhase ? 'active' : ''}\" id=\"panel-${phase.id}\">\n <div class=\"phase-header\">\n <div class=\"phase-badge\" style=\"background:${phase.color}22;color:${phase.color}\">\n ${phase.emoji}\n </div>\n <div class=\"phase-meta\">\n <h3 style=\"color:${phase.color}\">${phase.label}: ${phase.title}</h3>\n <p>${phase.desc}</p>\n <div class=\"phase-chips\">\n ${phase.chips.map(c=>`<span class=\"phase-chip\" style=\"background:${c.color}22;color:${c.color}\">${c.text}</span>`).join('')}\n <span class=\"phase-chip\" style=\"background:rgba(255,255,255,0.05);color:var(--text-muted)\">📅 ${phase.duration}</span>\n <span class=\"phase-chip\" style=\"background:rgba(255,255,255,0.05);color:var(--text-muted)\">Weeks ${phase.weeks}</span>\n </div>\n </div>\n </div>\n ${phase.weeks_data.map(week => renderWeek(phase, week)).join('')}\n </div>\n `).join('');\n}\n\nfunction renderWeek(phase, week) {\n const color = phase.color;\n const totalDays = week.days.length;\n const done = week.days.filter((d,i) => checkedTasks[getTaskId(phase.id, week.num, i)]).length;\n const pct = Math.round((done/totalDays)*100);\n const isOpen = openWeeks[`${phase.id}-${week.num}`] || false;\n\n return `\n <div class=\"week-card ${done===totalDays?'completed':''} ${isOpen?'open':''}\" id=\"wcard-${phase.id}-${week.num}\">\n <div class=\"week-header\" onclick=\"toggleWeek('${phase.id}','${week.num}')\">\n <div class=\"week-num\" style=\"background:${color}22;color:${color}\">W${week.num}</div>\n <div class=\"week-title\">\n <h4>${week.title}</h4>\n <p>${week.subtitle}</p>\n </div>\n <div class=\"week-progress\">\n <div class=\"week-bar\">\n <div class=\"week-bar-fill\" id=\"wbar-${phase.id}-${week.num}\"\n style=\"width:${pct}%;background:${color}\"></div>\n </div>\n <span class=\"week-pct\" id=\"wpct-${phase.id}-${week.num}\">${pct}%</span>\n </div>\n <span class=\"chevron\">▶</span>\n </div>\n <div class=\"day-list\" style=\"${isOpen?'':'display:none'}\" id=\"daylist-${phase.id}-${week.num}\">\n ${week.days.map((day, idx) => renderDay(phase, week, day, idx)).join('')}\n </div>\n </div>`;\n}\n\nfunction renderDay(phase, week, day, idx) {\n const id = getTaskId(phase.id, week.num, idx);\n const isDone = !!checkedTasks[id];\n const isOpen = !!openDays[id];\n const dayNames = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];\n const expandContent = isOpen ? renderDayExpand(day, phase.color, id) : '';\n return `\n <div class=\"day-item ${isOpen?'open':''}\" id=\"dayitem-${id}\">\n <div class=\"day-item-header\" onclick=\"toggleDayExpand('${id}','${phase.id}','${week.num}','${idx}')\">\n <div class=\"day-check ${isDone?'done':''}\" id=\"check-${id}\"\n onclick=\"event.stopPropagation(); toggleTask('${id}','${phase.id}','${week.num}')\"></div>\n <div class=\"day-content\">\n <div class=\"day-header-row\">\n <span class=\"day-label\">${dayNames[idx] || 'Day'} ${idx+1}</span>\n <span class=\"day-title\" style=\"${isDone?'text-decoration:line-through;opacity:0.5':''}\" id=\"dtitle-${id}\">${day.title}</span>\n </div>\n <div class=\"day-tags\">\n ${day.tags.map(t=>`<span class=\"day-tag tag-${t}\">${t.toUpperCase()}</span>`).join('')}\n </div>\n <div class=\"day-desc\">${day.desc}</div>\n ${day.trick ? `<div class=\"day-trick\">${day.trick}</div>` : ''}\n </div>\n <span class=\"day-hours\">${day.hours}</span>\n <span class=\"day-chevron\">&#9654;</span>\n </div>\n <div class=\"day-expand-panel\" id=\"expand-${id}\">${expandContent}</div>\n </div>`;\n}\n\nfunction renderMilestones() {\n const grid = document.getElementById('milestoneGrid');\n grid.innerHTML = MILESTONES.map((m,i) => `\n <div class=\"milestone\" style=\"border-color:${m.color}33\">\n <div class=\"milestone-phase\" style=\"color:${m.color}\">${m.phase}</div>\n <div class=\"milestone-title\">${m.title}</div>\n <div class=\"milestone-salary\" style=\"color:${m.color}\">${m.salary}</div>\n <div class=\"milestone-time\">30 hrs/week pace</div>\n <div class=\"milestone-lock\">🔒</div>\n </div>\n `).join('');\n}\n\n// ═══════════════════════════════════════════════════════════════\n// INTERACTIONS\n// ═══════════════════════════════════════════════════════════════\nfunction toggleWeek(phaseId, weekNum) {\n const key = `${phaseId}-${weekNum}`;\n openWeeks[key] = !openWeeks[key];\n const list = document.getElementById(`daylist-${phaseId}-${weekNum}`);\n const card = document.getElementById(`wcard-${phaseId}-${weekNum}`);\n if (openWeeks[key]) {\n list.style.display = 'block';\n card.classList.add('open');\n } else {\n list.style.display = 'none';\n card.classList.remove('open');\n }\n}\n\nfunction toggleDayExpand(id, phaseId, weekNum, dayIdx) {\n openDays[id] = !openDays[id];\n const item = document.getElementById(`dayitem-${id}`);\n const panel = document.getElementById(`expand-${id}`);\n if (openDays[id]) {\n item.classList.add('open');\n // Generate content on first open\n if (!panel.innerHTML.trim()) {\n // Find the day data\n const phase = PHASES.find(p => p.id == phaseId);\n const week = phase && phase.weeks_data.find(w => w.num == weekNum);\n const day = week && week.days[dayIdx];\n if (day) panel.innerHTML = renderDayExpand(day, phase.color, id);\n }\n panel.style.display = 'block';\n } else {\n item.classList.remove('open');\n panel.style.display = 'none';\n }\n}\n\nfunction toggleSub(sid) {\n checkedSubs[sid] = !checkedSubs[sid];\n const el = document.getElementById(`subc-${sid}`);\n const tx = document.getElementById(`subt-${sid}`);\n if (checkedSubs[sid]) {\n el.classList.add('done'); el.textContent = '✓';\n if (tx) { tx.classList.add('done'); }\n } else {\n el.classList.remove('done'); el.textContent = '';\n if (tx) { tx.classList.remove('done'); }\n }\n saveProgress();\n}\n\nfunction toggleTask(taskId, phaseId, weekNum) {\n checkedTasks[taskId] = !checkedTasks[taskId];\n const check = document.getElementById(`check-${taskId}`);\n const titleEl = document.getElementById(`dtitle-${taskId}`);\n if (checkedTasks[taskId]) {\n check.classList.add('done');\n if (titleEl) { titleEl.style.textDecoration = 'line-through'; titleEl.style.opacity = '0.5'; }\n updateStreak();\n } else {\n check.classList.remove('done');\n if (titleEl) { titleEl.style.textDecoration = ''; titleEl.style.opacity = ''; }\n }\n updateStats();\n saveProgress();\n}\n\nfunction updateStreak() {\n const today = new Date().toDateString();\n if (lastCheckDate !== today) {\n const yesterday = new Date();\n yesterday.setDate(yesterday.getDate() - 1);\n if (lastCheckDate === yesterday.toDateString()) {\n streak++;\n } else if (lastCheckDate !== today) {\n streak = 1;\n }\n lastCheckDate = today;\n }\n}\n\nfunction switchPhase(phaseId) {\n activePhase = phaseId;\n document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));\n document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));\n const panel = document.getElementById(`panel-${phaseId}`);\n if (panel) panel.classList.add('active');\n document.querySelectorAll('.tab-btn').forEach((b,i) => {\n if (PHASES[i] && PHASES[i].id === phaseId) b.classList.add('active');\n });\n window.scrollTo({ top: 250, behavior: 'smooth' });\n}\n\n// ═══════════════════════════════════════════════════════════════\n// INIT\n// ═══════════════════════════════════════════════════════════════\nfunction init() {\n loadState();\n renderMilestones();\n renderTabs();\n renderPhases();\n updateStats();\n\n // Auto-save every 60 seconds\n setInterval(saveProgress, 60000);\n}\n\ninit();\n</script>\n</body>\n</html>\n"}}}}