The Idea
What if your GitHub profile wasn’t just a grid of green squares, but a piece of art?
That’s the question that led to CommitCanvas — a tool that transforms your GitHub data into stunning, shareable developer profile cards.
How It Works
- Enter any public GitHub username
- The app fetches profile data, repositories, commit history, and language stats via the GitHub API
- A Canvas 2D renderer draws a custom card using one of 6 artistic themes
- Download as PNG or copy an embed code
The 6 Themes
Each theme uses completely different rendering techniques:
- Galaxy — Particles and nebula effects using radial gradients
- City Skyline — Procedurally generated buildings from commit data
- Terrain — Topographic map visualization of coding patterns
- Waveform — Audio wave visualization of activity over time
- Neural — Neural network node graph connecting your repositories
- Heatmap — Traditional contribution heatmap with neon glow effects
Architecture Decisions
Why Canvas 2D?
SVG would have been easier for simple layouts, but Canvas gives us:
- Pixel-level control for effects (glow, particles, gradients)
- Better performance for complex animations
- Direct PNG export via
canvas.toDataURL()
Why No Framework?
The entire app is vanilla HTML + CSS + JavaScript. No React, no Vue, no build step.
Benefits:
- Zero dependencies
- Instant load time (< 100ms)
- Easy to deploy anywhere
- No framework lock-in
Why Freemium?
Three themes are free. Three require Pro ($4.99/month). This creates a natural upsell:
- User tries the free themes
- Sees the locked premium themes
- Curiosity drives the upgrade
The key insight: don’t lock core functionality, lock premium aesthetics.
Lessons Learned
- Visual products sell themselves. Screenshots and demos are your best marketing.
- Canvas 2D is underrated. Most developers jump to WebGL or Three.js. Canvas 2D is sufficient for 90% of visual products.
- BYOK (Bring Your Own Key) is the future. Users provide their own API keys, you provide the tool. Zero server costs.