A Web Design & Development Studio Website
The live hero of the real site, running inside this page. Hit "Refresh" to restart the intro. The rest of the site is shown below.
A wordmark and a monogram, used flat and as a 3D model on the site.
One page that runs from the hero through services, process and work to pricing and an enquiry form.
Every section is designed to work on a phone.
Brand blue on dark navy, two typefaces and one strong ease-out curve.
ease
strong ease-out, used across the site
Ordered from first impression to enquiry.
Small businesses need a polished website without the agency complexity.
The tools I picked, and why each one fits a fast studio site.
AstroA studio site mostly shows content, so Astro builds it into fast static HTML and only ships JavaScript where a section needs it. It also lets me split the page into reusable section components.
Tailwind CSSThe brand colours, type scale and easing curve live in one theme, so every section pulls from the same tokens and the design stays consistent as the page grows.
TypeScriptPrices, services, FAQs and work are typed data, and the scroll scripts are typed too. A wrong edit shows up before it reaches the live site.
Three.jsThe 3D monogram needs real 3D rendering. It loads only in the pinned promise section, so the rest of the page stays light.
HTMLSemantic markup with a skip link and labelled sections, so the page reads properly for search engines and screen readers.
Layout, theme and the reveal transitions are plain CSS, which keeps motion smooth and the code easy to maintain.
