MyTeam

About the project

Background

frontendmentor.io provides high-fidelity designs to front-end developers which allows them to test their skills and receive feedback on their solutions from other developers.

PROJECT AIMS

This project is a multi-page website for a fictional recruitment agency. A Figma file was given at the start of the challenge, with the aim to reproduce the website and make it look as close to the mockup as possible.

Tech Stack Explained

The website uses NextJS as I wanted to continue learning the Next framework to build visually complicated UI's and components. Using Next along with styled-components allowed me to keep component styling within the same file while also providing global styling through the "ThemeProvider" functionality given by styled-components.

Challenges & Lessons Learned

I wanted to really challenge myself in regards to making the UI feel more dynamic, so I utilized Greensock Animation Platform (GSAP) to add animations to each page. Greensock provides the ability to trigger animations when they enter the viewport via the "scollTrigger" function, which I used to make components appear when the user scrolls down the page.

It also enables developers to finely tune the timing of animations using the "timeline" function. This allowed me to decide which parts of each component to appear first, and when used together with the "stagger" property, I controlled how long each component would take to appear when they are grouped together (as seen on the about page, for the director's cards).

I only scratched the surface of GSAP's capabilities but I was able to create a website that had smooth animations. I'm excited to continue learning about more advanced topics such as the GSAP flip plugin, as well as other animation libraries such as Framer Motion.

You can view all of my frontendmentor.io challenges HERE.