diff --git a/dev/index.html b/dev/index.html
index f5626f1..d5b35b5 100644
--- a/dev/index.html
+++ b/dev/index.html
@@ -10,103 +10,7 @@
-
-
-
+
diff --git a/dev/style.css b/dev/style.css
new file mode 100644
index 0000000..9942316
--- /dev/null
+++ b/dev/style.css
@@ -0,0 +1,93 @@
+@font-face {
+ font-family: Lilex;
+ src: url(./fonts/Lilex-Regular.ttf) format("truetype");
+}
+
+@font-face {
+ font-family: "JetBrainsMono Nerd Font";
+ src: url("./fonts/JetBrains-Mono-Nerd-Font-Complete.ttf") format("truetype");
+}
+
+body {
+ font-family: Lilex;
+ margin: 0;
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ background-color: #1e1e1e;
+ color: #d4d4d4;
+}
+
+.container {
+ display: flex;
+ flex-direction: column;
+}
+
+img {
+ width: 150px;
+ border-radius: 50px;
+}
+
+.top-level div {
+ display: flex;
+ align-items: center;
+ gap: 2em;
+}
+
+.link-item {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+}
+
+.link-item a {
+ text-decoration: none;
+ color: #d4d4d4;
+ font-weight: bolder;
+ display: flex;
+ align-items: center;
+}
+
+.icon {
+ font-family: "JetBrainsMono Nerd Font";
+}
+
+.icon:before {
+ margin-right: 20px;
+}
+
+.mail-icon:before {
+ content: "\f42f";
+ font-size: 2em;
+}
+
+.github-icon:before {
+ content: "\f09b";
+ font-size: 2em;
+}
+
+.gitea-icon:before {
+ content: "\e702";
+ font-size: 2.8em;
+}
+
+.paste-icon:before {
+ content: "\f429";
+ font-size: 2em;
+ padding-left: 7px;
+}
+
+.blog-icon:before {
+ content: "\e287";
+ font-size: 2em;
+ padding-left: 4px;
+}
+
+footer {
+ position: absolute;
+ bottom: 1rem;
+ font-size: 0.8rem;
+ color: #777;
+}