The Clash Royale League – World Finals
- Styled Components
- SCSS/CSS – Flexbox
- CSS Animation
Firstborn created a one pager for the Clash Royale League (CRL) – World Finals! CRL "is Supercell’s official team-based esports league, featuring the best Clash Royale teams and players. With divisions in Europe, Asia, North America, Latin America & Mainland China."
Due to its international fan base, our site is supported in nine languages. Supporting multiple languages requires an additional QA and testing because some languages are more verbose than English. We made sure that the content was rendering correctly within each component's given space and the content's spacing was legible to the native speakers.
My role as a developer was to build reusable components for the main page. After receiving the design, I converted any module that shares common features into a one reusable component. For example, Event Info module (see below) renders all of the four cards as a single module in the desktop version but renders them as a single slide in a modal on mobile. Since we do not want to have two separate codes that do the same thing, I created the card as a separate component that is static within its module in the desktop version and a slide within the modal on mobile.
We used Styled Components as our CSS-in-JS. It was my first time using CSS-in-JS and although it felt weird at first to write CSS in JS, it was much better than maintaining lots of stylesheets at the end. It helped me keeping my CSS code clean and minimal. I loved that the CSS rules are automatically vendor prefixed. I will definitely use it again in the future.
Below is a code sample that I created for pulsing buttons that are used to indicate CRL divisions in the map. There are many examples for pulsing buttons on Codepen but a lot of the examples use 'box-shadow' to create this animation which is a big no no since 'box-shadow' property slows down performance.