+ 
+
+Dedicated Backend Developer
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/heart/index.css b/src/components/heart/index.css
new file mode 100644
index 0000000..d289b82
--- /dev/null
+++ b/src/components/heart/index.css
@@ -0,0 +1,18 @@
+:root {
+ --bpm: 0;
+}
+
+@keyframes pulse {
+ 0%,
+ 100% {
+ transform: scale(1);
+ }
+
+ 50% {
+ transform: scale(1.1);
+ }
+}
+
+.heart {
+ animation: pulse calc(60s / var(--bpm)) infinite ease;
+}
\ No newline at end of file
diff --git a/src/components/heart/index.tsx b/src/components/heart/index.tsx
new file mode 100644
index 0000000..e1431dc
--- /dev/null
+++ b/src/components/heart/index.tsx
@@ -0,0 +1,68 @@
+import { useState } from 'preact/hooks';
+
+import './index.css';
+
+
+export default () => {
+ const [heartrate, setHeartrate] = useState(0);
+
+ const ws = new WebSocket("wss://app.hyperate.io/socket/websocket?token=wv39nM6iyrNJulvpmMQrimYPIXy2dVrYRjkuHpbRapKT2VSh65ngDGHdCdCtmEN9");
+
+ let hrTimeout: ReturnType
+ +
Seth
+Dedicated Backend Developer
+
+
+
+ With a passsion for high-fidelity audio, gaming, and web development
+
+
+
+ ♥️
+
+ {heartrate} BPM +
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx
new file mode 100644
index 0000000..0849fd4
--- /dev/null
+++ b/src/components/navbar/index.tsx
@@ -0,0 +1,22 @@
+export default () => {
+ return (
+ <>
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index fb1e69e..e69de29 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,20 +0,0 @@
-@import "halfmoon/css/halfmoon.css";
-
-:root {
- --bpm: 0;
-}
-
-@keyframes pulse {
- 0%,
- 100% {
- transform: scale(1);
- }
-
- 50% {
- transform: scale(1.1);
- }
-}
-
-.heart {
- animation: pulse calc(60s / var(--bpm)) infinite ease;
-}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
deleted file mode 100644
index 5159c7d..0000000
--- a/src/index.html
+++ /dev/null
@@ -1,169 +0,0 @@
-
-
-
-
-
-
- + {heartrate} BPM +
-
-
-
-
-
-
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index e26d73d..0000000
--- a/src/index.js
+++ /dev/null
@@ -1,107 +0,0 @@
-const pfp = document.getElementById("pfp");
-const music = document.getElementById("music");
-const heartrate = document.getElementById("heartrate");
-
-const lanyard = new WebSocket("wss://lanyard.creations.works/socket");
-
-lanyard.onopen = () => {
- lanyard.send(JSON.stringify({
- op: 2,
- d: {
- subscribe_to_id: "1273447359417942128"
- }
- }))
-}
-
-lanyard.onmessage = ({ data }) => {
- const { op, d } = JSON.parse(data)
-
- switch (op) {
- case 0: {
- pfp.className = `border border-4 rounded-circle ${{
- "online": "border-success-subtle",
- "idle": "border-warning-subtle",
- "dnd": "border-danger-subtle",
- "offline": "border-light-subtle"
- }[d.discord_status]}`
-
- const tidalData = d.activities.filter((act) => {
- return act?.application_id === "1130698654987067493";
- })[0];
-
- if (tidalData) {
- const [color, trackId] = tidalData?.assets?.small_text.split("|");
- music.style.color = color;
- music.href = `https://tidal.com/browse/track/${trackId}/u`
- music.innerHTML = `Listening to
-
-
-
-
-
-
-
- 
-
-
- Seth
-A backend developer.
--
-
- ${tidalData?.name.replace( - /\s?[\(\[].*?[\)\]]/g, - "", - )} by ${tidalData?.state}` - } - break - } - case 1: { - setInterval(async () => { - lanyard.send(JSON.stringify({ - op: 3, - })) - }, d.heartbeat_interval) - } - } -} - -const hyperate = new WebSocket( - // Yes, the token can be hardcoded. - "wss://app.hyperate.io/socket/websocket?token=wv39nM6iyrNJulvpmMQrimYPIXy2dVrYRjkuHpbRapKT2VSh65ngDGHdCdCtmEN9", -); - -let hrTimeout; - -const setHrInterval = async () => { - hrTimeout = setTimeout(async () => { - heartrate.innerHTML = ""; - }, 6000); -}; - -hyperate.onopen = async () => { - hyperate.send( - JSON.stringify({ - topic: "hr:0BCA", - event: "phx_join", - payload: {}, - ref: 0, - }), - ); - - setInterval(async () => { - hyperate.send( - JSON.stringify({ - topic: "phoenix", - event: "heartbeat", - payload: {}, - ref: 0, - }), - ); - }, 10000); - - return await setHrInterval(); -}; - -hyperate.onmessage = async ({ data }) => { - const { event, payload } = JSON.parse(data); - switch (event) { - case "hr_update": { - clearTimeout(hrTimeout); - await setHrInterval(); - - document.documentElement.style.setProperty("--bpm", payload.hr); - - heartrate.innerHTML = `
♥️
${payload.hr} BPM
`;
-
- break;
- }
- default: {
- break;
- }
- }
-};
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..d995293
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,6 @@
+import { render } from 'preact'
+import './index.css'
+import 'halfmoon/css/halfmoon.min.css';
+import App from './components/app.tsx'
+
+render(${payload.hr} BPM