Website Design & Build

Two sites, both designed and built end to end, victorsj.com and habi-studios.com. Same discipline, two different briefs. The frames below are the live sites, scrolling.

The approach

I treat a website as one object, not a design handed over a wall to a developer. The type, the motion, the layout and the code are decided together, so the thing that ships is the thing that was designed. That means owning the whole chain, from the visual system and the front-end build to the image pipeline and the deploy.

victorsj.com

My own portfolio. A quiet, typography-led editorial system on a single set of tokens. Inter and JetBrains Mono, a near-white page, one accent. Built on Astro and Tailwind, with each case study written in Markdown so adding work never means touching layout code. Every image is optimised to WebP at build time and served static from Cloudflare, so pages open fast and cost almost nothing to run.

habi-studios.com

A studio site with more atmosphere. One continuous page that snaps section to section, wrapped around a generative woven-mandala canvas that redraws as you move, a nod to the name (habi is Filipino for “to weave”). Hand-built in vanilla HTML, CSS and JavaScript with no framework, then performance-tuned so the animation stays smooth on a phone and the whole page still loads in a blink.

What connects them

Good design and working technology are the same craft here, not two departments. The tools stay invisible so the human part can come forward. On victorsj.com that reads as plain and honest about the work; on habi-studios.com as warm and a little playful. Both are made by hand, meant to feel like someone made them, and built to hold up in the real world, not just in a screenshot.

A website should feel like someone made it, not like a template filled in.