Arthur Costa

Why this design

1. Concept: optimising is a comparison, not a single profile, so every case study is shown as Brendan Gregg's differential flame graph: capture before, change one thing, capture after, read the difference.
2. Information architecture: results lead; a diff stat indexes the 10 records; each record is a before, a change and an after; the career is a log of changes, and the stack is a diff of then against now. One scrubber at the top moves every diff on the page between its two states.
3. Honesty: only three records carry numbers, and only those bars measure anything. Elsewhere a frame stands for one change named in the record (or, for retiring my own platform, one component removed or kept), and the captions say so.
4. Colour follows Gregg's convention and nothing else: red means wider after, blue narrower after, an outlined frame unchanged and a grey fill the before state, and only flame frames carry them; the hero's before and after columns are grey and ink, because "before" is not "narrower". Signs (+, −, =) repeat every change for anyone who cannot rely on colour.
5. Typography: Recursive, whose MONO axis runs from code to prose in one family. The motto starts monospaced like raw profiler output and turns proportional as the portrait's diff resolves; numbers and diff headers stay mono, the reading text stays sans.
6. Motion: each diff morphs once when it comes into view, on a 1 s ease-in-out, so a single frame can be followed from its old width to its new one; after that the scrubber is direct, every frame follows the thumb with no easing, and at the after end the career's top frame fills with my face.
7. Accessibility: every strip has a written list of its changes, the scrubber is a native range input, reduced motion shows the after state, and "Pause animation" stops the portrait and every morph.