Aphelion — wielostronicowa strona marketingowa marki podróżniczej
Programowanie stron internetowych
Statyczna wielostronicowa strona internetowa dla firmy Dark Sky Expeditions — 10 stron z jedną systemem projektowym, interaktywnymi elementami, skoncentrowana na szybkim ładowaniu i urządzeniach mobilnych.
Główne zadanie: Stworzyć pełnoprawną stronę produkcyjną marki z rzeczywistym routowaniem (nie imitacją SPA), autorskim stylem wizualnym bez zestawów UI i żywymi interaktywnymi blokami — przy minimalnej wadze stron i zerowym frameworku JS w czasie wykonywania. Wynik: strona z 10 trasami, ~300 KB HTML/CSS na cały build, wszystkie animacje z obsługą prefers-reduced-motion.
Co zrealizowano:
- 10 statycznych tras (strona główna, produkt, taryfy, blog z 3 pełnymi artykułami, o firmie, kontakty, niestandardowy 404) na routingu plików Astro ze wspólnymi layoutami
- Własny system projektowy na tokenach CSS: skala typograficzna na clamp(), paleta kolorów, spacing, komponenty przycisków/kart/form — bez Tailwind i bibliotek komponentów
- Animacje Canvas w czystym JS: parallaxowe gwiaździste niebo z migotaniem na wszystkich stronach oraz interaktywny symulator skali Bortla (suwnica 9→1 z rysowaniem ~900 gwiazd i Drogi Mlecznej)
- Mikrowzajemności: scroll-reveal przez IntersectionObserver z natychmiastowym pokazaniem treści above-the-fold (bez FOUC przy wolnym JS), pasek postępu czytania artykułów, scroll-spy nawigacja, ukrywanie nagłówka przy przewijaniu
- Działający przełącznik taryf miesiąc/rok z animacją cyfr, akordeony tras, formularz zgłoszeniowy z walidacją i prefill z parametrów zapytania (?plan=, ?expedition=)
- Zawartość fotograficzna: 13 obrazów WebP w jednolitym stylu (1,5 MB łącznie), lazy loading, jawne width/height przeciwko layout shift, og:image dla mediów społecznościowych
Technologie: Astro 5, TypeScript, Vanilla JS, Canvas API, CSS Custom Properties, IntersectionObserver, WebP
Główne zadanie: Stworzyć pełnoprawną stronę produkcyjną marki z rzeczywistym routowaniem (nie imitacją SPA), autorskim stylem wizualnym bez zestawów UI i żywymi interaktywnymi blokami — przy minimalnej wadze stron i zerowym frameworku JS w czasie wykonywania. Wynik: strona z 10 trasami, ~300 KB HTML/CSS na cały build, wszystkie animacje z obsługą prefers-reduced-motion.
Co zrealizowano:
- 10 statycznych tras (strona główna, produkt, taryfy, blog z 3 pełnymi artykułami, o firmie, kontakty, niestandardowy 404) na routingu plików Astro ze wspólnymi layoutami
- Własny system projektowy na tokenach CSS: skala typograficzna na clamp(), paleta kolorów, spacing, komponenty przycisków/kart/form — bez Tailwind i bibliotek komponentów
- Animacje Canvas w czystym JS: parallaxowe gwiaździste niebo z migotaniem na wszystkich stronach oraz interaktywny symulator skali Bortla (suwnica 9→1 z rysowaniem ~900 gwiazd i Drogi Mlecznej)
- Mikrowzajemności: scroll-reveal przez IntersectionObserver z natychmiastowym pokazaniem treści above-the-fold (bez FOUC przy wolnym JS), pasek postępu czytania artykułów, scroll-spy nawigacja, ukrywanie nagłówka przy przewijaniu
- Działający przełącznik taryf miesiąc/rok z animacją cyfr, akordeony tras, formularz zgłoszeniowy z walidacją i prefill z parametrów zapytania (?plan=, ?expedition=)
- Zawartość fotograficzna: 13 obrazów WebP w jednolitym stylu (1,5 MB łącznie), lazy loading, jawne width/height przeciwko layout shift, og:image dla mediów społecznościowych
Technologie: Astro 5, TypeScript, Vanilla JS, Canvas API, CSS Custom Properties, IntersectionObserver, WebP