Photography Website Template
Demo brand: BRANTHOLM · Photographer / creative portfolio · 37 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this photography website template
Brantholm is a website for a wedding photographer who wants enquiries that arrive with a date, a package and a budget already chosen. The home page opens on one large photograph, then answers what couples ask first: is my date free, what does it cost, how many photos do we get and how long until we see them. A working calendar marks free, short-slot and booked days for the next fourteen months, and the package builder beside it turns half day, full day or elopement, plus a second photographer, album, prints and travel, into a total, a 25% deposit, a photo count and a gallery turnaround in weeks. "Hold this date" carries all of it into the contact form.
Around that sit the pages a working photographer needs: a portfolio filtered by weddings, elopements, interiors and landscapes, a page per gallery with the day’s numbers, four service pages with prices, a pricing page with extras, travel zones and payment terms, an about page, a journal and a grouped FAQ. A client-galleries page includes a proofing demo where couples heart their album favourites, filter to them and try a mock download, which shows how your real gallery service works before they book.
The design is dark-first so photographs carry the colour: a near-black ground, one off-white band for the packages table, Prata headings over Spline Sans text and a single darkroom-red accent. Your prices live in one data file, your booked dates in one JSON file, and every gallery, service and journal post is a Markdown file. Rebranding is one accent colour and two fonts.
The 37 pages you get
- Home: cover photograph, services, booking steps, date check, packages table, a couple’s story, recent weddings, FAQ
/ - Swap the hero photo and the facts in site.ts; the rest reads from your data.
- Portfolio index with category chips
/work/ - Lists every gallery, newest first.
- One filtered index per category: weddings, elopements, interiors, landscapes
/work/weddings/ … - Categories are set in site.ts; the hero chips link here.
- Gallery pages (14 in the demo): place, date, facts, cover, story, photos
/work/weddings/hayfield-meadow/ … - One Markdown file per wedding or series in data/work/.
- Services overview with prices and key facts
/services/ - Reads data/services/.
- Service pages: full day, half day, elopement, interiors
/services/full-day/ … - Price from, what is included, a client quote and three photos each.
- Date check and package builder, packages table, extras, travel zones, payment terms
/pricing/ - Edit prices in src/data/pricing.ts and dates in data/availability.json.
- How galleries work, plus the proofing demo
/client-galleries/ - Link your real gallery service (Pic-Time, ShootProof, Pixieset) from here.
- The photographers, how they work and what clients can count on
/about/ - Replace the story and the guarantees with your own.
- Journal index
/journal/ - Planning articles that also bring search traffic.
- Journal posts (3 in the demo)
/journal/wedding-day-timeline/ … - Markdown files in data/journal/.
- Questions grouped by booking, on the day, after the wedding, money, interiors and prints
/faq/ - Edit the groups in src/data/content.ts and the page.
- Enquiry form that pre-fills date, package, extras and travel zone
/contact/ - Point the form at your backend; the comment in the file says how.
- Privacy notice and booking terms
/legal/privacy/ … - Starting points with placeholders to replace; not legal advice.
- Not-found page
/404.html - Sends visitors back to the work and the date check.
What is in the build
- Availability calendar fed from one JSON file: free, short-slot and booked days, month by month, with the next free Saturday shown.
- Package builder with half day, full day and elopement, three extras and five travel zones; shows total, deposit, balance, hours, photos delivered and gallery weeks (one week longer in summer).
- A short-slot date automatically rules out the full day, and the full day includes the album without charging for it twice.
- "Hold this date" opens the contact form with the date, package, extras and zone already selected.
- Client-gallery proofing demo: heart favourites against a 40-photo album limit, filter to favourites, mock download.
- Packages comparison table that stacks row by row on phones instead of scrolling sideways.
- Portfolio as a content collection with four filtered category pages and a facts panel on every gallery.
- Unit tests for the pricing maths and availability data, and browser tests for the date check and proofing flow.
The design decision
Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 65 different worlds reading as one design system in different paint.
- The world
- Near-black gallery-wall ground with one off-white pricing band, a single darkroom-red accent, and the photographs carrying all the colour.
- The mechanic
- Couples pick a date on a calendar showing free, short-slot and booked days, build a half-day, full-day or elopement package with extras and travel, see the price, deposit, photos delivered and gallery turnaround, then send it to a pre-filled enquiry form; a proofing demo lets them heart album favourites. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Weddings from behind, wild elopements
- Type & palette
- Prata · Spline Sans
-
#121212#f1eee9#b91c1c
Who it is for
Buy this if you photograph weddings and elopements and want your site to book dates, not only show pictures: it suits a solo photographer or a two-person team with fixed packages, and also covers interiors and landscape prints between seasons. If you run the venue rather than photograph it, the event-location template, built around open dates and planner pages, is the better fit. A gallery or studio showing artwork rather than taking bookings is better served by art-gallery.
Under the hood
- Astro 7 · static output, zero client framework
- Tailwind 4 · one @theme block holds the palette
- MDX content collections for the blog
- GSAP + Lenis for the scroll work, reduced-motion aware
- Self-hosted woff2 — no Google Fonts request
- Sitemap, canonicals and per-route meta wired
- Vitest + Playwright suites in the repository
- Zero third-party requests · strict CSP-ready
How to get started
- 01 Accept the repository invite and clone it.
- 02 Run
npm install, thennpm run dev. - 03 Replace the content in
src/data/with your own — that is where the brand, the copy and every list live. - 04 Swap the images in
public/images/and the palette in the@themeblock. - 05 Run
npm run buildand deploydist/anywhere static.
Questions
How do I mark dates as booked?
Add the date to the "booked" list in data/availability.json, or to "limited" if only a half day or elopement still fits. Every other day in the range shows as free. There is no live calendar sync; you update the file and redeploy.
Can I change the packages and prices?
Yes. Packages, extras, travel zones and the deposit rate are all in src/data/pricing.ts. The builder, the packages table, the pricing page and the contact form read from it, and a test checks that the service pages show the same prices.
Does the proofing gallery store real client photos?
No. It is a front-end demo that shows couples how picking favourites works. For real galleries, link the service you already use (Pic-Time, ShootProof, Pixieset or similar) from the client-galleries page and your emails.
What exactly do I get for $49?
Access to a private GitHub repository holding the complete Astro source of this template — every route you see in the preview, the content model, the images and the tests. Updates arrive in that same repository.
How many sites can I build with one licence?
As many as you like, for yourself or for clients. The licence is per buyer, not per project. The one thing you may not do is resell or redistribute the source as a template, theme or starter kit.
Do I need to know Astro?
It helps, but the common case is editing content and colour. Content lives in typed objects under src/data, colour lives in one @theme block, and npm run dev shows the result. Deploying is a static folder — Cloudflare Pages, Netlify and Vercel all take it as-is.
Is anything loaded from a third party?
No. Fonts are self-hosted woff2, there is no analytics, no tag manager, no CDN script and no external CSS. The build ships static HTML under a strict Content-Security-Policy.
More studios & agencies templates
Roomtone Recording
Recording studio
Loud
Moving set-piece
DUNARROW
Architecture studio
Loud
Imagery
VOLTA & CO.
Creative agency
Loud
Display type
HULVER STUDIO
Interior design studio
Loud
Palette