The Cuewigs website (https://www.cuewigs.com/) is admired for its captivating colour scheme, elegant typography, and sophisticated layout. Inspired by these elements, I embarked on the challenge to recreate this frontend project. I aimed to replicate its aesthetic appeal, focusing on precise positioning of elements, subtle animations, and overall visual harmony.
- HTML: Used for structuring the site.
- CSS: Employed for design, including micro-animations and responsive layouts.
- JavaScript and Libraries:
- GSAP: Utilized for major animations, including the first-page animation and other dynamic effects.
- Locomotive Scroll: Implemented for smooth scrolling, enhancing user experience with seamless navigation.
- ScrollTrigger: Integrated for creating custom scroll-based animations, such as the horizontal scroll div and various interactive elements.
This project presented exciting challenges and learning opportunities. Implementing a horizontal scroll for the first time using ScrollTrigger and GSAP was particularly enriching. Mastering ScrollTrigger’s capabilities for creating intricate animations further expanded my frontend development skills. Overcoming challenges in animating the first page and perfecting element positioning deepened my understanding of responsive design and user interface optimization.
I invite you to explore the repository and experience the clone of the Cuewigs website. Your feedback and insights are invaluable as I continue to refine and enhance my skills in web development. Please share your thoughts and suggestions on the project!