A portfolio that plays like an arcade game: insert a coin, watch the intro
and pick a project from a 3D character select screen.
🎬 Demo GIF coming soon
| Screen | What happens | |
|---|---|---|
| 1 | Insert Coin | A blinking INSERT COIN on a black screen. Click anywhere to start. |
| 2 | Intro | A 3D logo flies in over a sky of clouds, with music, then flashes to white. |
| 3 | Select Screen | Projects are laid out as slots on a 3D globe. Hover one to see its banner and portrait, with a spinning PLAYER ring locking onto it. Click to open it. |
- Real-time 3D with React Three Fiber and drei: the cloud sphere, the 3D logo, the project globe and the rotating ring.
- Slots placed on a sphere: each row of the globe is projected onto the sphere surface and turned to face outward, so the cards curve like a real select screen.
- Arcade feel: pixel font, select screen music and hover sound effects.
- Data-driven: every project on the globe comes from a single JSON file.
- Static export: built with
next build(output: "export") and deployed to GitHub Pages on every push tomain.
Add an entry to public/data/projects.json:
{
"id": "my-game",
"name": "My Game",
"icon": "/projects/icons/my-game.png",
"portrait": "/projects/myGameBanner.png",
"url": "https://example.itch.io/my-game"
}Put the images in public/projects/ and push. The globe picks it up automatically.
npm install
npm run devThen open http://localhost:3000.
Note
In production the site is served from /portifolio-gameDev, so next.config.ts sets a basePath only when NODE_ENV=production. Asset paths in components are prefixed with NEXT_PUBLIC_BASE_PATH for the same reason.
Every push to main runs .github/workflows/deploy.yml, which builds the static site into out/ and publishes it to GitHub Pages.
portifolio-gameDev/
├── app/ # Next.js app router (layout, page, global styles)
├── components/
│ ├── InsertCoin/ # "INSERT COIN" start screen
│ ├── Intro/ # 3D intro: cloud sphere + logo
│ ├── Globe/ # 3D select screen: globe, slots, player ring, title
│ ├── ProjectBanner/ # Banner of the hovered project
│ ├── ProjectPortrait/ # Portrait of the hovered project
│ ├── Background/
│ └── Sfx/ # Music and hover sounds
├── lib/projects.ts # Project type
├── public/
│ ├── data/projects.json # Projects shown on the globe
│ ├── projects/ # Icons and banners
│ ├── music/ # Intro, select screen and hover sounds
│ └── fonts/
└── .github/workflows/ # GitHub Pages deploy
Press START to play · If you liked it, drop a ⭐