Wybrane realizacje Oficjalna strona organizacji
Wielostronicowy serwis statyczny
Pro bono dla rzeczywistej organizacji Realizacja pro bono dla rzeczywistej organizacji 2026
Oficjalna, wielostronicowa, w pełni statyczna witryna Koła Łowieckiego „ŁOŚ” w Torzymiu. Zaprojektowałem i wdrożyłem serwis w Astro i TypeScript — oraz całą warstwę wizualną: tła, kompozycje, fotografie, filmy i materiały promocyjne. Treści w plikach danych, mapy Leaflet, galeria PhotoSwipe, animacje GSAP, prognoza Open-Meteo i kalendarz astronomiczny. Wynik buduje się do dist i publikuje na własnym hostingu z rozdzielonym środowiskiem TEST i produkcją.
Rola
Autor realizacji — projekt i development serwisu oraz pełna produkcja wizualna: tła, kompozycje graficzne, fotografia, film i materiały promocyjne. Koncepcja, reżyseria, selekcja, compositing, retusz, przygotowanie wektorowe, montaż i produkcja finalna były wykonywane przez LukJohn, a nie jako jednoklikowa generacja.
Problem
Koło potrzebowało nowoczesnej, wielostronicowej witryny informacyjnej: historia, gospodarka, edukacja, mapy obwodu, dokumenty prawne, galeria i kontakt — przy zachowaniu statycznego hostingu, ochrony danych kontaktowych oraz rozdzielenia środowiska testowego od produkcji.
Rozwiązanie
Zbudowałem serwis w Astro 7 i TypeScript, ze stylami we własnych tokenach CSS, animacjami GSAP i treścią w src/data (TypeScript/JSON) zamiast klasycznego CMS. Mapy Leaflet i GeoJSON, galeria PhotoSwipe 5, karuzela Embla, prognoza Open-Meteo z cache i stale recovery oraz obliczenia Słońca i Księżyca w astronomy-engine działają lokalnie w bundlu. Wdrożenie: statyczny dist przez SFTP/FTP, TEST na osobnej domenie (noindex), produkcja na Hostek z canonical www.
Opis projektu
To rzeczywisty projekt pro bono dla Koła Łowieckiego „ŁOŚ” Torzym — portfolio i zaangażowanie społeczne, nie płatne zlecenie enterprise. Zaprojektowałem i zrealizowałem oficjalną stronę jako wielostronicowy serwis Astro (output: static) w TypeScript strict. Produkcja działa pod https://www.los-torzym.pl/.
Kontekst projektu
Organizacja potrzebowała nowoczesnej, wielostronicowej witryny informacyjnej na statycznym hostingu, z ochroną danych kontaktowych i rozdzieleniem TEST od produkcji.
Proces
Najpierw architektura treści i prototyp w kodzie, potem mapy, galeria, warstwa wizualna i kontrolowane wdrożenie na osobnych środowiskach.
Produkcja wizualna
Wszystkie tła, kompozycje wizualne, fotografie, filmy oraz materiały promocyjne Koła Łoś zostały zrealizowane przez LukJohn. To autorski warsztat twórczy: koncepcja, reżyseria, selekcja, kompozycja, retusz, przygotowanie wektorowe, montaż i produkcja finalna — a nie jednoklikowa generacja.
Warsztat twórczy
Pracuję jako developer i twórca obrazu. W Koło Łoś łączyłem fotografię, grafikę wektorową, retusz, montaż filmowy i materiały z drona z narzędziami AI, które wspierają produkcję pod moją kontrolą: wybór kadrów, compositing i dokończenie w Photoshopie oraz CorelDRAW.
Narzędzia obrazu
- Nano Banana 2 Pro
- Higgsfield
- Seedance 2.0
- Seedance 2.5
- Adobe Photoshop
- CorelDRAW
Materiały wizualne Koła Łoś
Widok serwisu — projekt i wdrożenie strony Koła Łoś 
Kompozycja graficzna / tło — projekt, retusz i produkcja wspierana AI (LukJohn) 
Kompozycja i tło — autorska produkcja wizualna Koła Łoś 
Fotografia — kadr zrealizowany w warsztacie LukJohn 
Fotografia krajobrazowa — materiał autorski do komunikacji Koła Film / wideo — montaż i produkcja LukJohn (podgląd z plakatem, bez autoplay) 
Kadr z materiału filmowego — produkcja wideo LukJohn 
Kadr z materiału filmowego — kompozycja i montaż 
Znak i identyfikacja — przygotowanie wektorowe / grafika
Zakres prac
- Architektura wielostronicowego serwisu Astro i routing treści.
- Komponenty UI, tokeny CSS, responsywność od 320 px i reduced motion.
- Mapy Leaflet (obwód, rezerwat, wścieklizna) oraz iframe map GIW.
- Galeria 47 zdjęć z PhotoSwipe 5 i zoptymalizowanymi AVIF/WebP/PNG.
- Warstwa danych w src/data, w tym chroniony snapshot dokumentów prawnych.
- SEO produkcyjne (canonical, sitemap, Open Graph, JSON-LD Organization) i noindex na TEST.
- Ochrona kontaktu: brak tel: i mailto: w dist, e-mail jako raster.
- Playwright dla czytnika „Dla najmłodszych” i przeglądarki zwierzyny.
Zakres funkcjonalny
- Nawigacja wielopoziomowa zgodna ze schematem PZŁ.
- Historia, władze, galeria, kontakt i dokumenty prawne (Polityka oraz Klauzula — osobne trasy).
- Mapy: obwód 94, rezerwat Dolina Ilanki / Natura 2000, ogniska wścieklizny (Leaflet + OSM).
- Edukacja: choroby, czytnik dla najmłodszych, ścieżka „Jak zostać myśliwym”, zwierzyna.
- Gospodarka: plan łowiecki, urządzenia i grunty, szkody rolne.
- Pogoda Open-Meteo (10 dni, cache localStorage, stale cache) i kalendarz Słońca/Księżyca.
- Losowe tło wideo z pauzą przy prefers-reduced-motion / Save-Data.
- Atrybucja twórcy LukJohn.com w stopce i meta author.
- Autorskie tła, kompozycje, fotografie, filmy i materiały promocyjne wyprodukowane przez LukJohn.
Technologie wykorzystane
- Astro 7
- TypeScript (strict)
- CSS (tokeny, reset, reduced-motion)
- GSAP
- Leaflet
- OpenStreetMap
- GeoJSON
- PhotoSwipe 5
- Embla Carousel
- astronomy-engine
- Open-Meteo API
- Sharp
- Playwright
- AVIF / WebP / PNG
- JSON-LD
- @astrojs/sitemap
Niezawodność
- Build preview vs production rozdzielony trybem Astro (--mode).
- Prognoza Open-Meteo: timeout 10 s, cache 15 min, stale cache przy awarii sieci.
- Mapa GIW: iframe z linkiem zapasowym; awaria serwisu zewnętrznego nie psuje strony.
- Kafle OSM na mapie wścieklizny: treść i tabela ognisk pozostają przy awarii warstwy.
- Weryfikacja SHA zatwierdzonego snapshotu prawnego przed buildem (prebuild).
Bezpieczeństwo
- Brak haseł, tokenów i danych FTP w repozytorium.
- 0 wystąpień tel: i mailto: w skanowanym dist.
- Telefony jako zwykły tekst; e-mail Koła jako raster PNG.
- meta format-detection: telephone=no, email=no, address=no.
- Preview: noindex, nofollow i robots.txt Disallow: /.
- Chroniony JSON dokumentów prawnych z weryfikacją SHA-256.
- Publiczne warianty obrazów bez EXIF/GPS; bez hotlinków i CDN mediów.
Dostępność
- Semantyczny HTML, skip link, jedno H1 na stronę.
- Obsługa klawiatury, focus-visible i kontrast.
- prefers-reduced-motion dla animacji i tła wideo.
- Opisy alternatywne; tabele jako odpowiednik wykresu pogody.
- Oznaczenie linków otwieranych w nowej karcie.
Testy
- Playwright: czytnik „Dla najmłodszych” — 5/5.
- Playwright: przełącznik płci zwierzyny — 19/19.
- verify:legal-snapshot przed buildem.
- attribution:check dla komentarzy źródłowych.
- Ręczne checklisty viewportów (m.in. 1440, 1024, 768, 390, 320).
- Brak pełnego E2E całego serwisu — nie jest to twierdzenie o zerze błędów we wszystkich trasach.
CI/CD i wdrożenie
- Git na branchu main; brak GitHub Actions w repozytorium.
- Wdrożenie ręczne: dist → SFTP/FTP.
- TEST: http://los-torzym.chudy.eu (Cyber_Folks) — noindex.
- Produkcja: Hostek /public_html/los-torzym.pl, nginx apex → www.
- build:preview vs build:production z osobnym SEO i sitemap tylko na produkcji.
Potwierdzone rezultaty
- Wielostronicowy serwis statyczny bez React, bazy danych i SaaS CMS.
- Treść oddzielona od komponentów w src/data.
- Mapy, galeria, edukacja i dokumenty prawne w jednym produkcie.
- Rozdzielone środowiska TEST i Production z kontrolą indeksowania.
- Produkcja live: https://www.los-torzym.pl/.
- Pełna autorska produkcja wizualna: tła, kompozycje, fotografia, film i promocja — warsztat, nie automat.
Aktualny status
Realizacja pro bono dla rzeczywistej organizacji
Adres na żywo: https://www.los-torzym.pl/