All solutions

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

Edit: somehow the CSS reset didn't land in the built files which is messing things up xd

This is a Vue 3 solution using singleton composables to access/modify state across different components. This lets you avoid the pattern of parent + prop drill + emit or bringing in something overkill (Vuex, Pinia.).

Critiques: I had a lot of trouble with sizing the SVGs and gave up on that.

The CSS got a little disorganized at times. It's not unusable because it's scoped but next time I might try matching prefixes to folder names ex: components/header to header-something1 header-something2. Then header/cart would be header-cart-somethingA header-cart-somethingB

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

Nothing besides the svgs.

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

Not sure how to resize the SVGs. I just copied and pasted them into the html where needed at their default size. Changing the width and height attributes caused them to cut off.

Font Awesome allows you to scale them with font-size: 1em, etc. but that didn't appear to be working here so not sure why that is because I obviously don't understand SVGs. If anyone knows what's up with this then feel free to comment.

Vue solution abusing slots. Used grid instead of flex on the chart itself because I designed it last (so I had I knew the height it had to be ahead of time).

Questions: Any feedback on how to modify the size of the svg while keeping the aspect ratio? I literally just modified the height and width which didn't exactly give the results I wanted.

Is there a better way of making these components match the design beside using hardcoded widths/heights for the containers?