Ta strona jest ogrodem 3D i potrzebuje JavaScriptu. Poniżej pełna treść.
THE GARDEN
Wiktor Wojtarowicz
Strony na produkcji
Siedem żywych stron. Każda z zadaniem: sprzedać, zapisać, obsłużyć. Kafelki przewijają dzisiejsze zrzuty całych stron, niżej nagrania z produkcji; klik otwiera stronę.
- otw-dev.com: Agencja: Next.js na Vercelu, asystent AI z widocznym rozumowaniem, program partnerski z trackerem, panel klienta, blog, 21 plansz motywów, trzy polityki prawne po polsku i angielsku. (ekran, telefon)
- motiwinebar.com: Pierwszy płatny klient: strona w Astro, około 60 klatek na sekundę nawet bez akceleracji sprzętowej, pipeline treści na Instagram. (ekran, telefon)
- voyagerprzewozy.pl: Przewozy pasażerskie: rozkład 45 przystanków, mapa, PDF do druku, wideo w trzech jakościach, panel aktualności dla biura. (ekran, telefon)
- skipol.pl: Next.js na LiteSpeed z rygorystycznym CSP: zero trackerów i zero zewnętrznej analityki. (ekran, telefon)
- xc-ski.pl: Sklep WooCommerce z bazą Fischer i One Way 26/27, asystentem doboru nart i panelem klienta z instrukcją. (ekran, telefon)
- miodynatu.pl: Miodosytnia NATU: WordPress i WooCommerce, pełny pakiet graficzny ze stroną, sklepem i etykietą na słoik. (ekran, telefon)
- student-ib.pl: Platforma dla studentów IB na Uniwersytecie Gdańskim: grupy, materiały, gry i sklep z portfelem na serwerze. (ekran, telefon)
Nagrania z produkcji
Systemy i panele
To, co pracuje po wdrożeniu: asystenci, panele, trackery i silniki. Każdy z pomiarem, każdy z ekranem.
- Asystent AI na otw-dev.com: Claude Sonnet, widoczne rozumowanie strumieniem, limit jednej wiadomości na 5 s, odporność na wstrzyknięcia promptu, trzy polityki prawne. (ekran)
- Asystent doboru nart na xc-ski.pl: Rozmiar liczy deterministyczny silnik na tabelach Fischera, model tylko rozmawia. Red team na żywo 28 z 28 bez przecieku, limity na IP, sesja HMAC, dzienny budżet. (ekran, telefon)
- Panel klienta xc-ski (WordPress): 134 nowe produkty i 836 wariantów wgrane przez wp-admin bez SSH, instrukcja z 11 zrzutami i 31 zaznaczeniami, kopia zapasowa 953 MB. (ekran)
- Tracker leadów i panel partnera: Upstash Redis, 19 z 20 testów na żywo: logowanie, wymuszona zmiana hasła, unieważnienie sesji, trwałość danych. Kalkulator po polsku i angielsku. (ekran, telefon)
- Panel klienta i zespołu OTW: Supabase z RLS: etapy, poprawki i rozmowa w jednym miejscu, kwalifikacja zgłoszeń po stronie zespołu. (ekran, telefon)
- Lejek wyceny: Pytania, kwota na końcu, kontakt. Lejek i panel klienta w jednej bazie. (ekran)
- Kreator oferty: Lokalny HTML: cennik, warianty, VAT i sekcja skąd ta kwota; PNG, PDF A4 i JSON per klient. Pierwsza oferta: asystent dla xc-ski, 10.10.2026. (ekran, telefon)
- Panel aktualności Voyager: Biuro dodaje wpis z tekstem, zdjęciami i PDF, strona pokazuje trzy kafelki i podstronę. Supabase, RLS, bramka kształtu 16 z 16. (ekran, telefon)
- Hustleye: Silnik lead-gen i cold e-mail: 1 204 zeskanowane firmy, 355 ocenionych, 18 miast; kampania na żywo od 27 lipca 2026. Aplikacja rozmów na telefon i komputer. (ekran, telefon)
- Hustleye: wyłącznik i zlecenia: Jeden przycisk zatrzymuje skan, ocenę, generowanie i wysyłkę; wysyłka wraca tylko ręcznie. Zlecenia z Oferii i OLX ocenione pod popyt, w aplikacji na telefon. (ekran, telefon)
- Darwin: Silnik treści: Drive, Vision, render 1080x1350, podpis, bramki jakości, kolejka zatwierdzeń na komputer i telefon, publikacja na Instagram i Facebook. 2 079 testów. (ekran, telefon)
- Atom OS: Backend agentów: 2 085 testów, rada 29 person z moderatorem Opus i czterema dostawcami LLM, 528 commitów. Nazwy person policzone z plików. (ekran)
- Reaper: brama i obrona: Brama z bcrypt, 5 prób i blokada, log IP, WebRTC i ASN; 9 modułów: uprawnienia, anomalie, wywiad o zagrożeniach, skaner sekretów, propozycje reguł. (ekran)
- ReelAudit: Audyt rolek pod retencję i hook: FastAPI i Next.js, przełączalne Gemini albo Claude.
- Spacer 3D po mieszkaniu: Katalog mieszkań: obejście wnętrza wygenerowane w Higgsfield, model 3D w three.js i Blenderze, kamera prowadzona po prawdziwym rzucie. (wideo)
Marketing i grafika
Posty, plakaty, wideo i pakiety graficzne: wszystko przechodzi przez bramki jakości, zanim zobaczy je klient.
- Posty z silnika Darwin: Od zdjęcia z telefonu do zaplanowanego posta: 7 rodzin branżowych, Moti o 12:00, OTW o 18:00, 214 postów Moti ze statystykami. (ekran, telefon)
- Motywy postów na /motywy: 21 plansz w 7 rodzinach: porada, oferta, lista, cytat, kulisy. Obok dwa motywy: porada i oferta. (ekran, telefon)
- Plakat Jurajska degustacja: Tło z Higgsfield, typografia w HTML, render w Chrome. (ekran)
- Potykacz Moti 50x90 cm: Dwie strony: hasło na fiolecie i menu z @moti_winebar. HTML do druku, PDF 500x900 mm. (ekran, telefon)
- Miodosytnia NATU: pakiet graficzny: Strona i sklep plus etykieta na słoik z geometrii logo: pełny pakiet dla firmy, od identyfikacji po programy pod etykietę. (ekran, telefon)
- Oferta OTW, 10 slajdów: Karuzela na Instagram i PDF dla klientów. (ekran)
- Motion ad: nowa era: Higgsfield i Kling, referencje prawdziwego ekranu, arkusz klatek przed wysyłką. (wideo)
- Motion ad: panel klienta: Etapy, poprawki i rozmowa na telefonie i laptopie. (wideo)
- UGC: kawiarnia: Wideo wygenerowane z pomocą AI, oznaczone na ekranie. (wideo)
- SEO i pozycjonowanie: Search Console dla otw-dev.com i motiwinebar.com, sitemap, robots i llms.txt w Next.js, Lighthouse 100 na tej stronie i Core Web Vitals pod kontrolą na produkcji.
- Meta: Instagram i Facebook: Publikacja przez Graph API od 15 sierpnia 2026, tokeny stron, skan 214 postów Moti i 17 OTW ze statystykami, idempotencja per platforma.
- Cold outreach i lead magnety: Hustleye: tor angielski wysyła 5 maili dziennie od 5 września 2026, tor polski zatrzymany zgodnie z PKE. Lead magnety jako pakiety promptów per potrzeba małej firmy: w budowie.
Warsztat i dowody
Jak pracuję: vault wiedzy, agenci, skille i hooki, które pilnują każdej komendy. Liczby policzone dziś, nie z pamięci.
- Vault: 6 982 notatek, 83 895 linków: Graf z prawdziwych linków między notatkami (2 000 najmocniej połączonych). 271 handoffów, 305 notatek sesji, 3 818 komórek wiedzy. (ekran)
- Claude Code: 36 skilli, 32 hooki, 8 agentów: Własne polecenia, hooki blokujące niebezpieczne komendy, 336 plików pamięci z bliznami i regułami, 43 narzędzia. (ekran)
- Orkiestracja agentów: Rada 29 person z moderatorem Opus i czterema dostawcami LLM, Reaper z 9 modułami obrony, podagenci do researchu, przeglądu kodu i nawigacji po vaulcie. Nazwy person i modułów policzone z plików. (ekran)
- Commity i testy: 1 784 commity w ośmiu repozytoriach od kwietnia 2026; ponad 4 800 testów: otw/web 555, Darwin 2 079, Atom OS 2 085, xc-ski 60, ta strona 76.
Agenci i modele językowe
- Pętla agenta z narzędziami (tool calling): Haiku klasyfikuje intencję do JSON, dyspozytor odpala narzędzia równolegle (asyncio.gather), Sonnet składa odpowiedź, wynik leci strumieniem SSE: tool_call, tool_result.
- LLM Council: 29 person, moderator Opus: Własna rada modeli w Atom OS: red team, adwokat diabła, audytor bezpieczeństwa, pre-mortem; moderator dobierany do wagi decyzji, czterech dostawców za jednym interfejsem.
- Ultra Loop: research, debata, samokorekta: Research w sieci przez 4 dostawców, dobór person, 3 rundy debaty z rotacją modeli i pętla samokorekty Opus x3, z twardym limitem kosztu na zadanie.
- Agenci researchu i analizy sklepu: 10 agentów w konsensusie plus debata 3x3 przed budową asystenta xc-ski.pl; 3 agentów zbudowało bazę wiedzy instruktorskiej (12 notatek); podagent-sędzia ocenia egzamin asystenta.
- RAG hybrydowy: Słowa kluczowe plus wektory multilingual-e5 (384 wymiary), fuzja RRF: trafność recall@10 z 50 do 75%, bramka ewaluacyjna na 52 parach wzorcowych.
- Prompt caching i routing modeli: Cache promptu systemowego i katalogu: 60% kosztu odpowiedzi to odczyt z cache, ok. 0,015 USD za odpowiedź. Haiku do mechaniki, Sonnet do budowy, Opus do planu, eskalacja po 2 porażkach.
- Model nie liczy, silnik liczy: Asystent xc-ski.pl: rozmiar nart z deterministycznego silnika na tabelach Fischera, cena i link tylko z katalogu WooCommerce; model wyłącznie rozmawia.
- Własne workflow Claude Code: 36 skilli, 8 podagentów (przegląd kodu, gotowość wdrożenia, nawigacja po vaulcie), hooki na każdą komendę, pamięć 500 plików z bliznami i regułami.
Bezpieczeństwo i red team
- Red team asystenta: 28 z 28: Na żywo na produkcji sklepu: 12 ataków, 11 pułapek (cena, rabat, obcy link, wyciek promptu, obcy e-mail) i 5 pytań normalnych, zero przecieku.
- Audyt otw-dev.com: 46 kontroli: Test czarnej skrzynki 13 odstępstw na 51 żądaniach przed, 51 z 51 po poprawkach; 36 nowych testów negatywnych; zero nowych zależności.
- Znalezione i naprawione podatności: Wstrzyknięcie # w PostgREST obcinające filtr firmy (odczyt cudzych zgłoszeń), CSRF bez sprawdzenia Origin, sesja żyjąca 30 dni po zmianie hasła.
- Uwierzytelnianie i dane: RLS na 19 z 19 tabel, sesje HMAC-SHA256, hasła scrypt, CSP egzekwowane, limity zapytań z Retry-After, Turnstile; logowanie 5 prób i blokada.
- Ochrona API z modelem: Wymagany Origin, limit 12 KB, sesja HMAC 15 min, dzienny budżet z wyłącznikiem, filtr wyjścia (kwoty, linki, klucze); pentest 403, 413, 400, 405, 429.
- Audyt backendów agentów: Bramka tokenu objęła 275 z 520 tras, ochrona SSRF, dzienne limity płatnych API, sprawdzanie magic bytes przy uploadzie, cotygodniowy pip-audit.
- Reaper i hooki: Reaper: silnik uprawnień, anomalie, zaufanie nagłówków proxy, około 93 testy. Hooki Claude Code blokują sekrety w komendach, zrzuty .env i wyjście treści na zewnątrz.
Optymalizacje
- LCP z 4,7 s na telefonie: Diagnoza z faz LCP: obraz pobrany w 30 ms, a 4 s to Render Delay animacji wejścia; usunięte u źródła.
- Pamięć klatek z 3,8 GB do 7,7 MB: Sekwencja przewijania dekodowana w rozmiarze płótna zamiast 2160 px: 17 ms dekodu na klatkę, bez zacięć sekcji.
- Ta strona: 25-39 do 60 kl./s: Render ASCII w shaderach GLSL, pass w 2 krokach i szkło w passie zamiast backdrop-filter; świat 6,3 ms na klatkę przy DPR 2.
- Funkcja serwerowa z 226 MB: Dynamiczna ścieżka w public wciągała cały katalog do funkcji Vercela; stały katalog i wykluczenia śledzenia plików.
- PDF oferty z 13,7 do 2,41 MB: Kompresja i przebudowa strumieni bez utraty jakości druku.
Języki i narzędzia
- Python i FastAPI: Darwin: około 45 tys. linii i 4 700 testów pytest; Atom OS: około 2 085 testów, 28 modułów. Kolejki zadań, pętle, publikacja przez oficjalne API.
- TypeScript, Next.js 16, React 19: otw-dev.com: 682 commity, 597 testów jednostkowych i 716 e2e Playwright z axe; Astro dla motiwinebar.com, Vite i three.js dla tej strony.
- GLSL, SQL, PHP, Bash: Shadery ASCII tej strony, migracje Supabase z RLS, snippety WordPress dla xc-ski.pl, hooki i automatyzacje w Bash.
- HTML i CSS: Ręczny układ bez szablonów: plansze motywów, oferty do druku, plakaty renderowane z HTML, dostępność AA.
- Integracje API: Meta Graph (Instagram, Facebook), LinkedIn OAuth, X, GitHub, ElevenLabs, Anthropic, Gemini, Resend, WooCommerce Store API.
- Shopify Liquid, WordPress, bazy: Motyw resellclub.pl (351 plików), WooCommerce dla xc-ski.pl i miodynatu.pl, Supabase i Postgres, Upstash Redis, Cloudflare R2.
- Testy i wdrożenia: pytest, Vitest, Playwright e2e z gestami dotykowymi, testy ewaluacyjne modeli; Vercel z wdrożeniem pushem, launchd, kopie zapasowe.
Liczby z produkcji
- Kontrast AA 5,58 do 5,84 : 1: Program partnerski OTW, cała strona na poziomie AA, dwujęzyczny kalkulator.
- 19 z 20 testów na żywo: Tracker leadów partnera: logowanie, wymuszona zmiana hasła, unieważnienie sesji, trwałość danych.
- 836 do 1 404 leadów: Hustleye, 18 miast i 16 województw po poprawce rozrzutu geograficznego 14 lipca 2026.
Certyfikaty
- Demonstrator Szkolny Polskiego Związku Narciarskiego: PZN, Licencjonowana Szkoła Narciarska Lider, 2020
- Kurs na stopień Pomocnika Instruktora SITN-PZN, część I: SITN-PZN, Klub Narciarski Ryskalski Team, 2022
- Kurs mediacji rówieśniczych, 40 godzin (Akademia Mediacji Rówieśniczych): Uniwersytet Pedagogiczny im. KEN w Krakowie, 2019
- Developing Secure AI Agents with LLMs: NVIDIA Deep Learning Institute, 2026
Kontakt
Masz projekt? Napisz, a odpiszę konkretnie: zakres, termin, koszt.
Napisz do mnie
Zbudowane ręcznie w three.js, bez szablonu. Profil: umiejętności i realizacje