import { useState } from "react";

const phases = [
{
id: 0,
label: "PHASE 0",
title: "Build The Tools",
months: "Months 1–2",
color: "#E8D5B7",
accent: "#C4A882",
months_data: [
{
n: 1,
title: "Python That Actually Works",
goal: "Make the language feel like thinking, not translating.",
learn: [
"Variables, loops, conditionals, functions",
"Lists and dictionaries",
"File reading and writing",
"Basic error handling",
"Nothing else. No OOP. No libraries yet."
],
resource: "Python Crash Course — Eric Matthes (Ch. 1–8)",
project_title: "Daily Behavior Logger v1",
project: "Build a command-line tool you open every morning. It timestamps and logs wh
warning: null
},
{
n: 2,
title: "Python Depth + First Taste of ML",
goal: "Understand the code structure of every ML library before using them.",
learn: [
"Object-Oriented Programming: classes, methods, inheritance",
"Git and GitHub: commit, push, branch, README",
"NumPy array operations",
"Use Scikit-Learn to train one classifier — don't understand it yet, just feel it w
],
resource: "Python Crash Course (Ch. 9–12) + [Link]",
project_title: "Daily Behavior Logger v2",
project: "Refactor Month 1 logger into proper OOP. A BehaviorEntry class. A Logger cl
warning: null
}
]
},
{
id: 1,
label: "PHASE 1",
title: "Mathematics Through Building",
months: "Months 3–5",
color: "#B7C9E8",
accent: "#7A9CC4",
months_data: [
{
n: 3,
title: "Linear Algebra",
goal: "Understand what ML is actually computing underneath every prediction.",
learn: [
"Vectors: direction and magnitude, not just lists of numbers",
"Matrix multiplication: transformations of space",
"Dot products: measuring similarity between things",
"Transpose and inverse",
"NO eigenvalues — reintroduced in Month 9 when you actually need them"
],
resource: "3Blue1Brown: Essence of Linear Algebra — all 15 videos (mandatory, before
project_title: "Personal Similarity Engine",
project: "Take 20 articles, videos, or ideas you care about. Represent each as a keyw
warning: null
},
{
n: 4,
title: "Calculus",
goal: "Understand the engine that trains every neural network ever built.",
learn: [
"Derivatives: rate of change, slope at a point",
"Chain rule: derivatives through composed functions",
"Partial derivatives: slope when many variables exist simultaneously",
"Gradient: direction of steepest increase in any function",
"Gradient descent: step opposite the gradient to minimize error"
],
resource: "3Blue1Brown: Essence of Calculus — all 12 videos + Khan Academy (partial d
project_title: "Gradient Descent Visualizer",
project: "Build an animated Python + Matplotlib visualization. Pick f(x) = x² − 4x +
warning: null
},
{
n: 5,
title: "Statistics",
goal: "Every ML model is a probability machine. Without this, you cannot debug model
learn: [
"Probability and conditional probability",
"Bayes' theorem: how beliefs update with new evidence",
 "Distributions: Normal, Bernoulli — what they physically represent",
"Mean, variance, standard deviation — intuition before formula",
"Correlation vs causation (more important than most courses admit)",
"Hypothesis testing basics"
],
resource: "StatQuest with Josh Starmer — Statistics Fundamentals playlist (all of it)
project_title: "Procrastination Pattern Analysis",
project: "You have 3 months of behavior logs from your daily logger. Now analyze them
warning: null
}
]
},
{
id: 2,
label: "PHASE 2",
title: "Classical ML + Neural Networks",
months: "Months 6–7",
color: "#B7E8C9",
accent: "#6DC492",
months_data: [
{
n: 6,
title: "Classical ML Algorithms",
goal: "Use algorithms with understanding, not just as black boxes.",
learn: [
"Linear and logistic regression — derived from Month 4 calculus",
"Decision trees: information gain, Gini impurity",
"Random Forests: why averaging weak learners works mathematically",
"XGBoost: sequential error correction",
"Evaluation: precision, recall, F1, ROC-AUC — what each one actually measures",
"Cross-validation: the only honest way to evaluate a model"
],
resource: "Hands-On Machine Learning — Aurélien Géron (Ch. 1–7)",
project_title: "Procrastination Classifier",
project: "Use your 5 months of logged behavior data. Label each day as 'productive' o
warning: null
},
{
n: 7,
title: "Neural Networks From Scratch",
goal: "Understand backpropagation so deeply that PyTorch holds no mystery.",
learn: [
"Neuron: weighted sum + activation function",
"Forward pass: computing predictions layer by layer",
"Loss functions: MSE and cross-entropy derived from probability",
"Backpropagation: chain rule applied backward through every layer",
"Weight updates: gradient descent on all parameters simultaneously",
 "Activations: sigmoid, ReLU, tanh and what each does to gradients"
],
resource: "Andrej Karpathy: micrograd tutorial on YouTube (watch 3 times if needed) +
project_title: "MNIST From Scratch",
project: "Build a two-layer neural network using only NumPy. No PyTorch. No Keras. Tr
warning: "THIS IS THE HARDEST MONTH. Give it 6 weeks if you need to. The calendar is
}
]
},
{
id: 3,
label: "PHASE 3",
title: "Deep Learning",
months: "Months 8–10",
color: "#E8B7C9",
accent: "#C47A9A",
months_data: [
{
n: 8,
title: "PyTorch + Convolutional Networks",
goal: "Move from understanding neural networks to building powerful ones efficiently.
learn: [
"PyTorch tensors and autograd: automatic gradient computation",
"The standard training loop: forward → loss → backward → update",
"Convolutional layers: what they detect and why they work on images",
"Batch normalization, dropout, weight initialization",
"Transfer learning: using pretrained model weights as starting point",
"GPU memory management and batch size effects"
],
resource: "Machine Learning with PyTorch and Scikit-Learn — Raschka (Ch. 12–14) + PyT
project_title: "Vision Tool You Actually Use",
project: "Build an image classifier around something genuinely interesting to you: pl
warning: null
},
{
n: 9,
title: "NLP + The Transformer Architecture",
goal: "Understand the architecture behind every large language model in existence.",
learn: [
"Tokenization and word embeddings",
"Word2Vec: words as vectors in semantic space",
"RNNs and LSTMs: sequence modeling and why they hit a wall",
"Attention mechanism: learned relevance scores between every token pair",
"Transformer architecture: self-attention, multi-head attention, positional encodin
"BERT vs GPT: encoder vs decoder — why the distinction matters",
"Eigenvalues return here: understanding PCA on embedding spaces"
],
 resource: "Jay Alammar: The Illustrated Transformer (blog — read twice) + Andrej Karp
project_title: "Minimal Transformer on Your Own Text",
project: "Build a small transformer in PyTorch. Train it on text you actually care ab
warning: null
},
{
n: 10,
title: "Training Mastery + Experimentation",
goal: "Build diagnostic instinct. Most ML time is debugging why models don't learn, n
learn: [
"Vanishing and exploding gradients: why deep networks fail to train",
"Adam and AdamW optimizers: the math behind momentum and adaptive rates",
"Learning rate schedules: warmup, cosine annealing",
"Experiment tracking with Weights & Biases",
"How to read a machine learning research paper — this is a learnable skill"
],
resource: "[Link] Part 1 (free) + [Link] Chapters 4–6 (free)",
project_title: "Deliberately Break Your Model Five Ways",
project: "Take your Month 8 image classifier. Break it five ways: wrong learning rate
warning: null
}
]
},
{
id: 4,
label: "PHASE 4",
title: "Modern AI Engineering",
months: "Months 11–13",
color: "#E8E0B7",
accent: "#C4B87A",
months_data: [
{
n: 11,
title: "LLMs, APIs + Retrieval-Augmented Generation",
goal: "Understand and use the frontier of AI that actually ships products in 2025.",
learn: [
"OpenAI and Anthropic API: how to call them properly and cheaply",
"Prompt engineering: chain-of-thought, few-shot, system prompts",
"Embeddings: converting text into vectors for semantic search",
"Vector databases: Chroma, FAISS, Pinecone",
"RAG architecture: why grounding LLMs in your data beats fine-tuning for most probl
"LLM failure modes: hallucination, context limits, prompt injection"
],
resource: "Anthropic + OpenAI documentation + LangChain docs",
project_title: "Chat With Your Own Knowledge Base",
project: "Take every note, summary, article, and document you've collected across 11
warning: null
 },
{
n: 12,
title: "AI Agents + Production Deployment",
goal: "Close the gap between notebook and real product.",
learn: [
"Agent architecture: LLM + tools + memory + planning loop",
"LangGraph for orchestration and multi-step reasoning",
"Tool use: giving LLMs the ability to call APIs, search web, run code",
"Docker: containerizing your models so they run anywhere",
"FastAPI: wrapping your model in an HTTP service",
"Cloud deployment: AWS or GCP basics, cost-aware serving"
],
resource: "LangGraph documentation + FastAPI documentation + Docker official tutorial
project_title: "Autonomous Daily Check-In Agent",
project: "Build an agent that runs every evening. It asks what you worked on today, c
warning: null
},
{
n: 13,
title: "Capstone: The Procrastination Mirror",
goal: "Ship the tool you wished existed. Build it for yourself first.",
learn: [
"Week 1: Design only. No code. Map every component, data flow, and user interaction
"Week 2: Build the core loop. Task input → atomic breakdown → daily check-in → hone
"Week 3: Integrate everything: your behavior classifier, your RAG knowledge base, y
"Week 4: Use it yourself for 7 days straight. Document every friction, every failur
],
resource: "Everything you've built in Months 1–12",
project_title: "The Procrastination Mirror — Full Application",
project: "A personal AI tool with three functions: (1) You input any task. It breaks
warning: null
}
]
}
];

