We all know the cycle. You spend weeks building an incredible side project, you push it to GitHub, and then... you realize you have to manually update your personal portfolio site. So, the project sits there, invisible to recruiters, and your portfolio slowly goes out of date.
I got tired of this, so I built Publicolio.
Publicolio is an open-source, zero-config generator that turns your GitHub profile into a premium, editorial-grade portfolio website instantly. No servers. No databases. No manual updates.
nishal21
/
Publicolio
Publicolio is a zero-config GitHub portfolio generator. It lets you fetch a GitHub profile, select repositories, style the page with theme controls, and generate a shareable link.
Publicolio
Publicolio is a zero-config GitHub portfolio generator It lets you fetch a GitHub profile, select repositories, style the page with theme controls, and generate a shareable link.
What It Does
- Fetches profile and repo data from GitHub.
- Supports optional personal token input in builder mode for private/owner repos.
- Provides 6 visual themes.
- Provides editor controls for layout and styling.
- Generates shareable portfolio URLs with selected repositories and style options encoded in query params.
- Optionally shortens links through a Cloudflare Worker.
- Supports short link domain choice between workers.dev and custom domain.
- Caches builder state so returning users can continue editing after refresh.
- Supports
Update Linkflow to keep the same short URL when the backend supports slug updates.
How It Works
Publicolio has two runtime modes.
- Builder mode
- If no
userandthemequery params are present, the app renders the interactive builder UI. - User enters GitHub username, picks reposβ¦
β¨ The Visuals: Structural Themes
I didn't just want to build a tool that swapped out CSS colors. I wanted themes that fundamentally changed the layout (the DOM structure) based on the developer's vibe.
Right now, it ships with several high-end themes:
Neo-Brutalism: High contrast, harsh borders, and bold typography.
Liquid Glass: Frosted glassmorphism with overlapping translucent cards.
Aurora: Glowing animated gradients and atmospheric design.
Terminal: A high-fidelity "hacker" aesthetic with macOS-style window chrome.
You just type in your GitHub username, pick your repositories, and generate a link.
βοΈ The Architecture: Keeping it 100% Free
The most interesting challenge of this project was figuring out how to build a dynamic tool without paying for a traditional backend or database. Here is how I architected the serverless pipeline:
The Frontend (Vite + React + Tailwind v4)
The app is a strict Single Page Application (SPA) hosted for free on GitHub Pages. It fetches your pinned and recent repositories directly from the GitHub REST API right inside the browser.Bypassing CORS & Rate Limits
If you hit GitHub's API directly from a browser, you run into strict rate limits. If you try to fetch from other platforms (like GitLab), you get hit with CORS blocks.
The Solution: I built a custom, zero-cost proxy using a Cloudflare Worker. The React app routes requests through the edge worker, which safely injects CORS headers and handles optional Personal Access Tokens (PATs) so users can fetch their private repositories safely.
- The Database-less Shortener When a user selects their theme and custom repositories, that data has to be saved somewhere so the generated portfolio link works when shared. Instead of a Postgres database, I encoded the user's state directly into the URL query parameters (e.g., /?user=nishal21&theme=brutal&repos=ProjectA,ProjectB).
The Problem: Those URLs are ugly and too long for a resume.
The Solution: I spun up a second Cloudflare Worker attached to Cloudflare KV (Key-Value storage). When you deploy your portfolio, the frontend sends the long URL to the Worker, which saves it to KV and returns a sleek, random 6-character short link.
π Try it out
I built this to solve my own problem, but I made it completely open-source so anyone can use it or learn from the Cloudflare architecture.
If you want to generate a portfolio for yourself in about 10 seconds, check it out!
π Live Generator: [https://app.publicolio.qzz.io/]
π Source Code: [https://github.com/nishal21/Publicolio]
I would love to hear your feedback on the code, the UI themes, or how you handle your own personal portfolios. Drop your generated links in the comments!


Top comments (0)