[{"data":1,"prerenderedAt":176},["ShallowReactive",2],{"project-\u002Fpl\u002Fprojekty\u002F2026\u002Fwankowicz":3,"project-posts-\u002Fpl\u002Fprojekty\u002F2026\u002Fwankowicz":175},{"id":4,"title":5,"agency":6,"body":7,"compare":65,"cover":97,"date":99,"description":100,"draft":101,"extension":102,"facts":103,"featured":101,"gallery":116,"galleryLead":146,"highlights":147,"image":160,"links":161,"meta":162,"navigation":119,"note":163,"ogImage":164,"path":165,"seo":166,"stack":167,"stem":171,"tags":172,"__hash__":174},"projects_pl\u002Fpl\u002Fprojekty\u002F2026\u002Fwankowicz\u002Findex.md","Liceum im. M. Wańkowicza – nowa wersja strony","Pesi",{"type":8,"value":9,"toc":60},"minimark",[10,14,19],[11,12,13],"p",{},"Strona liceum im. Melchiora Wańkowicza ma wersję polską i angielską oraz panel z ustawieniami dostępności: większy tekst, wysoki kontrast i czytelniejsze fonty. Przy tej stronie pracuję w zespole Pesi od października 2025, a od lipca 2026 piszę jej front-end od nowa. Refaktor robię na osobnej gałęzi, bo szkoła cały czas dosyła zmiany do obecnej wersji. Strona miała sporo do poprawy w wyglądzie i działaniu – na szerokich ekranach się rozjeżdżała, a wiele komponentów mogło być jednym. Żeby nie zakopać się w kodzie, przepisuję ją etapami, sekcja po sekcji. Zacząłem od palety kolorów opartej na logo, a przy każdej sekcji sprawdzam WCAG. W trybie wysokiego kontrastu zostaje czarne tło, bo tak ustaliliśmy, ale na żółto są tylko linki i przyciski, a reszta tekstu jest biała – tak, jak zalecają wytyczne dostępności. Chcę, żeby szkoła dostała stronę, o którą zadbałem najlepiej, jak potrafię. Porównania poniżej pokazują kod i wygląd, które zastałem – stan z 14.10.2025.",[15,16,18],"h2",{"id":17},"co-zmieniam","Co zmieniam",[20,21,22,30,36,42,48,54],"ul",{},[23,24,25,29],"li",{},[26,27,28],"strong",{},"Dostępność według WCAG 2.2"," – cel to poziom AAA, minimum AA: skalowanie tekstu do 200%, kontrast, obsługa z klawiatury, widoczny focus i rozmiar klikalnych elementów",[23,31,32,35],{},[26,33,34],{},"Jeden widok na stronę"," zamiast osobnych kopii dla języka angielskiego – teksty, adresy i dane kontaktowe w plikach językowych",[23,37,38,41],{},[26,39,40],{},"Kolory przez tokeny"," – zero kolorów wpisanych na sztywno, dzięki czemu tryb wysokiego kontrastu działa na całej stronie",[23,43,44,47],{},[26,45,46],{},"Rozmiary w rem",", własne fonty bez zewnętrznych serwerów i jeden komponent ikon",[23,49,50,53],{},[26,51,52],{},"Alpine.js zamiast mieszanki z Vue"," – stara wersja używała naraz Alpine.js i Vue, często na tej samej stronie: nagłówek, stopka, formularze i kalendarz były komponentami Vue osadzanymi w widokach Blade. Interakcje przeniosłem do Alpine.js i zwykłego JavaScriptu, a Vue zostało w jednej sekcji (125 → 1 komponentów Vue). Strony bez tej sekcji w ogóle nie pobierają Vue",[23,55,56,59],{},[26,57,58],{},"Tailwind CSS v4"," z konfiguracją w CSS i wspólna szerokość treści dla widoków Blade i komponentów Vue",{"title":61,"searchDepth":62,"depth":62,"links":63},"",2,[64],{"id":17,"depth":62,"text":18},{"before":66,"after":72,"rows":76,"note":96},{"src":67,"width":68,"height":69,"label":70,"alt":71},"\u002Fprojects\u002F2026\u002Fwankowicz\u002Fold-home-top.webp",1440,900,"Przed · zanim dołączyłem (paź 2025)","Strona liceum w październiku 2025 – pierwszy ekran",{"src":73,"width":68,"height":69,"label":74,"alt":75},"\u002Fprojects\u002F2026\u002Fwankowicz\u002Fhome-top.webp","Po · nowa wersja","Nowa wersja strony liceum – pierwszy ekran",[77,81,85,88,92],{"label":78,"before":79,"after":80},"Pliki widoków stron","65","35",{"label":82,"before":83,"after":84},"Kopie widoków dla wersji EN","31","0",{"label":86,"before":87,"after":84},"Kolory wpisane na sztywno","23",{"label":89,"before":90,"after":91},"Rozmiary wpisane w px (np. text-[15px])","353","53",{"label":93,"before":94,"after":95},"Komponenty Vue","125","1","Liczby z widoków Blade i komponentów Vue. Przed – kod z 14.10.2025, ostatni stan przed moimi zmianami; po – nowa wersja na osobnej gałęzi. Zrzuty z wersji lokalnych, aktualności w starej wersji pochodzą z dzisiejszej bazy.",{"desktop":73,"phone":98,"width":68,"height":69,"alt":75},"\u002Fprojects\u002F2026\u002Fwankowicz\u002Fhome-phone-top.webp","2026-10-01","Refaktor front-endu strony liceum: dostępność według WCAG 2.2, jeden widok na wersję polską i angielską, kolory przez tokeny pod tryb wysokiego kontrastu. Projekt w toku.",false,"md",[104,107,110,113],{"value":105,"text":106},"65 → 35","widoków stron – angielskie kopie zastąpione jednym widokiem na oba języki",{"value":108,"text":109},"23 → 0","kolorów wpisanych na sztywno w szablonach – wszystkie przez tokeny",{"value":111,"text":112},"353 → 53","rozmiarów wpisanych w pikselach, np. text-[15px] – reszta w rem, więc rośnie razem z powiększonym tekstem",{"value":114,"text":115},"88%","obecnego front-endu nowej wersji to mój kod",[117,122,126,130,134,138,142],{"src":118,"full":119,"alt":120,"caption":121},"\u002Fprojects\u002F2026\u002Fwankowicz\u002Fcontent-page-full.webp",true,"Podstrona O nas","Podstrona z treścią – O nas",{"src":123,"width":68,"height":69,"alt":124,"caption":125},"\u002Fprojects\u002F2026\u002Fwankowicz\u002Fhome-text-200-top.webp","Tekst powiększony do 200% w nowej wersji","Nowa wersja – tekst 200%, nagłówek i przyciski rosną razem z treścią",{"src":127,"width":68,"height":69,"alt":128,"caption":129},"\u002Fprojects\u002F2026\u002Fwankowicz\u002Fold-home-text-200-top.webp","Tekst powiększony do 200% w wersji z października 2025","Wersja z października 2025 – tekst 200% dla porównania",{"src":131,"full":119,"alt":132,"caption":133},"\u002Fprojects\u002F2026\u002Fwankowicz\u002Frecruitment-full.webp","Formularz rekrutacyjny w nowej wersji","Formularz rekrutacyjny, krok 1 – nowa wersja",{"src":135,"full":119,"alt":136,"caption":137},"\u002Fprojects\u002F2026\u002Fwankowicz\u002Fold-recruitment-full.webp","Formularz rekrutacyjny w wersji z października 2025","Formularz rekrutacyjny – wersja z października 2025",{"src":139,"full":119,"alt":140,"caption":141},"\u002Fprojects\u002F2026\u002Fwankowicz\u002Fhome-full.webp","Strona główna nowej wersji","Strona główna – cała",{"src":143,"full":119,"alt":144,"caption":145},"\u002Fprojects\u002F2026\u002Fwankowicz\u002Fold-home-full.webp","Strona główna w wersji z października 2025","Strona główna – wersja z października 2025, cała","Zrzuty z wersji lokalnych – nowa wersja i kod z października 2025. Kliknij zrzut, żeby go powiększyć.",[148,151,154,157],{"title":149,"text":150},"Jeden widok na dwa języki","Stara strona miała osobną kopię widoku dla wersji angielskiej. Teraz każda strona ma jeden widok, a teksty są w plikach językowych. Sekcję można ukryć tylko w jednym języku, a brakujące tłumaczenie pokazuje tekst polski.",{"title":152,"text":153},"Wysoki kontrast przez tokeny","Tryb wysokiego kontrastu podmienia zmienne kolorów. Działa tylko wtedy, gdy żaden kolor nie jest wpisany na sztywno – dlatego wszystkie kolory przeszły na tokeny marki i skalę Tailwinda.",{"title":155,"text":156},"Tekst rośnie razem z układem","Ustawienia dostępności zmieniają rozmiar tekstu do 200%. Rozmiary, odstępy i szerokość treści są w rem, więc cały układ rośnie razem z tekstem, a linia nie robi się za długa.",{"title":158,"text":159},"Zasady dla całego zespołu","Konwencje refaktoru spisałem w jednym pliku w repozytorium – rozmiary, kolory, tłumaczenia, ikony i lista kontrolna WCAG dla każdej nowej strony.","\u002Fprojects\u002F2026\u002Fwankowicz\u002Fthumbnail.webp",null,{},"Projekt w toku – nowa wersja nie jest jeszcze opublikowana. Porównuję ją z kodem, który zastałem: stan z 14.10.2025, ostatni przed moimi zmianami.","\u002Fog\u002Fprojects\u002Fwankowicz-pl.jpg","\u002Fpl\u002Fprojekty\u002F2026\u002Fwankowicz",{"title":5,"description":100},[168,169,170,58],"Laravel Blade","Alpine.js","Vue 3","pl\u002Fprojekty\u002F2026\u002Fwankowicz\u002Findex",[173],"html","eqeZ5DpFDYNrv3gGlsl3xvOvWiCWX8HwhaKe4Cfn_TQ",[],1792530551599]