Skip to content

Profile README: card-based redesign + follow-ups #1

Description

@TomPlum

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 learninglearn-japanese, nyuusu, natomski, kanji-parser, japanese-keyboard.
  • Advent of Code — a seven-year star wall (2018–2024).
  • Data visualisationsleep, activity-trends, clocks, with a sparkline.
  • React & open sourcereact-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

  • AoC star colours — gold/silver per day based on 1-vs-2-star completion, instead of a flat gold wall.
  • WakaTime "coding activity" card — weekly language/time breakdown. Needs a free WakaTime API key stored as a repo secret; generator already has a placeholder hook for it.
  • Dashboard screenshots — embed real captures of the sleep / activity-trends dashboards inside the data-viz card so the work is seen, not just linked.
  • Snake contribution animation — the classic eaten-contribution-graph GIF as a footer.
  • Profile-views / visitor badge — was commented out in the old README; could restyle to match.
  • Per-repo deep-link polish — current card links point at one representative repo or a filtered repo search; could make every chip individually clickable (needs splitting chips into separate linked images or an image map).

🤖 Generated with Claude Code

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions