How it all started

This project started with a first meeting in a café in Helsinki’s central railway station. There, one of the representatives of the International Workers Union Finland told me about the project and that they wanted a website. After a few messages, meetings, and agreements, I started working on the website.

The project's stack

The website was mainly built with modern web tools like Next.js, React, and Node.js, using next-intl for translations, Utopia for fluid typography and spacing, and an animated component from Fancy components. I used Storyset for illustrations, Postgres for the database, and AWS for hosting. Directus handled the content management, Zoho and Zeptomail managed the email setup, and GitHub Actions supported automated workflows.

Design and prototyping

The design came first. I created prototypes with Figma for the three pages I was asked to build. Since they were starting the union from scratch, they didn’t have clear guidelines for typography or colour schemes. This gave me freedom to experiment and propose ideas. The final result went through a few iterations but kept the essence: two main colours and two fonts for the typography.

These are some prototypes for large screen devices:

And these are some prototypes for smaller screens:

Internationalization

From the start, the IWU team wanted the website available in English and Finnish, and they hoped to expand to other languages in the future. I’ve always enjoyed working on multilingual projects, so I was excited with this requirement. I had tried other internationalization libraries before, but working with one in Next.js was new for me. Also, I wanted this integration to be as straightforward as possible for them to be able to update in the future. After some research, I found that next-intl was the most popular choice for this challenge.

Thanks to some learning and testing, the integration went smoothly within the tight project timeline. I used JSON files for each language to store all the website text. During development, I explained how the team could manage these files in Directus. I created documentation and language templates so the team would have both a guide and a starting point for future edits. This way, adding new languages or updating content would be easy.

Text rotate animation

Even though the project was fairly simple, I suggested adding a small animation to the homepage. I had come across Fancy components at a React Talk I attended this year in Helsinki, where a speaker showed one of their components. While exploring the library, I found a Text Rotate component that fit perfectly for the IWU homepage.

I ran into a few challenges while implementing it; the component didn’t quite fit my needs. I wanted to make sure the animation would work smoothly with my fluid typography and design. I had to rewrite parts of its code and get a bit creative to make sure it wouldn’t break on the many different devices people might use. My solution was to add some extra space so that any rotating word would look the same size. This caused another issue because the animation used the Fira Sans font, which isn’t fully Unicode. To fix that and handle other details, I created this function to balance the rotating words visually:

And it worked!

Looking back

The union didn’t have any content ready: no texts, images, or logo. Besides building the site, I also had to find illustrations (thank you Storyset!) and write mockup texts (thank you, AI) before the project's handover. It definitely added a layer of challenge, but it also showed me that I can step up and complete the work even when the starting point is basically a very blank page.

Recent projects