← Back to all projects

Web · University of Michigan

MSAIL Website

Next.jsTypeScriptCanvasPerformanceGitHub Actions

I rebuilt and shipped the official site for the university's largest AI student organization, end to end, on Next.js, React, and TypeScript with GitHub Actions CI/CD. The visible work was migrating nine years of content from two legacy codebases with every legacy URL preserved through generated redirects, a WCAG AA contrast pass, and a typed content layer so future maintainers can edit copy without touching React. The part I would actually point at is the Canvas particle system. The original hot path sorted particles with a comparator index sort that ran 20 to 25 milliseconds at 57.6k particles; I replaced it with an O(N) counting sort using 16-bit quantized keys into a 65,537-entry prefix-sum table, and it runs at about 1 millisecond. Separately, a synchronous optimal-transport convergence loop was blocking the main thread on every re-pairing, which turned out to be the click hitch, a 50 millisecond stall. I frame-sliced the 2-opt uncrossing sweeps into per-frame millisecond budgets, which is safe because the final image does not depend on which grain lands on which target. Per-grain draw calls are batched into one Path2D fill per color bucket, and per-particle trigonometry is hoisted out of the inner loop with angle-addition tables.

What it does

●

O(N) counting sort replacing a comparator index sort: 16-bit quantized keys into a 65,537-entry prefix-sum table, taking the hot path from 20 to 25 ms down to about 1 ms at 57.6k particles

●

A 50 ms main-thread stall traced to a synchronous optimal-transport convergence loop, then frame-sliced into per-frame millisecond budgets

●

Path2D batching: per-grain draw calls collapsed into one fill per color bucket

●

Angle-addition tables hoisting per-particle trigonometry out of the inner loop

●

Nine years of content migrated from two legacy codebases, with every legacy URL preserved through generated redirects

●

Typed content layer so maintainers can edit copy without touching React, plus a WCAG AA contrast pass

●

Next.js, React, and TypeScript with GitHub Actions CI/CD, deployed as a static site

Tech stack

FrameworkNext.js, React, TypeScript
RenderingCanvas 2D particle system
PerfO(N) counting sort, frame-sliced convergence, Path2D batching
MigrationTwo legacy codebases, generated redirects
ContentTyped content layer with provenance flags
AccessibilityWCAG AA contrast
CI/CDGitHub Actions to GitHub Pages
← Back to all projects