CloudStudio108

The Challenge

CloudStudio108 is a recording studio offering sound recording, music production, mixing, and mastering, plus a music academy. The pitch is entirely visual and sonic — the rooms, the gear, the sound — so the site had to lead with media while still loading quickly for people finding it on mobile data.

I built it as a hand-written static site rather than reaching for a framework or a site builder. For a content set this size, a framework would have added a build step and a JavaScript payload without buying anything the studio needed.

My Role

I handled the project end to end: information architecture, responsive implementation, media preparation, booking flow, performance work, search foundations, domain setup, and deployment.

What I Delivered

• Full marketing site: Vision and about sections, facilities, equipment, the creative space, and the music academy.
• Service and package pages: Artist packages and monthly creator tiers laid out for direct comparison, since pricing was the most common enquiry.
• Booking flow: A dedicated booking page so enquiries arrive structured instead of as open-ended messages.
• Media gallery: A large studio photography set plus embedded video and audio, so prospective clients can see and hear the room before they commit.
• Search groundwork: Sitemap, robots directives, and descriptive metadata for local discovery.

Key Decisions

An all-WebP image pipeline. The gallery is the heaviest part of the site by far, so every photograph was converted to WebP and served directly — around fifty images, at a fraction of the original JPEG and PNG weight.

Lazy loading and reserved space. Below-the-fold media is lazy-loaded, and every image carries explicit width and height attributes so the browser reserves its space before the file arrives. On a page this image-dense, that is the difference between a stable layout and content jumping under the reader's thumb.

Static over a site builder. The studio was previously on a hosted page builder. Moving to plain HTML, CSS, and JavaScript removed the platform's script overhead and gave full control over layout and load order.

Edge hosting on Cloudflare Pages. With a custom domain behind Cloudflare, the media is served from the edge and cached close to visitors — the difference is most noticeable on the image-heavy pages.

Outcome

The studio now has an independently hosted production site that presents its rooms, services, media, and pricing in one place. Prospective clients can compare packages and send structured booking enquiries without relying on a page-builder platform.

Tech Stack

• Frontend: Hand-written HTML, CSS, and JavaScript — no framework, no build step
• Media: All-WebP image set, lazy loading, explicit dimensions, preloaded logo
• Hosting: Cloudflare Pages with a custom domain and Cloudflare DNS