Web Design
A curated travel booking site built with five JavaScript libraries, blending scroll-triggered animation with real-world form validation and media handling.
Voyager
Web Development
Discover extraordinary destinations, crafted for the curious traveller.
The Project
Voyager is a travel booking site built for a Development and Emerging Technologies coursework project, combining five different JavaScript libraries into one cohesive front-end: Glide.js for destination carousels, Parsley for form validation, Cleave.js for formatted input fields, Anime.js for scroll-triggered animation, and Lightbox2 for image galleries.
The challenge was integrating five separate JavaScript libraries into a single site without conflicts, while keeping the experience smooth and cohesive.
Each library needed to work independently while sharing the same page: Glide.js powering the destination carousel, Anime.js handling scroll-triggered reveals on booking fields and destination cards, Parsley validating the trip request form in real time, Cleave.js formatting phone numbers and travel dates as they're typed, and Lightbox2 handling the destination image galleries. Getting all five to coexist without style or event conflicts took careful sequencing and testing.
A single-page travel site where every interaction, from scrolling to booking, feels considered rather than bolted on.
The result is Voyager: a clean, editorial-style travel site anchored by "The World Awaits You." Destination cards and booking fields animate into view on scroll using Anime.js with staggered easing, giving the page a sense of motion without feeling gimmicky. The "Plan Your Dream Trip" form validates full name, email, phone number, and travel date in real time with Parsley and Cleave.js, so users get immediate feedback instead of a failed submission.
Built responsively across desktop, laptop, and mobile, so the booking experience holds up wherever a traveller finds it.
Voyager was designed mobile-first, with the same booking flow and destination browsing translating cleanly from a full desktop layout down to a single-column mobile form. The project was as much about front-end architecture as visual design: structuring vanilla HTML, CSS, and JavaScript so five distinct libraries could each do their job without stepping on one another.
More Works
Web Design
A curated travel booking site built with five JavaScript libraries, blending scroll-triggered animation with real-world form validation and media handling.
Voyager
Web Development
Discover extraordinary destinations, crafted for the curious traveller.
The Project
Voyager is a travel booking site built for a Development and Emerging Technologies coursework project, combining five different JavaScript libraries into one cohesive front-end: Glide.js for destination carousels, Parsley for form validation, Cleave.js for formatted input fields, Anime.js for scroll-triggered animation, and Lightbox2 for image galleries.
The challenge was integrating five separate JavaScript libraries into a single site without conflicts, while keeping the experience smooth and cohesive.
Each library needed to work independently while sharing the same page: Glide.js powering the destination carousel, Anime.js handling scroll-triggered reveals on booking fields and destination cards, Parsley validating the trip request form in real time, Cleave.js formatting phone numbers and travel dates as they're typed, and Lightbox2 handling the destination image galleries. Getting all five to coexist without style or event conflicts took careful sequencing and testing.
A single-page travel site where every interaction, from scrolling to booking, feels considered rather than bolted on.
The result is Voyager: a clean, editorial-style travel site anchored by "The World Awaits You." Destination cards and booking fields animate into view on scroll using Anime.js with staggered easing, giving the page a sense of motion without feeling gimmicky. The "Plan Your Dream Trip" form validates full name, email, phone number, and travel date in real time with Parsley and Cleave.js, so users get immediate feedback instead of a failed submission.
Built responsively across desktop, laptop, and mobile, so the booking experience holds up wherever a traveller finds it.
Voyager was designed mobile-first, with the same booking flow and destination browsing translating cleanly from a full desktop layout down to a single-column mobile form. The project was as much about front-end architecture as visual design: structuring vanilla HTML, CSS, and JavaScript so five distinct libraries could each do their job without stepping on one another.
More Works
Web Design
A curated travel booking site built with five JavaScript libraries, blending scroll-triggered animation with real-world form validation and media handling.
Voyager
Web Development
Discover extraordinary destinations, crafted for the curious traveller.
The Project
Voyager is a travel booking site built for a Development and Emerging Technologies coursework project, combining five different JavaScript libraries into one cohesive front-end: Glide.js for destination carousels, Parsley for form validation, Cleave.js for formatted input fields, Anime.js for scroll-triggered animation, and Lightbox2 for image galleries.
The challenge was integrating five separate JavaScript libraries into a single site without conflicts, while keeping the experience smooth and cohesive.
Each library needed to work independently while sharing the same page: Glide.js powering the destination carousel, Anime.js handling scroll-triggered reveals on booking fields and destination cards, Parsley validating the trip request form in real time, Cleave.js formatting phone numbers and travel dates as they're typed, and Lightbox2 handling the destination image galleries. Getting all five to coexist without style or event conflicts took careful sequencing and testing.
A single-page travel site where every interaction, from scrolling to booking, feels considered rather than bolted on.
The result is Voyager: a clean, editorial-style travel site anchored by "The World Awaits You." Destination cards and booking fields animate into view on scroll using Anime.js with staggered easing, giving the page a sense of motion without feeling gimmicky. The "Plan Your Dream Trip" form validates full name, email, phone number, and travel date in real time with Parsley and Cleave.js, so users get immediate feedback instead of a failed submission.
Built responsively across desktop, laptop, and mobile, so the booking experience holds up wherever a traveller finds it.
Voyager was designed mobile-first, with the same booking flow and destination browsing translating cleanly from a full desktop layout down to a single-column mobile form. The project was as much about front-end architecture as visual design: structuring vanilla HTML, CSS, and JavaScript so five distinct libraries could each do their job without stepping on one another.
More Works