Streaming live at 10am (PST)

Is there a way to use fewer CMS lists to accomplish this project image reveal?

I am building a portfolio website:

At the bottom of my home page I’m playing around with some fun animated SVG elements with size and color tied to project-specific CMS data, that reveals the project image for the corresponding dot when hovered:

My problem is I’ve hit the 20 CMS block limit building it this way, and I’m hopeful there’s a better way to structure my lists - hopefully with only two CMS blocks.

My website currently works as desired. When you hover on a gray dot, the corresponding project image appears to the left. Each dot is a different size and color and corresponds to a specific project.

My challenge is that in order to correctly trigger the hover animations, I’ve had to create separate CMS blocks for every single dot, then filter to a specific project so that each CMS only has one project showing. Similarly, in order to get the image to reveal in the same location every time, I’ve had to create separate CMS blocks, similarly filtered, with one project each.

When I tried to build this before with only two CMS blocks - one for images and the other for the dots I ran into two issues. First, I couldn’t get the project images to all stack on top of each other and reveal in the same place every time. Second, when I tried to add the show/hide reveal animation to the dot CMS block, the exact same animation was triggered for every dot, and revealed all the projects instead of just one. In other words, dot 1 revealed all of the projects, dot 3 did the same. I couldn’t target a specific item inside the CMS list, just the item class, which would reveal all of the items.

I’ve tossed around building a ‘dumb’ SVG grid so that those aren’t CMS and just custom building every dot to look vaguely interesting. That would reduce the need for CMS blocks on the grid side. But it’s a massive and annoying undertaking. Plus I haven’t figured out how to accomplish the hide/reveal of individual CMS list items on hover, nor how to get all items to stack on top of each other in the z axis.

I built this a different way before with a single CMS list, but the project hover would occur over each individual dot - therefore shifting position every time. I think it’s much more interesting and visually pleasing for the image to appear in a consistent location, instead of moving around with the dots and obscuring the dot grid. If there’s a way to accomplish that structure, but force an image DIV within the CMS grid to appear in a locked, consistent location every time, I’m all ears.

I would greatly appreciate you looking at the site as it functions now and take a glance at the structure in the read only link to give me some tips on how to simplify these elements.

Here is my public share link: LINK
(how to access public share link)