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