What this is
The profile README.md was redesigned from a plain-text intro into a dynamic, card-based layout. Each card groups a theme of work (so we surface ~15 repos instead of the 6 pinned slots), renders as themed light + dark SVGs, and refreshes its live stats automatically.
Landed in a0e6623.
How it works
| File |
Role |
profile.config.json |
The content source — names, taglines, which repos sit in which card, hobbies, now-reading, AoC years. Usually the only file to edit. |
scripts/generate-cards.mjs |
Renders 14 SVGs (7 cards × light/dark). Pulls live repo star counts + language breakdown from the GitHub API. |
.github/workflows/profile-cards.yml |
Regenerates + commits the cards daily (06:00 UTC), on config change, and via manual dispatch. Uses the built-in GITHUB_TOKEN — no secrets needed. |
assets/cards/*.svg |
The generated cards. |
README.md |
A <picture>-based table that swaps light/dark automatically. |
Cards
- Hero — name, tagline, now-reading, and a git-graph motif (a nod to
react-git-log).
- Language learning —
learn-japanese, nyuusu, natomski, kanji-parser, japanese-keyboard.
- Advent of Code — a seven-year star wall (2018–2024).
- Data visualisation —
sleep, activity-trends, clocks, with a sparkline.
- React & open source —
react-git-log (flagship), domain-driven-design-template.
- Beyond the editor — guitar, gym, fantasy fiction, food.
- Stats strip — total repos, total stars, top-language bar.
Live vs. config-driven
- Auto (daily): repo star counts on each chip, total repos, total stars, top-language breakdown.
- Config (manual): card blurbs, repo groupings, hobbies, now-reading, and the AoC star wall — AoC completion can't be fetched without a private session cookie, so those years/languages live in config.
Follow-up ideas
🤖 Generated with Claude Code
What this is
The profile
README.mdwas redesigned from a plain-text intro into a dynamic, card-based layout. Each card groups a theme of work (so we surface ~15 repos instead of the 6 pinned slots), renders as themed light + dark SVGs, and refreshes its live stats automatically.Landed in a0e6623.
How it works
profile.config.jsonscripts/generate-cards.mjs.github/workflows/profile-cards.ymlGITHUB_TOKEN— no secrets needed.assets/cards/*.svgREADME.md<picture>-based table that swaps light/dark automatically.Cards
react-git-log).learn-japanese,nyuusu,natomski,kanji-parser,japanese-keyboard.sleep,activity-trends,clocks, with a sparkline.react-git-log(flagship),domain-driven-design-template.Live vs. config-driven
Follow-up ideas
sleep/activity-trendsdashboards inside the data-viz card so the work is seen, not just linked.🤖 Generated with Claude Code