JK dizajn info@jkdizajn.sk

Ján Kolčák · portfólio 2026

Weby, nástroje
a pohyb.

Navrhujem a staviam weby a interné nástroje. Každý dostane vlastnú vektorovú scénu — jeden pohyb, ktorý ho drží pokope. Bez animačných knižníc.

Pozrieť projekty Chcem scénu
projekty
6
testov
362
animačné knižnice
0
Štúdio — dva monitory, štúdiové reproduktory, lampa a káva. Všetko SVG + CSS, žiadna knižnica.

Vybrané projekty

Dva projekty,
dva rôzne problémy.

Od klientskej aplikácie na cenové ponuky po MIDI sekvencer s vlastným engine. Tieto dva ukazujú rozsah; ďalšie projekty doplním postupne.

PDF · A4 189 TESTOV

Klientská aplikácia · 2025–2026

Cenové ponuky AGROSPA

Single-page aplikácia na tvorbu cenových ponúk pre slovenský trh: maržová kalkulácia v centoch, napojenie na register firiem a PDF, ktoré obsahuje iba zákaznícke údaje. Bez backendu, s úložiskovou vrstvou pripravenou na Supabase.

  • IČO autofill a pamäť firiem — aj offline
  • Marže, DPH a zľavy bez chýb v zaokrúhľovaní
  • PDF s diakritikou, číslovaním strán a podpisom
  • 189 testov vrátane reálneho PDF a E2E toku

React 18 · TypeScript · Vite · Tailwind · @react-pdf/renderer

Celá case study
MIDI OUT 173 TESTOV

Produkt · engine + plugin

CIRCLE — MIDI sekvencer

Jeden TypeScript engine beží v prehliadači aj vo VST/AU obale. Generuje iba MIDI — groove je v časovaní, nie v zvuku. Krokový grid, piano roll a sedem generátorov; export .mid priamo v prehliadači.

  • Zero-dependency engine: browser, Node aj plugin
  • MIDI testované na úrovni bajtov nezávislým parserom
  • VST3 + AU (JUCE) bez zvukových zberníc
  • 173 testov

TypeScript · Next.js 15 · React 19 · JUCE · VST3/AU

Celá case study

Scény

Pohyb ako súčasť dizajnu

Šesť scén, ktoré viem postaviť. Každá je čisté SVG + CSS, animuje len transform a opacity a pauzuje sa mimo obrazovky.

CIRCLE

16-krokový sekvencer: playhead beží, bodky sa rozsvecujú v rytme. Čisté CSS, bez zvuku.

MIDI · web + VST/AU

00:00:00:00

Nightshift

Audio-reaktívne stĺpce a timecode — pripomína generátor videí z hudby.

Electron · ffmpeg

Vinyl

Platňa sa točí, ramienko sa sklopí a obal drží artwork labelu. Pohyb je len rotácia a translate.

label-platform · EarsDeep

Hrnčiarsky kruh

Miska vzniká na točiacom sa kruhu — jemné kývanie a obrys, ktorý sa uzatvára.

ZmenoTvor · keramika

Značka a pohyb

Social karty

Reels vyskakujú z telefónu a odchádzajú do cloudu — dávka, ktorá sa publikuje naraz.

reels · automatizácia

AGROSPA — traktor

Malá pocta pôvodnej scéne: traktor prejde, vtáky vzlietnu a zase si sadnú.

SVG · 26 s slučka

Ako to funguje

Od briefu k scéne

Štyri kroky, jeden výstup. Bez knižníc, bez prekvapení.

  1. 01

    Brief

    Krátky rozhovor: pre koho scéna je, akú má mať náladu a kde bude žiť.

  2. 02

    Tri skice

    Tri statické smery ako SVG rám. Vyberáme jeden, zvyšok zostáva v šuplíku.

  3. 03

    Scéna

    Pohyb, timing a responzívnosť. Iba transform a opacity, s reduced-motion variantou.

  4. 04

    Integrácia

    Vloženie do webu, dokumentácia a handoff. Scéna sa pauzuje mimo obrazovky.

Ponuka

Dve cesty

Môžeme postaviť celý web aj s pohybom, alebo len scénu do existujúceho.

A · web + scéna

Web alebo interný nástroj

Od návrhu po nasadenie. Súčasťou je jedna vlastná scéna, ktorá drží vizuál pokope.

  • Návrh a implementácia
  • Responzívne a prístupné
  • Jedna scéna na mieru

B · scéna na mieru

Scéna do existujúceho webu

Samostatná vektorová scéna pre web, kampaň alebo produkt. Dodanie ako SVG + CSS s dokumentáciou.

  • Tri smery, jeden výber
  • SVG + CSS, bez knižníc
  • Reduced-motion variant

Rozsah a cenu určujeme po briefe — nie podľa cenníka naslepo.

Kontakt

Chcem scénu
pre svoj projekt

Napíš tri veci. Odpoviem s návrhom, ako na to — bez záväzkov.

  1. Čo je to za projekt a pre koho?
  2. Akú náladu má scéna mať?
  3. Kde bude žiť — web, app, kampaň?
Napísať brief info@jkdizajn.sk