Profile Bubble

A simple profile bubble component to serve as the navbar home button. I wanted to use it to add a bit of fun to the site.

The images are stacked on top of each other with 0 opacity and on click the top image fades out and the bottom image fades in, creating a nice cross-fade effect. The first image has the Next.js priority property since it will always render above the fold. The bouncing effect is achieved using Framer Motion's spring-based animations.

The icing on the cake: the favicon also changes to the new profile image.