Aphelion — багатосторінковий маркетинговий сайт тревел-бренду
Веб-програмування
Статичний багатосторінковий сайт для компанії дарк-скай експедицій — 10 сторінок з єдиною дизайн-системою, інтерактивними елементами, орієнтований на швидке завантаження і мобільні пристрої.
Основна задача: Створити повноцінний продакшн-сайт бренду з реальним роутингом (не SPA-імітацією), авторським візуальним стилем без UI-кітів та живими інтерактивними блоками — при мінімальній вазі сторінок і нульовому JS-фреймворку в рантаймі. Результат: сайт з 10 маршрутами, ~300 КБ HTML/CSS на весь білд, всі анімації з підтримкою prefers-reduced-motion.
Що реалізовано:
- 10 статичних маршрутів (головна, продукт, тарифи, блог з 3 повними статтями, про компанію, контакти, кастомна 404) на файловому роутингу Astro зі спільними layout-ами
- Власна дизайн-система на CSS-токенах: типографічна шкала на clamp(), кольорова палітра, спейсинг, компоненти кнопок/карток/форм — без Tailwind і компонентних бібліотек
- Canvas-анімації на чистому JS: паралакс-зоряне небо з мерехтінням на всіх сторінках та інтерактивний симулятор шкали Бортля (слайдер 9→1 з відмальовуванням ~900 зірок і Чумацького Шляху)
- Мікровзаємодії: scroll-reveal через IntersectionObserver з миттєвим показом контенту above-the-fold (без FOUC при повільному JS), прогрес-бар читання статей, scroll-spy навігація, ховання хедера при скролі
- Робочий перемикач тарифів місяць/рік з анімацією цифр, акордеони маршрутів, форма заявки з валідацією та префілом з query-параметрів (?plan=, ?expedition=)
- Фотографічний контент: 13 WebP-зображень у єдиному стилі (1,5 МБ сумарно), lazy loading, явні width/height проти layout shift, og:image для соцмере
Технології: Astro 5, TypeScript, Vanilla JS, Canvas API, CSS Custom Properties, IntersectionObserver, WebP
Основна задача: Створити повноцінний продакшн-сайт бренду з реальним роутингом (не SPA-імітацією), авторським візуальним стилем без UI-кітів та живими інтерактивними блоками — при мінімальній вазі сторінок і нульовому JS-фреймворку в рантаймі. Результат: сайт з 10 маршрутами, ~300 КБ HTML/CSS на весь білд, всі анімації з підтримкою prefers-reduced-motion.
Що реалізовано:
- 10 статичних маршрутів (головна, продукт, тарифи, блог з 3 повними статтями, про компанію, контакти, кастомна 404) на файловому роутингу Astro зі спільними layout-ами
- Власна дизайн-система на CSS-токенах: типографічна шкала на clamp(), кольорова палітра, спейсинг, компоненти кнопок/карток/форм — без Tailwind і компонентних бібліотек
- Canvas-анімації на чистому JS: паралакс-зоряне небо з мерехтінням на всіх сторінках та інтерактивний симулятор шкали Бортля (слайдер 9→1 з відмальовуванням ~900 зірок і Чумацького Шляху)
- Мікровзаємодії: scroll-reveal через IntersectionObserver з миттєвим показом контенту above-the-fold (без FOUC при повільному JS), прогрес-бар читання статей, scroll-spy навігація, ховання хедера при скролі
- Робочий перемикач тарифів місяць/рік з анімацією цифр, акордеони маршрутів, форма заявки з валідацією та префілом з query-параметрів (?plan=, ?expedition=)
- Фотографічний контент: 13 WebP-зображень у єдиному стилі (1,5 МБ сумарно), lazy loading, явні width/height проти layout shift, og:image для соцмере
Технології: Astro 5, TypeScript, Vanilla JS, Canvas API, CSS Custom Properties, IntersectionObserver, WebP