[PR #1526] [MERGED] polish(tinytorch/ux): hero hierarchy + milestone roster + honest star CTA #7392

Closed
opened 2026-04-24 17:27:48 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/harvard-edge/cs249r_book/pull/1526
Author: @profvjreddi
Created: 4/24/2026
Status: Merged
Merged: 4/24/2026
Merged by: @profvjreddi

Base: devHead: polish/tinytorch-ux-round-2


📝 Commits (1)

  • c67770c polish(tinytorch/ux): hero hierarchy + milestone roster + honest star CTA

📊 Changes

3 files changed (+118 additions, -11 deletions)

View changed files

📝 tinytorch/quarto/assets/styles/style.scss (+59 -0)
📝 tinytorch/quarto/index.qmd (+17 -11)
📝 tinytorch/quarto/milestones/index.qmd (+42 -0)

📄 Description

Summary

Round-2 UX polish pass after a Playwright walkthrough. Three surgical fixes:

# Fix File Why
1 Hero headline hierarchy swap `index.qmd` Tagline was bigger than the memorable slogan; H1/H2 now match visual weight
2 Preview badge: "2026" -> "Fall 2026" `index.qmd` We're in 2026 already — old copy was ambiguous
3 Star-count CTA is honest about what the number is `index.qmd` "learners" was conflated with GitHub stars — now says "stars on GitHub" with a concrete action
4 Six-card milestone roster above "Overview" `milestones/index.qmd` + `style.scss` First-time reader sees 1958-2018 arc at a glance

Before → After copy

  • H1: "Build Your Own ML Framework" (rendered as a big

    ) → "Don't import it. Build it." (real h1, matches pagetitle)

  • Subtitle: (none) → "Build your own ML framework — from tensors to systems."
  • Badge: "Preview · Classroom ready 2026" → "Preview · Classroom ready Fall 2026"
  • Star link: " {N} learners · every helps support free ML education" → " {N} stars on GitHub — add yours and support free ML education"

Milestone hub — new 6-card roster

The hub previously opened with two prose paragraphs before any concrete listing of the milestones. Now the About-This-Part callout is followed immediately by a 6-card grid: 1958 Perceptron → 1969 XOR Crisis → 1986 MLP Revival → 1998 CNN Revolution → 2017 Transformers → 2018 MLPerf. Color coding mirrors the producing tier (Foundation blue / Architecture purple / Optimization orange) for visual continuity with the rest of the site. Journey table with per-milestone module dependencies stays in place further down.

Deferred (intentionally)

From the same walkthrough, these were flagged as valid but out of scope for this PR:

  • Swap action cards above Module Info on module pages — touches ~20 QMD files; wants a template-level intervention, not ad-hoc rewrites
  • Sticky per-module progress indicator — wants JS + scroll listener
  • Announcement-bar collapse on narrow viewport — JS + cross-site change
  • Olympics "Coming Soon" → dated promise — per user direction, the Olympics launch content is landing in a separate PR in the next few days, so leaving the placeholder as-is

Verification (Playwright)

Home h1          : \"Don't import it. Build it.\" at 42.5px  ✓
Preview badge    : \"Preview · Classroom ready Fall 2026\"   ✓
Star link        : \"⭐ 23,767 stars on GitHub — add yours
                    and support free ML education\"          ✓
Milestone grid   : 6 cards rendered with correct data-era colors
                   foundation  rgb(25, 118, 210)
                   architecture rgb(123, 31, 162)
                   optimization rgb(245, 124, 0)              ✓

Test plan

  • Local `quarto preview` renders home + milestones cleanly
  • Computed styles verified via Playwright
  • Pre-commit passes
  • Post-merge: eye the deployed tinytorch preview + verify mobile rendering of the 6-card grid

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/harvard-edge/cs249r_book/pull/1526 **Author:** [@profvjreddi](https://github.com/profvjreddi) **Created:** 4/24/2026 **Status:** ✅ Merged **Merged:** 4/24/2026 **Merged by:** [@profvjreddi](https://github.com/profvjreddi) **Base:** `dev` ← **Head:** `polish/tinytorch-ux-round-2` --- ### 📝 Commits (1) - [`c67770c`](https://github.com/harvard-edge/cs249r_book/commit/c67770ce030d2044e543d9841f605288d1060a2c) polish(tinytorch/ux): hero hierarchy + milestone roster + honest star CTA ### 📊 Changes **3 files changed** (+118 additions, -11 deletions) <details> <summary>View changed files</summary> 📝 `tinytorch/quarto/assets/styles/style.scss` (+59 -0) 📝 `tinytorch/quarto/index.qmd` (+17 -11) 📝 `tinytorch/quarto/milestones/index.qmd` (+42 -0) </details> ### 📄 Description ## Summary Round-2 UX polish pass after a Playwright walkthrough. Three surgical fixes: | # | Fix | File | Why | |---|---|---|---| | 1 | Hero headline hierarchy swap | \`index.qmd\` | Tagline was bigger than the memorable slogan; H1/H2 now match visual weight | | 2 | Preview badge: \"2026\" -> \"Fall 2026\" | \`index.qmd\` | We're in 2026 already — old copy was ambiguous | | 3 | Star-count CTA is honest about what the number is | \`index.qmd\` | \"learners\" was conflated with GitHub stars — now says \"stars on GitHub\" with a concrete action | | 4 | Six-card milestone roster above \"Overview\" | \`milestones/index.qmd\` + \`style.scss\` | First-time reader sees 1958-2018 arc at a glance | ## Before → After copy - **H1**: \"Build Your Own ML Framework\" (rendered as a big <p>) → **\"Don't import it. Build it.\"** (real h1, matches pagetitle) - **Subtitle**: *(none)* → \"Build your own ML framework — from tensors to systems.\" - **Badge**: \"Preview · Classroom ready 2026\" → \"Preview · Classroom ready Fall 2026\" - **Star link**: \"⭐ {N} learners · every ⭐ helps support free ML education\" → \"⭐ {N} stars on GitHub — **add yours** and support free ML education\" ## Milestone hub — new 6-card roster The hub previously opened with two prose paragraphs before any concrete listing of the milestones. Now the About-This-Part callout is followed immediately by a 6-card grid: **1958 Perceptron → 1969 XOR Crisis → 1986 MLP Revival → 1998 CNN Revolution → 2017 Transformers → 2018 MLPerf**. Color coding mirrors the producing tier (Foundation blue / Architecture purple / Optimization orange) for visual continuity with the rest of the site. Journey table with per-milestone module dependencies stays in place further down. ## Deferred (intentionally) From the same walkthrough, these were flagged as valid but out of scope for this PR: - **Swap action cards above Module Info on module pages** — touches ~20 QMD files; wants a template-level intervention, not ad-hoc rewrites - **Sticky per-module progress indicator** — wants JS + scroll listener - **Announcement-bar collapse on narrow viewport** — JS + cross-site change - **Olympics \"Coming Soon\" → dated promise** — per user direction, the Olympics launch content is landing in a separate PR in the next few days, so leaving the placeholder as-is ## Verification (Playwright) ``` Home h1 : \"Don't import it. Build it.\" at 42.5px ✓ Preview badge : \"Preview · Classroom ready Fall 2026\" ✓ Star link : \"⭐ 23,767 stars on GitHub — add yours and support free ML education\" ✓ Milestone grid : 6 cards rendered with correct data-era colors foundation rgb(25, 118, 210) architecture rgb(123, 31, 162) optimization rgb(245, 124, 0) ✓ ``` ## Test plan - [x] Local \`quarto preview\` renders home + milestones cleanly - [x] Computed styles verified via Playwright - [x] Pre-commit passes - [ ] Post-merge: eye the deployed tinytorch preview + verify mobile rendering of the 6-card grid --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-04-24 17:27:48 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/cs249r_book#7392