Selected projects Official organisation website
A multi-page static website
Pro bono for a real organisation Pro bono project for a real organisation 2026
The official multi-page, fully static website of Hunting Club “ŁOŚ” in Torzym. I designed and shipped the site in Astro and TypeScript — and produced the full visual layer: backgrounds, graphic compositions, photographs, films and promotional materials. File-based content, Leaflet maps, a PhotoSwipe gallery, GSAP motion, an Open-Meteo forecast and an astronomical calendar. The build outputs dist and publishes to self-hosted infrastructure with separated TEST and production environments.
Role
Author of the delivery — site design and development plus the full visual production: backgrounds, graphic compositions, photography, film and promotional materials. Concept, direction, selection, compositing, retouching, vector preparation, editing and final production were performed by LukJohn, not as one-click generation.
Challenge
The club needed a modern multi-page information site: history, management, education, district maps, legal documents, gallery and contact — on static hosting, with protected contact details and a hard split between TEST and production.
Solution
I built the site in Astro 7 and TypeScript, with custom CSS tokens, GSAP motion and content in src/data (TypeScript/JSON) instead of a classic CMS. Leaflet maps and GeoJSON, PhotoSwipe 5, Embla carousel, an Open-Meteo forecast with cache and stale recovery, and astronomy-engine sun/moon calculations ship in the bundle. Delivery is a static dist over SFTP/FTP: TEST on a separate noindex domain, production on Hostek with a www canonical.
Project overview
This is a real pro bono portfolio project for Hunting Club “ŁOŚ” Torzym — community engagement, not a paid enterprise commission. I designed and delivered the official site as a multi-page Astro site (static output) in strict TypeScript. Production runs at https://www.los-torzym.pl/.
Project context
The organisation needed a modern multi-page information site on static hosting, with protected contact details and a hard split between TEST and production.
Process
Content architecture and a coded prototype came first, then maps, gallery, the visual layer, and a controlled deploy across separated environments.
Visual production
All backgrounds, visual compositions, photographs, films/videos and promotional visual materials for Koło Łoś were produced by LukJohn. This is an authored creative workflow: concept, direction, selection, compositing, retouching, vector preparation, editing and final production — not one-click generation.
Creative workflow
I work as both a developer and a graphic/visual creator. On Koło Łoś I combined photography, vector graphics, retouching, film editing and aerial/drone material with AI tools that support production under my direction: frame selection, compositing and finishing in Photoshop and CorelDRAW.
Image tools
- Nano Banana 2 Pro
- Higgsfield
- Seedance 2.0
- Seedance 2.5
- Adobe Photoshop
- CorelDRAW
Koło Łoś visual materials
Site view — design and delivery of the Koło Łoś website 
Graphic composition / background — design, retouching and AI-assisted production (LukJohn) 
Composition and background — authored visual production for Koło Łoś 
Photography — a frame produced in the LukJohn studio workflow 
Landscape photography — authorial material for the club’s communication Film / video — edited and produced by LukJohn (poster preview, no autoplay) 
Still from the video material — LukJohn video production 
Still from the video material — composition and editing 
Mark and identity — vector preparation / graphic design
Scope of work
- Astro multi-page architecture and content routing.
- UI components, CSS tokens, responsiveness from 320 px and reduced motion.
- Leaflet maps (district, reserve, rabies) and the GIW map iframe.
- A 47-image gallery with PhotoSwipe 5 and AVIF/WebP/PNG variants.
- A src/data content layer, including a protected legal-document snapshot.
- Production SEO (canonical, sitemap, Open Graph, Organization JSON-LD) and noindex on TEST.
- Contact protection: no tel: or mailto: in dist; club email as a raster.
- Playwright for the children’s reader and the wildlife browser.
Functional scope
- Multi-level navigation aligned with the required club IA.
- History, authorities, gallery, contact and two separate legal documents.
- Maps: district 94, the Ilanka valley reserve / Natura 2000, rabies foci (Leaflet + OSM).
- Education: diseases, a children’s reader, “how to become a hunter”, wildlife.
- Management: hunting plan, infrastructure and land, agricultural damage.
- Open-Meteo weather (10 days, localStorage cache, stale cache) and a sun/moon calendar.
- Random video background that pauses under prefers-reduced-motion / Save-Data.
- LukJohn.com creator credit in the footer and meta author.
- Authored backgrounds, compositions, photographs, films and promotional visuals produced by LukJohn.
Technologies used
- Astro 7
- TypeScript (strict)
- CSS (tokens, 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
Reliability
- Preview vs production builds split by Astro --mode.
- Open-Meteo forecast: 10 s timeout, 15-minute cache, stale cache on network failure.
- GIW map: iframe plus a fallback link; an upstream outage does not break the page.
- OSM tiles on the rabies map: article and outbreak table remain if the layer fails.
- SHA verification of the approved legal snapshot before build (prebuild).
Security
- No passwords, tokens or FTP details in the repository.
- 0 tel: and mailto: occurrences in the scanned dist.
- Phone numbers as plain text; club email as a PNG raster.
- meta format-detection: telephone=no, email=no, address=no.
- Preview: noindex, nofollow and robots.txt Disallow: /.
- Protected legal JSON with SHA-256 verification.
- Public image variants without EXIF/GPS; no hotlinked media CDNs.
Accessibility
- Semantic HTML, skip link, one H1 per page.
- Keyboard support, focus-visible and contrast.
- prefers-reduced-motion for animation and video background.
- Alternative text; a data table as the weather-chart equivalent.
- Labels for links that open in a new tab.
Testing
- Playwright: children’s reader — 5/5.
- Playwright: wildlife sex switcher — 19/19.
- verify:legal-snapshot before build.
- attribution:check for source comments.
- Manual viewport checklists (including 1440, 1024, 768, 390, 320).
- No full-site E2E runner — this is not a claim of zero defects on every route.
CI/CD and delivery
- Git on main; no GitHub Actions in the repository.
- Manual delivery: dist → SFTP/FTP.
- TEST: http://los-torzym.chudy.eu (Cyber_Folks) — noindex.
- Production: Hostek /public_html/los-torzym.pl, nginx apex → www.
- build:preview vs build:production, with sitemap only in production.
Verified outcomes
- A multi-page static site without React, a database or a SaaS CMS.
- Content separated from components in src/data.
- Maps, gallery, education and legal documents in one product.
- Separated TEST and Production with indexing control.
- Live production: https://www.los-torzym.pl/.
- Full authored visual production: backgrounds, compositions, photography, film and promotion — a craft workflow, not an automatic generator.
Current status
Pro bono project for a real organisation
Live URL: https://www.los-torzym.pl/