const rules = [
{ title: "Paper First", body: "Every algorithm, derive it by hand before writing code. This
{ title: "Explanation Test", body: "After every month, write one page explaining everything
{ title: "Public GitHub", body: "Every project on GitHub with a real README from Month 1. N
{ title: "Confusion Log", body: "One document. Every time something confuses you, write it
{ title: "Five Minutes Rule", body: "On hard days, commit to only five minutes. Open the ma
{ title: "Sunday Review", body: "Every Sunday, 20 minutes: What did I understand this week
];

export default function Roadmap() {

const [activeMonth, setActiveMonth] = useState(null);
const [activePhase, setActivePhase] = useState(null);

const toggleMonth = (monthN) => {

setActiveMonth(activeMonth === monthN ? null : monthN);
};

const allMonths = [Link](p => p.months_data);

const selectedMonth = [Link](m => m.n === activeMonth);
const selectedPhase = [Link](p => p.months_data.some(m => m.n === activeMonth));

return (
<div style={{
fontFamily: "'Courier New', Courier, monospace",
background: "#0D0D0D",
minHeight: "100vh",
color: "#E8E0D0",
padding: "0",
}}>
{/* Header */}
<div style={{
borderBottom: "1px solid #333",
padding: "40px 32px 32px",
background: "#0D0D0D",
}}>
<div style={{ fontSize: "10px", letterSpacing: "4px", color: "#666", marginBottom: "1
DEFINITIVE ROADMAP — 13 MONTHS — FINAL VERSION
</div>
<h1 style={{
fontSize: "clamp(24px, 5vw, 42px)",
fontWeight: "700",
letterSpacing: "-1px",
margin: "0 0 8px",
color: "#F0E8D8",
lineHeight: 1.1
}}>
From Zero to AI Engineer
</h1>
<p style={{ color: "#888", fontSize: "13px", margin: "0 0 24px" }}>
20–30 hrs/week · One resource per month · One project per month · One north star
</p>
<div style={{
display: "inline-flex",
alignItems: "center",
gap: "8px",
background: "#1A1A1A",
border: "1px solid #333",
 borderRadius: "4px",
padding: "10px 16px",
fontSize: "12px",
color: "#C4B87A"
}}>
<span style={{ fontSize: "16px" }}>◎</span>
<span>North Star: The Procrastination Mirror — every project builds toward it</span
</div>
</div>

<div style={{ display: "flex", gap: "0", minHeight: "calc(100vh - 180px)" }}>
{/* Left sidebar — phase + month list */}
<div style={{
width: "280px",
minWidth: "280px",
borderRight: "1px solid #222",
overflowY: "auto",
background: "#0A0A0A"
}}>
{[Link](phase => (
<div key={[Link]}>
<div style={{
padding: "16px 20px 10px",
borderBottom: "1px solid #1A1A1A",
borderTop: [Link] > 0 ? "1px solid #222" : "none",
}}>
<div style={{ fontSize: "9px", letterSpacing: "3px", color: [Link], mar
{[Link]}
</div>
<div style={{ fontSize: "13px", fontWeight: "700", color: [Link] }}>
{[Link]}
</div>
<div style={{ fontSize: "10px", color: "#555", marginTop: "2px" }}>
{[Link]}
</div>
</div>
{phase.months_data.map(month => (
<div
key={month.n}
onClick={() => toggleMonth(month.n)}
style={{
padding: "12px 20px",
cursor: "pointer",
borderBottom: "1px solid #161616",
background: activeMonth === month.n ? "#1C1C1C" : "transparent",
borderLeft: activeMonth === month.n ? `3px solid ${[Link]}` : "3px
transition: "all 0.15s ease",
 }}
onMouseEnter={e => {
if (activeMonth !== month.n) [Link] = "#141414"
}}
onMouseLeave={e => {
if (activeMonth !== month.n) [Link] = "transpar
}}
>
<div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
<span style={{
fontSize: "10px",
color: activeMonth === month.n ? [Link] : "#444",
fontWeight: "700",
minWidth: "28px"
}}>
M{[Link]().padStart(2, "0")}
</span>
<span style={{
fontSize: "12px",
color: activeMonth === month.n ? "#E8E0D0" : "#888",
lineHeight: 1.3
}}>
{[Link]}
</span>
</div>
</div>
))}
</div>
))}

{/* Rules section in sidebar */}

<div style={{ borderTop: "1px solid #222", marginTop: "8px" }}>
<div
onClick={() => { setActiveMonth(null); setActivePhase("rules"); }}
style={{
padding: "16px 20px",
cursor: "pointer",
background: activePhase === "rules" && !activeMonth ? "#1C1C1C" : "transparen
borderLeft: activePhase === "rules" && !activeMonth ? "3px solid #888" : "3px
}}
>
<div style={{ fontSize: "9px", letterSpacing: "3px", color: "#666", marginBotto
SYSTEM
</div>
<div style={{ fontSize: "13px", color: "#999", fontWeight: "700" }}>
The 6 Rules
</div>
 </div>
</div>
</div>

{/* Main content panel */}

<div style={{ flex: 1, overflowY: "auto", padding: "0" }}>
{!activeMonth && activePhase !== "rules" && (
<div style={{ padding: "48px 40px" }}>
<div style={{ maxWidth: "600px" }}>
<div style={{ fontSize: "11px", letterSpacing: "3px", color: "#444", marginBo
SELECT A MONTH TO VIEW DETAILS
</div>

{/* Quick overview grid */}

{[Link](phase => (
<div key={[Link]} style={{ marginBottom: "32px" }}>
<div style={{
display: "flex",
alignItems: "center",
gap: "12px",
marginBottom: "12px"
}}>
<div style={{ height: "1px", width: "24px", background: [Link] }}
<span style={{ fontSize: "10px", letterSpacing: "3px", color: [Link]
{[Link]}: {[Link]()}
</span>
</div>
{phase.months_data.map(m => (
<div
key={m.n}
onClick={() => toggleMonth(m.n)}
style={{
display: "flex",
gap: "16px",
padding: "12px 0",
borderBottom: "1px solid #1A1A1A",
cursor: "pointer",
alignItems: "flex-start"
}}
>
<span style={{ fontSize: "11px", color: [Link], minWidth: "32px
M{[Link]().padStart(2, "0")}
</span>
<div>
<div style={{ fontSize: "13px", color: "#C8C0B0", fontWeight: "600"
{[Link]}
</div>
 <div style={{ fontSize: "11px", color: "#555", lineHeight: 1.4 }}>
◆ {m.project_title}
</div>
</div>
</div>
))}
</div>
))}

{/* Stats */}

<div style={{
display: "grid",
gridTemplateColumns: "repeat(3, 1fr)",
gap: "1px",
background: "#222",
border: "1px solid #222",
marginTop: "40px"
}}>
{[
{ n: "13", label: "Months" },
{ n: "13", label: "Projects" },
{ n: "1", label: "North Star" },
].map(s => (
<div key={[Link]} style={{ background: "#0D0D0D", padding: "20px", textA
<div style={{ fontSize: "28px", fontWeight: "700", color: "#E8E0D0" }}>
<div style={{ fontSize: "10px", color: "#555", letterSpacing: "2px" }}>
</div>
))}
</div>
</div>
</div>
)}

{/* Rules panel */}

{activePhase === "rules" && !activeMonth && (
<div style={{ padding: "40px" }}>
<div style={{ fontSize: "9px", letterSpacing: "4px", color: "#555", marginBotto
NON-NEGOTIABLE SYSTEM
</div>
<h2 style={{ fontSize: "24px", color: "#E8E0D0", margin: "0 0 32px", fontWeight
The 6 Rules
</h2>
<p style={{ color: "#666", fontSize: "12px", marginBottom: "32px", lineHeight:
These are not suggestions. The math and code are learnable by anyone. These r
</p>
<div style={{ display: "flex", flexDirection: "column", gap: "1px", background:
{[Link]((rule, i) => (
 <div key={i} style={{
background: "#0D0D0D",
padding: "24px 28px",
display: "flex",
gap: "24px"
}}>
<span style={{ fontSize: "11px", color: "#444", minWidth: "20px", padding
{(i + 1).toString().padStart(2, "0")}
</span>
<div>
<div style={{ fontSize: "14px", fontWeight: "700", color: "#E8E0D0", ma
{[Link]}
</div>
<div style={{ fontSize: "13px", color: "#888", lineHeight: 1.7 }}>
{[Link]}
</div>
</div>
</div>
))}
</div>

<div style={{ marginTop: "32px", padding: "24px", background: "#111", border: "
<div style={{ fontSize: "10px", letterSpacing: "3px", color: "#C4B87A", margi
THE ONLY COMMUNITY REQUIREMENT
</div>
<div style={{ fontSize: "13px", color: "#888", lineHeight: 1.8 }}>
<div style={{ marginBottom: "8px" }}>→ GitHub public from Day 1. Every proj
<div style={{ marginBottom: "8px" }}>→ [Link] forums: lurk Months 1–2, pos
<div>→ One message per month to someone doing ML work you respect. One genu
</div>
</div>
</div>
)}

{/* Month detail panel */}

{selectedMonth && selectedPhase && (
<div style={{ padding: "40px" }}>
<div style={{ display: "flex", alignItems: "center", gap: "12px", marginBottom:
<span style={{ fontSize: "10px", letterSpacing: "3px", color: selectedPhase.a
{[Link]} · MONTH {selectedMonth.n}
</span>
</div>
<h2 style={{ fontSize: "clamp(20px, 3vw, 28px)", color: "#F0E8D8", margin: "0 0
{[Link]}
</h2>
<p style={{ color: "#777", fontSize: "13px", margin: "0 0 32px", fontStyle: "it
{[Link]}
</p>

{[Link] && (
<div style={{
background: "#1A0A0A",
border: "1px solid #5C2020",
borderLeft: `4px solid #C44040`,
padding: "16px 20px",
marginBottom: "28px",
fontSize: "12px",
color: "#C47070",
lineHeight: 1.7
}}>
⚠ {[Link]}
</div>
)}

{/* What to learn */}

<div style={{ marginBottom: "28px" }}>
<div style={{ fontSize: "9px", letterSpacing: "3px", color: "#555", marginBot
WHAT TO LEARN
</div>
<div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
{[Link]((item, i) => (
<div key={i} style={{
display: "flex",
gap: "12px",
padding: "10px 14px",
background: "#111",
border: "1px solid #1E1E1E",
fontSize: "13px",
color: "#B0A890",
lineHeight: 1.5,
alignItems: "flex-start"
}}>
<span style={{ color: [Link], minWidth: "8px", paddingTop
{item}
</div>
))}
</div>
</div>

{/* Resource */}

<div style={{ marginBottom: "28px" }}>
<div style={{ fontSize: "9px", letterSpacing: "3px", color: "#555", marginBot
ONE RESOURCE — NOTHING ELSE THIS MONTH
</div>
 <div style={{
padding: "16px 20px",
background: "#0F0F0F",
border: `1px solid ${[Link]}33`,
borderLeft: `4px solid ${[Link]}`,
fontSize: "13px",
color: [Link],
lineHeight: 1.6
}}>
{[Link]}
</div>
</div>

{/* Project */}

<div>
<div style={{ fontSize: "9px", letterSpacing: "3px", color: "#555", marginBot
MONTHLY PROJECT
</div>
<div style={{
padding: "24px",
background: "#0C0C0C",
border: "1px solid #222",
}}>
<div style={{ display: "flex", alignItems: "center", gap: "10px", marginBot
<span style={{ fontSize: "16px" }}>◆</span>
<span style={{ fontSize: "16px", fontWeight: "700", color: "#E8E0D0" }}>
{selectedMonth.project_title}
</span>
</div>
<p style={{ fontSize: "13px", color: "#888", lineHeight: 1.8, margin: 0 }}>
{[Link]}
</p>
</div>
</div>

{/* Navigation */}

<div style={{ display: "flex", gap: "12px", marginTop: "32px" }}>
{selectedMonth.n > 1 && (
<div
onClick={() => setActiveMonth(selectedMonth.n - 1)}
style={{
padding: "10px 18px",
border: "1px solid #333",
fontSize: "11px",
color: "#888",
cursor: "pointer",
letterSpacing: "1px"
 }}
>
← MONTH {selectedMonth.n - 1}
</div>
)}
{selectedMonth.n < 13 && (
<div
onClick={() => setActiveMonth(selectedMonth.n + 1)}
style={{
padding: "10px 18px",
border: `1px solid ${[Link]}55`,
fontSize: "11px",
color: [Link],
cursor: "pointer",
letterSpacing: "1px"
}}
>
MONTH {selectedMonth.n + 1} →
</div>
)}
</div>
</div>
)}
</div>
</div>
</div>
);
}