1 line
124 KiB
JSON
1 line
124 KiB
JSON
{"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\">▶</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"}}}} |