rather than using a single specific color, we can use gradients for transitions: https://stackoverflow.com/a/63848864

Another idea. We cant transition with images. One idea is to already have the transitioning effect on the top and bottom part of the images so we can just apply a transformation and move the bg image with the content. However if this is the case, I don't think i can use bg image, I'd have to use another element to contain this svg background to allow the transformation animation to take place.

To optimize the website and make it faster to load, these are a few things that can be done:

• convert images to webp, with different sizes for mobile and desktop if need be
• use parcel to build the website so it minimizes the contents of the website
• remove development bundles from production like eruda

Right now it's 2.5MB of resources, and all the images and eruda already make up to 2MB of the resources.

On some screens, the viewport height is a bit too short so the main content looks squished. Right now the image is responsive for the width, but we should set a max-height to the image as the height of the viewport can really affect the way it looks too.