While building my portfolio, one of my design principles was to have fun with all aspects of the process and environment. One piece of the web that I think is often under utilized is the favicon and title in the main browser tab. I love when favicons show a little alert icon or the title updates (while appropriate!) to tell me there are new updates.

While my portfolio site definitely isn't on the verge of life and death for the viewers looking at my site, I still wanted to have fun with it. I leveraged zzz.dog pretty heavily as my animation library, and I really fell in love with the 3D version of myself.

I thought it would be pretty cute if I could leverage my face on the homepage and 404 page to show the user what I thought about their site visit. While they were active on the site, I'm super joyful, and when they're not, be a little solemn. 

To do this I leveraged blur events on the main window. If I detected that the current tab was blurred, I swapped out my current favicon for a sad one :( . 

To help convey it further, here's a video of it in action during early beta: 

If you need help making something cute, I'd love to partner with you on something just like this.