Code with MS Office — 3D Interactive Portfolio

Overview

Code with MS is an education channel that turns programming topics into short, clear videos. Instead of a standard portfolio page, the brand wanted a place visitors can explore: a small 3D office where every room holds part of the work.

The idea

Visitors arrive outside the building, walk in through the front door and say hello at reception. From there they choose where to go: the Work Studio for projects, the Design Room for skills, the Meeting Room for courses, the Boss Cabin to learn about the person behind the channel, and the Lounge to get in touch.

What we built

The whole office is drawn in real time with Three.js and WebGL, with soft shadows, plants, desks, people at work and a city street outside. A path-finding system lets the visitor click anywhere on the floor and walk there naturally, going around furniture and through doors.

Each room shows a floating label. Clicking it, or choosing a room from the top menu, walks the character there and opens a glass panel with that room’s content, such as projects, course modules or contact details.

Details that matter

• Works with a mouse, a trackpad, a touch screen or the keyboard.
• Labels stay readable and fade with distance, so the scene never feels cluttered.
• All text lives in one content block, so updating projects or courses doesn’t require touching the 3D code.