"Full Speed Ahead" is an interactive web experience that showcases the history and evolution of Belgium's railway network, with a focus on the High-Speed Line (HSL) development. The project aims to immerse visitors in the story of Belgium's railways through interactive elements, animations, and compelling narratives.
The website is designed to attract and educate visitors about Train World, the railway museum in Brussels. It encapsulates the rich heritage of Belgium's railways with various interactive and educational components.
Chronicles the development of Belgium's HSL network from 1986 onwards, highlighting key milestones and events.
Engages users to learn about the PBKAL agreement in a fun, interactive manner.
Presents different perspectives on railway development, including environmental, economic, and regional concerns.
Showcases significant events like the opening of Eurotunnel, with animations and comparative travel times.
Details the restructuring of the Belgian railways, with clickable elements for deeper insights.
Interactive section displaying the evolution and modernization efforts of the railway network.
Allows users to draw their "Dream route" and explore its distance, travel time, and estimated cost.
Encourages visitors to explore Train World in person with a discount QR code.
- HTML5, CSS3, JavaScript, Vite, AfterEffects, LottieFiles
- GSAP for animations and scroll-triggered effects
- Lottie for SVG animations
- Leaflet.js for interactive mapping
- Responsive design principles
- Progressive enhancement
- Automatic deployment with GitHub Actions
The design blends historical elements with modern interactivity, mirroring the evolution of Belgium's railways. The color palette and typography reflect Train World's branding while ensuring readability and user engagement.
- Animations: Custom animations to visualize historical events and data.
- Drag-and-Drop: Interactive game to engage users in learning the history of the PBKAL network.
- Carousel: To navigate through different structures of the Belgian railway system.
- Interactive Map: Enables users to interactively explore potential railway routes.
- Keyboard navigable and screen-reader friendly.
- Optimized for performance with responsive images and efficient code.
- Tested on various devices and browsers for compatibility.
The website is hosted on Combell with the source code available on GitHub. Continuous integration is employed for smooth deployment.
"Full Speed Ahead" is an interactive journey through Belgium's railway history, designed to educate, engage, and inspire visitors to explore Train World.
- GitHub Repository: Full Speed Ahead
- Live Website: Train World - Full Speed Ahead