Connecting This Website to My Wrist
Integrating real-time biometric data from a smartwatch to create a living, breathing website.
October 2024
Oh, did you notice the heartbeat pulsing on the home page? Yes, that’s really my biometric data! This website isn't something I have time to update every week or month, so I started to think about how to make it more dynamic. Maybe this is just a gimmick, but I wanted to try make something that could simbolize my passion of connecting the digital and physical in a interactive and new way. By linking my smartwatch to this website, I turned a typical portfolio into a living, breathing space that shows my current heart rate, oxygen levels, and even my mood. Curious to see how I did it?
My watchOS app with a older version of this app connected to the website in real-time.
The idea was born out of a desire to make my portfolio feel truly alive. I created a watchOS app that tracks my heartbeat, oxygen levels, and mood in real-time using the sensors on my Apple Watch. Each time I open the app, these metrics are sent to a cloud server, which then relays the data directly to my website. The result is a site that’s always up-to-date, reflecting my current state in a way that’s both personal and interactive.
The app itself has three main pages: one for heart rate, one for oxygen levels, and a mood tracker where I can select from a variety of emotions and activities, like happy, sleepy, working, or even just ‘thinking.’ This allows visitors to see not just the numbers, but also get a glimpse into how I’m feeling or what I’m up to at that moment.
I'm not a good drawer, but at least I tried.
From a technical perspective, building this app required integrating the Apple HealthKit API to capture biometric data and a next.js server to push updates to the website. Every time i open the watch, the app pings my current stats to the server.
One of the most interesting aspects of the project was designing the visualizations on the website to reflect these metrics in a way that felt dynamic.
Although this might seem like just a playful addition, it actually helped me experiment with real-time data visualization and connecting wearable tech to web interfaces. It’s a small but fascinating example of how the digital world can mirror our physical state, blurring the line between the two.