Pricing calculator
An interactive estimator that turns garden size and selected services into an instant, transparent quote.
Web Developer & Visual Designer
Case study · 2026
Ogrody Kryscar
A full digital home for a gardening company — a Next.js site with WebGL visuals, a pricing calculator, and the email infrastructure behind it.
- Role
- Web Developer & Visual Designer
- Period
- 05/2026 - Present
- Stack
- 11
- Read
- 1 min
Next.jsThree.jsTailwind CSSFigmaEmail Server+6
01·Overview
02·My role
- Designed and built the entire website in Next.js 16, React 19, and Tailwind CSS v4
- Built an interactive pricing calculator, a filterable service catalogue, and a coverage map
- Created custom WebGL 3D visuals with three.js / React Three Fiber and motion throughout
- Set up and maintain the company's email infrastructure — domain, DNS, mailboxes — as an ongoing digital partner
03·Tools & tech
Next.jsThree.jsTailwind CSSFigmaEmail ServerTypeScriptFramer MotionRadix UIDomain & DNSMailboxesSEO
04·Key features
Filterable service catalogue
Mowing, planting, hedge trimming, seasonal cleanups — browsable by category with animated reordering.
Coverage map
An interactive map of the service area, so visitors immediately know whether they're in range.
WebGL 3D visuals
Custom three.js / React Three Fiber graphics and motion give the site a distinctive, organic feel.
05·Under the hood
Next.js 16 + React 19
App Router with Server Components and static rendering — fast, SEO-ready pages.
Three.js + React Three Fiber
Custom WebGL scenes with graceful reduced-motion and legacy-browser fallbacks.
Tailwind v4 + design tokens
A navy-and-emerald visual language built on semantic color tokens, designed in Figma.
Email server + DNS
Domain, DNS records, and company mailboxes — I own and maintain the email infrastructure.
06·Visual identity
Palette
Deep navy paired with a living emerald-and-teal accent — grounded and credible, with a fresh, growing edge.
Typography
Playfair Display · Manrope
The weights and pairings used across touchpoints.
Marks
- Kryscar "K" monogram
- Navy + emerald palette
- Service iconography
