Github

1. Project Purpose and Goal

I made this website to explore how things can move around on the web. It's like adding magic to web pages by making them come alive with animations. I used libraries like GSAP and Three.js to add dynamic effects and to build stunning 3D scenes and visuals. Along the way, I got curious about making these movements smoother and easier for everyone to enjoy. It was a fun journey that taught me how to make websites more exciting and engaging.

2. Web Stack and Explanation

I went with this web stack because it felt like the right mix of tools for what I wanted to achieve. TypeScript was like having a safety net, catching errors before they became big headaches. React.js and Next.js made building the site feel like a breeze, with their ready-made components and smooth development process. Then there's Three.js, which let me dive into the world of 3D effects and really make my site stand out. And GSAP? Well, it was like adding a sprinkle of magic to the whole thing, making everything move and flow so smoothly.

3. Problems and Thought Process

During the project, I encountered a few bumps along the way, like getting the animations to work smoothly across different devices and browsers. To tackle this, I spent time fine-tuning the animations and optimizing them for performance. I also ran into some challenges integrating Three.js into the React.js environment, but I found helpful resources and documentation online to guide me through the process. Additionally, working with GSAP's timelines and easing functions required some experimentation to achieve the desired effects.

4. Lessons Learned

I gained a deeper understanding of the technologies I used, such as Three.js, GSAP, and React.js. By going through their documentation and experimenting with various features, I became more proficient in leveraging their capabilities to bring my ideas to life .