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

  1. CURSOR - MOUSEENTER : Triggers the custom cursor's appearance within the project container, ensuring it's visible and ready for interaction.

  2. 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.

  3. CURSOR - MOUSEMOVE : Moves the custom cursor in accordance with the user's mouse movements, providing a fluid and responsive interaction within the project container.

  4. TOGGLE CLASS - MOUSEENTER: Applies a class to project items upon mouse entry, highlighting the current item for a more dynamic interaction.

  5. 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.

  6. 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