Viper's lair

Inspiration

My inspiration for this project is one of my favourite games - Valorant. I've been playing Valorant for the past 5 years and Viper was one of the first agents that I learned to play. I played her on every possible map and I loved the female batman vibe she gave.

What it does

It is a dynamic website where with each scroll, you learn something about the character, Viper

How we built it

The project was built using ReactJS, Tailwind and GSAP. I set up a basic react folder structure using vite, added tailwind and gsap. I got all the assets together - I downloaded some videos of Viper, edited smaller clips and saved them. I also downloaded some photos of viper that I thought looked cool. The first part of the website is just the video playing on loop, if you click on the centre, it goes into another video. The transitions from scrolling down, the change in the color of the text, sliding pictures etc. was achieved by using GSAP.

Challenges we ran into

• The main challenge was working with GSAP, I learned a lot about it and how it works and how to create cool and basic animations with it. The initial stage was so hard that I thought about scrapping this project altogether but it worked out, thankfully
• learning new React Hooks, how they work and how to manage them
• I was familiar with an older version of tailwind so getting used to the new one took some time

Accomplishments that we're proud of

• understanding the flow of data in this project especially with GSAP
• creating a fully dynamic, eye-catching website

What we learned

• GSAP, new react hooks like useRef, cool and advanced animations

What's next for Viper's lair

Potentially converting it into an animated wiki page for Valorant's Viper, or even expanding and covering all Valorant agents!

Built With

• gsap
• javascript
• react
• tailwindcss