Portolan: Studio Website with a Live Navigation Chart

The website for Portolan, my design studio in Vancouver, designed and built from scratch. Live at portolan.studio.

A portolan was the first chart to show sailors the true line between two ports. The home page is one: a live chart whose needle turns toward each port, and every port is a recent project. Move the cursor and the chart follows; on a phone it turns by itself.

Each project opens with a smooth transition from its cover into a full case page with the story, the numbers and the boards, so moving through the work feels like one continuous piece.

On a phone every section fills exactly one screen, the work becomes a swipeable carousel, and nothing from the next section peeks into the current one.

A short drawing loader on the first visit, a menu that opens as a circle from the button, and a project form that carries over the estimate a visitor builds on the services page. Hand-built without a framework, so it stays fast on every phone.