Adam

Posted on Jan 31 • Edited on Feb 3

I Built Bruno Simon's Inspired Portfolio as a 3d Web Noob, Here's My Learning Experience

#devchallenge #googleaichallenge #portfolio #gemini

New Year, New You Portfolio Challenge Submission

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

Hi! I'm Adam, a full-stack vibe-developer from Jakarta, Indonesia. I specialize in AI-powered applications and interactive experiences. But I have very little 3d web experience, if any.

The challenge I set for myself: As a 3d noob, could I build a Bruno Simon-inspired 3D portfolio in under 20 days while juggling daily responsibilities? Bruno's site took him months, with years of experiences. I had January 12 → February 1, with just some AI assistant at my disposal and my own stubbornness.

This portfolio represents everything I've learned from juggling with projects, iterating with AI, winning hackathons (Auth0, Postmark, Wasp) and reaching the finals of Hack for Humanity 2025. I'm aiming more than just a gallery. Hopefully it is a playable game.

Try below, currently much better when on desktop

Portfolio

🎮 Full Controls & Features

Basic Controls

Input	Action
WASD / Arrow Keys	Drive the bajaj
E	Toggle engine on/off
Shift	Boost (with shake effect)
Space	Honk
C	Toggle headlights
J	Open journal
M	Expand/collapse minimap

Gameplay Features

Feature	Description
6 Buildings	Internet Cafe, Workshop, Library, House, Arcade, Warung — each houses different project categories
Parking System	Park near "P" markers to enter buildings (cursor changes when parked)
15 Collectibles	Scattered around the world — 8 visible, 4 in knockable boxes, 3 hidden in bushes
12 Achievements	"First Steps", "Speed Demon", "Night Owl", "Explorer", "Collector", "Completionist", etc.
Speedrun Mode	Drive to the speedrun zone, enter your initials, race through 10 rings — your time gets submitted to the global leaderboard
Global Leaderboard	Best speedrun times synced via Convex backend — compete globally!
Day/Night Cycle	Based on your local time, with dynamic lighting and stars
AI Chat (Warung)	Ask about any of my 25+ projects — Gemini knows everything

🥚 Easter Eggs

Trigger	Effect
↑↑↓↓←→←→BA	Konami code — Bajaj transforms into TransJakarta bus!
Honk 5x quickly	Bajaj does a wheelie
Visit 5 buildings	Unlock different Sky texture (day: jakarta, night: aurora)
Type "disco"	Disco lights mode

How I Built It

The 20-Day Journey

This project went through 3 build plan iterations before I was satisfied. The final build plan spans 2,500+ lines of granular tasks across 8 phases:

Week 1 (Jan 12-18): Foundation + Physics
Week 2 (Jan 19-25): Assets + Interactivity + Backend  
Week 3 (Jan 26-31): Polish, Easter Eggs, Optimization, Deploy

My AI-Powered Workflow (Full Transparency)

This project is supported by Google and I'm using Antigravity IDE. Antigravity is such a blessing — I really love how it generates implementation plans and task checklists whenever we plan things. It acts as a layer between my draft ideas and real working step-by-step tasks. Antigravity-specific extension I use is called "Antigravity Cockpit" to monitor my quota.

Since I already had my build plan, I mostly did one phase per session and the implementation-task system in Antigravity followed it nicely and seamlessly. I have Google AI Pro, so I use Claude Opus 4.5 and Gemini 3 Pro.

At the start when planning, I used Perplexity to research tech stacks and make my tasks reflect real-world documentation. I kept using Perplexity in Antigravity as an MCP server until the end of the project — super useful for research tasks.

🔍 AI Code Review Army

I'm abusing AI code review on this project (in a good way!) — I use a multitude of code review AIs on a single project. I didn't pay for most of them because I either got promos or they're currently free:

Tool	How I Got It
CodeRabbit	Free via DEV++ membership
Devin Review	Currently free
Cubic	Free tier
Mesa	Free tokens (ran out near project end 😅)
Entelligence	Free tier

When people see my Git history, especially my PRs, they'll see this code review AI army butchering my code and finding bugs/edge cases!

🤖 Agent Skills I Used

