How I Built This Entire Portfolio + Game World in 1 Day with AI
Archived, February 2026. Brief to deployment in a single day: a Next.js 16 portfolio with a 2D multiplayer game world, 5 career zones and 15+ mini-games. That world was retired in July 2026 and the post-mortem is public; this is how it was built, and what one day of speed cost later.
Written February 2026. The site it describes no longer exists.
The game world in this post was retired in July 2026 — audited rather than patched, at 25,800 lines with a pet-follow effect that re-rendered the whole world at 60fps while standing still.
/worldnow redirects here. The post-mortem isdocs/WORLD-AUDIT.mdin the repo, and what replaced it is the console you are reading this in.The post is kept as written. Speed was the thing being measured, and one day was real; what it bought was a codebase that could not be extended, which is the more useful half of the lesson and not the half the original ending drew.
Yo. Let me tell you something wild.
This entire website — the portfolio, the blog, the services pages, the contact form, the AI chatbot, AND a full 2D multiplayer game world with 5 zones, 15+ mini-games, NPCs, and real-time multiplayer — was built in one day.
Not two weeks. Not a sprint. One. Day.
I'm James Lorenz Santos, Summa Cum Laude software engineer (Rank 1 in IT, Top 1 Dean's List two terms running), and this is the story of the most intense build session of my life.
The Vision
I wanted something that would make people stop scrolling. Not just another dark-mode portfolio with a hero section and a contact form. I wanted visitors to literally play through my career — walking through zones that represent every chapter of my journey as a developer.
The plan was ambitious:
- Full professional portfolio with services, career timeline, and blog
- Interactive 2D game world where you explore my life story as a stick figure
- 5 career zones — from my university days to my current work
- 15+ mini-games and challenges scattered across the map
- Real-time multiplayer so visitors can see each other walking around
- AI-powered chatbot that knows everything about me
- React Bits animations for that extra visual polish
The original project brief said 14 days. I said "let's see about that."
The Tech Stack That Made It Possible
Framework: Next.js 16.1.6 (App Router + Turbopack)
Language: TypeScript 5.x
Styling: TailwindCSS v4 + Motion (Framer Motion 12.x)
UI: shadcn/ui (Radix UI based)
Database: Supabase PostgreSQL
Auth: Supabase Auth
Realtime: Supabase Realtime (Presence + Broadcast)
Game Engine: Custom React + CSS stick-figure engine
AI: Cloudflare Workers AI + Gemini Flash fallback
Content: MDX (file-based blog)
Hosting: Vercel (free tier)
AI Partner: Claude Code
This stack isn't random. Every piece was chosen for speed-to-deploy AND production quality. Next.js 16 with Turbopack gives you instant hot reloads. TailwindCSS v4 with CSS-native config means no config files to manage. Supabase handles auth, database, AND real-time in one service. And Claude Code? That's the multiplier that made the 1-day timeline possible.
Morning: Foundation and Portfolio
I started around 6 AM with a project brief document and a clear design system in my head — dark mode, electric cyan (#00E5FF) primary, violet (#7C3AED) secondary, glassmorphism cards.
The first few hours were all foundation:
- Design tokens and global CSS setup
- Navbar with glassmorphism effect and mobile hamburger menu
- Hero section with animated gradient background (pure CSS, 60fps)
- About page with interactive career timeline
- Services grid with hover animations
Claude Code handled the boilerplate at insane speed. I'd describe a component at a high level — "build me a career timeline with alternating cards, glassmorphism styling, and scroll-triggered animations" — and it would generate the whole thing. My job was reviewing, adjusting proportions, and making sure the design language stayed consistent.
// The kind of prompt-to-code speed I'm talking about:
// "Add a glassmorphism card with hover glow effect"
// → Full component in seconds, matching the design system
Afternoon: The Game World
This is where it got really fun.
The game world is a custom 2D engine built entirely in React and CSS. No Phaser, no PixiJS, no heavy game framework. Just React components, CSS transforms, and a lot of clever state management.
Here's what the game world includes:
- 5 Career Zones: Each one represents a chapter of my life — university, early career, freelancing, corporate work, and the current chapter
- Stick Figure Characters: Custom-rendered with CSS, animated with keyframes
- NPCs with Dialogue: Characters you can talk to who tell stories about my journey
- 15+ Mini-Games: Typing challenges, coding puzzles, quiz games — all playable right in the browser
- Interactive Objects: Buildings you can enter, items you can collect, secrets to discover
- Real-Time Multiplayer: Via Supabase Realtime Presence, you can see other visitors walking around the world
- Mobile Controls: Touch joystick and action buttons for mobile players
The multiplayer was the trickiest part. Supabase Realtime broadcasts player positions, and the client-side interpolation makes movement look smooth even with network latency. Getting that to feel right took several iterations.
// Player position broadcasting via Supabase Realtime
// Every 50ms, your position gets shared with all other players
// Client-side interpolation smooths out the network jitter
Evening: AI Chatbot, Blog, and Polish
The AI chatbot uses Cloudflare Workers AI (Llama 3.2 3B) with a Gemini Flash fallback. It has a comprehensive system prompt that knows my resume, my projects, my skills, and my personality. Ask it anything about me and it'll respond like I would — casual, technical, helpful.
The blog infrastructure was built with MDX and next-mdx-remote. Each post is a .mdx file with frontmatter for metadata. The blog utility library handles reading, parsing, sorting, reading time calculation, and related post matching. All server-side rendered for SEO.
Then came the polish pass — and this is where React Bits came in clutch. I added:
- Smooth scroll-triggered animations on every section
- Staggered card entrance animations
- Hover effects with spring physics
- Page transition animations
- The pixel logo animation in the navbar
Every animation is GPU-accelerated, runs at 60fps, and gracefully degrades on lower-end devices.
The Numbers
By the end of the day:
- 40+ components built and integrated
- 15+ pages fully styled and responsive
- 5 game zones with interactive content
- 15+ mini-games playable in-browser
- Real-time multiplayer working across devices
- AI chatbot trained on my personal data
- 98+ PageSpeed score on Lighthouse
- Full SEO — sitemap, metadata, JSON-LD, OpenGraph images
Why Claude Code Changes Everything
Let me be real: this wouldn't have been possible without Claude Code. Not even close.
The thing about Claude Code that people don't get is that it's not just autocomplete. It understands your entire codebase. It reads your project structure, your design tokens, your component patterns — and then it generates code that fits. Not generic boilerplate that you have to rewrite, but code that matches your conventions.
When I said "build the game world zone manager with collision detection and zone transitions," Claude Code:
- Read the existing game engine architecture
- Understood the zone data format
- Generated the zone manager with proper TypeScript types
- Added collision detection that worked with the existing coordinate system
- Wired up zone transitions with CSS animations
That's not a tool. That's a development partner.
What's Next
This site will keep evolving. More blog posts, more game content, more interactive features. But the foundation is solid, the architecture is clean, and the deployment pipeline is automated.
If you're a developer who hasn't tried building with an AI partner yet — you're leaving 10x on the table. The ceiling on what one person can build in a single day has moved dramatically higher.
Now go explore the game world. I built it for you.
Postscript, July 2026. "The foundation is solid, the architecture is clean"
did not survive contact with the next feature. Five months later the world had
not been touched, because every change to it meant reading 25,800 lines nobody
had structured for reading. It was audited and cut, and the audit is public:
docs/WORLD-AUDIT.md.
The paragraph above is still true about the ceiling on what one person can build in a day. It was quiet about the ceiling on what one person can maintain, and that is the number that decided this site's second version.