plContact

M. Wańkowicz High School – new website version

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.

  • Laravel Blade
  • Alpine.js
  • Vue 3
  • Tailwind CSS v4

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.

The new version of the school website – the first screen
  • 65 → 35page views – English copies replaced with one view for both languages
  • 23 → 0hard-coded colours in templates – all of them now through tokens
  • 353 → 53sizes hard-coded in pixels, e.g. text-[15px] – the rest in rem, so they grow with enlarged text
  • 88%of the current front-end of the new version is my code

What I built

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.

What I'm changing

  • 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
  • One view per page instead of separate copies for English – texts, addresses and contact details in language files
  • Colours through tokens – no hard-coded colours, so the high contrast mode works on the whole website
  • Sizes in rem, self-hosted fonts and one icon component
  • Tailwind CSS v4 with the config in CSS and a shared content width for Blade views and Vue components

Before and after

Drag the slider – the old site is on the left, the new one on the right.

The new version of the school website – the first screen
The school website in October 2025 – the first screen
Before · before I joined (Oct 2025)After · new version
MeasurementBeforeAfter
Page view files6535
View copies for the EN version310
Hard-coded colours230
Sizes hard-coded in px (e.g. text-[15px])35353

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.

How it looks

Screenshots from local versions – the new version and the code from October 2025. Click a screenshot to enlarge it.

  • A content page – About us
  • New version – text at 200%, the heading and buttons grow with the content
  • October 2025 version – text at 200% for comparison
  • Admission form, step 1 – new version
  • Admission form – October 2025 version
  • Home page – the whole page
  • Home page – October 2025 version, the whole page

1 / 7

The About us page

A content page – About us

Solutions in detail

Things from the code that show best how I work.

  • 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.

  • 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.

  • 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.

  • 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.

← All projects

Got a project in mind?

Or looking for someone to join your team? Write a few sentences – I'll reply within 72 hours.

I'll use your name, email and message only to reply to you. Details in the privacy policy.