A GitHub portfolio generator that turns any username into a polished portfolio site with 5 templates and 7 color themes.

Day 13. What if you could turn any GitHub profile into a good-looking portfolio site without writing a single line of code?

The Prompt

> "Build a GitHub portfolio generator. Enter a username, get a polished portfolio with stats, repos, languages, and activity. Multiple templates, multiple color themes, export to HTML."

How It Was Built

Watchfire broke this down into 19 tasks. The core work started with GitHub API integration and pulling all the data you would want in a portfolio: profile info, repos, contribution activity, languages, organizations. From there it built out the template system, the theme engine, and all the export and sharing features.

The task list covered a lot of ground: five portfolio templates (Minimal, Developer Card, Creative/Bento Grid, Corporate/Showcase, and a Hacker/Terminal theme), seven color themes, custom accent colors, print and PDF mode, auto-detected skills, deployment guides, README export, and a social share card generator. It is a surprisingly deep feature set for something that runs entirely in the browser with no backend.

What I Got

The landing page already looks polished. Dark mode by default, clean typography, a three-step explainer, and a preview of all the templates and themes right on the homepage.

Five templates, each with a distinct personality. Showcase is the full-featured option with a bento grid layout. Developer Card is compact and to the point. Bento Grid goes for the asymmetric card look. Minimal strips everything down to typography. And Terminal renders the whole thing as a command-line interface, complete with ASCII art and monospaced fonts.

Seven color themes plus custom accents. Midnight, Ocean, Forest, Sunset, Rose, Slate, and a custom option where you pick your own accent color. The landing page even has a light mode variant.

The generated portfolios are packed with data. Stats with animated counters, contribution heatmap, language breakdown with a stacked bar chart, top repositories, recent activity, organizations, social links. All pulled from the public GitHub API with zero authentication required.

The customization panel is thorough. You can toggle individual sections on and off, switch themes and templates live, override the bio text, and see changes reflected instantly. Everything happens client-side so there is no loading between switches.

The Bento Grid template looks great. This was the one that surprised me. It lays out profile info, stats, featured repos, recent activity, and languages in an asymmetric card grid that feels like a proper design project.

...

---

Read the full article →