breathing_portfolio

 
 

project: air

concept: feel the human behind their work - body data visualization

year: 2019

 
 
 
IMG_0150.jpg
 
 
 

research question: how can a body of work come alive?

execution: 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. The strict use of the Helvetica font creates a lively tension between the playful interactivity of the shapeless fluid blobs, the breathing site and the typography. Like the person behind the portfolio, the starting page lives with its contradictions. On the technical side, the site makes a call to a remote server that posts my average heart rates detected by my apple watch on an hourly basis. 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.

privacy: The apple watch app I built communicates my heart rate via my custom RESTful api that is running on a public link, the exact heart rate can be looked up in the code in the browser inspector when it is downloaded. I am aware of the fact that for this interaction prototype I am therefore publicly sharing parts of my personal health data.

tools: CSS-animations, JS-canvas, remote server, iOS HealthKit, WatchKit