Aphelion — multi-page marketing website for a travel brand
Web Programming
A static multi-page website for Dark Sky Expeditions — 10 pages with a unified design system, interactive elements, focused on fast loading and mobile devices.
Main task: Create a fully functional production site for the brand with real routing (not SPA imitation), an original visual style without UI kits, and live interactive blocks — with minimal page weight and zero JS framework at runtime. Result: a site with 10 routes, ~300 KB HTML/CSS for the entire build, all animations supporting prefers-reduced-motion.
What has been implemented:
- 10 static routes (home, product, pricing, blog with 3 full articles, about the company, contacts, custom 404) on file routing Astro with shared layouts
- Custom design system using CSS tokens: typographic scale on clamp(), color palette, spacing, button/card/form components — without Tailwind and component libraries
- Canvas animations in pure JS: parallax starry sky with twinkling on all pages and an interactive Bortle scale simulator (slider 9→1 with rendering ~900 stars and the Milky Way)
- Micro-interactions: scroll-reveal via IntersectionObserver with instant content display above-the-fold (without FOUC on slow JS), reading progress bar for articles, scroll-spy navigation, hiding header on scroll
- Functional month/year pricing switch with animated numbers, accordion routes, application form with validation and pre-filling from query parameters (?plan=, ?expedition=)
- Photographic content: 13 WebP images in a unified style (1.5 MB total), lazy loading, explicit width/height against layout shift, og:image for social media
Technologies: Astro 5, TypeScript, Vanilla JS, Canvas API, CSS Custom Properties, IntersectionObserver, WebP
Main task: Create a fully functional production site for the brand with real routing (not SPA imitation), an original visual style without UI kits, and live interactive blocks — with minimal page weight and zero JS framework at runtime. Result: a site with 10 routes, ~300 KB HTML/CSS for the entire build, all animations supporting prefers-reduced-motion.
What has been implemented:
- 10 static routes (home, product, pricing, blog with 3 full articles, about the company, contacts, custom 404) on file routing Astro with shared layouts
- Custom design system using CSS tokens: typographic scale on clamp(), color palette, spacing, button/card/form components — without Tailwind and component libraries
- Canvas animations in pure JS: parallax starry sky with twinkling on all pages and an interactive Bortle scale simulator (slider 9→1 with rendering ~900 stars and the Milky Way)
- Micro-interactions: scroll-reveal via IntersectionObserver with instant content display above-the-fold (without FOUC on slow JS), reading progress bar for articles, scroll-spy navigation, hiding header on scroll
- Functional month/year pricing switch with animated numbers, accordion routes, application form with validation and pre-filling from query parameters (?plan=, ?expedition=)
- Photographic content: 13 WebP images in a unified style (1.5 MB total), lazy loading, explicit width/height against layout shift, og:image for social media
Technologies: Astro 5, TypeScript, Vanilla JS, Canvas API, CSS Custom Properties, IntersectionObserver, WebP