Pierdology

Explore all the colorful variations of a ubiquitous Polish swear word. This website is a handy (and fun) resource for people who want to learn Polish beyond the textbooks.

‍

I’m a Brazilian guy living in Poland since 2021. After moving here, I soon realized a lot of the words people speak in daily life are not taught in class. The word “pierdolić” in particular caught my attention because it has so many variations and can be applied to countless situations.

So I started digging. I found some online sources (which are credited on the website footer) and learned more from Polish friends.

At the same time, I was learning no-code development with Webflow and realized that CMS collections would be a great way to present all the “pierdolić” variations in a clean, well-structured way.

I started playing around on Figma to figure out how to translate this content into a website. Since it’s focused on words, I knew typography would take center stage. It’s also a very simple website, so I constantly asked myself what was necessary: do I need a navbar? Do I need a contact page? And so on.

Above all, I wanted it to be fun – we’re talking about swear words here! So apart from adding funny examples, I decided to use very soft pastel colors, to provide a visual contrast to the heavy language. Colors also played an important role when differentiating the perfective (“–pierdolić”) and imperfective (“–pierdalać”) variations. Since they’re both sides of the same coin, inverting the color scheme did the trick.

Once I was happy with the layout, I started developing it on Webflow.

This is my first completed project on Webflow, so I faced all the challenges you’d expect a novice to encounter – how to properly structure the CMS collection, how to make it look good on and function properly on different devices, how to go beyond Webflow’s standard features.

I used Finsweet’s client-first framework, which was extremely helpful for maintaining consistency, but I also had to learn how to strike a balance between consistency and bloated combo classes. Finsweet’s browser extension came in handy quite a few times during this process.

The website revolves around a full-screen slider switching between the prefixes. All the information on the homepage, including background colors, comes from just one CMS collection. I experimented with Webflow’s native slider and JavaScript libraries (Swiper, Splide), but wasn’t able to achieve the desired results. The solution that ticked all the boxes ended up being Finsweet Attributes’ CMS Slider.

Using Finsweet Attributes was super easy. However, since I don’t have a background in traditional programming, custom JS code was the most challenging aspect of this project.

For example, I had to figure out how to play audio files on button click (and make it work on different devices – turns out what works for Android doesn’t necessarily work on iOS!), how to make the slider respond to clicks on arrows located outside of it on the DOM, how to dynamically change the background color of extra whitespace outside the slider...

Once everything seemed to be ready, came the humbling experience of running quality checks on different devices. I used Google Chrome’s DevTools to simulate the experience on different devices, but nothing beats real tests with real users. Thankfully, my friends were kind enough to point out all the big and small issues they encountered.

Looking back at the experience, I’m happy to have chosen such an unorthodox project that forced me to deal with many different aspects of web development. I learned how to use animations as a workaround to Webflow limitations (figuring out the pierdolić <> pierdalać toggle was quite a journey), experimented with different relative units (turns out sometimes VW is the best unit for text), and was able to feel how it is to own a web project from start to finish.

Most importantly, I went over (or around) every obstacle, and had fun doing it. I can’t wait to continue building cool stuff with no-code!

This project is a fresh, simple, and fun take on a content-first, informational website. I hope it will stand out from other submissions being evaluated by the judges, and that it will captivate the general public :)

‍