Testimonials Grid Section Solution

What are you most proud of, and what would you do differently next time?

I am most proud of being able to use CSS grids effectively and employing more accessibility features to my website.

What challenges did you encounter, and how did you overcome them?

One of the challenges I faced was how to display the SVG quote image on the background while also changing its colour of the 1st card in desktop view. I used the VS Code Gemini AI Assistant Extension to solve the problem. The solution it gave was to add the SVG as a mask, as noted below:

/* Background images i.e. SVG should be added via a mask to allow the color of the image to be changed */

#daniel-clifford {
	position: relative; /* creates positioning context for following pseudo element*/
	> * {
			position: relative;
			z-index: 2; /* places pseudo-element behind the card's text context to ensure it stays in the background */
		}	
	}

@media only screen and (min-width: 1024px) {
	 &::before { /*pseudo-element */
	        content: "";
	        position: absolute;
	        top: 0;
	        right: 10%;
	        width: 8rem;
	        height: 7.85rem;
	        background-color: $purple-300;
	        mask: url("../images/bg-pattern-quotation.svg") no-repeat; /*
	        with this, SVG's shape is used to cut-out a visible area from pseudo element*/
	        z-index: 1; 
	        }
	       }

What specific areas of your project would you like help with?

I would appreciate feedback on how to improve the accessibility of my solution, and any other feedback on how to improve my code.