Contributions Grid
An activity heatmap showing 1654 contributions across 52 weeks using theme-token opacity squares with a streak note and quarterly commit breakdown.
An activity heatmap showing 1654 contributions across 52 weeks using theme-token opacity squares with a streak note and quarterly commit breakdown.
The Portfolio Collection unlocks the source for every Portfolio block. All Access unlocks every Collection.
Already purchased? Log in
Contributions Grid shows 1,654 contributions in the past year as a 52 by 7 CSS-grid heatmap where each cell uses theme-token opacity to express activity weight, no green scale. A 23-day streak note sits beside the heading, and a four-column quarterly breakdown below names the rhythm: Q3 2025 saw an open source sprint at 511 commits; Q2 2025 was dominated by client work at 294.
The cells are deterministic from index so the grid reads as realistic without live data. The opacity scale is the distinctive choice, a single foreground colour at five opacity levels stays on-theme across light and dark modes without hardcoding any hue.
Reach for this block as the activity section on a developer portfolio homepage or a dedicated open source page. The installer replaces the quarterly commit counts and notes with their real figures and wires the heatmap to a live data source.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the annual contribution heatmap with quarterly context. Other developer activity layouts:
Tip: the quarterly note is the real signal, a year with 511 commits in Q3 and 294 in Q2 tells the story of a person with a day job and a side project, which is more credible than a flat average.