F.M. Pastries — Brand website for a small-batch bakery

The Brief

F.M. Pastries is a small-batch, made-to-order home bakery specialising in custom cookies, muffins, breads, and seasonal baked goods. They came to me needing a website built from scratch — somewhere to establish a proper presence on the web, present their full menu, tell the story behind the brand, and give potential clients a clear path to placing an order.

The Problem

Before the site, F.M. Pastries had no dedicated web presence. Their work existed only on social media, which meant there was no good place to properly showcase the menu, photography, or the story behind the business. Every inquiry had to be handled manually with no central point of contact, and first impressions were limited to whatever a potential client happened to see on Instagram. For a brand built on craft and quality, that gap between the product and how it was presented online was a real problem.

The Approach

The brief was clear: this needed to feel like a brand, not just a website. I led with an editorial, brand-first design direction — prioritising atmosphere, typography, and storytelling over a long feature list. The type pairing (Cormorant Garamond for headlines, DM Sans for body) was a deliberate choice to balance warmth and refinement. Every layout decision — the full-height hero, the marquee strip, the philosophy cards — was made to slow the visitor down and let the brand speak before they ever reach a product page. Astro was chosen as the framework: static, fast, and with zero overhead for a site that doesn't need dynamic server logic.

The Build

The site is four pages, each with a clear job to do:

• Home — establishes the brand with a full-height hero, an animated marquee, a menu preview grid, a founder section, philosophy cards, and customer reviews. The nav dynamically shifts between light and dark depending on scroll position.
• Menu — a full product catalogue with sticky category filters (All, Cookies, Muffins, Breads, Seasonal) and a modal detail view for each item. Filtering and modal population are handled in vanilla JavaScript with no dependencies.
• About — the brand story. Dual-image founder section, numbered philosophy cards ("No mixes", "Small batch by design", "Made when you order it"), and a gallery grid.
• Contact — a structured order inquiry form with dropdowns for order type, product interest, quantity, occasion date, and dietary needs. Submissions route directly to the client's email via mailto.

Everything is hand-crafted: no component libraries, no utility frameworks. CSS custom properties carry the design tokens; media queries handle the responsive breakpoints at 1024px and 768px.

The Outcome

F.M. Pastries now has a website that matches the quality of what they bake. Where there was nothing before, there's now a complete brand presence — a menu to browse, a story to read, and a clear way to get in touch. The site elevates how the business is perceived, giving potential catering clients, gift buyers, and regulars something credible to land on rather than a social profile.

Stack Used

• Astro 6 — static site generator; all pages pre-rendered at build time
• TypeScript — type safety across the project
• Vanilla CSS — custom design system via CSS variables; no utility framework
• Vanilla JavaScript — menu filtering, modal system, form handling, scroll-based nav
• Google Fonts — Cormorant Garamond + DM Sans
• Vercel — hosting and deployment