Skip to content

Redesign website as a math paper with hand-drawn home page diagrams - #761

Merged
alejandro-ao merged 6 commits into
mainfrom
alejandro/website-redesign
Oct 6, 2026
Merged

alejandro-ao merged 6 commits into
mainfrom
alejandro/website-redesign

Conversation

@alejandro-ao

Copy link
Copy Markdown
Collaborator

Summary

Redesigns the website as a typeset math paper, and rewrites the home page around hand-drawn diagrams that explain what Tau is.

Design

  • Computer Modern type, hairline rules, § section numbers, theorem-style labels, numbered equations.
  • Warm paper background; a single red "pen" accent used only for hand-added notes.
  • Light code highlighting (min-light), greyscale + red canvas figures on the Why τ page.

Home page

  • Hero: "A coding agent you can read in an afternoon", animated loop figure (one turn of the loop = τ), centered install line with macOS/Linux · Windows · uv tabs.
  • §1 the agent loop · §2 nested layers · §3 events per layer (real event names) · §4 a tool is just a function (examples/extensions/hello_tool.py) · §5 a frontend in a dozen lines · §6 a syllabus with line counts · §7 Pi, and why τ.
  • Diagrams are inline SVG and draw themselves on scroll. Reduced motion or no JS shows them fully drawn.

Notes

  • Syllabus line counts are hard-coded from wc -l; they will drift.
  • The §5 frontend snippet uses real event fields but was not executed.
  • tests/site.test.mjs now checks for the new hero figure instead of the old canvas.

Testing

  • npm run build and npm test in website/ pass.
  • Checked pages via headless Chrome screenshots (desktop); install line measured to fit at 360/390px.

🤖 Generated with Claude Code

alejandro-ao and others added 5 commits October 6, 2026 13:32
Monochrome Computer Modern look: hairline rules, § numbering,
theorem-style labels, light code highlighting, greyscale figures.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
New hero loop figure, install tabs, and sections for the loop,
nested layers, events, tools, a frontend, and a reading syllabus.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Copilot AI balanced review requested due to automatic review settings October 6, 2026 11:38

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot review overview

🟡 Changes recommended

Layout, text contrast, event documentation, and frontend output buffering need correction.

Review effort: Balanced
Findings: 4 Medium severity · 2 Low severity

Open (6)
What changed in this PR

Redesigns Tau’s website as a math paper and introduces a diagram-led explanation of its coding-agent architecture.

Changes:

  • Adds architecture diagrams, code examples, a syllabus, and install tabs.
  • Applies paper-style typography, restrained colors, and light code highlighting.
  • Updates the homepage smoke test for the new SVG hero.
File Description
website/​tests/​site.test.mjs Checks for the new hero figure.
website/​static/​landing.js Updates canvas colors and typography.
website/​src/​components/​WhyTau.astro Simplifies section numbers.
website/​src/​components/​Releases.astro Simplifies the release section number.
website/​src/​components/​Home.astro Adds educational content, diagrams, and interactions.
website/​astro.config.mjs Selects light syntax highlighting.
website/​assets/​css/​main.css Implements the shared paper-style design.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

color:var(--ink); border:1px solid var(--ink); padding:0 8px;
}
.release-card time{ font-family:var(--mono); color:var(--ink-soft); font-size:12.5px; }
.release-sections{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; padding:6px 0 28px; }
.install-tabs button{
background:none; border:none; padding:0 0 2px; cursor:pointer;
font-family:var(--serif); font-variant:small-caps; text-transform:lowercase;
font-size:16px; letter-spacing:.05em; color:var(--ink-faint);
Comment on lines +596 to +598
.hero-loop .ev{ opacity:.2; transition:opacity .25s; }
.hero-loop .ev.on{ opacity:1; }
.hero-loop .hand.big{ fill:var(--ink-faint); transition:fill .25s; }
case "message_update":
e = event.assistant_message_event
if e.type == "text_delta":
print(e.delta, end="")
Comment on lines +442 to +443
<text x="300" y="99.5" class="code">entry_appended</text>
<text x="650" y="99.5" class="code">entry_appended</text>
Comment on lines +449 to +452
<text x="170" y="379.5" class="code">response_start</text>
<text x="320" y="379.5" class="code">text_delta</text>
<text x="445" y="379.5" class="code">tool_call</text>
<text x="580" y="379.5" class="code">response_end</text>
@alejandro-ao
alejandro-ao merged commit eb019e9 into main Oct 6, 2026
2 checks passed
@alejandro-ao
alejandro-ao deleted the alejandro/website-redesign branch October 6, 2026 11:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants