Performance Wins
A single column list of optimization stories as ruled rows, each pairing the narrative and an improvement chip with before and after metric bars.
A single column list of optimization stories as ruled rows, each pairing the narrative and an improvement chip with before and after metric bars.
Search blocks by description or jump to a page.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Performance Wins is a single-column list of optimization stories built as ruled rows. Each row splits two ways: the narrative and an improvement chip on the left, and a before and after metric comparison on the right drawn as two proportional token bars with mono values. The bars share a width scale, so the shrink from before to after reads as a picture before the numbers confirm it.
wins is a typed array of title, delta, story, metric, and a before and after object holding a value and a bar width, so each row and its bars grow from data rather than markup. The after bar uses a foreground token against a muted before bar, which marks the improvement without a second color. The dividers and type ramp match the rest of the collection.
Reach for this block when a developer portfolio needs to prove impact with numbers rather than adjectives. It suits engineers whose best work is a latency, bundle, or build time cut they can defend, measured in production rather than on a laptop. The installer replaces the three wins with their own before and after figures.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is three optimizations spanning API latency, bundle size, and CI time. Other wins layouts:
Tip: label every figure with where it was measured; a before and after with no context invites the reader to assume the win came from a rigged benchmark.