Fixed main page image carousel

[Ethjin8]

Overview

Resolves #815

Deploy Preview: https://deploy-preview-874--jovial-pasteur-581b4a.netlify.app/

Changes

• Changed image carousel layout so that every image fits together neatly (no white background behind them)
• Added pop-out animation when cursor hovers over images
• Created popup feature when images are clicked, opening a separate modal to view the full image

Testing

• Scroll down to image carousel near the bottom of the website
• Hover over images to view pop-out animation, click to open them in the image modal

Possible Changes

• Some of the image popups are larger than others, could rework size to ensure consistency

Checklist

• Code follows the project's style guidelines.
• Documentation has been updated where necessary.
• All checks pass and deploy builds with no errors.

[smalex-z]

Hey Ethan,

Great PR! Changes are great and look a lot better than before. A few changes from me and Nathan though off the visual aspect-

• Ideally we shouldn't have a white background. If you can, try to do a "cover" css property instead, where we crop out any excess. We can assume a ratio of 4:5 or 3:5, whatever looks better to you
• As for sizing, the image carousel appears a little big - Nathan and I think an ideal would probably be about 50%-75% of the current size.
• Finally, instead of clicking on an image and having popping out into a new tab, it would probably look better if we opened it into a modal.

Great PR and thanks for the work!

[smalex-z]

ts tough good job