diff --git a/package-lock.json b/package-lock.json
index b61648b..ec499e2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -67,6 +67,7 @@
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
"integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
"dev": true,
+ "peer": true,
"dependencies": {
"@babel/code-frame": "^7.29.0",
"@babel/generator": "^7.29.0",
@@ -1255,6 +1256,7 @@
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.28.tgz",
"integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==",
"dev": true,
+ "peer": true,
"dependencies": {
"@types/prop-types": "*",
"csstype": "^3.2.2"
@@ -1300,6 +1302,7 @@
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
"integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
"dev": true,
+ "peer": true,
"bin": {
"acorn": "bin/acorn"
},
@@ -1649,6 +1652,7 @@
"url": "https://github.com/sponsors/ai"
}
],
+ "peer": true,
"dependencies": {
"baseline-browser-mapping": "^2.10.12",
"caniuse-lite": "^1.0.30001782",
@@ -2270,6 +2274,7 @@
"integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
"deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
"dev": true,
+ "peer": true,
"dependencies": {
"@eslint-community/eslint-utils": "^4.2.0",
"@eslint-community/regexpp": "^4.6.1",
@@ -3401,6 +3406,7 @@
"resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
"integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
"dev": true,
+ "peer": true,
"bin": {
"jiti": "bin/jiti.js"
}
@@ -3969,6 +3975,7 @@
"url": "https://github.com/sponsors/ai"
}
],
+ "peer": true,
"dependencies": {
"nanoid": "^3.3.11",
"picocolors": "^1.1.1",
@@ -4180,6 +4187,7 @@
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
"integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+ "peer": true,
"dependencies": {
"loose-envify": "^1.1.0"
},
@@ -4191,6 +4199,7 @@
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
"integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+ "peer": true,
"dependencies": {
"loose-envify": "^1.1.0",
"scheduler": "^0.23.2"
@@ -4970,6 +4979,7 @@
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
"integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
"dev": true,
+ "peer": true,
"engines": {
"node": ">=12"
},
@@ -5161,6 +5171,7 @@
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
"integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
"dev": true,
+ "peer": true,
"dependencies": {
"esbuild": "^0.21.3",
"postcss": "^8.4.43",
diff --git a/src/App.jsx b/src/App.jsx
index 7ee77a4..a734de7 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,20 +1,21 @@
-import './styles/globals.css'
import { useEffect } from 'react'
-import { Routes, Route, useLocation } from 'react-router-dom'
-import Nav from './components/Nav'
+import { Route, Routes, useLocation } from 'react-router-dom'
+import BackToTopButton from './components/Backtotop'
+import ConceptPage from './components/ConceptPage'
+import Contribute from './components/Contribute'
+import FAQ from './components/FAQ'
import Footer from './components/Footer'
import Hero from './components/Hero'
+import LearningPath from './components/LearningPath'
import Marquee from './components/Marquee'
+import Mentors from './components/Mentors'
+import Nav from './components/Nav'
+import OurMission from './components/OurMission'
import Pillars from './components/Pillars'
-import LearningPath from './components/LearningPath'
import Storyboards from './components/Storyboards'
-import Mentors from './components/Mentors'
import SummerOfAI from './components/SummerOfAI'
-import Contribute from './components/Contribute'
-import FAQ from './components/FAQ'
import Concepts from './pages/Concepts'
-import BackToTopButton from './components/Backtotop'
-import OurMission from './components/OurMission'
+import './styles/globals.css'
function ScrollToTop() {
const { pathname } = useLocation()
@@ -49,6 +50,10 @@ export default function App() {
} />
} />
} />
+ }
+/>
diff --git a/src/components/ConceptPage.jsx b/src/components/ConceptPage.jsx
new file mode 100644
index 0000000..07a4f65
--- /dev/null
+++ b/src/components/ConceptPage.jsx
@@ -0,0 +1,613 @@
+import { useMemo, useState } from "react";
+import { FaArrowRight } from "react-icons/fa";
+import { Link, useParams } from "react-router-dom";
+import { getConceptBySlug } from "../data/conceptData";
+
+function extractYouTubeId(url = "") {
+ // handles youtu.be/ID, watch?v=ID, embed/ID
+ const patterns = [
+ /youtu\.be\/([^?&#]+)/,
+ /[?&]v=([^?&#]+)/,
+ /embed\/([^?&#]+)/,
+ /youtube\.com\/shorts\/([^?&#]+)/,
+ ];
+ for (const re of patterns) {
+ const m = url.match(re);
+ if (m) return m[1];
+ }
+ return null;
+}
+
+function getTypeIcon(type) {
+ switch (type) {
+ case "video": return "๐ฅ";
+ case "github": return "๐ป";
+ case "docs": return "๐";
+ case "article": return "๐";
+ default: return "๐";
+ }
+}
+
+function getTypeLabel(type) {
+ switch (type) {
+ case "video": return "Video";
+ case "github": return "GitHub";
+ case "docs": return "Docs";
+ case "article": return "Article";
+ default: return "Link";
+ }
+}
+
+const DIFFICULTY_CHIP = {
+ intermediate: { bg: "rgba(0,201,167,0.18)", border: "rgba(0,201,167,0.35)" },
+ advanced: { bg: "rgba(245,166,35,0.18)", border: "rgba(245,166,35,0.35)" },
+ beginner: { bg: "rgba(123,92,240,0.18)", border: "rgba(123,92,240,0.35)" },
+};
+
+//progresshook
+
+function useProgress(slug) {
+ const key = `concept-done-${slug}`;
+ const [done, setDone] = useState(() => {
+ try { return localStorage.getItem(key) === "1"; } catch { return false; }
+ });
+ const toggle = () => setDone((prev) => {
+ const next = !prev;
+ try { next ? localStorage.setItem(key, "1") : localStorage.removeItem(key); } catch { }
+ return next;
+ });
+ return [done, toggle];
+}
+
+//videoplayer
+
+function YouTubeVideoPlayer({ url, title }) {
+ const id = extractYouTubeId(url);
+ if (!id) return null;
+ return (
+
+ );
+}
+
+// resource card
+
+function LearningResourceCard({ resource }) {
+ const [expanded, setExpanded] = useState(false);
+ const isVideo = resource.type === "video";
+ const hasEmbed = isVideo && !!extractYouTubeId(resource.url);
+
+ return (
+ e.currentTarget.style.borderColor = "rgba(168,85,247,0.4)"}
+ onMouseLeave={(e) => e.currentTarget.style.borderColor = "rgba(255,255,255,0.1)"}
+ >
+
+
+
+
+ {getTypeIcon(resource.type)}
+
+
+
+
+ //badges
+
+
+ {resource.difficulty && }
+ {resource.free && }
+ {resource.hasCert && }
+
+
+
+ {resource.title}
+
+
+ {resource.meta && (
+
+ {resource.meta}
+
+ )}
+
+
+
+
+ {hasEmbed && (
+
+ )}
+
+
{
+ e.currentTarget.style.background =
+ "rgba(168,85,247,0.18)";
+ e.currentTarget.style.borderColor =
+ "rgba(168,85,247,0.4)";
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.background =
+ "rgba(168,85,247,0.12)";
+ e.currentTarget.style.borderColor =
+ "rgba(168,85,247,0.22)";
+ }}
+ >
+ Learn
+
+
+
+
+
+
+
+
+ {/* inline video player */}
+ {hasEmbed && expanded && (
+
+
+
+ )}
+
+ {["all", ...options].map((t) => {
+ const isActive = active === t;
+ return (
+
+ );
+ })}
+
+ );
+}
+
+// stat pill
+
+function StatPill({ label, value }) {
+ return (
+
+ );
+}
+
+
+
+export default function ConceptPage() {
+ const { slug } = useParams();
+ const concept = getConceptBySlug(slug);
+ const [done, toggleDone] = useProgress(slug);
+
+ if (!concept) {
+ return (
+
+
Concept not found
+
+ โ Back to all concepts
+
+
+
+
+ {concept.status && (
+
+ {String(concept.status).replace("-", " ")}
+
+ )}
+
+ {concept.difficulty}
+
+
+
+
{concept.icon}
+
+
+ {concept.title}
+
+
+
+ {concept.description}
+
+
+ {/* stat pills + mark done */}
+
+
+
+ {concept.estimatedTime && }
+
+
+
+
+ Understanding the Concept
+
+
+ {concept.storyboard.length > 0 ? (
+
+ {concept.storyboard.map((step, i) => (
+
+ {/* connector line */}
+ {i < concept.storyboard.length - 1 && (
+
+ )}
+
{ e.currentTarget.style.borderColor = "rgba(168,85,247,0.4)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
+ onMouseLeave={(e) => { e.currentTarget.style.borderColor = "rgba(255,255,255,0.1)"; e.currentTarget.style.transform = ""; }}
+ >
+ {/* step number */}
+
+ {i + 1}
+
+
+
+ {step.title}
+
+
+
+ {step.description}
+
+
+
+ ))}
+
+
Visual explainer coming soon
+
+ We're building the step-by-step storyboard for this concept. Check back soon or browse other concepts.
+
+
+ Browse all concepts
+
+
+ Watch & Learn
+
+
+
+
+
+
+
+
+ {concept.featuredVideo.title}
+
+ {concept.featuredVideo.description && (
+
+ {concept.featuredVideo.description}
+
+ )}
+
+
+ Curated Resources
+
+
+ {resourceTypes.length > 1 && (
+
+ )}
+
+
+ {filteredResources.map((resource) => (
+
+ ))}
+
+
+ {filteredResources.length === 0 && (
+
+ No {resourceType} resources for this concept yet.
+
+ )}
+
+ )}
+
+ //next concepts
+ {concept.nextConcepts?.length > 0 && (
+
+ Continue Your Journey
+
+ Learn Next
+
+
+
+ {concept.nextConcepts.map((next) => (
+
+
{ e.currentTarget.style.borderColor = "rgba(168,85,247,0.4)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
+ onMouseLeave={(e) => { e.currentTarget.style.borderColor = "rgba(255,255,255,0.1)"; e.currentTarget.style.transform = ""; }}
+ >
+
{next.icon}
+
+ {next.title}
+
+
+ {next.difficulty}
+
+ {next.reason && (
+
+ {next.reason}
+
+ )}
+
+
+ ))}
+
+ {children}
+
+ );
+}
\ No newline at end of file
diff --git a/src/data/conceptData.js b/src/data/conceptData.js
new file mode 100644
index 0000000..40decd3
--- /dev/null
+++ b/src/data/conceptData.js
@@ -0,0 +1,804 @@
+import { resources as learningResources } from "./resources";
+import { storyboards } from "./storyboards";
+
+function capitalizeDifficulty(difficulty) {
+ if (!difficulty) return "";
+ return difficulty.charAt(0).toUpperCase() + difficulty.slice(1);
+}
+
+function resourceTypeFromTags(tags = [], url = "") {
+ const t = (tags || []).map(String);
+ if (url.includes("github.com") || t.includes("github")) return "github";
+ if (t.includes("video")) return "video";
+ if (t.includes("article")) return "article";
+ return "docs";
+}
+
+function toConceptResource(r) {
+ const type = resourceTypeFromTags(r.tags, r.url);
+ const bits = [];
+ if (r.difficulty) bits.push(r.difficulty);
+ if (typeof r.stage !== "undefined" && r.stage !== null) bits.push(`Stage ${r.stage}`);
+ if (r.free) bits.push("Free");
+ if (r.hasCert) bits.push("Certificate");
+ return {
+ type, title: r.title, url: r.url, meta: bits.join(" โข "),
+ platform: r.platform, difficulty: r.difficulty,
+ stage: r.stage, free: r.free, hasCert: r.hasCert,
+ };
+}
+
+function slugToTagHints(slug) {
+ switch (slug) {
+ case "machine-learning": return ["ml", "ai", "data", "python", "overview", "no-code"];
+ case "large-language-models": return ["llm", "prompting", "ai", "overview"];
+ case "classification-vs-regression": return ["ml", "data", "python", "tensorflow"];
+ case "neural-networks": return ["deep-learning", "pytorch", "python", "ml"];
+ case "loss-and-training": return ["deep-learning", "pytorch", "python", "ml"];
+ case "datasets": return ["data", "ml", "python"];
+ default: return ["ai", "ml", "python"];
+ }
+}
+
+function getFallbackResourcesForSlug(slug) {
+ const hints = slugToTagHints(slug);
+ const scored = learningResources
+ .map((r) => {
+ const tags = (r.tags || []).map(String);
+ const score = tags.reduce((acc, tag) => acc + (hints.includes(tag) ? 1 : 0), 0);
+ return { r, score };
+ })
+ .sort((a, b) => b.score - a.score);
+ const best = scored.filter((x) => x.score > 0).slice(0, 5);
+ const fallback = best.length ? best : scored.slice(0, 5);
+ return fallback.map(({ r }) => toConceptResource(r));
+}
+
+export function getConceptBySlug(slug) {
+ const normalized = slug?.trim();
+ if (!normalized) return null;
+ const card = storyboards.find((item) => item.slug?.trim() === normalized);
+ const detail = conceptData.find((item) => item.slug?.trim() === normalized);
+ if (!card && !detail) return null;
+ const fallbackResources = getFallbackResourcesForSlug(normalized);
+ const mergedResources =
+ detail?.resources && detail.resources.length > 0 ? detail.resources : fallbackResources;
+ return {
+ slug: normalized,
+ title: detail?.title ?? card?.title ?? "",
+ icon: detail?.icon ?? card?.emoji ?? "๐",
+ description: detail?.description ?? card?.description ?? "",
+ difficulty: detail?.difficulty ?? capitalizeDifficulty(card?.difficulty),
+ estimatedTime: detail?.estimatedTime ?? null,
+ storyboard: detail?.storyboard ?? [],
+ featuredVideo: detail?.featuredVideo ?? null,
+ resources: mergedResources ?? [],
+ nextConcepts: detail?.nextConcepts ?? [],
+ status: card?.status ?? null,
+ gradient: card?.gradient ?? null,
+ };
+}
+
+// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+// Featured Videos (6 total)
+// machine-learning StatQuest: A Gentle Introduction to ML
+// large-language-models Karpathy: Intro to Large Language Models
+// classification StatQuest: Classification vs Regression
+// neural-networks 3B1B: But what is a neural network? ch.1
+// loss-and-training 3B1B: Gradient Descent ch.2
+// datasets How Datasets Work in ML
+//
+// Resources (11 total)
+// machine-learning freeCodeCamp: ML for Everybody (Kylie Ying)
+// machine-learning IBM Technology: ML Explained
+// machine-learning MIT OCW 6.0002: Introduction to ML
+// large-language-models 3B1B: But what is a GPT? (transformers ch.5)
+// classification StatQuest: Bias and Variance
+// neural-networks StatQuest: Neural Networks โ Inside the Black Box
+// neural-networks IBM: Neural Networks Explained in 5 min
+// loss-and-training 3B1B: Backpropagation ch.3
+// loss-and-training StatQuest: Gradient Descent Step-by-Step
+// loss-and-training Karpathy: Building micrograd from scratch
+// datasets StatQuest: Train/Test/Validation Split
+// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+
+export const conceptData = [
+
+
+ {
+ slug: "machine-learning",
+ title: "What is Machine Learning?",
+ icon: "๐ง ",
+ difficulty: "Beginner",
+ estimatedTime: "15 min",
+ description:
+ "Learn how computers discover patterns in data and use those patterns to make predictions โ without being explicitly programmed.",
+ storyboard: [
+ {
+ title: "Collect Data",
+ description:
+ "Machine learning starts with examples. The more high-quality examples you feed the algorithm, the better it can learn.",
+ },
+ {
+ title: "Learn Patterns",
+ description:
+ "Algorithms identify relationships and structure hidden inside the data โ things a human might never spot manually.",
+ },
+ {
+ title: "Make Predictions",
+ description:
+ "The trained model applies what it learned to brand-new data, making predictions or decisions automatically.",
+ },
+ ],
+ featuredVideo: {
+ title: "A Gentle Introduction to Machine Learning โ StatQuest",
+ youtubeId: "Gv9_4yMHFhI",
+ description:
+ "Josh Starmer cuts through ML hype and builds the essential foundations in plain language. The perfect first video for any beginner.",
+ },
+ resources: [
+
+ {
+ type: "video",
+ title: "Machine Learning for Everybody โ Full Course",
+ url: "https://www.youtube.com/watch?v=i_LwzRVP7bg",
+ meta: "freeCodeCamp ยท Kylie Ying (MIT/CERN) ยท ~4 hrs ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+ {
+ type: "video",
+ title: "Machine Learning Explained: ML, AI & Deep Learning",
+ url: "https://www.youtube.com/watch?v=znF2U_3Z210",
+ meta: "IBM Technology ยท Non-technical overview ยท 2025 ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+ {
+ type: "video",
+ title: "Introduction to Machine Learning โ MIT 6.0002",
+ url: "https://www.youtube.com/watch?v=h0e2HAPTGF4",
+ meta: "MIT OpenCourseWare ยท Prof. Eric Grimson ยท University-grade ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+
+ {
+ type: "article",
+ title: "A Visual Introduction to Machine Learning โ R2D3",
+ url: "http://www.r2d3.us/visual-intro-to-machine-learning-part-1/",
+ meta: "R2D3 ยท Award-winning animated scrollytelling explainer ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+ {
+ type: "article",
+ title: "An Overview of Deep Learning for Curious People โ Lilian Weng",
+ url: "https://lilianweng.github.io/posts/2017-06-21-overview/",
+ meta: "Lilian Weng (OpenAI) ยท Dense but accessible survey ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+ {
+ type: "article",
+ title: "What is Machine Learning? โ IBM Think",
+ url: "https://www.ibm.com/think/topics/machine-learning",
+ meta: "IBM ยท Comprehensive, regularly updated ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+
+ {
+ type: "docs",
+ title: "Google Machine Learning Crash Course",
+ url: "https://developers.google.com/machine-learning/crash-course",
+ meta: "Google ยท Interactive exercises & videos ยท Beginner โ Intermediate ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+ {
+ type: "docs",
+ title: "Scikit-learn: Getting Started",
+ url: "https://scikit-learn.org/stable/getting_started.html",
+ meta: "Scikit-learn ยท The go-to Python ML library ยท Official docs ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+ {
+ type: "docs",
+ title: "Practical Deep Learning for Coders โ fast.ai",
+ url: "https://course.fast.ai/",
+ meta: "fast.ai ยท Jeremy Howard ยท Top-down hands-on approach ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+
+ {
+ type: "github",
+ title: "Microsoft ML-For-Beginners",
+ url: "https://github.com/microsoft/ML-For-Beginners",
+ meta: "Microsoft ยท 12 weeks ยท 26 lessons ยท 52 quizzes ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+ {
+ type: "github",
+ title: "Dive into Deep Learning (d2l.ai)",
+ url: "https://github.com/d2l-ai/d2l-en",
+ meta: "Berkeley / Carnegie Mellon ยท Interactive Jupyter book ยท Free",
+ difficulty: "Intermediate",
+ free: true,
+ },
+
+ {
+ type: "article",
+ title: "Deep Learning โ LeCun, Bengio & Hinton (Nature, 2015)",
+ url: "https://www.nature.com/articles/nature14539",
+ meta: "Nature ยท The paper that defined the modern deep learning era ยท Seminal",
+ difficulty: "Advanced",
+ free: false,
+ },
+ ],
+ nextConcepts: [
+ { title: "Neural Networks", slug: "neural-networks", difficulty: "Beginner", icon: "โก" },
+ { title: "Classification vs Regression", slug: "classification-vs-regression", difficulty: "Beginner", icon: "๐" },
+ { title: "What is a Dataset?", slug: "datasets", difficulty: "Beginner", icon: "๐๏ธ" },
+ ],
+ },
+
+
+ {
+ slug: "large-language-models",
+ title: "How do LLMs work?",
+ icon: "๐ฎ",
+ difficulty: "Intermediate",
+ estimatedTime: "20 min",
+ description:
+ "Unpack the magic behind ChatGPT and other large language models โ from tokens and transformers to how they generate human-like text.",
+ storyboard: [
+ {
+ title: "Tokenize Text",
+ description:
+ "Text is broken into small chunks called tokens. The model never sees raw words โ it sees numbers representing those chunks.",
+ },
+ {
+ title: "Predict the Next Token",
+ description:
+ "LLMs are trained on one objective: given all previous tokens, predict the next one. Repeated billions of times, this produces surprisingly capable models.",
+ },
+ {
+ title: "Attention & Context",
+ description:
+ "Transformer attention lets the model weigh which earlier tokens matter most when generating each new word โ enabling long-range reasoning.",
+ },
+ ],
+ featuredVideo: {
+ title: "Intro to Large Language Models โ Andrej Karpathy",
+ youtubeId: "zjkBMFhNj_g",
+ description:
+ "Karpathy's one-hour talk gives a clear, first-principles mental model of what LLMs are, how they're trained, and where they're headed.",
+ },
+ resources: [
+
+ {
+ type: "video",
+ title: "But what is a GPT? Visual intro to Transformers | 3Blue1Brown ch.5",
+ url: "https://www.youtube.com/watch?v=wjZofJX0v4M",
+ meta: "3Blue1Brown ยท Stunning animated deep-dive ยท ~27 min ยท Free",
+ difficulty: "Intermediate",
+ free: true,
+ },
+
+ {
+ type: "article",
+ title: "The Illustrated GPT-2 โ Jay Alammar",
+ url: "https://jalammar.github.io/illustrated-gpt2/",
+ meta: "Jay Alammar ยท Visual walkthrough of GPT-2 internals ยท Referenced at MIT ยท Free",
+ difficulty: "Intermediate",
+ free: true,
+ },
+ {
+ type: "article",
+ title: "The Illustrated Transformer โ Jay Alammar",
+ url: "https://jalammar.github.io/illustrated-transformer/",
+ meta: "Jay Alammar ยท Used in ML courses at MIT, Cornell, Stanford ยท Free",
+ difficulty: "Intermediate",
+ free: true,
+ },
+ {
+ type: "article",
+ title: "Large Language Models Explained with Minimum Math",
+ url: "https://www.understandingai.org/p/large-language-models-explained-with",
+ meta: "UnderstandingAI ยท Tim Lee & Sean Trott ยท Beginner-friendly deep dive ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+ {
+ type: "article",
+ title: "The Unreasonable Effectiveness of Recurrent Neural Networks โ Karpathy",
+ url: "https://karpathy.github.io/2015/05/21/rnn-effectiveness/",
+ meta: "Andrej Karpathy's Blog ยท Classic influential post on language models ยท Free",
+ difficulty: "Intermediate",
+ free: true,
+ },
+ {
+ type: "article",
+ title: "What Are Large Language Models? โ IBM Think",
+ url: "https://www.ibm.com/think/topics/large-language-models",
+ meta: "IBM ยท Comprehensive overview ยท Regularly updated ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+
+ {
+ type: "docs",
+ title: "Hugging Face NLP Course",
+ url: "https://huggingface.co/learn/nlp-course/chapter1/1",
+ meta: "Hugging Face ยท The industry-standard LLM library ยท Free full course ยท Free",
+ difficulty: "Intermediate",
+ free: true,
+ },
+
+ {
+ type: "github",
+ title: "Hands-On Large Language Models โ Jay Alammar & Maarten Grootendorst",
+ url: "https://github.com/HandsOnLLM/Hands-On-Large-Language-Models",
+ meta: "O'Reilly book companion ยท Full Jupyter notebooks ยท Free",
+ difficulty: "Intermediate",
+ free: true,
+ },
+
+ {
+ type: "article",
+ title: "Attention Is All You Need โ Vaswani et al. (arXiv, 2017)",
+ url: "https://arxiv.org/abs/1706.03762",
+ meta: "arXiv ยท The transformer paper that started everything ยท Seminal ยท Free",
+ difficulty: "Advanced",
+ free: true,
+ },
+ ],
+ nextConcepts: [
+ { title: "Neural Networks", slug: "neural-networks", difficulty: "Beginner", icon: "โก" },
+ { title: "Loss & Training", slug: "loss-and-training", difficulty: "Intermediate", icon: "๐ฏ" },
+ ],
+ },
+
+ {
+ slug: "classification-vs-regression",
+ title: "Classification vs Regression",
+ icon: "๐",
+ difficulty: "Beginner",
+ estimatedTime: "12 min",
+ description:
+ "Two fundamental ways ML models make predictions โ one outputs a category, the other a number. Knowing which to use is step one of any ML project.",
+ storyboard: [
+ {
+ title: "Classification: Pick a Box",
+ description:
+ "Is this email spam or not? Is this tumor malignant or benign? Classification outputs a discrete label from a fixed set of categories.",
+ },
+ {
+ title: "Regression: Predict a Number",
+ description:
+ "What will this house sell for? How many units will we ship? Regression outputs a continuous value on a numeric scale.",
+ },
+ {
+ title: "Choosing the Right One",
+ description:
+ "The output type determines everything: loss function, evaluation metrics, and model architecture. Get this choice right first.",
+ },
+ ],
+ featuredVideo: {
+ title: "Regression vs Classification in Machine Learning โ StatQuest",
+ youtubeId: "TJveOYsK6MY",
+ description:
+ "Josh Starmer gives a clear visual explanation of the difference between regression and classification with real-world examples.",
+ },
+ resources: [
+
+ {
+ type: "video",
+ title: "Machine Learning Fundamentals: Bias and Variance โ StatQuest",
+ url: "https://www.youtube.com/watch?v=EuBBz3bI-aA",
+ meta: "StatQuest ยท Josh Starmer ยท Essential follow-up concept ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+
+ {
+ type: "article",
+ title: "Classification vs Regression โ Machine Learning Mastery",
+ url: "https://machinelearningmastery.com/classification-versus-regression-in-machine-learning/",
+ meta: "Jason Brownlee ยท Definitive written breakdown ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+ {
+ type: "article",
+ title: "A Visual Introduction to Machine Learning Part II โ R2D3",
+ url: "http://www.r2d3.us/visual-intro-to-machine-learning-part-2/",
+ meta: "R2D3 ยท Animated bias-variance tradeoff explainer ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+ {
+ type: "article",
+ title: "An Overview of Gradient Descent Optimization Algorithms โ Sebastian Ruder",
+ url: "https://www.ruder.io/optimizing-gradient-descent/",
+ meta: "Sebastian Ruder ยท The most-cited blog post on optimizers ยท Free",
+ difficulty: "Intermediate",
+ free: true,
+ },
+
+ {
+ type: "docs",
+ title: "Framing: ML Terminology โ Google ML Crash Course",
+ url: "https://developers.google.com/machine-learning/crash-course/framing/ml-terminology",
+ meta: "Google ยท Authoritative definitions ยท Beginner ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+ {
+ type: "docs",
+ title: "Supervised Learning โ Scikit-learn User Guide",
+ url: "https://scikit-learn.org/stable/supervised_learning.html",
+ meta: "Scikit-learn ยท Official guide to classification & regression models ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+ // โโ GitHub โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+ {
+ type: "github",
+ title: "Microsoft ML-For-Beginners: Regression Lessons",
+ url: "https://github.com/microsoft/ML-For-Beginners/tree/main/2-Regression",
+ meta: "Microsoft ยท Hands-on Jupyter notebooks ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+ ],
+ nextConcepts: [
+ { title: "Loss & Training", slug: "loss-and-training", difficulty: "Intermediate", icon: "๐ฏ" },
+ { title: "Neural Networks", slug: "neural-networks", difficulty: "Beginner", icon: "โก" },
+ ],
+ },
+
+
+ {
+ slug: "neural-networks",
+ title: "What is a Neural Network?",
+ icon: "โก",
+ difficulty: "Beginner",
+ estimatedTime: "20 min",
+ description:
+ "The building blocks of modern AI โ layers of interconnected neurons that learn to recognize patterns by adjusting billions of small weights.",
+ storyboard: [
+ {
+ title: "Neurons & Layers",
+ description:
+ "A neural network is a stack of layers. Each layer is a set of neurons โ simple math functions that take in numbers, transform them, and pass them forward.",
+ },
+ {
+ title: "Weights & Learning",
+ description:
+ "Every connection between neurons has a weight. Training adjusts these weights so the network's outputs get closer to the right answers.",
+ },
+ {
+ title: "Deep = Many Layers",
+ description:
+ "'Deep learning' just means many layers. Deeper networks learn increasingly abstract features โ edges โ shapes โ faces, for example.",
+ },
+ ],
+ featuredVideo: {
+ title: "But what is a neural network? | 3Blue1Brown ch.1",
+ youtubeId: "aircAruvnKk",
+ description:
+ "The definitive animated introduction. Grant Sanderson's visuals make the math click instantly. Part 1 of the Deep Learning series.",
+ },
+ resources: [
+
+ {
+ type: "video",
+ title: "StatQuest: Neural Networks โ Inside the Black Box",
+ url: "https://www.youtube.com/watch?v=CqOfi41LfDw",
+ meta: "StatQuest ยท Josh Starmer ยท Step-by-step with worked examples ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+ {
+ type: "video",
+ title: "Neural Networks Explained in 5 Minutes",
+ url: "https://www.youtube.com/watch?v=jmmW0F0biz0",
+ meta: "IBM Technology ยท Non-technical quick overview ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+
+ {
+ type: "article",
+ title: "Neural Networks, Manifolds, and Topology โ Colah's Blog",
+ url: "https://colah.github.io/posts/2014-03-NN-Manifolds-Topology/",
+ meta: "Chris Olah (Anthropic) ยท Intuition-first visual essay ยท Free",
+ difficulty: "Intermediate",
+ free: true,
+ },
+ {
+ type: "article",
+ title: "Understanding LSTM Networks โ Colah's Blog",
+ url: "https://colah.github.io/posts/2015-08-Understanding-LSTMs/",
+ meta: "Chris Olah ยท Most-read blog post on LSTMs ยท Read by millions ยท Free",
+ difficulty: "Intermediate",
+ free: true,
+ },
+ {
+ type: "article",
+ title: "Neural Networks and Deep Learning โ Free Online Book",
+ url: "http://neuralnetworksanddeeplearning.com/",
+ meta: "Michael Nielsen ยท Complete free book ยท Beginner โ Intermediate ยท Free",
+ difficulty: "Intermediate",
+ free: true,
+ },
+
+ {
+ type: "docs",
+ title: "TensorFlow Playground โ Train a Neural Net in Your Browser",
+ url: "https://playground.tensorflow.org/",
+ meta: "Google Brain ยท Interactive ยท No code required ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+ {
+ type: "docs",
+ title: "CNN Explainer โ Visual CNN Explorer",
+ url: "https://poloclub.github.io/cnn-explainer/",
+ meta: "Georgia Tech ยท Interactive CNN visualization tool ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+
+ {
+ type: "github",
+ title: "nn-zero-to-hero โ Andrej Karpathy",
+ url: "https://github.com/karpathy/nn-zero-to-hero",
+ meta: "Karpathy ยท Build neural nets from scratch in Python ยท Free",
+ difficulty: "Intermediate",
+ free: true,
+ },
+ {
+ type: "github",
+ title: "fast.ai โ Practical Deep Learning Library",
+ url: "https://github.com/fastai/fastai",
+ meta: "fast.ai ยท Jeremy Howard ยท High-level PyTorch wrappers + course ยท Free",
+ difficulty: "Intermediate",
+ free: true,
+ },
+ ],
+ nextConcepts: [
+ { title: "Loss & Training", slug: "loss-and-training", difficulty: "Intermediate", icon: "๐ฏ" },
+ { title: "How do LLMs work?", slug: "large-language-models", difficulty: "Intermediate", icon: "๐ฎ" },
+ ],
+ },
+
+ {
+ slug: "loss-and-training",
+ title: "What is Loss & Training?",
+ icon: "๐ฏ",
+ difficulty: "Intermediate",
+ estimatedTime: "18 min",
+ description:
+ "How an AI model learns by making mistakes and correcting itself โ the feedback loop of loss functions, gradient descent, and backpropagation.",
+ storyboard: [
+ {
+ title: "Measure the Mistake",
+ description:
+ "A loss function scores how wrong the model's prediction is. Low loss = good; high loss = bad. This single number is the entire learning signal.",
+ },
+ {
+ title: "Gradient Descent",
+ description:
+ "The model computes which direction to nudge each weight to reduce the loss โ then takes a small step. Repeat millions of times.",
+ },
+ {
+ title: "Backpropagation",
+ description:
+ "Backprop efficiently calculates the gradient for every weight in the network in one backward pass using the chain rule from calculus.",
+ },
+ ],
+ featuredVideo: {
+ title: "Gradient Descent, How Neural Networks Learn | 3Blue1Brown ch.2",
+ youtubeId: "IHZwWFHWa-w",
+ description:
+ "3Blue1Brown's chapter 2 explains gradient descent and loss with beautiful animations โ the clearest visual explanation available.",
+ },
+ resources: [
+
+ {
+ type: "video",
+ title: "What is Backpropagation Really Doing? | 3Blue1Brown ch.3",
+ url: "https://www.youtube.com/watch?v=Ilg3gGewQ5U",
+ meta: "3Blue1Brown ยท Visual deep-dive into backpropagation ยท Free",
+ difficulty: "Intermediate",
+ free: true,
+ },
+ {
+ type: "video",
+ title: "StatQuest: Gradient Descent, Step-by-Step",
+ url: "https://www.youtube.com/watch?v=sDv4f4s2SB8",
+ meta: "StatQuest ยท Josh Starmer ยท Clear worked numerical example ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+ {
+ type: "video",
+ title: "Building micrograd: Backprop from Scratch โ Andrej Karpathy",
+ url: "https://www.youtube.com/watch?v=VMj-3S1tku0",
+ meta: "Karpathy ยท The most step-by-step backprop explanation ever made ยท ~2.5 hrs ยท Free",
+ difficulty: "Intermediate",
+ free: true,
+ },
+
+ {
+ type: "article",
+ title: "Calculus on Computational Graphs: Backpropagation โ Colah's Blog",
+ url: "https://colah.github.io/posts/2015-08-Backprop/",
+ meta: "Chris Olah (Anthropic) ยท The classic intuition-first essay on backprop ยท Free",
+ difficulty: "Intermediate",
+ free: true,
+ },
+ {
+ type: "article",
+ title: "An Overview of Gradient Descent Optimization Algorithms โ Sebastian Ruder",
+ url: "https://www.ruder.io/optimizing-gradient-descent/",
+ meta: "Sebastian Ruder (Google DeepMind) ยท Most-cited optimizer reference ยท Free",
+ difficulty: "Intermediate",
+ free: true,
+ },
+ {
+ type: "article",
+ title: "Loss Functions for Deep Learning โ Machine Learning Mastery",
+ url: "https://machinelearningmastery.com/loss-and-loss-functions-for-training-deep-learning-neural-networks/",
+ meta: "Jason Brownlee ยท Comprehensive reference on every common loss function ยท Free",
+ difficulty: "Intermediate",
+ free: true,
+ },
+
+ {
+ type: "docs",
+ title: "Gradient Descent โ Google ML Crash Course",
+ url: "https://developers.google.com/machine-learning/crash-course/linear-regression/gradient-descent",
+ meta: "Google ยท Interactive diagrams ยท Beginner-friendly ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+
+ {
+ type: "github",
+ title: "micrograd โ Tiny Autograd Engine by Karpathy",
+ url: "https://github.com/karpathy/micrograd",
+ meta: "Karpathy ยท Full backprop engine in ~150 lines of Python ยท Free",
+ difficulty: "Intermediate",
+ free: true,
+ },
+
+ {
+ type: "article",
+ title: "Learning Representations by Back-propagating Errors โ Rumelhart et al. (Nature, 1986)",
+ url: "https://www.nature.com/articles/323533a0",
+ meta: "Nature ยท The original backpropagation paper ยท Hinton, Rumelhart & Williams ยท Seminal",
+ difficulty: "Advanced",
+ free: false,
+ },
+ ],
+ nextConcepts: [
+ { title: "Neural Networks", slug: "neural-networks", difficulty: "Beginner", icon: "โก" },
+ { title: "How do LLMs work?", slug: "large-language-models", difficulty: "Intermediate", icon: "๐ฎ" },
+ ],
+ },
+
+
+ {
+ slug: "datasets",
+ title: "What is a Dataset?",
+ icon: "๐๏ธ",
+ difficulty: "Beginner",
+ estimatedTime: "10 min",
+ description:
+ "Data is the fuel of AI โ a model is only as good as what it learned from. Learn what makes a dataset, and what makes a good one.",
+ storyboard: [
+ {
+ title: "Rows & Features",
+ description:
+ "A dataset is a table. Each row is one example (a photo, a sentence, a transaction). Each column is a feature โ a measurable property of that example.",
+ },
+ {
+ title: "Labels",
+ description:
+ "Supervised learning requires labels: the correct answer for each row. Labels are expensive because a human usually has to provide them.",
+ },
+ {
+ title: "Quality > Quantity",
+ description:
+ "Biased, incomplete, or mislabeled data produces bad models regardless of how sophisticated the algorithm. Garbage in, garbage out.",
+ },
+ ],
+ featuredVideo: {
+ title: "How Datasets Work in Machine Learning (Beginner Friendly)",
+ youtubeId: "RqPR7GqSWRM",
+ description:
+ "A concise practical overview of training, validation, and test sets โ and why the split matters for every ML project.",
+ },
+ resources: [
+
+ {
+ type: "video",
+ title: "StatQuest: Training/Test/Validation Split, Clearly Explained",
+ url: "https://www.youtube.com/watch?v=dSCFk168vmo",
+ meta: "StatQuest ยท Josh Starmer ยท Short & crystal clear ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+
+ {
+ type: "article",
+ title: "Data Preparation for Machine Learning โ Machine Learning Mastery",
+ url: "https://machinelearningmastery.com/data-preparation-for-machine-learning/",
+ meta: "Jason Brownlee ยท Practical guide to cleaning & preparing data ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+ {
+ type: "article",
+ title: "Datasheets for Datasets โ Gebru et al. (Communications of the ACM, 2021)",
+ url: "https://dl.acm.org/doi/10.1145/3458723",
+ meta: "ACM ยท Landmark paper on dataset documentation & ethics ยท Free",
+ difficulty: "Intermediate",
+ free: true,
+ },
+
+ {
+ type: "docs",
+ title: "Splitting Data โ Google ML Crash Course",
+ url: "https://developers.google.com/machine-learning/crash-course/training-and-test-sets/splitting-data",
+ meta: "Google ยท Authoritative ยท Interactive ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+ {
+ type: "docs",
+ title: "Kaggle Datasets โ Browse & Download Free Datasets",
+ url: "https://www.kaggle.com/datasets",
+ meta: "Kaggle ยท Thousands of real-world datasets for practice ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+ {
+ type: "docs",
+ title: "Hugging Face Datasets Hub",
+ url: "https://huggingface.co/datasets",
+ meta: "Hugging Face ยท 50,000+ ML-ready datasets ยท Searchable ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+ {
+ type: "docs",
+ title: "Papers With Code โ Datasets",
+ url: "https://paperswithcode.com/datasets",
+ meta: "Papers With Code ยท Research benchmarks with leaderboards ยท Free",
+ difficulty: "Intermediate",
+ free: true,
+ },
+
+ {
+ type: "github",
+ title: "Awesome Public Datasets",
+ url: "https://github.com/awesomedata/awesome-public-datasets",
+ meta: "Community curated ยท 500+ datasets across every domain ยท Free",
+ difficulty: "Beginner",
+ free: true,
+ },
+ ],
+ nextConcepts: [
+ { title: "What is Machine Learning?", slug: "machine-learning", difficulty: "Beginner", icon: "๐ง " },
+ { title: "Classification vs Regression", slug: "classification-vs-regression", difficulty: "Beginner", icon: "๐" },
+ ],
+ },
+];
\ No newline at end of file
diff --git a/src/data/storyboards.js b/src/data/storyboards.js
index a90e7ed..04316ad 100644
--- a/src/data/storyboards.js
+++ b/src/data/storyboards.js
@@ -17,6 +17,7 @@ export const storyboards = [
{
id: 1,
emoji: '๐ง ',
+ slug: "machine-learning",
title: 'What is Machine Learning?',
description: 'How computers learn from examples instead of being programmed with rules.',
difficulty: 'beginner',
@@ -26,6 +27,7 @@ export const storyboards = [
{
id: 2,
emoji: '๐ฎ',
+ slug: "large-language-models",
title: 'How do LLMs work?',
description: 'The magic behind ChatGPT and other large language models, explained simply.',
difficulty: 'intermediate',
@@ -35,6 +37,7 @@ export const storyboards = [
{
id: 3,
emoji: '๐',
+ slug: "classification-vs-regression",
title: 'Classification vs Regression',
description: 'Two fundamental ways ML models make predictions โ and when to use which.',
difficulty: 'beginner',
@@ -44,6 +47,7 @@ export const storyboards = [
{
id: 4,
emoji: 'โก',
+ slug: "neural-networks",
title: 'What is a Neural Network?',
description: 'The building blocks of modern AI โ inspired by the human brain.',
difficulty: 'beginner',
@@ -53,6 +57,7 @@ export const storyboards = [
{
id: 5,
emoji: '๐ฏ',
+ slug: "loss-and-training",
title: 'What is Loss & Training?',
description: 'How an AI model learns by making mistakes and correcting itself.',
difficulty: 'intermediate',
@@ -62,6 +67,7 @@ export const storyboards = [
{
id: 6,
emoji: '๐๏ธ',
+ slug: "datasets",
title: 'What is a Dataset?',
description: 'Why data is the fuel of AI โ and what makes a good dataset.',
difficulty: 'beginner',
diff --git a/src/pages/Concepts.jsx b/src/pages/Concepts.jsx
index c5b634c..d892f63 100644
--- a/src/pages/Concepts.jsx
+++ b/src/pages/Concepts.jsx
@@ -57,6 +57,11 @@ export default function Concepts() {
{filteredConcepts.map((concept) => (
+