README → Portfolio

Paste your GitHub README.md and instantly get a beautiful, shareable portfolio page.

✓ No signup ✓ Browser-only ✓ Download HTML 5 themes
How it works: Paste your README.md below → choose a theme → preview instantly → download as a self-contained HTML file you can host anywhere.
📄 Your README.md
🎨 Theme
👁 Preview
Your portfolio preview will appear here →

🔧 Like these tools? Get the complete automation kit.

Freelancer Automation Kit — $19 Daily Digest Kit — $15
`; } function generate() { const md = document.getElementById('readme-input').value.trim(); if (!md) { alert('Please paste your README.md content first.'); return; } generatedHTML = buildPage(md, currentTheme); const placeholder = document.getElementById('preview-placeholder'); const frame = document.getElementById('preview-frame'); placeholder.classList.add('hidden'); frame.classList.remove('hidden'); const blob = new Blob([generatedHTML], { type: 'text/html' }); const url = URL.createObjectURL(blob); frame.src = url; } function downloadHTML() { if (!generatedHTML) { generate(); } if (!generatedHTML) return; const blob = new Blob([generatedHTML], { type: 'text/html' }); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'portfolio.html'; a.click(); } function copyHTML() { if (!generatedHTML) { generate(); } if (!generatedHTML) return; navigator.clipboard.writeText(generatedHTML) .then(() => alert('HTML copied to clipboard!')) .catch(() => { const ta = document.createElement('textarea'); ta.value = generatedHTML; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); alert('HTML copied!'); }); } function openInNewTab() { if (!generatedHTML) { generate(); } if (!generatedHTML) return; const blob = new Blob([generatedHTML], { type: 'text/html' }); window.open(URL.createObjectURL(blob), '_blank'); } function clearInput() { document.getElementById('readme-input').value = ''; generatedHTML = ''; document.getElementById('preview-frame').classList.add('hidden'); document.getElementById('preview-placeholder').classList.remove('hidden'); } function loadExample() { document.getElementById('readme-input').value = `# Alex Chen > Full-stack developer · Open source contributor · Building tools that make developers' lives easier ## About I build web applications and developer tools. Currently focused on automation and AI integrations. Previously at a startup building B2B SaaS, now independent. ## Projects - **[DevDash](https://github.com/...)** — Real-time developer metrics dashboard (React + Node.js + PostgreSQL) - **[AutoDeploy](https://github.com/...)** — Zero-config deployment tool for Node.js apps, 800+ GitHub stars - **[QueryBench](https://github.com/...)** — SQL query performance testing framework - **[OpenBlog](https://github.com/...)** — Minimal markdown blogging engine, no database ## Skills JavaScript · TypeScript · React · Node.js · Python · PostgreSQL · Docker · AWS · Kubernetes ## Writing - [Why I stopped using ORMs](https://blog.example.com/no-orm) - [Building zero-downtime deployments on a budget](https://blog.example.com/deploys) - [What I learned shipping 5 side projects in 2 years](https://blog.example.com/learnings) ## Contact - 📧 alex@example.com - 🐦 [@alexchen_dev](https://twitter.com/alexchen_dev) - 💼 [LinkedIn](https://linkedin.com/in/alexchen) - 🌐 [alexchen.dev](https://alexchen.dev) `; generate(); }