Axel Vanhessche's portfolio (https://axelvanhessche.com/) stands as an Awwwards-awarded website celebrated for its concise layout and the innovative use of SVG masks to showcase projects. Inspired by its minimalist yet effective design principles, I undertook the challenge to recreate this frontend project. The goal was to capture its simplicity, well-structured interface, and compelling visual effects.
- HTML: Used for structuring the site.
- CSS: Employed for design, including micro-animations and responsive layouts.
- JavaScript and Libraries:
- GSAP: Utilized for major animations.
- Locomotive Scroll: Implemented for smooth scrolling and precise control over scroll speed, including managing scroll speed of image elements.
- ScrollTrigger: Integrated extensively for custom scroll-based animations, such as animating the navbar logo and name, and manipulating SVG masks for project displays.
This project provided a valuable opportunity to delve deeper into ScrollTrigger and its powerful capabilities in creating interactive and user-friendly experiences. Leveraging Locomotive Scroll to dynamically control scroll speed across various elements enhanced the site's fluidity and user experience. Challenges included replicating loader animations and mastering SVG animation techniques, significantly advancing my frontend development and animation skills.
I invite you to explore the repository and experience the clone of Axel Vanhessche's portfolio. Your feedback and insights are invaluable as I continue to refine and enhance my skills in web development. Feel free to share your thoughts on the project!