Williams Alamu '23 Folio | GSAP Animation, HTML5/SCSS/JavaScript
Uzochukwu Okafor
UX Engineer
Frontend Engineer
Web Developer
CSS3
GSAP
HTML5
Hero section of the Portfolio
Page-Transition Animation for the Projects Page
Objective:
- Transform Figma designs into a functional, dynamic website for Williams Alamu. - Enhance Williams's Online Presence with GSAP Animation.
Tools & Technologies:
- HTML, CSS, SASS, JavaScript, Barba.js, GSAP, Lenis Smooth Scroll.
Implementation of GSAP:
- Homepage Animations:
- Used GSAP to animate the hero section. Text and images smoothly fade and slide into view, creating a captivating first impression for visitors.
- Scrolling Effects:
- Applied GSAP to manage scroll-triggered animations throughout the site. Key sections animate into view as users scroll, maintaining engagement and guiding their journey through the content.
- Interactive Elements:
- Enhanced interactivity using GSAP for buttons and icons. For example, buttons enlarge slightly on hover, providing immediate visual feedback and a more engaging user experience.
Performance Optimization:
- Leveraged GSAP’s efficient and lightweight nature to ensure animations did not affect the site’s load time, maintaining high performance.
Performance Achievement:
- Achieved a 98% average on Google Lighthouse audit for Accessibility, Best Practices, Performance, and SEO.
Results:
- Delivered a visually stunning, highly responsive website that perfectly aligns with Willie UI's vision.
- Enhanced Willie UI’s online presence through dynamic and engaging animations, helping the brand stand out.
Value Delivered:
- Demonstrated commitment to creating high-value web solutions focusing on aesthetics and performance.
- Utilized GSAP to enrich the user experience, showcasing dedication to crafting meticulously animated web experiences.
General project page of the portfolio
Project(Closet Creations) of the portfolio
Mockup of the portfolio on mobile
Footer section of the about page
