Projects #2
Component Structure
PR2 COMPONENT: The main container for the portfolio items, setting the visual and functional context.
PR2 CONTAINER: Organizes the portfolio items within a user-friendly layout.
PR2 CURSOR & ICON: Custom cursor elements that enhance the interactive experience, changing in appearance based on user actions.
PR2 ITEM: Individual project display blocks containing images, titles, and interactive elements.
Animation and Interaction Details
PR2 - Item Hover: Engages users with scale animations and font size adjustments for project titles upon hover, visually emphasizing the hovered item.
Events
CURSOR - MOUSEENTER : Triggers the custom cursor's appearance within the project container, ensuring it's visible and ready for interaction.
CURSOR - MOUSELEAVE: Hides the custom cursor and optionally modifies its scale when the user's mouse leaves the project container, ensuring the cursor is only visible during direct interaction.
CURSOR - MOUSEMOVE : Moves the custom cursor in accordance with the user's mouse movements, providing a fluid and responsive interaction within the project container.
TOGGLE CLASS - MOUSEENTER: Applies a class to project items upon mouse entry, highlighting the current item for a more dynamic interaction.
TOGGLE CLASS - MOUSELEAVE : Removes a specified class from project items when the cursor leaves, reverting them to their default state and visually indicating they are no longer the focus of interaction.
CURSOR - SET: Sets the initial state of the custom cursor to hidden upon page load, ensuring it appears only during specific interactions for a cleaner user experience.
Last updated