フォト

thephotobooth — studio site with budget calculator

to see how far plain html, css, and javascript could go before the lack of a framework actually hurt. further than i expected.

← back to all projects
full-stack·live·started 2025-06-01·updated 2025-08-15
vanilla-jsno-frameworkstatic-siteleaflet

overview

a photography-studio site built without a framework. the challenge i gave myself was to see how far plain html, css, and javascript could go before the lack of a framework actually hurt.

answer: further than i expected.

what's in it

  • homepage — hero, services, testimonials, calls to action.
  • gallery (galeria.html) — image grid with scroll-triggered animations via aos.
  • contact (contacto.html) — client-side validated form, server-friendly format.
  • budget calculator (presupuesto.html) — the most interesting piece: a custom pricing calculator in vanilla js that turns service selections into a quote.
  • news section — driven by fetch() against a local noticias.json. no backend, but the pattern is the same one a real cms feed would use.

why it matters

it's the project that taught me where frameworks earn their weight. the budget calculator is ~150 lines of javascript that would be a 30-line react component. the gallery is a hand-rolled grid that tailwind would express in a class string. the site works and looks fine — the cost is in maintenance and in how slow adding the next feature feels.

it's also the project i'd hand to a junior who insists they don't need a framework. build something this size in plain js once and the case for react or next.js stops being theoretical.