Interactive Architecture Portfolio.

An architectural model as a way to explore work.

This is a digital portfolio for an architect. Buildings in an explorable 3D model represent architectural projects and become the way to navigate the collection.

My contribution is the software and interactive experience. The architectural projects are the architect’s work, not mine.

Move beyond a gallery of projects.

The idea was to make the portfolio feel like exploring a digital model or city. The scene needed to help visitors discover projects, while still giving them a clear way to read details and open individual project pages.

From technical concept to a live prototype.

I defined the technical concept, frontend architecture and project data model, then connected the 3D scene to the application interface.

• Build the scene, integrate glTF / GLB models and implement building interactions.
• Coordinate selection state, camera movement and project information.
• Build desktop side panels, bottom-oriented mobile UI and project detail modals.
• Create individual project routes, deploy the application and fix interaction issues.

Selection connects the model to the interface.

Selecting a building updates the active project in the interface and moves the camera to bring it into focus. Information panels introduce the project, with a modal or detail view and a dedicated route for further exploration.

The scene and the interface share selection state so that a building, its information and the camera response form one interaction.

Make 3D part of the application.

React Three Fiber connects the Three.js scene to React components and application state. This makes the model a functional navigation surface rather than a disconnected visual element.

Scene exploration and individual project URLs serve different needs: visitors can discover work spatially, or open and share a specific project directly.

Desktop uses a side panel; mobile uses bottom-oriented information so the controls and project details fit the smaller screen.

The experience is deployed separately from this portfolio. Its Three.js code and 3D models load only when a visitor opens the external demo.

Interaction details make the model usable.

The work included addressing hover and selection flicker, coordinating camera movement with the selected project, and preventing navigation below the floor.

Other challenges were keeping 3D selection and interface state in sync, adapting panels and modals across screen sizes, and handling 3D models while keeping mobile interaction usable.

Live, with development continuing.

The prototype is available to explore online. It brings together an interactive model, project selection, information panels and individual project routes.

The experience remains in active development. It is a live prototype, not a claim that the architect’s complete project catalog is finished.