A personal portfolio website for every GitHub user
Quick Start โข Features โข Customization โข Local Development โข Deployment
Gitfolio is a zero-configuration personal portfolio website that automatically fetches and displays your GitHub profile and repositories. No coding requiredโjust use it and showcase your work to the world in seconds.
Perfect for developers, open-source contributors, and anyone who wants a professional GitHub portfolio without the hassle.
- Runtime: Node.js 12+
- Template Engine: Handlebars
- HTTP Client: Axios
- Testing: Jest
- Code Style: Prettier + ESLint
- Deployment: Vercel
gitfolio-online/
โโโ api/ # Vercel serverless function
โ โโโ index.js # Main API endpoint
โโโ assets/ # Static assets
โ โโโ index.html # Base HTML template
โ โโโ index.css # Global styles
โ โโโ themes/ # Theme CSS files
โ โโโ dark.css
โ โโโ light.css
โ โโโ auto.css # Auto-follow system theme
โ โโโ dracula.css
โโโ src/ # Core modules
โ โโโ fetch.js # GitHub GraphQL API fetcher
โ โโโ render.js # Handlebars template renderer
โ โโโ retryer.js # Token rotation & retry logic
โ โโโ utils.js # Utility functions
โโโ scripts/ # Development scripts
โ โโโ server.js # Local dev server
โโโ tests/ # Test files
โ โโโ render.test.js
โโโ .env.example # Environment variable template
โโโ package.json # Project configuration
โโโ vercel.json # Vercel deployment config
Get your portfolio up and running in 30 seconds:
Simply change {username} to your GitHub username:
https://gitfolio-online.vercel.app/user/{username}
# Or use the short version
https://gitfolio-online.vercel.app/u/{username}
That's it! ๐
Switch between light, dark, auto, and dracula themes with a single URL parameter. The auto theme automatically follows your system's color scheme preference.
Automatically fetches your latest GitHub activity (with smart caching).
Built with Vercel Edge Network for lightning-fast global performance.
Fine-tune every aspect of your portfolio with URL parameters.
No configuration files, no build steps, no deployment neededโjust use it.
Choose which repositories to display (include/exclude forks, limit count).
Switch between built-in themes:
https://gitfolio-online.vercel.app/u/{username}?theme=dark
https://gitfolio-online.vercel.app/u/{username}?theme=light
https://gitfolio-online.vercel.app/u/{username}?theme=auto # Follows system preference
https://gitfolio-online.vercel.app/u/{username}?theme=dracula # Dracula color scheme
Control whether to display forked repositories:
https://gitfolio-online.vercel.app/u/{username}?includeFork=true
https://gitfolio-online.vercel.app/u/{username}?includeFork=false
| Parameter | Type | Description | Default | Example |
|---|---|---|---|---|
username |
string | Your GitHub username | - | wangningkai |
theme |
string | Built-in theme name | dark |
dark, light, auto, dracula |
includeFork |
boolean | Display forked repositories | false |
true, false |
repoNum |
number | Number of repositories to display | 30 |
10, 20, 50 |
cache_seconds |
number | Cache duration in seconds | 1800 |
600, 3600 |
Combine multiple parameters:
https://gitfolio-online.vercel.app/u/wangningkai?theme=light&includeFork=true&repoNum=50
Check out these live examples:
- wangningkai - Full portfolio with forks
- torvalds - Linux creator's profile
- gaearon - React core team member
Want to run Gitfolio locally? Follow these steps:
- Node.js 12+
- GitHub Personal Access Token (required for GitHub GraphQL API)
# Clone the repository
git clone https://github.com/wangningkai/gitfolio-online.git
cd gitfolio-online
# Install dependencies
pnpm install
# or
npm installCreate a .env file based on .env.example:
# GitHub Personal Access Token (required for GitHub GraphQL API)
# Create one at https://github.com/settings/tokens
# Scopes needed: none (for public repos) or 'repo' (for private repos)
PAT_1=your_github_token_here
# Optional: Additional tokens for rate limit rotation (supports PAT_1 ~ PAT_8)
# When rate limit is hit, the system automatically rotates to the next token
# PAT_2=your_second_token_here
# PAT_3=your_third_token_here
# Custom cache duration in seconds (optional, range: 30min~24h)
CACHE_SECONDS=1800# Start the development server with hot reload
pnpm dev
# or
npm run dev
# Or start with specific port
PORT=3000 npm run devVisit http://localhost:3000/u/{username} to see your portfolio.
# Run all tests
pnpm test
# or
npm test
# Run tests with watch mode
pnpm test -- --watchClick the button below to deploy to your own Vercel instance:
Why deploy your own instance?
- Avoid rate limits: GitHub API has a 5,000 requests/hour limit
- Custom configuration: Full control over caching and themes
- Privacy: Your own instance with your own analytics
- Branding: Add your own domain and customization
Gitfolio works on any Node.js hosting platform:
- Netlify: Connect your Git repository
- Heroku: Use Heroku Buildpack for Node.js
- Railway: One-click deploy from GitHub
- Render: Deploy as a Node.js service
- Self-hosted: Run on any VPS or server
The GitHub API has rate limits (5,000 requests/hour). If many users share the same instance, you might encounter rate limit errors during peak hours. Deploying your own instance ensures consistent performance.
Currently, Gitfolio supports built-in light/dark/auto/dracula themes. Custom theme support is planned for future releases.
The auto theme detects your system's color scheme preference (light or dark) and automatically applies the matching theme. This works on all modern browsers that support prefers-color-scheme media query.
Gitfolio automatically fetches your latest GitHub data. Changes may take up to 30 minutes to appear (configurable with cache_seconds parameter).
Yes, by default Gitfolio displays up to 30 repositories. You can adjust this with the repoNum parameter (max 100 to ensure performance).
Currently, you can only show/hide all forks. Selective repository hiding is planned for future releases.
If you provide multiple tokens (PAT_1 through PAT_8), Gitfolio will automatically rotate to the next token when one hits the GitHub API rate limit, ensuring uninterrupted service.
Contributions are welcome! Here's how you can help:
Before reporting bugs, please read How To Ask Questions The Smart Way.
Report bugs via:
- GitHub Issues (preferred)
- Email: i@ningkai.wang
- Fork the repository
- Create a feature branch:
git checkout -b my-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-feature - Submit a pull request
- Follow Prettier code style
- Write clear commit messages
- Test thoroughly before submitting
I open-source almost everything I can, and I try to help everyone using these projects. This takes time, and the service is provided for free.
If you find Gitfolio useful and want to support its development:
- Star the repo on GitHub: โญ
- Share it with your friends and colleagues: ๐
- PayPal: paypal.me/wangningkai
- WeChat & AliPay: pay.ningkai.wang
Your support helps me continue creating and maintaining open-source projects! โค๏ธ
GPL-3.0 License - see LICENSE for details.
- Inspired by the original Gitfolio project
- Built with Vercel
- Powered by GitHub GraphQL API
Made with โค๏ธ and JavaScript by @wangningkai and the open-source community.
A personal portfolio website for every GitHub user.