A browser-based tool for generating GitHub profile READMEs and standalone HTML portfolio pages — no sign-up, no build step, no dependencies.
jasonmiller-cc.github.io/profile-generator
Fill in the form → preview updates live → download your README.md or profile.html.
- Live preview — three-tab preview: rendered Markdown, raw output, and a dark-theme HTML page
- 17 user type presets — auto-fills default values and suggests relevant skills for your role (Full Stack, DevOps/Cloud, ML Engineer, Cybersecurity, SRE, and more)
- 133 skills across 6 categories — Languages, Frameworks, Databases, DevOps, Design, Tools; searchable and filterable
- 19 social platform links — GitHub, LinkedIn, portfolio, email, Dev.to, Hashnode, Kaggle, Hugging Face, Bluesky, Mastodon, and more
- GitHub stats widgets — stats card, top languages, streak stats, profile summary card, activity graph, and visitor counter
- 45 themes, 5 badge styles — all powered by shields.io and github-readme-stats
- Two output formats —
README.mdfor your GitHub profile repo,profile.htmlas a standalone dark-theme portfolio page - Graceful degradation — broken or unavailable stat service images are automatically hidden in the preview
- Zero dependencies — pure HTML, CSS, and JavaScript; works offline after first load; no framework, no build step
Open jasonmiller-cc.github.io/profile-generator in any modern browser.
git clone git@github.com:jasonmiller-cc/profile-generator.git
cd profile-generator
python3 -m http.server 7890Then open http://localhost:7890 in your browser.
No npm install, no build — the project is a single index.html with vanilla JS and CSS.
profile-generator/
├── index.html # App shell, form layout, preview tabs
└── assets/
├── css/
│ └── style.css # Dark GitHub-themed design system
└── js/
├── data.js # Skills, user types, social platforms, themes
├── generators.js # Markdown and HTML output generators
└── app.js # UI logic, live preview, download handlers
The generator embeds widgets from these third-party services. They require a GitHub username with public contribution history to display correctly — widgets for new or private-only accounts are automatically hidden in the preview.
| Widget | Service |
|---|---|
| Stats card & Top languages | github-readme-stats |
| Streak stats | streak-stats.demolab.com |
| Profile summary | github-profile-summary-cards |
| Activity graph | github-readme-activity-graph |
| Visitor counter | komarev.com/ghpvc |
| Badges | shields.io |
Note:
github-readme-stats.vercel.app(the public instance) is frequently overloaded. If stats cards don't appear in your downloaded README, consider deploying your own instance.
| Role | Role | Role |
|---|---|---|
| Full Stack Developer | Frontend Developer | Backend Developer |
| Mobile Developer | Data Scientist / ML Engineer | DevOps / Cloud Engineer |
| UI/UX Designer | Cybersecurity Engineer | Game Developer |
| Embedded / Hardware Engineer | Researcher / Academic | Student |
| Technical Writer | Product Manager | Open Source Maintainer |
| Blockchain / Web3 Developer | Site Reliability Engineer |
Selecting a role auto-suggests relevant skills and pre-fills the "Working on" and "Learning" fields with sensible defaults.
- Fork the repo
- Clone it:
git clone git@github.com:YOUR_USERNAME/profile-generator.git - Run locally:
python3 -m http.server 7890 - Make your changes — no build step required
- Open a pull request
Adding a skill: edit assets/js/data.js → add an entry to the appropriate category array with id, name, logo, color, and logoColor (shields.io badge parameters).
Adding a social platform: edit the SOCIAL_PLATFORMS array in assets/js/data.js.