3D portfolio / resume constructor built with Three.js — inspired by Metroid Prime.
🌐 Live Demo · Customization Guide · Contributing
- 3D galaxy — each project or job is a planet orbiting the sun; click to open Markdown details
- JSON-driven — edit
data/welcome.json,data/planets.json, andcontent/— no code changes needed - GitHub auto-planets — public repos from your GitHub account appear as planets at runtime (see
data/github-sync.json) - Welcome page — classic CV layout for recruiters; export selected sections to PDF
- Multilingual — locale keys (
en,ru,sr) with SVG country flags via flag-icons - Horizontal carousels — projects and skills scroll sideways; overflow cards expand with Show more
- Brand icons — GitHub, Telegram, WhatsApp and more in contacts and tabs via Simple Icons
- Zero backend — fork, customize, push to
main→ GitHub Actions deploys to Pages - Deep links — share a project:
#/planet/galaxy-portfolio - Mobile-friendly — touch planet clicks, responsive welcome page
- WebGL fallback — clear instructions if WebGL is unavailable
Prerequisites: Node.js 18+
# 1. Fork this repo on GitHub
# 2. Clone and install
git clone https://github.com/YOUR_USERNAME/galaxy-portfolio.git
cd galaxy-portfolio
npm install
# 3. Customize your data
# - data/welcome.json → name, experience, contacts
# - data/planets.json → projects as planets
# - content/ → Markdown descriptions
# 4. Run locally
npm run dev
# 5. Push to main → GitHub Pages deploys automatically| File | Replace with your data |
|---|---|
data/welcome.json |
Hero, work history, skills, contacts |
data/planets.json |
Your projects and roles |
data/github-sync.json |
GitHub username and repo filters for auto-planets |
data/tabs.json |
GitHub link, About tabs |
content/ |
Markdown files and images |
vite.config.js |
base: '/your-repo-name/' |
index.html |
OG meta URLs (optional) |
See the full guide in docs/CUSTOMIZATION.md.
See docs/MEDIA.md for which images and GIFs to prepare.
| Welcome Page |
3D Universe |
- Language switcher — top-right flag + locale code buttons (saved in
localStorage) - Download CV — export selected sections to PDF
- Explore My Work — animated transition into the 3D universe
| Input | Action |
|---|---|
| Left mouse + drag | Orbit camera |
| Right mouse + drag | Pan camera |
| Mouse wheel | Zoom |
| Click planet / label | Open detail modal |
| ⏸ button | Pause / resume orbital motion |
| Touch (mobile) | Tap planet to open modal |
Configured in data/tabs.json:
home— return to welcome pagemodal— open About (or any Markdown modal)link— open external URL
galaxy-portfolio/
├── data/ # JSON config (edit these)
│ ├── welcome.json # Resume / welcome page (multilingual)
│ ├── planets.json # 3D planets (manual projects & jobs)
│ ├── github-sync.json # GitHub username & filters for auto-planets
│ └── tabs.json # Top navigation bar
├── content/ # Markdown + images
├── src/
│ ├── main.js # App logic, welcome page, PDF export
│ ├── scene.js # Three.js 3D scene
│ ├── modal.js # Markdown modals
│ ├── routes.js # Hash routes (#/planet/...)
│ └── styles.css
├── scripts/
│ └── copy-data.js # Sync data/ and content/ for dev & build
└── docs/ # Guides, screenshots, marketing drafts
Planets, tabs, and welcome page fields are documented in docs/CUSTOMIZATION.md.
Quick example — add a planet in data/planets.json:
{
"name": "My Project",
"startDate": "2024-01-01",
"endDate": "2024-06-01",
"tabs": [
{
"title": "Overview",
"content": "content/my-project/description.md"
}
]
}Share it: https://your-site.github.io/your-repo/#/planet/my-project
npm install
npm run dev # http://localhost:5173/galaxy-portfolio/
npm run build # output in dist/
npm run preview # preview production buildnpm run copy-data copies data/ → src/data/ and content/ → public/content/. Dev and build run this automatically.
- Create a repository and push this project (
mainbranch) - Set Pages source to GitHub Actions (Settings → Pages)
- Every push to
mainruns.github/workflows/deploy.yml
If your repo name differs from galaxy-portfolio, update base in vite.config.js:
base: '/your-repo-name/',Site URL: https://<username>.github.io/<repo>/
Recommended GitHub Topics: see docs/GITHUB_TOPICS.md.
If the 3D universe does not load:
- Enable hardware acceleration in browser settings
- Check WebGL:
chrome://gpu(Chrome) orabout:support(Firefox) - Update GPU drivers
- Try Chrome, Firefox, or Edge
Test WebGL: get.webgl.org
| Site | Author |
|---|---|
| Live demo | wantid |
Using this template? Open a PR to add your site!
See docs/ROADMAP.md for planned features.
Contributions are welcome! Read CONTRIBUTING.md for setup and PR guidelines.
MIT © Dmitriy Kurilov
If this template helped you, consider giving it a ⭐ on GitHub!