What it is
Studio 36 is the personal brand of Bryan Garcia, an architectural designer - and this is his portfolio site, built for him as a client. It is live at studios-36.com: his selected work presented through custom webfonts, an SVG-driven custom cursor with contextual states (arrows for carousels, play/pause for media), a project showcase fed from structured JSON data, and a bundled asset pipeline. Everything is built from scratch rather than on a template. At roughly 2 MB of JavaScript plus TypeScript and SCSS, it is the largest frontend codebase on this page.
Building a portfolio for a designer raises the bar: the client thinks in composition and negative space for a living, and the site has to present architectural work without competing with it. The design language - restrained type, generous whitespace, motion only where it guides the eye - came out of that collaboration.
Three generations of the same site
The repo history tells an honest story: the site exists in three iterations, from an early version through a Node.js-served build with a hand-rolled bundling setup, to the current React + TypeScript client. Each rewrite kept the design language and threw away the architecture that had stopped earning its keep. Knowing when to rewrite - and what to preserve - is most of the skill.
Motion as a first-class feature
Everything about the site is built around feel:
- A contextual custom cursor that changes shape based on what it hovers - directional arrows over carousels, play and pause over videos - implemented with layered SVGs
- Scroll-choreographed sections where content reveals are timed to the viewport, not just faded in
- A curated typography system using licensed webfonts served as WOFF2 with proper fallback stacks
Relationship to this portfolio
Studio 36 is where I developed the motion sensibilities this portfolio site uses - the conviction that animation should communicate hierarchy and state, not decorate. If you like how this site feels to scroll, this project is why.