Luna & Oak Coffee House

A premium specialty coffee shop website. Built with vanilla HTML5, CSS3, and JavaScript — no frameworks, no build tools.

Running locally

Content is loaded via fetch() from /data/*.json, so you can't just double-click the HTML files (the file:// protocol blocks fetch requests). Serve it with a local server:

# Option 1 — Python
python3 -m http.server 8080

# Option 2 — Node
npx serve .

Then open http://localhost:8080.

Project structure

luna-oak/
├── index.html, nosotros.html, cafe.html, menu.html, tienda.html,
│   reservaciones.html, eventos.html, blog.html, blog-post.html, contacto.html
├── assets/
│   ├── css/      variables, base, components + one CSS file per page
│   ├── js/       partials, animations, forms, cart + one JS file per page
│   ├── img/      product, shop, origin, method, event, blog, and team photos
│   ├── video/    hero background video (see "Known gaps" below)
│   └── fonts/
├── data/         JSON content: products, shop, events, blog, team, faq, origins, methods, testimonials
├── robots.txt
└── sitemap.xml

How it works

• Header/footer: injected once from assets/js/partials.js via <div data-include="header">, so nav/footer changes only need to happen in one place.
• Dynamic content: every page fetch()es its data from /data/*.json and renders cards/lists in JS. To edit products, events, blog posts, etc., edit the relevant .json file — never the HTML.
• Cart: persisted in localStorage, with a drawer accessible from the nav icon on any page.
• Forms: fully client-side validated (assets/js/forms.js). No backend is connected yet — on submit, success is simulated and the form resets.
• Image fallback: if an <img> ever fails to load (missing file, typo in a JSON path), partials.js automatically swaps it for an on-brand SVG placeholder with an icon matching its category (cup, bag, map pin, calendar, etc.) instead of a broken-image icon. This is a safety net for future content, not something you need to manage.

Content status

The site is fully photographic — every product, origin, method, event, blog post, and team member has a real photo in assets/img/.

Known gaps

• Hero video (assets/video/hero-pour.mp4) is not included. The homepage hero currently falls back to a solid brand-color background, which reads as intentional rather than broken. Drop a short (5–10s) coffee-pour clip at that exact path to activate it — no code changes needed.
• No real backend: forms (contact, reservations, newsletter, rewards signup) simulate success but don't send anywhere yet. The cart has no real payment gateway.

Roadmap (v2, doesn't block using this as a portfolio piece)

• Real payment gateway (current checkout is cart-only, no charge).
• User accounts / order history.
• Admin panel to edit content without touching JSON files.
• Real backend for form submissions.
• Hamburger icon animation (cosmetic).

SEO

robots.txt and sitemap.xml are included. Before publishing, replace lunaoakcoffee.mx with the real domain in both files and in the canonical / og:url tags on every page.