The Office Portfolio

Source: Dev.to

Overview

This submission is for the New Year, New You Portfolio Challenge presented by Google AI. The goal was to create an interactive, office‑themed portfolio where visitors can explore different “rooms” to learn about my background, projects, hobbies, and contact information.

Project Link

Visit the interactive office portfolio
Tip: Press the top‑left corner to increase resolution.

Full Building Journey

Concept & Planning

• The initial idea was to build a game‑style portfolio that lets users tour a virtual office.
• I consulted Gemini 3 Pro for feedback and suggestions. Gemini recommended:
  • A low‑resolution mode for low‑end hardware.
  • A mobile joystick for touch devices.
  • A specific tech stack (details omitted for brevity).

Prompt Used with Gemini

I want to create a portfolio website for a hackathon that visualizes the best portfolio as an office‑like game environment. The visitor should be able to:
- Walk around using arrow keys or on‑screen controls.
- Interact with characters:
  * Manager in a cabin → pop‑up with project details.
  * Co‑worker near the coffee machine → pop‑up with hobbies.
  * HR in the hallway → pop‑up with personal details.
- Approach a notice board at spawn → pop‑up with resume (downloadable).
- Approach a telephone → pop‑up with contact details (clickable links for GitHub, LinkedIn, email).
Provide a feasible implementation plan and suggestions for smooth gameplay.

Development in Google AI Studio

1. First version generated a basic office layout with all characters placed.
2. Positions were refined manually.
3. Iterative adjustments were made for:
   • Cabin creation (eventually omitted due to repeated issues).
   • Mobile screen adaptation.
   • Spawn point placement (initially centered on a sofa; later corrected to the notice board with coordinates like [0,2,4] → [0,2,10]).

Tools & Workflow

• Screenshot attachment feature was invaluable for visual feedback (“turn this to that”).
• Most components required only one or a few iterations.
• Total development time: ~2 days, with ~6 hours of active coding.

Challenges Faced

Future Improvements

• Full work context: Add detailed descriptions of past projects and roles.
• Voice agent: Enable spoken interaction with characters for a more immersive experience.
• Enhanced mobile controls: Implement a joystick for smoother navigation on touch devices.