easy-learn-ai Refactor: Consolidating 18 AI Learning Sites into a Unified Single-Page Architecture

Overview

On 2026-05-30, commit 9dbde4f in the easy-learn-ai repository consolidated 18 independent multi-page AI learning sites into a unified single-page Section architecture. The refactor touched 742 files, added 52,815 lines, and removed 59,618 lines. It represents a shift from information display to guided cognitive construction.

Key points

The old architecture problem

• 18 sites each used a multi-page structure (HomePage, ConceptPage, PrinciplesPage, ProcessPage), creating heavy cognitive load, broken reading flow, inconsistent design, and duplicated configuration files.

The new architecture

• Each site collapses into a single page composed of 6–7 Section components arranged as a cognitive ladder: Hero (intuition via interaction) → Origin (paper/history) → Structure (internals) → Mechanism (process) → Comparison (alternatives) → Status (2026 present).
• All sites share a unified entry.css, tailwind config, and rsbuild config, replacing per-site routing and dependency trees.
• For transformer, pnpm-lock.yaml shrank from 5,027 to ~2,000 lines; 4 JS chunks + 3 CSS files merged into 1 + 1.

Mailchimp-Freddie design system

• Five-color palette: ink #241C15, cream #FBEFE3, butter #F4D35E, coral #E07A5F, teal #1B4B5A. Deliberately no blue, purple, or gradients.
• Five reusable animations: animate-enter-up, animate-enter-fade, animate-enter-pop, animate-float-y, animate-pulse-dot.
• Hero Section follows a fixed left-text / right-interactive layout (5/12 + 7/12 width).

Signature interactive experiences

• Transformer: RNN vs Transformer time-step player. Signal decay formula 1 - 0.22·d is grounded in real long-range dependency behavior, not invented.
• Epochs: SVG dual-curve loss drag with epoch slider. SFT sweet spot ≈ 2 epochs, LoRA ≈ 4, pretraining ≈ 14 (run once). Coral fill marks the overfitting region.
• Llama: Timeline slider Feb 2023 → Apr 2026. Tracks LLaMA 1 → Llama 2 → Llama 3 → Llama 3.1 → Llama 3.3 → Llama 4 → Muse Spark, alongside GPT/Claude releases and key events.
• Token / Learning Rate / LoRA / GPT / GGUF / SFT / Pretrain / Multimodality / WhyFinetune / MGA / T5 / Deploy / Illusion / Finetune each ship a topic-specific metaphor (BPE visualization, LR debugger, rank selector, few-shot counter, quantization anatomy, leaderboard, etc.).

KnowledgeCover system

• 18 hand-coded SVG animated illustrations preview each site. Example: TransformerCover stacks 4 decoder blocks with attention dots and FFN squares, animated Q/K/V chips, a 2017 paper stamp 2017 · 1706.03762, and a decoder-only · 2026 主流 marker.

Design discipline

• Hero Section comments enforce an "anti-template" rule: each interaction explicitly avoids 6 neighboring sites' interaction patterns to prevent redundancy across the design system.

Source integrity

• Data points are cited to arXiv papers (1706.03762, 2302.13971, 2407.21783, 2411.15124) and official Meta posts (ai.meta.com, about.fb.com/news/2026/04), not fabricated.

Accessibility and performance

• Decorative SVGs marked aria-hidden; interactive elements include aria-label and keyboard support; status uses both color and text.
• loading="lazy" images, will-change GPU-accelerated transitions, single-page load replaces multi-route navigation.

Takeaway

The commit message reads modestly as "organize project structure," but the substance is a paradigm shift: 18 rooms became 18 scrolling long-scrolls, each guiding a learner from zero intuition to current status through one signature interaction — an embodiment of the Feynman technique at site scale.