Refactor: Vite

src/components/app.tsx

@@ -0,0 +1,13 @@
+import Navbar from './navbar';
+import Container from './container';
+
+import './app.css';
+
+export default () => {
+  return (
+    <>
+      <Navbar />
+      <Container />
+    </>
+  )
+}

src/components/container/index.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'preact/hooks';
+
+import Heart from '../heart';
+
+const api = "lanyard.creations.works"
+
+const statusMap = {
+    online: "border-success-subtle",
+    idle: "border-warning-subtle",
+    dnd: "border-danger-subtle",
+    offline: "border-light-subtle",
+}
+
+export default () => {
+    const [status, setStatus] = useState<keyof typeof statusMap>('offline');
+
+    fetch(`https://${api}/v1/users/1273447359417942128`)
+    .then(req => req.json())
+    .then((res) => {
+            if (res.data.discord_status) {
+                setStatus(res.data.discord_status);
+            } else {
+                setStatus('offline');
+            }
+        })
+
+    return (
+        <>
+            <div class="container bg-body-tertiary shadow text-center position-absolute top-50 start-50 translate-middle mx-auto py-4">
+                <img src="favicon.svg" class={`img-thumbnail rounded-circle border border-4  ${statusMap[status]}`} alt="..." width="100" />
+                <br />
+                <h1>Seth</h1>
+                <h6 class="lead">Dedicated Backend Developer
+                    <br />
+                    <br />
+                    <small class="text-body-secondary">
+                        With a passsion for high-fidelity audio, gaming, and web development
+                    </small>
+                </h6>
+                <Heart />
+            </div>
+        </>
+    )
+}

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;
+}

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<typeof setTimeout>;
+
+    const setHrInterval = () => {
+        hrTimeout = setTimeout(() => {
+            return setHeartrate(0);
+        }, 6000);
+    };
+
+    ws.onopen = () => {
+        ws.send(
+            JSON.stringify({
+                topic: "hr:0BCA",
+                event: "phx_join",
+                payload: {},
+                ref: 0,
+            }),
+        );
+
+        setInterval(() => {
+            ws.send(
+                JSON.stringify({
+                    topic: "phoenix",
+                    event: "heartbeat",
+                    payload: {},
+                    ref: 0,
+                }),
+            );
+        }, 10000);
+
+        return setHrInterval();
+    };
+
+
+    ws.onmessage = ({ data }) => {
+        const { event, payload } = JSON.parse(data);
+        switch (event) {
+            case "hr_update": {
+                clearTimeout(hrTimeout);
+                setHrInterval();
+                setHeartrate(payload.hr);
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+    };
+
+    return (
+        <>
+            <div style={heartrate == 0 ? "display:none" : `--bpm: ${heartrate};`} class="heart">
+                    ♥️
+                    <br />
+                    <span>{heartrate} BPM</span>
+            </div>
+        </>
+    )
+}

src/components/navbar/index.tsx

@@ -0,0 +1,22 @@
+export default () => {
+    return (
+        <>
+            <nav class="navbar shadow fixed-top" style="background-color: var(--bs-content-bg); border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);">
+                <div class="container-fluid">
+                    <div class="navbar-brand">
+                        <img src="favicon.svg" alt="Logo" width="24" height="24" class="d-inline-block align-text-top" />
+                        Seth
+                    </div>
+                    <span class="navbar-text">
+                        IPv4 dot Army
+                    </span>
+                    <div class="d-flex hstack gap-2" role="search">
+                        <button type="button" class="btn btn-outline-success btn-sm">🗕︎</button>
+                        <button type="button" class="btn btn-outline-warning btn-sm">🗖︎</button>
+                        <button type="button" class="btn btn-outline-danger btn-sm">🗙︎</button>
+                    </div>
+                </div>
+            </nav>
+        </>
+    )
+}