About the Project
Rail Academy is a railway-themed React + Vite web application built with a strong focus on visual identity, performance, and interactivity. The centrepiece is a custom RailwayScrollbar component — a fixed decorative sidebar that tracks scroll progress across all routes, moving an animated train along a track in proportion to how far the user has scrolled.
The train itself went through multiple visual iterations: starting as a flat 2D isometric SVG, then upgraded to a fully 3D polygon-rendered locomotive with proper top, right-side, and bottom faces, elliptical wheel shadows, and CSS drop shadows for depth. A final revision replaced the programmatic SVG with a static imported SVG image for simplified rendering without sacrificing visual quality.
Scroll behaviour is handled via a custom scroll direction detection hook that flips the train vertically when the user scrolls upward — giving a realistic sense of bidirectional movement with a smooth CSS transition to avoid abrupt snapping.
The layout is structured around a shared React Router layout that wraps all pages, persisting the scrollbar and navbar across routes. The navbar features hide-on-scroll-down / show-on-scroll-up behaviour, a frosted-glass background, and absolutely centred navigation links. A ScrollToTop button fades in after 300px of scroll.
Performance is optimised through lazy-loaded page sections, memoized components (RotatingDice), code-split routing, and a Vite build pipeline. The UI theme uses a vibrant navy and cyan palette with consistent hex casing, responsive breakpoints down to 360px, and landscape phone orientation support.
Key Highlights
Technical Breakdown
Feature areas & implementation details