{"id":51634213,"url":"https://github.com/tt-a1i/tokenfolio","last_synced_at":"2026-07-13T12:01:28.013Z","repository":{"id":356741297,"uuid":"1233788472","full_name":"tt-a1i/tokenfolio","owner":"tt-a1i","description":"An AI-usage portfolio generator. Drop in your numbers, deploy a page, show what working with machines actually looks like.","archived":false,"fork":false,"pushed_at":"2026-05-25T13:53:20.000Z","size":1539,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-25T14:32:55.559Z","etag":null,"topics":["ai","ai-usage","ccusage","claude-code","codex","github-pages","portfolio","resume","template","token-tracking"],"latest_commit_sha":null,"homepage":"https://tt-a1i.github.io/tokenfolio/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tt-a1i.png","metadata":{"files":{"readme":"README.en.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-09T11:07:10.000Z","updated_at":"2026-05-25T13:53:24.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/tt-a1i/tokenfolio","commit_stats":null,"previous_names":["tt-a1i/tokenfolio"],"tags_count":1,"template":true,"template_full_name":null,"purl":"pkg:github/tt-a1i/tokenfolio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tt-a1i%2Ftokenfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tt-a1i%2Ftokenfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tt-a1i%2Ftokenfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tt-a1i%2Ftokenfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tt-a1i","download_url":"https://codeload.github.com/tt-a1i/tokenfolio/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tt-a1i%2Ftokenfolio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35421719,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-13T02:00:06.543Z","response_time":119,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","ai-usage","ccusage","claude-code","codex","github-pages","portfolio","resume","template","token-tracking"],"created_at":"2026-07-13T12:01:27.290Z","updated_at":"2026-07-13T12:01:28.002Z","avatar_url":"https://github.com/tt-a1i.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tokenfolio\n\n\u003e An AI-usage portfolio, made readable. Drop in your numbers, deploy a page, show recruiters what working with machines actually looks like.\n\n[![npm](https://img.shields.io/npm/v/tokenfolio?style=for-the-badge\u0026color=cb3837\u0026logo=npm)](https://www.npmjs.com/package/tokenfolio)\n[![Use this template](https://img.shields.io/badge/use_this-template-2ea44f?style=for-the-badge\u0026logo=github)](https://github.com/tt-a1i/tokenfolio/generate)\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/tt-a1i/tokenfolio)\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/tt-a1i/tokenfolio)\n\n\u003e **Read in:** [中文](./README.md) · **English**\n\nPick a template. Edit one `data.js`. Deploy. Done.\n\n**Live demo:** https://tt-a1i.github.io/tokenfolio/\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"previews/demo.svg\" alt=\"tokenfolio CLI demo: init → pick → deploy\" width=\"720\"\u003e\u003c/p\u003e\n\n\u003ctable\u003e\n\u003ctr\u003e\n  \u003ctd align=\"center\"\u003e\u003ca href=\"https://tt-a1i.github.io/tokenfolio/templates/wrapped/\"\u003e\u003cimg src=\"previews/wrapped.jpg\" alt=\"wrapped\" width=\"280\"\u003e\u003c/a\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003ewrapped\u003c/b\u003e · social\u003c/sub\u003e\u003c/td\u003e\n  \u003ctd align=\"center\"\u003e\u003ca href=\"https://tt-a1i.github.io/tokenfolio/templates/cosmos/\"\u003e\u003cimg src=\"previews/cosmos.jpg\" alt=\"cosmos\" width=\"280\"\u003e\u003c/a\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003ecosmos\u003c/b\u003e · constellations\u003c/sub\u003e\u003c/td\u003e\n  \u003ctd align=\"center\"\u003e\u003ca href=\"https://tt-a1i.github.io/tokenfolio/templates/almanac/\"\u003e\u003cimg src=\"previews/almanac.jpg\" alt=\"almanac\" width=\"280\"\u003e\u003c/a\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003ealmanac\u003c/b\u003e · gothic broadsheet\u003c/sub\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd align=\"center\"\u003e\u003ca href=\"https://tt-a1i.github.io/tokenfolio/templates/terminal/\"\u003e\u003cimg src=\"previews/terminal.jpg\" alt=\"terminal\" width=\"280\"\u003e\u003c/a\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eterminal\u003c/b\u003e · hacker\u003c/sub\u003e\u003c/td\u003e\n  \u003ctd align=\"center\"\u003e\u003ca href=\"https://tt-a1i.github.io/tokenfolio/templates/aurora/\"\u003e\u003cimg src=\"previews/aurora.jpg\" alt=\"aurora\" width=\"280\"\u003e\u003c/a\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eaurora\u003c/b\u003e · glassmorphism\u003c/sub\u003e\u003c/td\u003e\n  \u003ctd align=\"center\"\u003e\u003ca href=\"https://tt-a1i.github.io/tokenfolio/templates/holo/\"\u003e\u003cimg src=\"previews/holo.jpg\" alt=\"holo\" width=\"280\"\u003e\u003c/a\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003eholo\u003c/b\u003e · trading card\u003c/sub\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd align=\"center\"\u003e\u003ca href=\"https://tt-a1i.github.io/tokenfolio/templates/pixel/\"\u003e\u003cimg src=\"previews/pixel.jpg\" alt=\"pixel\" width=\"280\"\u003e\u003c/a\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003epixel\u003c/b\u003e · 8-bit RPG\u003c/sub\u003e\u003c/td\u003e\n  \u003ctd align=\"center\"\u003e\u003ca href=\"https://tt-a1i.github.io/tokenfolio/templates/pass/\"\u003e\u003cimg src=\"previews/pass.jpg\" alt=\"pass\" width=\"280\"\u003e\u003c/a\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003epass\u003c/b\u003e · boarding pass\u003c/sub\u003e\u003c/td\u003e\n  \u003ctd align=\"center\"\u003e\u003ca href=\"https://tt-a1i.github.io/tokenfolio/templates/brutalist/\"\u003e\u003cimg src=\"previews/brutalist.jpg\" alt=\"brutalist\" width=\"280\"\u003e\u003c/a\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003ebrutalist\u003c/b\u003e · Wired cover\u003c/sub\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd align=\"center\"\u003e\u003ca href=\"https://tt-a1i.github.io/tokenfolio/templates/tcg/\"\u003e\u003cimg src=\"previews/tcg.jpg\" alt=\"tcg\" width=\"280\"\u003e\u003c/a\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003etcg\u003c/b\u003e · TCG card\u003c/sub\u003e\u003c/td\u003e\n  \u003ctd align=\"center\"\u003e\u003ca href=\"https://tt-a1i.github.io/tokenfolio/templates/vinyl/\"\u003e\u003cimg src=\"previews/vinyl.jpg\" alt=\"vinyl\" width=\"280\"\u003e\u003c/a\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003evinyl\u003c/b\u003e · LP liner notes\u003c/sub\u003e\u003c/td\u003e\n  \u003ctd align=\"center\"\u003e\u003ca href=\"https://tt-a1i.github.io/tokenfolio/templates/synthwave/\"\u003e\u003cimg src=\"previews/synthwave.jpg\" alt=\"synthwave\" width=\"280\"\u003e\u003c/a\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003esynthwave\u003c/b\u003e · 1985 arcade\u003c/sub\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd align=\"center\"\u003e\u003ca href=\"https://tt-a1i.github.io/tokenfolio/templates/receipt/\"\u003e\u003cimg src=\"previews/receipt.jpg\" alt=\"receipt\" width=\"280\"\u003e\u003c/a\u003e\u003cbr\u003e\u003csub\u003e\u003cb\u003ereceipt\u003c/b\u003e · thermal print\u003c/sub\u003e\u003c/td\u003e\n  \u003ctd align=\"center\"\u003e\u003csub\u003e\u003ci\u003eyour template here →\u003c/i\u003e\u003cbr\u003ePRs welcome\u003c/sub\u003e\u003c/td\u003e\n  \u003ctd align=\"center\"\u003e\u003csub\u003e13 in total · more coming\u003c/sub\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n\u003e 🆕 **v0.10** — 13th template **receipt** (long thermal-paper receipt, courier monospace, leader-dot line items, model bundle subtotals, `TAX 0% (OSS)`, peak-month cashier note, real-looking CSS barcode, \"tokens are final sale\" footer). Deadpan humor, polished.\n\u003e **v0.9** — 12th template **synthwave** (1985 arcade: wireframe-grid horizon, banded Outrun sun, CRT scanlines, cycling `INSERT COIN`). Animated SVG demo at the top of the README walks the init → pick → deploy flow.\n\u003e **v0.8** — 11 high-quality JPEG previews under `previews/` + bilingual README hero grid + iframe gallery replaced with static images (cold-load 5–10 s → instant).\n\u003e **v0.7** — **vinyl** template (back of an LP sleeve, square 1:1, IG-ready) and `tokenfolio share` one-liner that opens X / LinkedIn pre-filled with your stats.\n\u003e **v0.6** — every template ships a one-tap **PNG export + Web Share** button + \"Built with tokenfolio\" chip top-right that survives screenshot crops. `tokenfolio badge` mints an SVG for your GitHub profile README. `tokenfolio pick` picks your homepage. **TCG** template added (Pokémon-style trading card).\n\n## Templates\n\n| | name | vibe |\n|---|---|---|\n| 🟢 | **wrapped**   | Spotify-Wrapped style — bold color blocks, peak month highlighted, made to be posted |\n| 🌌 | **cosmos**    | Each month a constellation, each session a star — premium, generative, unique-per-user |\n| 📰 | **almanac**   | \"The Token Almanac\" — gothic masthead, monthly dispatches, classified ads — literary |\n| 💻 | **terminal**  | Black on green. Boot sequence + ASCII bar charts + Unicode boxes — hacker dense |\n| 🌈 | **aurora**    | Aurora gradients + frosted-glass cards. Apple Vision / Linear polish — HR-friendly |\n| ✨ | **holo**      | Your résumé as a holographic trading card. Mouse-tracked tilt + rainbow sheen |\n| 🎮 | **pixel**     | An 8-bit RPG character sheet. HP/MP bars, star stats, quest log, \"Press A to recruit\" |\n| ✈️ | **pass**      | A 1980s airline boarding pass — perforations, barcode, passport stamps per month |\n| 🟨 | **brutalist** | Wired magazine cover meets 1968 protest poster. Helvetica Black 200px, hard edges |\n| 🃏 | **tcg**       | A Pokémon-style trading card. Gold border, psychic frame, attacks, mouse-tracked foil |\n| 💿 | **vinyl**     | Back of a vinyl LP sleeve — square 1:1, track listing, \"Produced by\" credits, barcode |\n| 🌆 | **synthwave** | 1985 arcade outrun — wireframe horizon, banded sun, CRT scanlines, cycling `INSERT COIN` |\n| 🧾 | **receipt**   | Long thermal-paper receipt — courier mono, leader-dot items, model bundles, `TAX 0% (OSS)`, CSS barcode (**new**) |\n\nMore coming. Contributions welcome.\n\n## Built-in sharing (v0.6+)\n\nEvery template ships with:\n\n- **Bottom-right floating buttons**: 💾 Save as PNG (uses html2canvas to export the current view, filename includes your handle) + 🔗 Share (Web Share API on mobile, X intent fallback on desktop)\n- **Top-right chip**: `● Built with tokenfolio` — survives screenshot crops, so every shared image carries the source link\n\nOpt out by setting `data-tf-fab=\"false\"` or `data-tf-chip=\"false\"` on `\u003cbody\u003e`.\n\n## Quick start\n\n1. Click **[Use this template](https://github.com/tt-a1i/tokenfolio/generate)** — gets you a fresh repo with clean history that counts toward your contribution graph.\n2. Clone your new repo locally.\n3. Auto-generate `data.js` from your Claude Code / Codex usage (see CLI below). Or hand-edit it.\n4. Click a Deploy button above, or enable GitHub Pages (Settings → Pages → `main` branch, `/`).\n\n### CLI (`tokenfolio init`)\n\n```bash\n# preview without writing — recommended first run\nnpx tokenfolio init --dry\n\n# both sources merged (default)\nnpx tokenfolio init --force\n\n# narrow to one source / one year\nnpx tokenfolio init --source codex  --year 2026 --dry\nnpx tokenfolio init --source claude --year 2025 --dry\n\n# override identity (defaults pull from `git config`)\nnpx tokenfolio init \\\n  --name \"Ada Lovelace\" --handle \"@ada\" --location \"London\"\n```\n\nThe CLI uses [`ccusage`](https://github.com/ryoppippi/ccusage) for Claude Code and a built-in JSONL parser for Codex.\n\n**Currently supported sources:**\n\n| source | location | mechanism |\n|---|---|---|\n| Claude Code | `~/.claude/projects/` | `ccusage` (auto-fetched via npx) |\n| Codex       | `~/.codex/sessions/`  | built-in parser |\n\n**Coming next:** Cursor, Aider, Continue.dev (where token counts exist).\n\n**Privacy red line:** only token counts, model names, project paths, and dates are read. Prompt content (`response_item` lines in Codex, `message` lines in Claude JSONL) is never parsed.\n\n### Personalized OG image (`tokenfolio og`)\n\nAfter `tokenfolio init`, generate a `og.png` containing your numbers so social previews on X / LinkedIn / Lark show your stats instead of the generic brand image:\n\n```bash\nnpx tokenfolio og\n# → writes ./og.png  (1200×630, ready for og:image)\n\n# Force the Node/Satori renderer (no Python needed):\nnpx tokenfolio og --js\n\n# Force the Python/Pillow renderer:\nnpx tokenfolio og --python\n```\n\nDefault behavior: the JS/Satori renderer is tried first; if `satori` is not installed, it falls back to Python/Pillow automatically.\n\n- **JS path** (preferred for users without Python): requires `satori` and `@resvg/resvg-js` — `npm i -g satori @resvg/resvg-js`\n- **Python path** (no behavior change for users with Pillow installed): requires Python 3.9+ and Pillow (`pip install Pillow`)\n\nThe OG step is decoupled from `init` so the install footprint stays minimal for users who don't want an OG image.\n\n### Run locally\n\n```bash\ngit clone https://github.com/\u003cyou\u003e/\u003cyour-repo\u003e.git\ncd \u003cyour-repo\u003e\npython3 -m http.server 8765\nopen http://localhost:8765\n```\n\n### Pick one template as the homepage (`tokenfolio pick`)\n\nThe root `index.html` ships as a gallery of all 10 templates. To make one of them your real homepage:\n\n```bash\nnpx tokenfolio pick wrapped --force\n# rewrites ./index.html as a redirect to templates/wrapped/\n# git add index.html \u0026\u0026 git commit -m \"pick wrapped\"\n```\n\nAvailable: `wrapped` / `cosmos` / `almanac` / `terminal` / `aurora` / `holo` / `pixel` / `pass` / `brutalist` / `tcg`.\n\n\u003e ⚠️ **Don't copy template files to the root directly** — they reference `\u003cscript src=\"../../data.js\"\u003e` with a relative path. Copying to the root turns that into a 404. `tokenfolio pick` uses a redirect to sidestep this.\n\n### One-line share (`tokenfolio share`)\n\nAfter deploying, ship a post in one command:\n\n```bash\nnpx tokenfolio share\n# auto-detects your GitHub Pages URL, then opens (in your browser):\n#   1. your tokenfolio deploy\n#   2. an X intent pre-filled with your stats\n# also prints a LinkedIn share URL to copy\nnpx tokenfolio share --no-open    # print URLs only\nnpx tokenfolio share --text \"burned 47M tokens this year, you?\"\n```\n\n### GitHub profile badge (`tokenfolio badge`)\n\nAfter `init`, mint an SVG badge for your GitHub profile README:\n\n```bash\nnpx tokenfolio badge\n# → writes ./badge.svg (shields-style) and ./card.svg (github-readme-stats-style with monthly sparkline)\n# CLI prints a markdown snippet ready to paste into your profile README\n```\n\nEffect (paste into your profile README):\n\n```markdown\n[![tokenfolio](https://raw.githubusercontent.com/\u003cyou\u003e/\u003cyour-repo\u003e/main/badge.svg)](https://\u003cyou\u003e.github.io/\u003cyour-repo\u003e/)\n[![tokenfolio card](https://raw.githubusercontent.com/\u003cyou\u003e/\u003cyour-repo\u003e/main/card.svg)](https://\u003cyou\u003e.github.io/\u003cyour-repo\u003e/)\n```\n\nRe-run `tokenfolio init \u0026\u0026 tokenfolio badge \u0026\u0026 git push` to refresh. Pure static, zero server, zero dependencies.\n\n### Hand-editing `data.js` (when you don't use Claude / Codex)\n\nIf your AI tool isn't in the CLI's supported list, fill `data.js` by hand using the shape below. Where to find your token counts:\n\n- **Cursor**: Settings → Usage (monthly prompt / completion breakdown)\n- **GitHub Copilot**: [github.com/settings/billing](https://github.com/settings/billing) → Plans and usage (quarterly statements show token usage)\n- **Aider**: prints `Tokens: X sent, Y received` at the end of each session — sum them up\n- **Continue.dev**: no aggregate view yet — read the VS Code extension logs\n\nThen run `tokenfolio og` (or skip it) and deploy. PRs adding new sources to the CLI are welcome.\n\n## The data shape\n\n`data.js` is a single file that defines `window.RESUME_DATA`. The shape:\n\n```js\nwindow.RESUME_DATA = {\n  user:    { name, handle, title, location, since, avatar_initials, bio, links },\n  year:    2025,\n  totals:  { tokens, input_tokens, output_tokens, sessions, projects, cost_usd, avg_session_tokens },\n  by_month:    [{ month, label, tokens, sessions, top_project, top_model, note, peak? }],\n  by_model:    [{ name, tokens, sessions, color }],\n  top_projects:[{ name, tokens, sessions, language, description }],\n  highlights:  [{ label, value, detail }]\n};\n```\n\nEvery template reads from the same data object. Switch templates with zero data changes.\n\n## Roadmap\n\n- [x] 13 templates (wrapped, cosmos, almanac, terminal, aurora, holo, pixel, pass, brutalist, tcg, vinyl, synthwave, receipt)\n- [x] `tokenfolio init` CLI for Claude Code (via ccusage)\n- [x] CLI: Codex (`~/.codex/sessions/`) parser\n- [x] CLI: `tokenfolio og` for personalized OG image (Pillow + Node/Satori dual-engine, `--js` / `--python`)\n- [x] CLI: `tokenfolio badge` README badge + sparkline card (pure Node, zero deps)\n- [x] CLI: `tokenfolio pick \u003ctemplate\u003e` for homepage redirect\n- [x] CLI: `tokenfolio share` opens browser with pre-filled X / LinkedIn intent\n- [x] In-page PNG export + one-tap social sharing (v0.6)\n- [x] Bilingual README (中 / EN)\n- [ ] CLI: Cursor / Aider / Continue.dev support (where token counts exist)\n- [ ] More templates: synthwave, manga, trading-floor, vinyl\n- [x] CLI: `tokenfolio og --js` Node/Satori renderer, no Python required\n- [ ] Edge-rendered dynamic OG image (Vercel + Satori) for zero-install users\n- [ ] Dark/light mode toggle on each template\n- [ ] CLI output i18n\n- [ ] GitHub Action: monthly auto `tokenfolio init` + commit + push\n\n## Contributing\n\nWant to add a template? Drop a folder under `templates/\u003cyour-name\u003e/` with one `index.html` that loads `../../data.js` and renders the same data shape. PRs welcome.\n\n## License\n\nMIT — do whatever, just don't sue us.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftt-a1i%2Ftokenfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftt-a1i%2Ftokenfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftt-a1i%2Ftokenfolio/lists"}