octantes is my website, built to bring together design, development, writing, music, games, and other ongoing experiments. I wanted one place for work that would otherwise be split across platforms designed around a single kind of media.

The challenge was building a system broad enough to hold all of that without flattening it or making navigation a mess. It also changed the way I work: instead of pursuing separate goals across different platforms, octantes became my main creative focus, the place to make work for.

The portal shader is what drives the site. A hand built system with a state machine that has different animations for revealing content, direct load, and transitions for loading different parts of the page. If you idle for some time, you also get a poem!

Besides it is a gallery of cards that holds the actual work. Each card changes the content you are reading, triggering a portal animation. The types are based on the things I work on: writing, design, development, games or music.

I wanted a different, more streamlined entry point for those coming to see my professional design and development work. Each project is arranged in a radial interface, letting you move through each project and see what it is about before loading it, which moves back to the portal layout to present its case study.

The layout uses a homebrew setup of calculated slots, lap shifts and angles to keep the system precise while also being efficient and cheap to render.

havitat is a set of hand drawn rooms that offers a different way to move through the site. The rooms include working drawn interfaces, and everything is drawn in real time as you explore.

This works through a system that defines a brush and a way to animate a flash-style line boil, without using a canvas element or webgl at all, so it also stays cheap to render.

I also wanted to have a way to post updates that are not "projects" on a single feed, specially the result of my study sessions, which I tend to draw.

So that same artisanal language continues in vitacora, an ongoing log of study boards. Entries are added to one contiuous feed instead of being split into separate posts. As you scroll, drawings build in and lines animate, letting the log grow as one connected record.

When content is deployed, the site also generates an archival version of itself, where every part of the project remains reachable through an early-web, geocities-style page. It is applied automatically for people browsing without javascript.

The archive keeps the work accessible, no matter what browser or hardware you are visiting from, since it doesn't use the portal, shaders or interaction layers.