f

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+	"html.customData": ["./node_modules/mdui/html-data.en.json"],
+	"css.customData": ["./node_modules/mdui/css-data.en.json"]
+}

bun.lock

@@ -4,7 +4,11 @@
     "": {
       "name": "ipv4.army",
       "dependencies": {
+        "@fontsource/roboto": "^5.2.5",
+        "@fontsource/roboto-mono": "^5.2.5",
+        "@mdui/icons": "^1.0.3",
         "@speed-highlight/core": "latest",
+        "mdui": "^2.1.4",
         "reconnecting-websocket": "latest",
         "tsx-dom": "latest",
       },
@@ -36,16 +40,54 @@
 
     "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.0.0-beta.4", "", { "os": "win32", "cpu": "x64" }, "sha512-2eGsMOwtm8mvicKMkegV2DW2EH0vQPF0Skt9n4enoFk8ABFtoxherTG8Us1fwlBrk9tA7gcshrdUilu35BmZdA=="],
 
+    "@floating-ui/utils": ["@floating-ui/utils@0.2.9", "", {}, "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="],
+
+    "@fontsource/roboto": ["@fontsource/roboto@5.2.5", "", {}, "sha512-70r2UZ0raqLn5W+sPeKhqlf8wGvUXFWlofaDlcbt/S3d06+17gXKr3VNqDODB0I1ASme3dGT5OJj9NABt7OTZQ=="],
+
+    "@fontsource/roboto-mono": ["@fontsource/roboto-mono@5.2.5", "", {}, "sha512-P1wrUBMFWfr+tuUIY10MzdRTBcl9f011CbZV1fXqcCk40Xmtn91l1V1daVuQ+JPctYEVYazabvaK+sUEThgnyw=="],
+
+    "@lit-labs/ssr-dom-shim": ["@lit-labs/ssr-dom-shim@1.3.0", "", {}, "sha512-nQIWonJ6eFAvUUrSlwyHDm/aE8PBDu5kRpL0vHMg6K8fK3Diq1xdPjTnsJSwxABhaZ+5eBi1btQB5ShUTKo4nQ=="],
+
+    "@lit/localize": ["@lit/localize@0.12.2", "", { "dependencies": { "lit": "^3.2.0" } }, "sha512-Qv9kvgJKDq/JVSwXOxuWvQnnOBysHA99ti9im9a4fImCmx+fto+XXcUYQbjZHqiueEEc4V20PcRDPO+1g/6seQ=="],
+
+    "@lit/reactive-element": ["@lit/reactive-element@2.1.0", "", { "dependencies": { "@lit-labs/ssr-dom-shim": "^1.2.0" } }, "sha512-L2qyoZSQClcBmq0qajBVbhYEcG6iK0XfLn66ifLe/RfC0/ihpc+pl0Wdn8bJ8o+hj38cG0fGXRgSS20MuXn7qA=="],
+
+    "@material/material-color-utilities": ["@material/material-color-utilities@0.3.0", "", {}, "sha512-ztmtTd6xwnuh2/xu+Vb01btgV8SQWYCaK56CkRK8gEkWe5TuDyBcYJ0wgkMRn+2VcE9KUmhvkz+N9GHrqw/C0g=="],
+
+    "@mdui/icons": ["@mdui/icons@1.0.3", "", { "dependencies": { "@mdui/shared": "^1.0.8", "lit": "^3.3.0", "tslib": "^2.8.1" } }, "sha512-Jq9juUqIJMBvIRSTr0qBKiqnlbY5pVUzUP20EHSN8dT7GcqN7bq0AL8MASL5DxKs09kgcERq+z5bHJOkz/VDlA=="],
+
+    "@mdui/jq": ["@mdui/jq@3.0.3", "", { "dependencies": { "ssr-window": "^5.0.0", "tslib": "^2.8.1" } }, "sha512-nI8QK9UPHhiIbECrC1aMdLXNxP6WgUtC9XwRPs/e56FtwduePyxPyloXmgU8VYw85i6TtYdgClHS9tW8JweNZA=="],
+
+    "@mdui/shared": ["@mdui/shared@1.0.8", "", { "dependencies": { "@lit/reactive-element": "^2.1.0", "@mdui/jq": "^3.0.3", "lit": "^3.3.0", "ssr-window": "^5.0.0", "tslib": "^2.8.1" } }, "sha512-YY863fjHBuk8KtiO4uLDm1YyIVdGrWv4xUxfv8jP32WqIQBkSTbV7HN8jnKXXIej0NFP7pU89yGr4GJYzVszPg=="],
+
     "@speed-highlight/core": ["@speed-highlight/core@1.2.7", "", {}, "sha512-0dxmVj4gxg3Jg879kvFS/msl4s9F3T9UXC1InxgOf7t5NvcPD97u/WTA5vL/IxWHMn7qSxBozqrnnE2wvl1m8g=="],
 
     "@types/bun": ["@types/bun@1.2.12", "", { "dependencies": { "bun-types": "1.2.12" } }, "sha512-lY/GQTXDGsolT/TiH72p1tuyUORuRrdV7VwOTOjDOt8uTBJQOJc5zz3ufwwDl0VBaoxotSk4LdP0hhjLJ6ypIQ=="],
 
     "@types/node": ["@types/node@22.14.1", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-u0HuPQwe/dHrItgHHpmw3N2fYCR6x4ivMNbPHRkBVP4CvN+kiRrKHWk3i8tXiO/joPwXLMYvF9TTF0eqgHIuOw=="],
 
+    "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
+
     "bun-types": ["bun-types@1.2.12", "", { "dependencies": { "@types/node": "*" } }, "sha512-tvWMx5vPqbRXgE8WUZI94iS1xAYs8bkqESR9cxBB1Wi+urvfTrF1uzuDgBHFAdO0+d2lmsbG3HmeKMvUyj6pWA=="],
 
+    "classcat": ["classcat@5.0.5", "", {}, "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w=="],
+
+    "is-promise": ["is-promise@4.0.0", "", {}, "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ=="],
+
+    "lit": ["lit@3.3.0", "", { "dependencies": { "@lit/reactive-element": "^2.1.0", "lit-element": "^4.2.0", "lit-html": "^3.3.0" } }, "sha512-DGVsqsOIHBww2DqnuZzW7QsuCdahp50ojuDaBPC7jUDRpYoH0z7kHBBYZewRzer75FwtrkmkKk7iOAwSaWdBmw=="],
+
+    "lit-element": ["lit-element@4.2.0", "", { "dependencies": { "@lit-labs/ssr-dom-shim": "^1.2.0", "@lit/reactive-element": "^2.1.0", "lit-html": "^3.3.0" } }, "sha512-MGrXJVAI5x+Bfth/pU9Kst1iWID6GHDLEzFEnyULB/sFiRLgkd8NPK/PeeXxktA3T6EIIaq8U3KcbTU5XFcP2Q=="],
+
+    "lit-html": ["lit-html@3.3.0", "", { "dependencies": { "@types/trusted-types": "^2.0.2" } }, "sha512-RHoswrFAxY2d8Cf2mm4OZ1DgzCoBKUKSPvA1fhtSELxUERq2aQQ2h05pO9j81gS1o7RIRJ+CePLogfyahwmynw=="],
+
+    "mdui": ["mdui@2.1.4", "", { "dependencies": { "@floating-ui/utils": "^0.2.9", "@lit/localize": "^0.12.2", "@lit/reactive-element": "^2.1.0", "@material/material-color-utilities": "^0.3.0", "@mdui/jq": "^3.0.3", "@mdui/shared": "^1.0.8", "classcat": "^5.0.5", "is-promise": "^4.0.0", "lit": "^3.3.0", "ssr-window": "^5.0.0", "tslib": "^2.8.1" } }, "sha512-QtK5xia5HXtVO7yH30QjwvvNruw5JdrJL1MEc1k6S/ZfsbHOj6BxxdYjrdv2HiN5ikkGqt5CIbZdFyq6shaZyw=="],
+
     "reconnecting-websocket": ["reconnecting-websocket@4.4.0", "", {}, "sha512-D2E33ceRPga0NvTDhJmphEgJ7FUYF0v4lr1ki0csq06OdlxKfugGzN0dSkxM/NfqCxYELK4KcaTOUOjTV6Dcng=="],
 
+    "ssr-window": ["ssr-window@5.0.0", "", {}, "sha512-3Iqawoo0DkAaUEScd80SYq3I5clEFDVy//DdzjHXACj/hqcKzsnMzRZ1yHRj+r5dW3UeXNs30ofnhP6YSWg5iA=="],
+
+    "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
     "tsx-dom": ["tsx-dom@3.1.0", "", { "dependencies": { "tsx-dom-types": "2.1.0" } }, "sha512-PGN7iL6zNC4Jj7bA1groSIz5mFB3Rr+SeoywZk2g4+c9uV8wwzCf+5tFQ8SyZxQIBHech3ueB0KxV3OFieqhOA=="],
 
     "tsx-dom-types": ["tsx-dom-types@2.1.0", "", {}, "sha512-pZaMTrMRNom+D1b82K+1cWVMuogXrD/ANI42UYxilw27tF+tDCgj7GrD1XLmCxbHPDO2zxfmFuaz04KIEfWydQ=="],

package.json

@@ -17,7 +17,11 @@
 	"private": true,
 	"type": "module",
 	"dependencies": {
+		"@fontsource/roboto": "^5.2.5",
+		"@fontsource/roboto-mono": "^5.2.5",
+		"@mdui/icons": "^1.0.3",
 		"@speed-highlight/core": "latest",
+		"mdui": "^2.1.4",
 		"reconnecting-websocket": "latest",
 		"tsx-dom": "latest"
 	}

src/front/App.css

@@ -1,61 +0,0 @@
-.scanlines {
-	overflow: hidden;
-}
-
-.scanlines:before,
-.scanlines:after {
-	display: inherit;
-	pointer-events: none;
-	content: "";
-	position: absolute;
-}
-
-.scanlines:before {
-	width: 100%;
-	height: 2px;
-	z-index: 2147483649;
-	background: rgba(0, 0, 0, 0.3);
-	opacity: 0.75;
-	animation: scanline 6s linear infinite;
-}
-
-.scanlines:after {
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	z-index: 2147483648;
-	background: linear-gradient(
-		to bottom,
-		transparent 50%,
-		rgba(0, 0, 0, 0.3) 51%
-	);
-	background-size: 100% 6px;
-	animation: scanlines 2s steps(30) infinite;
-}
-
-/* ANIMATE UNIQUE SCANLINE */
-@keyframes scanline {
-	0% {
-		transform: translate3d(0, 200000%, 0);
-	}
-}
-
-@keyframes scanlines {
-	0% {
-		background-position: 0 50%;
-	}
-}
-
-span.shj-syn-str:nth-child(2) {
-	color: var(--status-color, rgba(150, 150, 150, 0.1));
-}
-
-.shj-numbers {
-	padding: 0px;
-}
-
-.shj-lang-json {
-	padding: 0px;
-	background-color: transparent;
-}

src/front/App.tsx

@@ -1,27 +1,19 @@
-import Hyperate from "./components/Hyperate";
+import "mdui/components/layout";
-import Lanyard from "./components/Lanyard";
+import "mdui/components/layout-main";
+
+import NavigationBar from "./components/NavigationBar";
+import TopAppBar from "./components/TopAppBar";
+
+import About from "./components/pages/About";
 
 export default () => {
 	return (
-		<div class="app terminal">
+		<mdui-layout full-height>
-			<p>[seth@ipv4 ~]$ cat ./about.txt</p>
+			<TopAppBar />
-			<p>
+			<mdui-layout-main>
-				A Dedicated Backend Developer,
+				<About />
-				<br />
+			</mdui-layout-main>
-				with a passion for high-fidelity audio,
+			<NavigationBar />
-				<br />
+		</mdui-layout>
-				gaming, and web development.
-			</p>
-
-			<p>[seth@ipv4 ~]$ cat /tmp/discord-ipc</p>
-			<p>
-				<Lanyard />
-			</p>
-
-			<p>[seth@ipv4 ~]$ cat /tmp/heartrate</p>
-			<p>
-				<Hyperate />
-			</p>
-		</div>
 	);
 };

src/front/components/Hyperate/index.tsx

@@ -1,19 +1,28 @@
 import { createRef } from "tsx-dom";
 
-import socket from "../../Socket";
+import socket from "../../utilities/socket";
 
 export default () => {
 	const paragraph = createRef<HTMLParagraphElement>();
 
 	socket.addEventListener("hyperate", (event: Event) => {
 		const heartRate = (event as CustomEvent).detail;
+
+		if (heartRate === 0) {
+			document.body.style.setProperty("--hyperate-display", "none");
+		} else {
+			document.body.style.removeProperty("--hyperate-display");
+		}
+
+		document.body.style.setProperty("--bpm", heartRate.toString());
+
 		if (paragraph.current) {
-			paragraph.current.innerText = `${heartRate} BPM`;
+			paragraph.current.innerText = `❤️ ${heartRate} BPM`;
 		}
 	});
 	return (
 		<div>
-			<p ref={paragraph}>0 BPM</p>
+			<p class="heartbeat" ref={paragraph}>❤️ 0 BPM</p>
 		</div>
 	);
 };

src/front/components/Lanyard/index.tsx

@@ -1,19 +1,14 @@
 import { highlightElement } from "@speed-highlight/core";
+import { artist } from "../../utilities/artist";
 import { createRef } from "tsx-dom";
-import socket from "../../Socket";
+import socket from "../../utilities/socket";
 
-const statusTypes = {
+const colorMap = {
-	online: "0, 150, 0",
+	online: "#00ff00",
-	idle: "150, 150, 0",
+	idle: "#ffff00",
-	dnd: "150, 0, 0",
+	dnd: "#ff0000",
-	offline: "150, 150, 150",
+	offline: "",
-};
+	streaming: "#ff00ff",
-
-const gradientTypes = {
-	online: "0, 150, 0",
-	idle: "150, 150, 0",
-	dnd: "150, 0, 0",
-	offline: "150, 150, 150",
 };
 
 const activityTypes: Record<number, string> = {
@@ -31,12 +26,23 @@ export default () => {
 	socket.addEventListener("lanyard", (event: Event) => {
 		const lanyard = (event as CustomEvent<LanyardData>).detail;
 
-		document.body.style = `--status-color: rgb(${statusTypes[lanyard.discord_status]}); --gradient-color: rgba(${gradientTypes[lanyard.discord_status]}, 0.1);`;
+		const streamingActivity = lanyard.activities.find((act) => act.type === 1);
+		if (streamingActivity) {
+			artist(colorMap.streaming);
+		} else {
+			artist(colorMap[lanyard.discord_status]);
+		}
+
+		if (lanyard.activities.length === 0) {
+			document.body.style.setProperty("--lanyard-display", "none");
+		} else {
+			document.body.style.removeProperty("--lanyard-display");
+		}
+
 
 		if (container.current) {
 			container.current.textContent = JSON.stringify(
 				{
-					status: lanyard.discord_status,
 					activities: [
 						...new Set(
 							lanyard.activities.map((act) => {
@@ -60,8 +66,8 @@ export default () => {
 	});
 
 	return (
-		<div class="shj-lang-json" ref={container}>
+		<code class="shj-lang-json" ref={container}>
 			{"{}"}
-		</div>
+		</code>
 	);
 };

src/front/components/NavigationBar/index.tsx

@@ -0,0 +1,20 @@
+import "mdui/components/navigation-bar";
+import "mdui/components/navigation-bar-item";
+import "mdui/components/button-icon";
+
+import "@mdui/icons/person--outlined";
+import "@mdui/icons/person--rounded";
+
+import "@mdui/icons/more-vert--rounded";
+
+export default () => {
+    return (
+        <mdui-navigation-bar value="about">
+            <mdui-navigation-bar-item value="about">
+                <mdui-icon-person--outlined slot="icon" />
+                <mdui-icon-person--rounded slot="active-icon" />
+                About
+            </mdui-navigation-bar-item>
+        </mdui-navigation-bar>
+    );
+};

src/front/components/TopAppBar/index.tsx

@@ -0,0 +1,12 @@
+import "mdui/components/top-app-bar";
+import "mdui/components/top-app-bar-title";
+import "mdui/components/button-icon";
+
+export default () => {
+    return (
+        // @ts-ignore // variant is not in the types for some reason?
+        <mdui-top-app-bar variant="center-aligned" scroll-behavior="elevate">
+            <mdui-top-app-bar-title>IPv4.ARMY</mdui-top-app-bar-title>
+        </mdui-top-app-bar>
+    );
+};

src/front/components/pages/About/index.tsx

@@ -0,0 +1,99 @@
+import 'mdui/components/card';
+import 'mdui/components/avatar';
+
+import 'mdui/components/segmented-button-group';
+import 'mdui/components/segmented-button';
+
+import { getColorFromImage } from 'mdui/functions/getColorFromImage';
+import { artist } from '../../../utilities/artist';
+import Lanyard from '../../Lanyard';
+import Hyperate from '../../Hyperate';
+
+const Abyssinian = new Image();
+Abyssinian.src = "/public/Abyssinian/default.png";
+Abyssinian.onload = async () => {
+    const profilePicture = document.getElementById("profilePicture") as HTMLElement;
+
+    artist(await getColorFromImage(Abyssinian), profilePicture);
+
+    profilePicture.setAttribute("src", Abyssinian.src);
+    profilePicture.innerText = "";
+};
+
+export default () => {
+    return (
+        <div style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            flexDirection: "column",
+            height: "100%",
+        }}>
+            <mdui-card variant="filled" style={{
+                width: "90%",
+                padding: ".5rem",
+                // center the contents
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                flexDirection: "column",
+
+                textAlign: "center",
+            }}>
+                <mdui-avatar style={{
+                    width: "5rem",
+                    height: "inherit",
+                    border: "2px solid rgb(var(--status-color))",
+                }} id="profilePicture">S</mdui-avatar>
+                <h1>Seth</h1>
+                {/* make important text bold */}
+                <p>
+                    A <strong>Dedicated</strong> Backend Developer, with many <strong>passions</strong>.
+                    <br />
+                    <br />
+                    <mdui-segmented-button-group full-width>
+                        <mdui-segmented-button>high-fidelity audio</mdui-segmented-button>
+                        <mdui-segmented-button>gaming</mdui-segmented-button>
+                        <mdui-segmented-button>development</mdui-segmented-button>
+                    </mdui-segmented-button-group>
+                </p>
+            </mdui-card>
+
+            <br style={{
+                display: "var(--lanyard-display)",
+            }} />
+
+            <mdui-card variant="filled" style={{
+                width: "90%",
+                padding: ".5rem",
+                // center the contents
+                display: "var(--lanyard-display, flex)",
+                justifyContent: "center",
+                alignItems: "center",
+                flexDirection: "column",
+
+                //textAlign: "center",
+            }}>
+                <Lanyard />
+            </mdui-card>
+
+            <br style={{
+                display: "var(--hyperate-display)",
+            }} />
+
+            <mdui-card variant="filled" style={{
+                width: "90%",
+                padding: ".5rem",
+                // center the contents
+                display: "var(--hyperate-display, flex)",
+                justifyContent: "center",
+                alignItems: "center",
+                flexDirection: "column",
+
+                //textAlign: "center",
+            }}>
+                <Hyperate />
+            </mdui-card>
+        </div >
+    );
+};

src/front/index.css

@@ -1,44 +1,204 @@
-@import "../../node_modules/@speed-highlight/core/dist/themes/dark.css";
+@import "../../node_modules/@fontsource/roboto/latin-400.css";
-@import "./App.css";
+@import "../../node_modules/@fontsource/roboto-mono/latin-400.css";
+
+@import "../../node_modules/mdui/mdui.css";
+
+:not(:defined) {
+	visibility: hidden;
+}
 
 html,
-head,
+body {
+	height: 100vh;
+}
+
 body {
 	margin: 0;
 	padding: 0;
-	font: 2vh monospace;
+	font-family: "Roboto", sans-serif;
-	height: 100vh;
-	width: 100vw;
 }
 
-body {
+[class*="shj-lang-"] {
-	color: #dedede;
+	white-space: pre;
-	text-shadow: 0 0 5px #c8c8c8;
+	color: #112;
-	background: radial-gradient(
+	text-shadow: none;
-		at bottom right,
-		var(--gradient-color, rgba(150, 150, 150, 0.1)) 0%,
-		rgba(0, 0, 0, 1) 100%
-	);
-	display: flex;
-	height: 100vh;
-	width: 100vw;
-	overflow: hidden;
-}
-
-p {
-	margin: 0;
-	padding: 0;
-	line-height: 1.4em;
-}
-
-.terminal {
-	white-space: pre-wrap;
-	font-family: monospace;
-	width: 100vw;
-	height: 100vh;
-	overflow-y: auto;
-	display: flex;
-	flex-direction: column;
 	box-sizing: border-box;
-	gap: 0.4em;
+	background: #dedede;
+	border-radius: 10px;
+	max-width: min(100%, 100vw);
+	margin: 10px 0;
+	padding: 30px 20px;
+	font:
+		18px / 24px "Roboto Mono",
+		monospace;
+	box-shadow: 0 0 5px #0001;
 }
+
+.shj-inline {
+	border-radius: 5px;
+	margin: 0;
+	padding: 2px 5px;
+	display: inline-block;
+}
+
+[class*="shj-lang-"]::selection {
+	background: #bdf5;
+}
+
+[class*="shj-lang-"] ::selection {
+	background: #bdf5;
+}
+
+[class*="shj-lang-"]>div {
+	display: flex;
+	overflow: auto;
+}
+
+[class*="shj-lang-"]>div :last-child {
+	outline: none;
+	flex: 1;
+}
+
+.shj-numbers {
+	counter-reset: line;
+	padding-left: 5px;
+}
+
+.shj-numbers div {
+	padding-right: 5px;
+}
+
+.shj-numbers div:before {
+	color: #999;
+	content: counter(line);
+	opacity: 0.5;
+	text-align: right;
+	counter-increment: line;
+	margin-right: 5px;
+	display: block;
+}
+
+.shj-syn-cmnt {
+	font-style: italic;
+}
+
+.shj-syn-err,
+.shj-syn-kwd {
+	color: #e16;
+}
+
+.shj-syn-num,
+.shj-syn-class {
+	color: #f60;
+}
+
+.shj-syn-insert,
+.shj-syn-str {
+	color: #7d8;
+}
+
+.shj-syn-bool {
+	color: #3bf;
+}
+
+.shj-syn-type,
+.shj-syn-oper {
+	color: #5af;
+}
+
+.shj-syn-section,
+.shj-syn-func {
+	color: #84f;
+}
+
+.shj-syn-deleted,
+.shj-syn-var {
+	color: #f44;
+}
+
+.shj-oneline {
+	padding: 12px 10px;
+}
+
+.shj-lang-http.shj-oneline .shj-syn-kwd {
+	color: #fff;
+	background: #25f;
+	border-radius: 5px;
+	padding: 5px 7px;
+}
+
+[class*="shj-lang-"] {
+	color: #f8f8f2;
+	background: var(--mdui-color-secondary-container);
+}
+
+[class*="shj-lang-"]:before {
+	color: #6f9aff;
+}
+
+.shj-syn-deleted,
+.shj-syn-err,
+.shj-syn-var {
+	color: #ff5261;
+}
+
+.shj-syn-section,
+.shj-syn-kwd {
+	color: #ff7cc6;
+}
+
+.shj-syn-class {
+	color: #eab07c;
+}
+
+.shj-numbers,
+.shj-syn-cmnt {
+	color: #7d828b;
+}
+
+.shj-syn-insert,
+.shj-syn-type,
+.shj-syn-func,
+.shj-syn-bool {
+	color: #71d58a;
+}
+
+.shj-syn-num {
+	color: #b581fd;
+}
+
+.shj-syn-oper {
+	color: #80c6ff;
+}
+
+.shj-syn-str {
+	color: #4dacfa;
+}
+
+.heartbeat {
+	display: inline-block;
+	animation: pulse calc(60s / var(--bpm)) infinite ease-in-out;
+	transform-origin: center;
+}
+
+@keyframes pulse {
+	0% {
+		transform: scale(1);
+	}
+
+	25% {
+		transform: scale(1.1);
+	}
+
+	50% {
+		transform: scale(1);
+	}
+
+	75% {
+		transform: scale(1.1);
+	}
+
+	100% {
+		transform: scale(1);
+	}
+}

src/front/index.html

@@ -1,9 +1,10 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="mdui-theme-dark">
 
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
+    <meta name="renderer" content="webkit" />
     <meta name="theme-color" content="#000000">
     <meta name="description"
         content="A Dedicated Backend Developer, with a passion for high-fidelity audio, gaming, and web development.">
@@ -15,8 +16,8 @@
     <link rel="stylesheet" href="index.css" />
 </head>
 
-<body class="scanlines">
+<body>
-    <script src="index.tsx"></script>
+    <script src="index.tsx" type="module"></script>
 </body>
 
 </html>