Kalkulator wyceny
Interaktywny estymator, który zamienia powierzchnię ogrodu i wybrane usługi w natychmiastową, przejrzystą wycenę.
Web Developer & Visual Designer
Case study · 2026
Ogrody Kryscar
Kompletny dom cyfrowy firmy ogrodniczej — strona w Next.js z grafiką WebGL, kalkulatorem wyceny i stojącą za nią infrastrukturą pocztową.
- Role
- Web Developer & Visual Designer
- Period
- 05/2026 - obecnie
- Stack
- 11
- Read
- 1 min
Next.jsThree.jsTailwind CSSFigmaEmail Server+6
01·Wprowadzenie
02·Moja rola
- Zaprojektowanie i wykonanie całej strony w Next.js 16, React 19 i Tailwind CSS v4
- Interaktywny kalkulator wyceny, filtrowany katalog usług i mapa zasięgu
- Autorskie wizualizacje 3D WebGL (three.js / React Three Fiber) i animacje na całej stronie
- Konfiguracja i utrzymanie infrastruktury pocztowej firmy — domena, DNS, skrzynki — jako stały partner cyfrowy
03·Narzędzia
Next.jsThree.jsTailwind CSSFigmaEmail ServerTypeScriptFramer MotionRadix UIDomain & DNSMailboxesSEO
04·Kluczowe możliwości
Filtrowany katalog usług
Koszenie, sadzenie, formowanie żywopłotów, porządki sezonowe — przeglądane według kategorii z animowanym przestawianiem.
Mapa zasięgu
Interaktywna mapa obszaru działania — odwiedzający od razu wie, czy jest w zasięgu.
Wizualizacje 3D WebGL
Autorska grafika three.js / React Three Fiber i animacje nadają stronie wyróżniający się, organiczny charakter.
05·Pod maską
Next.js 16 + React 19
App Router z Server Components i renderowaniem statycznym — szybkie, gotowe pod SEO strony.
Three.js + React Three Fiber
Autorskie sceny WebGL z łagodnym fallbackiem dla reduced-motion i starszych przeglądarek.
Tailwind v4 + tokeny
Granatowo-szmaragdowy język wizualny na semantycznych tokenach kolorów, zaprojektowany w Figmie.
Serwer pocztowy + DNS
Domena, rekordy DNS i firmowe skrzynki — utrzymuję pełną infrastrukturę pocztową.
06·Identyfikacja wizualna
Palette
Głęboki granat w parze z żywym szmaragdowo-turkusowym akcentem — solidny i wiarygodny, ze świeżym, rosnącym charakterem.
Typography
Playfair Display · Manrope
The weights and pairings used across touchpoints.
Marks
- Monogram „K” Kryscar
- Paleta granat + szmaragd
- Ikonografia usług
