> For the complete documentation index, see [llms.txt](https://bricksmotion.gitbook.io/bricksmotion-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bricksmotion.gitbook.io/bricksmotion-components/components/projects/projects-7.md).

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