The Grand Aurelia Hotel & Spa — Website

Portfolio project: a premium website for a fictional 5-star resort in Riviera Maya, Mexico. Built with vanilla HTML5, CSS3, and JavaScript — no frameworks, no build step.

Highlights

• 27 pages: home, rooms (listing + 3 detail pages), restaurants (listing + 5 detail pages), spa, events, experiences (10, with detail modal), gallery (filterable + lightbox), blog (listing + 3 posts), testimonials, FAQ (accordion), contact, and a guest dashboard demo.
• Shared header/footer are inlined directly into every page (no fetch() dependency), so the site works both from a local server and by double-clicking index.html.
• All internal links and asset paths are relative, making the project portable to any subfolder or static host.
• Real photography is in place across most sections (rooms, dining, spa, events, experiences); a short list of known placeholders remains — see below.
• Technical SEO: sitemap.xml, robots.txt, Schema.org JSON-LD (Hotel, FAQPage), Open Graph tags.
• Accessibility: skip-to-content link, visible focus states, labeled form fields, keyboard-navigable accordion and lightbox.

Structure

/
├── index.html                Home
├── about/                    Our Story
├── rooms/                    Rooms (listing + 3 detail pages)
├── restaurants/               Restaurants (listing + 5 detail pages)
├── spa/                       Spa & Wellness
├── events/                    Events
├── experiences/                 Experiences (10, with detail modal)
├── gallery/                     Filterable gallery with lightbox
├── blog/                        Blog (listing + 3 posts)
├── testimonials/                 Guest testimonials
├── faq/                          FAQ (accordion)
├── contact/                       Contact
├── guest-area/                     Guest dashboard (frontend-only demo)
├── components/                      Master header/footer templates (reference only — already inlined into every page)
├── data/                            JS data files: experiences, gallery, blog, testimonials
├── assets/css/                       One stylesheet per section + global variables.css / base.css
├── assets/js/                         One script per section + shared reveal.js / stats-counter.js
├── assets/images/                      Photography used across the site
├── sitemap.xml / robots.txt

Running it locally

No build step and no dependencies. Either open index.html directly, or serve the folder for a closer-to-production setup:

npx serve .
# or
python3 -m http.server 8080

Known placeholders

A handful of images still use picsum.photos stand-ins where no suitable real photo was available:

• Blog post cover images (3 posts)
• Deluxe room gallery: bathroom and garden-view shots
• Gallery: beach and garden categories
• A few restaurant/experience secondary shots (e.g. diving, restaurant interiors)

Room tour videos and downloadable restaurant menu PDFs are also placeholders, pending real footage/files from the hotel.

Roadmap for production (v2)

• Replace remaining placeholder images/videos with real hotel material.
• Connect forms (booking, contact, events, spa) to a real backend.
• Real booking engine and payment gateway.
• Real authentication for the Guest Area.
• Functional language switcher (i18n) and currency converter.
• Additional Schema.org types (Event, individual Reviews, BreadcrumbList).
• Side-by-side room comparison view.
• Integrations: GA4, GTM, Meta Pixel, cookie consent.