Show description
CS Learning Path Dashboard
CS Learning Path Dashboard
CS Learning Path Dashboard
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CS Learning Path Dashboard</title>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #0a0a0a;
color: #e5e5e5;
margin: 0;
overflow: hidden; /* Prevent body scroll, handle inside widget */
}
.font-mono {
font-family: 'JetBrains Mono', monospace;
}
/* Custom Scrollbar for the widget */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #171717;
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: #404040;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #525252;
}
.dot-grid {
background-image: radial-gradient(#333 1px, transparent 1px);
background-size: 24px 24px;
}
.glass-panel {
background: rgba(23, 23, 23, 0.95);
backdrop-filter: blur(10px);
}
.glow-text {
text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}
/* Animation utilities */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
animation: fadeIn 0.4s ease-out forwards;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { useState, useEffect, useMemo } = React;
// --- Inline Icon Components to resolve "invalid type" errors ---
const Icon = ({ children, size = 24, className = "" }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={className}
>
{children}
</svg>
);
const Icons = {
Cpu: (props) => (
<Icon {...props}>
<rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect>
<rect x="9" y="9" width="6" height="6"></rect>
<line x1="9" y1="1" x2="9" y2="4"></line>
<line x1="15" y1="1" x2="15" y2="4"></line>
<line x1="9" y1="20" x2="9" y2="23"></line>
<line x1="15" y1="20" x2="15" y2="23"></line>
<line x1="20" y1="9" x2="23" y2="9"></line>
<line x1="20" y1="14" x2="23" y2="14"></line>
<line x1="1" y1="9" x2="4" y2="9"></line>
<line x1="1" y1="14" x2="4" y2="14"></line>
</Icon>
),
Terminal: (props) => (
<Icon {...props}>
<polyline points="4 17 10 11 4 5"></polyline>
<line x1="12" y1="19" x2="20" y2="19"></line>
</Icon>
),
Globe: (props) => (
<Icon {...props}>
<circle cx="12" cy="12" r="10"></circle>
<line x1="2" y1="12" x2="22" y2="12"></line>
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
</Icon>
),
Layout: (props) => (
<Icon {...props}>
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<line x1="3" y1="9" x2="21" y2="9"></line>
<line x1="9" y1="21" x2="9" y2="9"></line>
</Icon>
),
Brain: (props) => (
<Icon {...props}>
<path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z"></path>
<path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z"></path>
</Icon>
),
Activity: (props) => (
<Icon {...props}>
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
</Icon>
),
ChevronRight: (props) => (
<Icon {...props}>
<polyline points="9 18 15 12 9 6"></polyline>
</Icon>
),
Hash: (props) => (
<Icon {...props}>
<line x1="4" y1="9" x2="20" y2="9"></line>
<line x1="4" y1="15" x2="20" y2="15"></line>
<line x1="10" y1="3" x2="8" y2="21"></line>
<line x1="16" y1="3" x2="14" y2="21"></line>
</Icon>
),
Code: (props) => (
<Icon {...props}>
<polyline points="16 18 22 12 16 6"></polyline>
<polyline points="8 6 2 12 8 18"></polyline>
</Icon>
),
Zap: (props) => (
<Icon {...props}>
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
</Icon>
),
Layers: (props) => (
<Icon {...props}>
<polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
<polyline points="2 17 12 22 22 17"></polyline>
<polyline points="2 12 12 17 22 12"></polyline>
</Icon>
),
Server: (props) => (
<Icon {...props}>
<rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
<rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
<line x1="6" y1="6" x2="6.01" y2="6"></line>
<line x1="6" y1="18" x2="6.01" y2="18"></line>
</Icon>
),
Database: (props) => (
<Icon {...props}>
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
</Icon>
)
};
// --- Data Structure derived from the Markdown ---
const phases = [
{
id: 1,
title: 'The Digital Bedrock',
subtitle: 'Hardware & Logic',
icon: <Icons.Cpu size={24} />,
color: 'text-emerald-400',
borderColor: 'border-emerald-500/30',
bgColor: 'bg-emerald-500/10',
description: 'Mapping mathematical logic onto physical states.',
stats: [
{ label: 'Base Logic', value: 'Binary' },
{ label: 'Core Unit', value: 'Transistor' },
{ label: 'Universal Gate', value: 'NAND' }
],
modules: [
{
title: 'Number Systems',
tags: ['Binary (Base-2)', 'Hex (Base-16)', "Two's Complement"],
detail: 'Transistors allow only two states: Saturation (1) and Cutoff (0). Hexadecimal abstracts binary for humans. Two\'s Complement handles negative integers efficiently in hardware.'
},
{
title: 'Boolean Algebra',
tags: ['AND', 'OR', 'XOR', 'NAND'],
detail: 'Logic gates implement Boolean functions. The NAND gate is functionally complete—you can build any other gate, and thus a computer, using only NANDs.'
},
{
title: 'Combinational Logic',
tags: ['Adders', 'Multiplexers', 'ALU'],
detail: 'Stateless circuits. Half/Full Adders perform math. Muxes route data. The ALU (Arithmetic Logic Unit) is the calculator core.'
},
{
title: 'Sequential Logic',
tags: ['Flip-Flops', 'Latches', 'Clock'],
detail: 'Introduces Memory (State). Flip-flops synchronize data capture with the CPU Clock, preventing race conditions.'
},
{
title: 'Architecture',
tags: ['Fetch-Decode-Execute', 'ISA (x86/ARM)', 'Registers'],
detail: 'The CPU cycle. x86 (CISC) allows complex instructions; ARM (RISC) uses simple load/store commands for efficiency.'
},
{
title: 'Memory Hierarchy',
tags: ['L1/L2/L3 Cache', 'RAM', 'SRAM vs DRAM'],
detail: 'Trade-off between speed and size. Registers are instant; RAM is large but slower. Caches bridge the gap.'
}
]
},
{
id: 2,
title: 'The Bridge',
subtitle: 'Systems Programming',
icon: <Icons.Terminal size={24} />,
color: 'text-cyan-400',
borderColor: 'border-cyan-500/30',
bgColor: 'bg-cyan-500/10',
description: 'Bridging high-level logic and raw metal.',
stats: [
{ label: 'Language', value: 'C / C++' },
{ label: 'Manager', value: 'Kernel' },
{ label: 'Abstraction', value: 'Virtualization' }
],
modules: [
{
title: 'Compilers & Interpreters',
tags: ['Lexing', 'Parsing', 'AST', 'JIT'],
detail: 'Translating human code to machine code. Compilers (AOT) optimize ahead; Interpreters run line-by-line; JIT mixes both.'
},
{
title: 'OS Fundamentals',
tags: ['Scheduler', 'Paging', 'Context Switching'],
detail: 'The OS virtualizes the CPU (Scheduling) and Memory (Paging). It creates the illusion of exclusive access for each process.'
},
{
title: 'C Programming',
tags: ['Pointers', 'Malloc/Free', 'Stack vs Heap'],
detail: 'Manual memory management. The Stack is fast/automatic; The Heap is dynamic but risky (leaks, overflows).'
},
{
title: 'Virtualization',
tags: ['VMs', 'Docker', 'Namespaces', 'cgroups'],
detail: 'VMs emulate hardware. Containers (Docker) isolate processes sharing the same kernel using Namespaces and cgroups.'
}
]
},
{
id: 3,
title: 'The Great Connection',
subtitle: 'Networking',
icon: <Icons.Globe size={24} />,
color: 'text-indigo-400',
borderColor: 'border-indigo-500/30',
bgColor: 'bg-indigo-500/10',
description: 'The global nervous system of data.',
stats: [
{ label: 'Model', value: 'OSI 7-Layer' },
{ label: 'Transport', value: 'TCP/UDP' },
{ label: 'Security', value: 'TLS 1.3' }
],
modules: [
{
title: 'OSI Model',
tags: ['Physical', 'Data Link', 'Network', 'Transport', 'Application'],
detail: '7 abstraction layers. From physical cables (Layer 1) to HTTP requests (Layer 7).'
},
{
title: 'Core Protocols',
tags: ['TCP Handshake', 'UDP', 'IP'],
detail: 'TCP guarantees delivery (Reliability). UDP prioritizes speed (Real-time). IP handles logical addressing.'
},
{
title: 'Infrastructure',
tags: ['BGP', 'DNS', 'Routers'],
detail: 'BGP connects ISPs (AS). DNS is the phonebook. Routers direct packets across the web.'
},
{
title: 'Security',
tags: ['SSL/TLS', 'Asymmetric Encryption', 'Certificates'],
detail: 'TLS Handshake establishes secure sessions using Public/Private keys, then switches to Symmetric encryption for speed.'
}
]
},
{
id: 4,
title: 'The Architect',
subtitle: 'Full-Stack Engineering',
icon: <Icons.Layout size={24} />,
color: 'text-violet-400',
borderColor: 'border-violet-500/30',
bgColor: 'bg-violet-500/10',
description: 'Building scalable applications.',
stats: [
{ label: 'Paradigm', value: 'Client-Server' },
{ label: 'Interface', value: 'REST/GraphQL' },
{ label: 'Ops', value: 'CI/CD' }
],
modules: [
{
title: 'Backend',
tags: ['Node.js', 'Go', 'SQL (ACID)', 'NoSQL (CAP)'],
detail: 'Server logic and Data persistence. Relational DBs for consistency; NoSQL for scale. Languages: Go for perf, Node for IO.'
},
{
title: 'Frontend',
tags: ['React', 'Virtual DOM', 'SSR/SSG'],
detail: 'UI State management. React uses Virtual DOM for efficient rendering. Next.js adds Server-Side Rendering (SSR) for SEO.'
},
{
title: 'API Design',
tags: ['REST', 'GraphQL', 'Status Codes'],
detail: 'REST is resource-based (verbs). GraphQL allows precise data fetching (solving over/under-fetching).'
},
{
title: 'DevOps',
tags: ['CI/CD', '12-Factor App', 'AWS/Vercel'],
detail: 'Automating deployment pipelines. Scalability patterns: Load Balancing, Caching (Redis), Sharding.'
}
]
},
{
id: 5,
title: 'The Enlightened',
subtitle: 'AI Research',
icon: <Icons.Brain size={24} />,
color: 'text-rose-400',
borderColor: 'border-rose-500/30',
bgColor: 'bg-rose-500/10',
description: 'Teaching machines to learn and reason.',
stats: [
{ label: 'Math', value: 'Calculus' },
{ label: 'Model', value: 'Transformer' },
{ label: 'Goal', value: 'Agency' }
],
modules: [
{
title: 'Mathematics',
tags: ['Linear Algebra', 'Backpropagation', 'Gradients'],
detail: 'Neural networks are matrix multiplication engines optimized via calculus (Gradient Descent).'
},
{
title: 'Deep Learning',
tags: ['CNNs', 'Transformers', 'Attention Mechanism'],
detail: 'CNNs for Vision. Transformers use Self-Attention to capture context, enabling modern LLMs.'
},
{
title: 'Generative AI',
tags: ['LLMs', 'RAG', 'Prompt Engineering'],
detail: 'Next-token prediction. RAG (Retrieval-Augmented Generation) connects LLMs to external truth/data.'
},
{
title: 'Agentic Workflows',
tags: ['ReAct Pattern', 'Orchestration', 'LLMOps'],
detail: 'Agents that Reason and Act. Moving from chatbots to autonomous problem solvers.'
}
]
}
];
const RoadmapApp = () => {
const [activePhase, setActivePhase] = useState(phases[0]);
const [isLoaded, setIsLoaded] = useState(false);
useEffect(() => {
setIsLoaded(true);
}, []);
return (
<div className="w-full h-screen relative flex items-center justify-center p-4 md:p-8 dot-grid">
{/* Background Glow effects */}
<div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
<div className="absolute top-10 left-10 w-96 h-96 bg-purple-900/20 rounded-full blur-[100px]"></div>
<div className="absolute bottom-10 right-10 w-96 h-96 bg-blue-900/20 rounded-full blur-[100px]"></div>
</div>
{/* Main Widget Container */}
<div className={`
relative w-full max-w-7xl h-[90vh]
glass-panel border-[6px] border-neutral-800
rounded-[2rem] shadow-2xl flex flex-col md:flex-row overflow-hidden
transition-opacity duration-1000 ease-in-out
${isLoaded ? 'opacity-100' : 'opacity-0'}
`}>
{/* Decorative Widget Elements */}
<div className="absolute top-4 right-6 flex gap-2">
<div className="w-3 h-3 rounded-full bg-red-500/50"></div>
<div className="w-3 h-3 rounded-full bg-yellow-500/50"></div>
<div className="w-3 h-3 rounded-full bg-green-500/50"></div>
</div>
{/* LEFT COLUMN: Navigation / Timeline */}
<div className="w-full md:w-1/3 border-r border-neutral-800 bg-neutral-900/50 flex flex-col">
{/* Header Area */}
<div className="p-8 border-b border-neutral-800">
<h1 className="font-mono text-2xl font-bold text-neutral-100 tracking-tight flex items-center gap-3">
<Icons.Activity className="text-orange-500" />
CS_ROADMAP<span className="animate-pulse">_</span>
</h1>
<p className="text-xs font-mono text-neutral-500 mt-2 uppercase tracking-widest">
System Analysis V2.0
</p>
</div>
{/* Phase Navigation List */}
<div className="flex-1 overflow-y-auto py-4">
{phases.map((phase) => (
<button
key={phase.id}
onClick={() => setActivePhase(phase)}
className={`
w-full px-8 py-5 flex items-center gap-4 text-left transition-all duration-300
border-l-[6px]
${activePhase.id === phase.id
? `bg-neutral-800/50 ${phase.color} border-${phase.color.split('-')[1]}-500`
: 'border-transparent text-neutral-500 hover:bg-neutral-800/30 hover:text-neutral-300'}
`}
>
<div className={`
p-2 rounded-lg
${activePhase.id === phase.id ? phase.bgColor : 'bg-neutral-800'}
`}>
{React.cloneElement(phase.icon, { size: 20 })}
</div>
<div>
<div className="text-xs font-mono opacity-60 mb-0.5">PHASE 0{phase.id}</div>
<div className="font-bold text-sm tracking-wide">{phase.title}</div>
</div>
{activePhase.id === phase.id &&
<Icons.ChevronRight className="ml-auto animate-bounce-right" size={16} />
}
</button>
))}
</div>
{/* Footer / Status */}
<div className="p-6 border-t border-neutral-800 bg-neutral-950/30">
<div className="flex justify-between items-center text-xs font-mono text-neutral-600">
<span>STATUS: ONLINE</span>
<span>LATENCY: 12ms</span>
</div>
<div className="w-full bg-neutral-800 h-1 mt-3 rounded-full overflow-hidden">
<div className="h-full bg-orange-500 w-2/3"></div>
</div>
</div>
</div>
{/* RIGHT COLUMN: Content Detail */}
<div className="w-full md:w-2/3 bg-neutral-900/20 overflow-y-auto relative">
{/* Grid overlay for tech feel */}
<div className="absolute inset-0 dot-grid opacity-20 pointer-events-none"></div>
<div className="p-8 md:p-12 max-w-4xl mx-auto">
{/* Detail Header */}
<div className="mb-10 animate-fade-in">
<div className={`inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold font-mono mb-4 border ${activePhase.borderColor} ${activePhase.color} ${activePhase.bgColor}`}>
<Icons.Hash size={12} />
PHASE_0{activePhase.id} // {activePhase.subtitle.toUpperCase()}
</div>
<h2 className="text-4xl md:text-5xl font-bold text-white mb-4 tracking-tight glow-text">
{activePhase.title}
</h2>
<p className="text-lg text-neutral-400 leading-relaxed max-w-2xl">
{activePhase.description}
</p>
</div>
{/* Stats Row */}
<div className="grid grid-cols-3 gap-4 mb-10 animate-fade-in" style={{animationDelay: '0.1s'}}>
{activePhase.stats.map((stat, i) => (
<div key={i} className="bg-neutral-800/40 border border-neutral-700/50 p-4 rounded-xl backdrop-blur-sm">
<div className="text-xs font-mono text-neutral-500 uppercase mb-1">{stat.label}</div>
<div className={`text-lg font-bold ${activePhase.color}`}>{stat.value}</div>
</div>
))}
</div>
{/* Modules / Tech Tree */}
<div className="space-y-6">
<div className="flex items-center gap-2 text-neutral-500 font-mono text-sm mb-6 border-b border-neutral-800 pb-2">
<Icons.Code size={16} />
CORE_MODULES
</div>
{activePhase.modules.map((module, idx) => (
<div
key={idx}
className="group bg-neutral-800/20 border border-neutral-700 hover:border-neutral-500 p-6 rounded-2xl transition-all duration-300 hover:bg-neutral-800/40 animate-fade-in"
style={{animationDelay: `${0.15 + (idx * 0.05)}s`}}
>
<div className="flex flex-col md:flex-row md:items-start gap-4">
<div className={`mt-1 p-2 rounded-lg bg-neutral-900 border border-neutral-800 text-neutral-400 group-hover:${activePhase.color} transition-colors`}>
{idx === 0 ? <Icons.Zap size={18} /> :
idx === 1 ? <Icons.Layers size={18} /> :
idx === 2 ? <Icons.Server size={18} /> : <Icons.Database size={18} />}
</div>
<div className="flex-1">
<h3 className="text-xl font-bold text-neutral-200 mb-2 group-hover:text-white">
{module.title}
</h3>
<p className="text-neutral-400 text-sm leading-relaxed mb-4">
{module.detail}
</p>
<div className="flex flex-wrap gap-2">
{module.tags.map((tag, tIdx) => (
<span key={tIdx} className="px-2 py-1 rounded-md bg-neutral-900 border border-neutral-700 text-xs font-mono text-neutral-400 group-hover:border-neutral-600 group-hover:text-neutral-300">
{tag}
</span>
))}
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
);
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<RoadmapApp />);
</script>
</body>
</html>