diff --git a/src/front/App.tsx b/src/front/App.tsx
index 76a6dff..678b046 100644
--- a/src/front/App.tsx
+++ b/src/front/App.tsx
@@ -2,9 +2,8 @@ import "mdui/components/layout";
import "mdui/components/layout-main";
import NavigationBar from "./components/NavigationBar";
-import TopAppBar from "./components/TopAppBar";
-
import About from "./components/pages/About";
+import TopAppBar from "./components/TopAppBar";
export default () => {
return (
diff --git a/src/front/components/Hyperate/index.tsx b/src/front/components/Hyperate/index.tsx
index ca59e65..b85653b 100644
--- a/src/front/components/Hyperate/index.tsx
+++ b/src/front/components/Hyperate/index.tsx
@@ -22,7 +22,9 @@ export default () => {
});
return (
<div>
- <p class="heartbeat" ref={paragraph}>❤️ 0 BPM</p>
+ <p class="heartbeat" ref={paragraph}>
+ ❤️ 0 BPM
+ </p>
</div>
);
};
diff --git a/src/front/components/Lanyard/index.tsx b/src/front/components/Lanyard/index.tsx
index 67b7f79..3c04d2c 100644
--- a/src/front/components/Lanyard/index.tsx
+++ b/src/front/components/Lanyard/index.tsx
@@ -1,6 +1,6 @@
import { highlightElement } from "@speed-highlight/core";
-import { artist } from "../../utilities/artist";
import { createRef } from "tsx-dom";
+import { artist } from "../../utilities/artist";
import socket from "../../utilities/socket";
const colorMap = {
@@ -39,7 +39,6 @@ export default () => {
document.body.style.removeProperty("--lanyard-display");
}
-
if (container.current) {
container.current.textContent = JSON.stringify(
{
diff --git a/src/front/components/NavigationBar/index.tsx b/src/front/components/NavigationBar/index.tsx
index 3d67f2f..a4bf269 100644
--- a/src/front/components/NavigationBar/index.tsx
+++ b/src/front/components/NavigationBar/index.tsx
@@ -8,13 +8,13 @@ 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>
- );
+ 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>
+ );
};
diff --git a/src/front/components/TopAppBar/index.tsx b/src/front/components/TopAppBar/index.tsx
index 2f02785..ccd279d 100644
--- a/src/front/components/TopAppBar/index.tsx
+++ b/src/front/components/TopAppBar/index.tsx
@@ -3,10 +3,10 @@ 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>
- );
+ 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>
+ );
};
diff --git a/src/front/components/pages/About/index.tsx b/src/front/components/pages/About/index.tsx
index f4d6181..67b28a4 100644
--- a/src/front/components/pages/About/index.tsx
+++ b/src/front/components/pages/About/index.tsx
@@ -1,99 +1,122 @@
-import 'mdui/components/card';
-import 'mdui/components/avatar';
+import "mdui/components/card";
+import "mdui/components/avatar";
-import 'mdui/components/segmented-button-group';
-import 'mdui/components/segmented-button';
+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';
+import { getColorFromImage } from "mdui/functions/getColorFromImage";
+import { artist } from "../../../utilities/artist";
+import Hyperate from "../../Hyperate";
+import Lanyard from "../../Lanyard";
const Abyssinian = new Image();
Abyssinian.src = "/public/Abyssinian/default.png";
Abyssinian.onload = async () => {
- const profilePicture = document.getElementById("profilePicture") as HTMLElement;
+ const profilePicture = document.getElementById(
+ "profilePicture",
+ ) as HTMLElement;
- artist(await getColorFromImage(Abyssinian), profilePicture);
+ artist(await getColorFromImage(Abyssinian), profilePicture);
- profilePicture.setAttribute("src", Abyssinian.src);
- profilePicture.innerText = "";
+ 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",
+ 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>
+ 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)",
- }} />
+ <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",
+ <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>
+ //textAlign: "center",
+ }}
+ >
+ <Lanyard />
+ </mdui-card>
- <br style={{
- display: "var(--hyperate-display)",
- }} />
+ <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",
+ <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 >
- );
+ //textAlign: "center",
+ }}
+ >
+ <Hyperate />
+ </mdui-card>
+ </div>
+ );
};
diff --git a/src/front/index.css b/src/front/index.css
index 282d7f0..4956481 100644
--- a/src/front/index.css
+++ b/src/front/index.css
@@ -49,12 +49,12 @@ body {
background: #bdf5;
}
-[class*="shj-lang-"]>div {
+[class*="shj-lang-"] > div {
display: flex;
overflow: auto;
}
-[class*="shj-lang-"]>div :last-child {
+[class*="shj-lang-"] > div :last-child {
outline: none;
flex: 1;
}
@@ -201,4 +201,4 @@ body {
100% {
transform: scale(1);
}
-}
\ No newline at end of file
+}
diff --git a/src/front/utilities/artist/index.ts b/src/front/utilities/artist/index.ts
index c922c54..077c9a4 100644
--- a/src/front/utilities/artist/index.ts
+++ b/src/front/utilities/artist/index.ts
@@ -1,13 +1,18 @@
import { setColorScheme } from "mdui/functions/setColorScheme";
export const artist = (color?: string, element?: HTMLElement) => {
- if (color?.startsWith("#")) {
- setColorScheme(color, {
- target: element || document.documentElement,
- });
- } else {
- setColorScheme("#FFF");
- }
+ if (color?.startsWith("#")) {
+ setColorScheme(color, {
+ target: element || document.documentElement,
+ });
+ } else {
+ setColorScheme("#FFF");
+ }
- document.body.style.setProperty("--status-color", getComputedStyle(document.documentElement).getPropertyValue("--mdui-color-primary"));
+ document.body.style.setProperty(
+ "--status-color",
+ getComputedStyle(document.documentElement).getPropertyValue(
+ "--mdui-color-primary",
+ ),
+ );
};
diff --git a/src/front/utilities/clicker/index.ts b/src/front/utilities/clicker/index.ts
index 3926628..90ef4bd 100644
--- a/src/front/utilities/clicker/index.ts
+++ b/src/front/utilities/clicker/index.ts
@@ -5,18 +5,18 @@ effectTick.volume = 0.1;
const whitelistedTags = ["button", "icon", "item"];
document.onclick = (event: MouseEvent) => {
- const target = event.target as HTMLElement;
+ const target = event.target as HTMLElement;
- if (!target) return;
+ if (!target) return;
- const tagName = target.tagName.toLowerCase();
- const isWhitelisted = whitelistedTags.some((tag) => tagName.includes(tag));
+ const tagName = target.tagName.toLowerCase();
+ const isWhitelisted = whitelistedTags.some((tag) => tagName.includes(tag));
- console.log(tagName, isWhitelisted);
+ console.log(tagName, isWhitelisted);
- if (!isWhitelisted) return;
+ if (!isWhitelisted) return;
- ("vibrate" in navigator && navigator.vibrate(1));
- effectTick.currentTime = 0;
- effectTick.play();
+ "vibrate" in navigator && navigator.vibrate(1);
+ effectTick.currentTime = 0;
+ effectTick.play();
};