I use skills.sh (Vercel's Open Agent Skills Ecosystem) to extend Antigravity. Super easy to integrate — just copy the installation script to your terminal:

find-skills — Find other skills
gcp-cloud-run — Cloud Run deployment
google-gemini-api — Gemini SDK patterns
r3f-best-practices — React Three Fiber optimization

🎨 3D Asset Generation

For the 3D models, I used FAL.ai with:

Hunyuan 3D-v3 — Text-to-3D for buildings and vehicles (LowPoly mode, 40k triangles)
Imagen 4 — Textures (road, sky, grass)
Beatoven SFX — Sound effects (engine loop, honk)

The Bajaj and TransJakarta bus (the Konami code easter egg vehicle!) were both generated this way.

💬 My Prompting Style

When I hit complex bugs found by the code review AIs, I use this prompt pattern — making the AI act as a "senior distinguished engineer under audit":

# background 

we are on the code review of current phase. 

i do use multiple ai code review for latest PR.
they are done, and i am still not merging that PR so it is still open. and currently we are still on same last working branch if im not mistaken. 
i need u to check below regarding latest PR and change, here are some of its findings. some of it have high severity, some lower.

Check if these issues are valid — if so, understand the root cause of each and fix them. 
Again, check thoroughly (multiple times, if needed) if it is valid, if it is not valid no need to do it, if it is done no need to do again.

You must act as a senior distinguished game engineer overseeing an array of multiple senior engineers, operating under strict audit constraints of third party auditor
You are required to rigorously review, verify, and implement solutions at production quality.
All code writing and evaluations must include concrete code, gameplay systems, game physics, and overall technical architecture.
You must reason step by step with meticulous scrutiny, validate every assumption, identify risks and edge cases, and produce clear, auditable corrections and improvements.
No part of the system may be treated as implicit, optional, or assumed.

i dont care if you use librarian, oracle, or any other tool that built in in your disposal. do this job as best as you can with best understanding of everything.

we have:
- agent skills finder for finding skills if you are needing to have extra hand for searching agent skill, use it for absolute best practice of anything you need to do.
- perplexity for search web but be extra careful, please do include all context and background when asking query so they are giving the solution we literally face and not some problem that similar but has different solution. 

below findings might include few or all of the code review platform, it is each wrapped between: 
`<problem>  </problem>` 
tag.

<problem>  

## bug 1
## bug 2
## etc

</problem>

(The "librarian" and "oracle" in the prompt are from Ampcode — they have these roles in their agent. I use Ampcode because they give $10/day in their free ad-supported model, which is super useful.)

I supposedly integrated Sentry and PostHog for this project to experiment with tracking, but currently paused. Curious to see how it performs in production and whether I should re-initialize the analytics again!

Tech Stack

Layer	Technology
3D Engine	React Three Fiber + Drei
Physics	Rapier WASM (not Cannon — better performance)
State	Zustand (client) + Convex (server)
UI	React 19 + TypeScript + CSS Modules
AI Chat	Google Gemini 2.0 Flash (streaming SSE)
Analytics	PostHog (paused) + Sentry
Backend	Express.js
Deployment	Google Cloud Run

Google AI Integration

The Warung Chat is powered by Gemini 2.0 Flash with a comprehensive system prompt containing:

All 25+ projects with descriptions, tech stacks, and links
Developer profile, skills, awards
FAQ responses for common questions
Building guide for navigation

// Streaming SSE endpoint
const stream = await model.generateContentStream({
  contents: [{ role: 'user', parts: [{ text: prompt }] }],
});

for await (const chunk of stream) {
  res.write(`data: ${JSON.stringify({ text: chunk.text() })}\n\n`);
}

Features:

Real-time token streaming (ChatGPT-like)
24-hour response caching
Offline fallback with retry logic
Rate limiting (10 req/min)

Performance Engineering

The build plans have explicit Performance Gates that must pass before each phase:

Metric	Target	Achieved
Mobile FPS	>30	✅ 56 FPS
GPU Time	<5ms	✅ 3.1ms
CPU Time	<10ms	✅ 5.5ms
Draw Calls	<100	✅ 56
Bundle Size	<3MB	✅ 1.28MB models

Optimizations applied:

Draco-compressed GLTF models (98.5MB → 1.28MB, 98.7% reduction)
Frame-rate independent animations
Lazy-loaded analytics (PostHog (paused)/Sentry defer via requestIdleCallback)
Device-adaptive quality (auto-detects low-end devices)
WebGL context loss recovery

Cloud Run Deployment

Deployed via source-based deployment (no local Docker required):

gcloud run deploy jakarta-portfolio \
  --source . \
  --region us-central1 \
  --memory 1Gi --cpu 1 \
  --min-instances 1 --cpu-boost \
  --set-secrets=GEMINI_API_KEY=gemini-api-key:latest \
  --labels dev-tutorial=devnewyear2026

🔐 GCP Permissions Required (for anyone replicating):

Role	Service Account	Why
`storage.objectViewer`	Compute Engine	Source access
`storage.objectAdmin`	Cloud Build	Write access
`artifactregistry.writer`	Compute Engine	Push images
`logging.logWriter`	Compute Engine	Build logs
`secretmanager.secretAccessor`	Cloud Run	Gemini API key

Important: Cloud Run has no GPU. All 3D rendering happens in the user's browser. Cloud Run only serves static files and handles API requests.

What I'm Most Proud Of

🎮 It's a Real Game, Not Just a Portfolio

Most portfolios are static pages with projects listed. This is a playable experience with:

Physics-based driving (acceleration, braking, drift)
Collectible hunting with progress tracking
Achievements that unlock as you explore
A global leaderboard for speedrunners
Easter eggs rewarding curiosity

🇮🇩 Indonesian Cultural Context

Bajaj — the iconic orange three-wheeler
Warung — traditional food stall where local indonesian people gather and chit-chats (now serving AI chat)
Jakarta Street — the overall theme
TransJakarta — the secret easter egg vehicle

🤖 AI That Actually Helps

The Warung Chat isn't a gimmick. It's the fastest way to learn about my 25+ projects. Ask:

"What are your hackathon wins?"
"Tell me about Assistant Zero"
"What's your tech stack?"

And get instant, contextual answers with streaming responses.

⚡ 20 Days, 2 Build Plans, 8 Phases

The build plans in my repo (dokss/portfolio-1-granular-build-plan-v3.md and dokss/portfolio-1-granular-build-plan-v3-neo.md) document every decision: