HardGeneral
Watercolor Agency Website 2

👤 Client Story:

We are a creative agency focused on captivating world of art and primarily build art-related portfolios. Over time, our agency has grown, and now we're ready to showcase our unique approach to this niche through an updated design. We don't have a font license yet so please use something from Google fonts. We'd also like to make a good impression with some fancy reversible animations to paint in the colorful watercolor splashes on scroll.

Can you build a functional prototype for the home page?

🚀 Summary

This project will help you practice responsive design principles and includes detailed requests related to "reversible" animations.

📗 Recommended Pre-study

Animating Clip Paths
https://css-tricks.com/animating-with-clip-path

Animating SVGs
https://blog.bitsrc.io/creating-morphing-animations-with-css-clip-path-3c3bf5e4335f

GSAP ScrollTrigger Introduction
https://greensock.com/st-get-started/

📋 Project Requirements:

Goal: Create an eye-catching, responsive and animated home page.

1. Navigation Bar:

   • Evenly space the logo and links
   • Source and add SVG icons for the social media links
   • Add an animated mobile "hamburger" menu for smaller screens.
   • Ensure tab/shift+tab navigation works seamlessly.

2. Hero Section:

   • Overlap the text on top of the two-tone watercolor image.
   • Use padding to prevent the text from touching the top or left sides of the browser.
   • Don't let the text paragraph get too wide.
   • Make a rounded "pill" button as the main CTA (Call to Action).
   • Add a unique "paint-stroke" loading animation for the image.

3. "About" Blocks (Below the Hero):

   • Build an alternating layout (Hint: rotating a single asset could make it seem like there's more than one)
   • Center all the text for mobile users.
   • Animate a fade-in/paint-in effect for the text and background splash images, reversible on user scroll.\

⚠️ Challenge

Rebuild this project using a new Javascript framework or CSS library you've never tried.