Projects #7

Component Structure

PR7 Component (Section): This section acts as the primary container for the projects, ensuring that the content is centrally aligned within the viewport. It utilizes the class pr7__component which provides minimal height settings and padding adjustments for responsiveness.

PR7 Container (Block): Directly inside the primary component, this block serves as the container for the project items. The class pr7__container is used here, establishing a static position for the layout structure.

PR7 Projects Wrapper (Block): A block that acts as a wrapper for individual projects, formatted as an unordered list (ul). The class pr7__projects-wrapper is applied, managing padding and margin settings especially for mobile presentations.

PR7 Project Image Wrapper (Block): Multiple instances of this block exist, each wrapping an image of a project. They are styled using the class pr7__project-image-wrapper, which includes absolute positioning and a specific clip-path for dynamic visual effects.

PR7 Project Image (Image): Nested within each project image wrapper, these images display the visuals for each project. The class pr7__project-image applies settings like object fit and border radius to enhance the images aesthetically.

PR7 Project (Block): Each project within the wrapper is styled using the class pr7__project, which handles typography and alignment, ensuring that project titles and metadata are displayed prominently and clearly.

PR7 Project Link (Block): This block contains links for each project, making them interactive. The class pr7__project-link ensures proper positioning and styling to accommodate the content and responsiveness.

PR7 Project Title (Block): Holds the project's title information, using the class pr7__project-title to manage text alignment and overflow properties, enhancing readability.

PR7 Project Heading (Heading): Actual headings within the project titles use the class pr7__project-heading, adjusting typography to emphasize the project's name effectively.

PR7 Project Meta Wrapper (Block): Contains metadata about the project like client and service information, styled with the class pr7__project-meta-wrapper which ensures that the meta-data is organized neatly.

PR7 Project Meta Client (Div): A part of the meta wrapper that contains client information, utilizing the class pr7__project-meta-client for layout and typography settings that highlight this specific information.

PR7 Project Meta Text (Text-Basic): Displays the actual client or service name, using the class pr7__project-meta-text to apply specific typography settings for emphasis.

PR7 Project Meta Service (Div): Similar to the client div but for services offered, the class pr7__project-meta-service is used to align and style service-related information distinctively.

Animation Structure

PR7 - PROJECT HOVER IMG

• Animates the .pr7__project-image-wrapper: Transforms project images on hover through clip-path adjustments. This interaction modifies how images are displayed, adding depth and enhancing user engagement with project visuals.

PR7 - PROJECT HOVER

• Animates the .pr7__project: Enhances the interactivity of project headings on hover. The animation includes vertical movement and color changes, making the project entries visually striking and engaging as the user interacts with them.

PR7 - PROJECT SCROLL IMG (M)

• Animates the .pr7__project-image-wrapper: Utilizes clip-path transformations for project images during scroll on mobile devices, altering visibility and presentation to create a dynamic and visually appealing experience.

PR7 - PROJECT SCROLL HOVER (M)

• Animates the .pr7__project: Applies transformations to project headings and meta texts during scroll on mobile devices. This includes color transitions and vertical shifting to engage users and emphasize project details dynamically.