I made a breathing and flowing landing page for my portfolio that is tied to my average heart rate.
The aim was to create a soothing and organic experience with a normally relatively static medium. This experience should make an intimate connection to the individual behind the portfolio. The speed of the flow changes with my heart rate, the site becomes alive.
To give the user a playful interaction with this breathing movement, fluid animations are hidden behind every project image and invite users to manipulate the shapes by hovering over the fluid blob.
On the technical side, the site makes a call to a remote server that posts my average heart rates detected by my apple watch. Multiple individual CSS animations for the breathing movement and js-canvas animations for the fluid-blobs ensure a smooth, scalable and responsive experience for the user.
I hope you enjoy it.