← {Portfolio}
{Case: 06}

Polanka 21

A residential development website whose layout borrows the angles of the building itself, with diagonal sections and cut-out photos.

{Client}
Masterm
{My role}
Front-end & WordPress development
{Stack}
WordPress, CSS, JS, PL / EN
{Design}
[Designer / agency]
{Year}
[YEAR]
{Live}
polanka21.masterm.pl ↗
{polanka21.masterm.pl}
Polanka 21 home page

{Brief}

An unusual building that deserved an unusual layout

Polanka 21 joins a restored older building with new, angular architecture in Poznań. The site had to carry that character in its layout and still present the location, apartments and building management clearly, in two languages. [Adjust to the real brief.]

{What I did}

  • Turned the angular design into a working WordPress site
  • Built the diagonal sections and masked images in CSS
  • Kept the geometry intact across screen sizes
  • Set up the Polish and English versions

{Highlight: Geometry}

A layout built on diagonals

Photos are cut into angular shapes, and sand and grey panels overlap along diagonals, so one section flows into the next. A layout like this leaves little room for error in the front-end build.

{Home} — overlapping diagonal image masks
{Home} — overlapping diagonal image masks
{Architecture} — angled colour panels and cut-out buildings
{Architecture} — angled colour panels and cut-out buildings

{Key features}

{01}

Architecture story

A long page on the old and new buildings, the restoration, common areas and Scandinavian styling.

{02}

Location map

A map cut to the page's geometry, with nearby places and travel times listed below it.

{03}

Building management

A dedicated page on administration, cleaning, accounting and technical support after the move-in.

{04}

Two languages

Polish and English versions of the site, with the sales contact shown at the top of every page.

{Location} — the map follows the same angles
{Location} — the map follows the same angles
{Building management} — interior shot in a slanted frame
{Building management} — interior shot in a slanted frame
{Architecture} — opening view of the development
{Architecture} — opening view of the development

{Full page}

Scroll the home page

The diagonal structure works best in motion: scrolling shows how each panel hands over to the next one.

  • * WordPress
  • * CSS geometry
  • * Responsive layout
  • * PL / EN
{scroll ↓}
Full Polanka 21 page

{Technical notes}

[How the shapes are built (clip-path, SVG masks or something else), how they scale between breakpoints, what happens to them on a phone, and how the client swaps photos without breaking the layout.]

{Takeaways}

[The hardest part of the project and what you learned from it, in one or two sentences.]

{mattstudio}

Thanks for
looking.

← {Back to portfolio}