[{"data":1,"prerenderedAt":166},["ShallowReactive",2],{"project-\u002Fprojects\u002F2026\u002Fwankowicz":3,"project-posts-\u002Fprojects\u002F2026\u002Fwankowicz":165},{"id":4,"title":5,"agency":6,"body":7,"compare":59,"cover":87,"date":89,"description":90,"draft":91,"extension":92,"facts":93,"featured":91,"gallery":106,"galleryLead":136,"highlights":137,"image":150,"links":151,"meta":152,"navigation":109,"note":153,"ogImage":154,"path":155,"seo":156,"stack":157,"stem":161,"tags":162,"__hash__":164},"projects_en\u002Fprojects\u002F2026\u002Fwankowicz\u002Findex.md","M. Wańkowicz High School – new website version","Pesi",{"type":8,"value":9,"toc":54},"minimark",[10,14,19],[11,12,13],"p",{},"The website of the Melchior Wańkowicz High School has a Polish and an English version and an accessibility panel: bigger text, high contrast and more readable fonts. I've worked on this website in the Pesi team since October 2025, and since July 2026 I've been rewriting its front-end. I do the refactor on a separate branch, because the school keeps sending changes for the current version. The comparisons below show the code and design I took over – the state from 14 Oct 2025.",[15,16,18],"h2",{"id":17},"what-im-changing","What I'm changing",[20,21,22,30,36,42,48],"ul",{},[23,24,25,29],"li",{},[26,27,28],"strong",{},"Accessibility according to WCAG 2.2"," – the goal is level AAA, AA as the minimum: text scaling up to 200%, contrast, keyboard support, a visible focus and the size of clickable elements",[23,31,32,35],{},[26,33,34],{},"One view per page"," instead of separate copies for English – texts, addresses and contact details in language files",[23,37,38,41],{},[26,39,40],{},"Colours through tokens"," – no hard-coded colours, so the high contrast mode works on the whole website",[23,43,44,47],{},[26,45,46],{},"Sizes in rem",", self-hosted fonts and one icon component",[23,49,50,53],{},[26,51,52],{},"Tailwind CSS v4"," with the config in CSS and a shared content width for Blade views and Vue components",{"title":55,"searchDepth":56,"depth":56,"links":57},"",2,[58],{"id":17,"depth":56,"text":18},{"before":60,"after":66,"rows":70,"note":86},{"src":61,"width":62,"height":63,"label":64,"alt":65},"\u002Fprojects\u002F2026\u002Fwankowicz\u002Fold-home-top.webp",1440,900,"Before · before I joined (Oct 2025)","The school website in October 2025 – the first screen",{"src":67,"width":62,"height":63,"label":68,"alt":69},"\u002Fprojects\u002F2026\u002Fwankowicz\u002Fhome-top.webp","After · new version","The new version of the school website – the first screen",[71,75,79,82],{"label":72,"before":73,"after":74},"Page view files","65","35",{"label":76,"before":77,"after":78},"View copies for the EN version","31","0",{"label":80,"before":81,"after":78},"Hard-coded colours","23",{"label":83,"before":84,"after":85},"Sizes hard-coded in px (e.g. text-[15px])","353","53","Numbers from the Blade views. Before – the code from 14 Oct 2025, the last state before my changes; after – the new version on a separate branch. Screenshots from local versions; news in the old version comes from today's database.",{"desktop":67,"phone":88,"width":62,"height":63,"alt":69},"\u002Fprojects\u002F2026\u002Fwankowicz\u002Fhome-phone-top.webp","2026-10-01","Front-end refactor of a high school website: accessibility according to WCAG 2.2, one view for the Polish and English versions, colours through tokens for the high contrast mode. Work in progress.",false,"md",[94,97,100,103],{"value":95,"text":96},"65 → 35","page views – English copies replaced with one view for both languages",{"value":98,"text":99},"23 → 0","hard-coded colours in templates – all of them now through tokens",{"value":101,"text":102},"353 → 53","sizes hard-coded in pixels, e.g. text-[15px] – the rest in rem, so they grow with enlarged text",{"value":104,"text":105},"88%","of the current front-end of the new version is my code",[107,112,116,120,124,128,132],{"src":108,"full":109,"alt":110,"caption":111},"\u002Fprojects\u002F2026\u002Fwankowicz\u002Fcontent-page-full.webp",true,"The About us page","A content page – About us",{"src":113,"width":62,"height":63,"alt":114,"caption":115},"\u002Fprojects\u002F2026\u002Fwankowicz\u002Fhome-text-200-top.webp","Text at 200% in the new version","New version – text at 200%, the heading and buttons grow with the content",{"src":117,"width":62,"height":63,"alt":118,"caption":119},"\u002Fprojects\u002F2026\u002Fwankowicz\u002Fold-home-text-200-top.webp","Text at 200% in the October 2025 version","October 2025 version – text at 200% for comparison",{"src":121,"full":109,"alt":122,"caption":123},"\u002Fprojects\u002F2026\u002Fwankowicz\u002Frecruitment-full.webp","The admission form in the new version","Admission form, step 1 – new version",{"src":125,"full":109,"alt":126,"caption":127},"\u002Fprojects\u002F2026\u002Fwankowicz\u002Fold-recruitment-full.webp","The admission form in the October 2025 version","Admission form – October 2025 version",{"src":129,"full":109,"alt":130,"caption":131},"\u002Fprojects\u002F2026\u002Fwankowicz\u002Fhome-full.webp","The home page of the new version","Home page – the whole page",{"src":133,"full":109,"alt":134,"caption":135},"\u002Fprojects\u002F2026\u002Fwankowicz\u002Fold-home-full.webp","The home page in the October 2025 version","Home page – October 2025 version, the whole page","Screenshots from local versions – the new version and the code from October 2025. Click a screenshot to enlarge it.",[138,141,144,147],{"title":139,"text":140},"One view for two languages","The old website had a separate copy of the view for the English version. Now every page has one view, and the texts are in language files. A section can be hidden in only one language, and a missing translation shows the Polish text.",{"title":142,"text":143},"High contrast through tokens","The high contrast mode swaps the colour variables. It only works if no colour is hard-coded – that's why all colours moved to brand tokens and the Tailwind scale.",{"title":145,"text":146},"Text and layout grow together","The accessibility settings change the text size up to 200%. Sizes, spacing and the content width are in rem, so the whole layout grows with the text, and lines don't get too long.",{"title":148,"text":149},"Rules for the whole team","I wrote the refactor conventions in one file in the repository – sizes, colours, translations, icons and a WCAG checklist for every new page.","\u002Fprojects\u002F2026\u002Fwankowicz\u002Fthumbnail.webp",null,{},"Work in progress – the new version isn't published yet. I compare it with the code I took over: the state from 14 Oct 2025, the last one before my changes.","\u002Fog\u002Fprojects\u002Fwankowicz-en.jpg","\u002Fprojects\u002F2026\u002Fwankowicz",{"title":5,"description":90},[158,159,160,52],"Laravel Blade","Alpine.js","Vue 3","projects\u002F2026\u002Fwankowicz\u002Findex",[163],"html","iMcSDHyKSI-vY7xZgu2CFT3nWD6WPEpcDtRj06YRL7A",[],1792087405192]