A premium luxury-resort website concept built with React and Vite, designed around quiet-luxury hospitality, cinematic storytelling, immersive imagery and an interactive reservation experience.
AYORA was created as a portfolio-quality hospitality experience for the ARK II portfolio. The project combines editorial art direction with a realistic booking journey, responsive layouts and subtle environmental motion.
- Premium luxury-resort visual direction
- Cinematic hospitality-focused homepage
- Interactive availability and reservation flow
- Arrival, departure and guest selection
- Reservation details transferred between pages
- Prefilled reservation form
- Date validation and form feedback
- Premium mobile availability drawer
- Responsive desktop and mobile navigation
- Quiet environmental wildlife motion layer
- Swallows and butterflies with varied motion paths
- Island Motion pause/resume control
- Motion preference persistence
- Reduced-motion support
- Mobile performance-aware motion
- Custom AYORA monogram favicons
- Responsive footer and legal navigation
- Portfolio-ready responsive UI
The following captures document the finished responsive experience.
| Category | Technology |
|---|---|
| Frontend | React 19 |
| Build tool | Vite 8 |
| Language | JavaScript / JSX |
| Routing | React Router DOM 7 |
| Deployment configuration | Cloudflare Wrangler |
| Styling | CSS |
AYORA follows a quiet-luxury hospitality direction rather than a conventional resort template.
The experience emphasizes:
- Cinematic imagery
- Editorial typography
- Generous whitespace
- Natural and coastal visual language
- Refined micro-interactions
- Restrained animation
- Immersive storytelling
- High-end reservation UX
- Mobile-first responsive behaviour
The wildlife motion system is intentionally subtle. It can be paused by the visitor, respects reduced-motion preferences and becomes lighter on mobile devices so the atmosphere does not interfere with usability.
The application is organized as a multi-page hospitality experience with dedicated sections for the resort story, experiences and reservation journey.
The reservation flow connects the homepage availability selection with the reservation form, including validation and confirmation feedback.
- Node.js
- npm
- Git
npm installnpm run devnpm run buildnpm run previewThe repository includes Cloudflare Wrangler configuration for serving the Vite production build as a single-page application.
The production build is generated into dist/ and is intentionally excluded from Git along with node_modules/.
AYORA is a portfolio / concept project demonstrating premium hospitality web design and frontend development.
The reservation interface is a frontend demonstration. A production resort would connect the form to a real booking engine, CRM, email service or backend before accepting live reservations.
The concept currently uses remote image assets for visual presentation. Original client photography and properly licensed production assets should replace demonstration imagery for a real commercial launch.
Designed and developed as part of the ARK II portfolio by Linuka Bandara.
The project demonstrates responsive frontend development, interaction design, reservation UX, motion design, visual storytelling and production-oriented React/Vite implementation.
Portfolio / concept project.
Portfolio / personal project — not licensed for reuse.