Github Stats
A four-figure contribution stat strip above a 52-week CSS-grid heatmap built with theme-token opacity squares and a deterministic seed, with no green color scale.
A four-figure contribution stat strip above a 52-week CSS-grid heatmap built with theme-token opacity squares and a deterministic seed, with no green color scale.
The Portfolio Collection unlocks the source for every Portfolio block. All Access unlocks every Collection.
Already purchased? Log in
GitHub Stats pairs a four-figure stat strip (42 public repos, 3.4k stars earned, 1,840 contributions this year, 217 pull requests merged) with a full 52-week contribution heatmap below it. The heatmap is a CSS grid of 364 squares, each colored bg-foreground at one of five opacity levels derived from a deterministic seed function, so the grid looks realistic without live data and without importing a chart library. A Less-to-More legend sits at the foot.
The stat strip is a flat array; the heatmap draws from a pure cellWeight function keyed on cell index. Theme tokens only: no green scale, no literal colour values. The deterministic seed means the pattern is stable across renders.
Reach for this block on a developer portfolio to show sustained activity at a glance, particularly for contract work where consistent engagement signals reliability. The installer replaces the four stat objects with their real figures; the heatmap reads as illustrative until wired to a live API.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the annual contribution summary. Other stat layouts:
Tip: the heatmap is illustrative until connected to real data; the stat strip is where the installer puts the numbers that actually matter to clients.