Tentwenty is a digital agency based in Dubai, UAE. I was employed at Tentwenty as an SSE (Senior Software Engineer) and my job was to create beautiful, functional websites for our clients. Getting employed at Tentwenty was one of my goals for 2023, to learn how to make beautiful yet performant websites and then collaborate with a team that makes a living out of it. I was able to achieve this goal in 2023, and I am very proud of it. But, getting inside wasn’t easy, cloning the agency’s portfolio was one of the many ways, and I loved every part of it.
The problem I first encountered was that I couldn’t decide between what frontend tech stack to choose, since there were lots of page transitions and animations, choosing a client side framework like React seemed like the right choice, But that means a larger bundle size and a slower website. I decided to go with React and then optimize the website as much as possible.
The next problem was that I had never used GSAP, the animation library I’m familiar with, with React. I had to learn how to use GSAP with React and how to make sure that the animations are smooth and performant, and of course, I had to make sure that the animations are easy to edit as well as reusable.
I also identified a few problems with the original website, which I fixed in my clone. The whole UI and animations, in general, were pretty easy. There was one more problem and that was the page transitions, the original website had a lot of page transitions, which were not only slow but also not very smooth. I had to make sure that the page transitions are smooth and fast.
The solution was to use React and GSAP together, which was a lot of fun. React allows GSAP to:
I used Tailwind CSS to style the whole thing, JSON files to store the actual case studies and loaded them on demand, and Locomotive Scroll for the sweet scroll effect. I had to add a little feature to react-router in order to have a smooth page transition, which was really fun to do, and I learned a lot from it.
The result was something that impressed the Tentwenty team by a lot. I was able to clone the website in a few days and I was able to make it even better than the original. The website was fast, smooth, and easy to edit. The animations were smooth and reusable. The page transitions were fast and smooth. The website was also easy to edit, since it was built with a CMS in mind, I had placed all the strings in a JSON file, which made it easy to edit the website without breaking it as well as easy to integrate with a CMS if needed. You can check out the website here.
I learned a lot from this project, I learned how to use GSAP with React, how to make sure that the animations are smooth and performant, and how to make sure that the animations are easy to edit as well as reusable. I also learned how to use Locomotive Scroll, which is a really cool scroll effect library. I also learned how to use JSON files to store the actual case studies and load them on demand. I also learned how to add a little feature to react-router in order to have a smooth page transition. Overall, it was a great learning experience, and I enjoyed every part of it.
Until next time, keep solving problems, keep getting better, and keep moving forward. If you want to work with me, you can contact me here.
Send me an email or message me on LinkedIn if you're looking for someone who builds without BS.