Vertex Luxury Resort

Overview

Vertex was designed to solve the "performance-fidelity gap." Most luxury interfaces look premium but suffer from high Interaction to Next Paint (INP) rates and heavy assets.

I architected this as a client-first application that delivers rich storytelling through micro-interactions while maintaining strict performance metrics across all devices.

Highlights

Hardware-Accelerated Motion

To avoid "browser repaint storms" common in animation-heavy sites, I implemented purposeful motion. Every transition operates under hardware-accelerated transforms. By using the Intersection Observer API, I ensured that animations only trigger when they enter the visible viewport, significantly reducing CPU overhead.

Dynamic Booking Engine

I built a modular reservation wizard that handles both room and dining bookings. It uses React Hook Form and Zod for real-time validation. To provide a seamless feel, I used TanStack React Query to manage loading states and error boundaries, simulating a production-grade server environment.

Programmatic Document Generation

A key feature of Vertex is the ability to generate localized booking invoices directly in the browser. I integrated jsPDF to parse client session data and compile a downloadable itinerary instantly, removing the need for a separate backend service for simple document tasks.

Learnings

• Visual Performance: I learned how to minimize Cumulative Layout Shift (CLS) by utilizing predetermined aspect-ratio calculations and hardware-accelerated CSS properties.
• Accessible Design: Working with headless primitives taught me how to enforce keyboard navigability and correct ARIA states in complex, custom-styled components.
• Architecture: Moving from tight coupling to a feature-first structure improved the maintainability of the codebase, allowing for isolated testing of the booking controllers.

Next steps

• API Integration: Transitioning the mock transactions to a live Node.js/Express REST API.
• Persistent Storage: Connecting a PostgreSQL database via Prisma ORM to manage real-time room availability.
• Admin Workspace: Developing a statistical dashboard using Recharts to monitor simulation occupancy and sales metrics.

Vertex is a showcase of frontend excellence, proving that a website can be visually immersive without sacrificing speed or accessibility.