Fixed the formatting issue

3 files changed, 264 insertions, 204 deletions

diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index 3c41d0d..60f2f14 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -5,46 +5,50 @@ interface Props {
 
 const { path } = Astro.props;
 
-const directories = ["about", "works", "links"]
-
+const directories = ["about", "works", "links"];
 ---
+
 <nav>
-  <span id="nav-path">/home/kyren/{path}</span>
-  <span id="nav-links">
-    <a href="/">home</a>
-    {directories.map((dir) => (
-    <a href={`/${dir}`}>{dir}</a>
-    <span></span> /* For whitespace */
-    ))}
-  </span>
+    <span id="nav-path">/home/kyren/{path}</span>
+    <span id="nav-links">
+        <a href="/">home</a>
+        {
+            directories.map((dir) => (
+                <>
+                    <a href={`/${dir}`}>{dir}</a>
+                </>
+            ))
+        }
+    </span>
 </nav>
 
 <style>
+    /* main { */
+    /*     padding-top: 1.25rem; */
+    /* } */
 
-nav {
-  font-weight: 300;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  border: 0;
-  border-bottom: 1px;
-  border-style: solid;
-  margin-bottom: 0.75rem;
-  padding-bottom: 0.75rem;
-}
-#nav-links a {
-  margin-right: 0.15rem;
-  margin-bottom: 0px;
-  margin-left: 0.15rem;
-  color: var(--primary);
-  font-size: 1rem;
-
-}
-#nav-links a:hover {
-  color: var(--accent);
-}
-#nav-path {
-  margin-right: 2rem;
-}
-
+    nav {
+        font-weight: 300;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        border: 0;
+        border-bottom: 1px;
+        border-style: solid;
+        margin-bottom: 0.75rem;
+        padding-bottom: 0.75rem;
+    }
+    #nav-links a {
+        margin-right: 0.15rem;
+        margin-bottom: 0px;
+        margin-left: 0.15rem;
+        color: var(--primary);
+        font-size: 1rem;
+    }
+    #nav-links a:hover {
+        color: var(--accent);
+    }
+    #nav-path {
+        margin-right: 2rem;
+    }
 </style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index bed38f4..9c1584c 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,6 +1,6 @@
 ---
 interface Props {
-	title: string;
+    title: string;
 }
 
 const { title } = Astro.props;
@@ -8,97 +8,96 @@ const { title } = Astro.props;
 
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="description" content="Astro description" />
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="generator" content={Astro.generator} />
-		<title>{title}</title>
-	</head>
-	<body>
-		<slot />
-	</body>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="description" content="Astro description" />
+        <meta name="viewport" content="width=device-width" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <meta name="generator" content={Astro.generator} />
+        <title>{title}</title>
+    </head>
+    <body>
+        <slot />
+    </body>
 </html>
 
 <style is:global>
-@import url("../styles/JetBrainsMono.css");
+    @import url("../styles/JetBrainsMono.css");
 
-:root {
-    --primary: #ffbf00;
-    --secondary: #9b7eca;
-    --accent: #7ed4fb;
-    --extra: #8fcc75;
-    --text: #ffffff;
-    --alt: #999999;
-    --background: #000000;
-}
+    :root {
+        --primary: #ffbf00;
+        --secondary: #9b7eca;
+        --accent: #7ed4fb;
+        --extra: #8fcc75;
+        --text: #ffffff;
+        --alt: #999999;
+        --background: #000000;
+    }
 
-* {
-    margin: 0;
-    padding: 0;
-}
+    * {
+        margin: 0;
+        padding: 0;
+    }
 
-html {
-    background-color: var(--background);
-    color: var(--text);
-    font-family: "Jetbrains Mono", monospace;
-    user-select: none;
-}
+    html {
+        background-color: var(--background);
+        color: var(--text);
+        font-family: "Jetbrains Mono", monospace;
+        user-select: none;
+    }
 
-body {
-    overflow-y: scroll;
-    zoom: 1;
-}
-@media screen and (max-width: 768px) {
     body {
-        zoom: 0.8;
+        overflow-y: scroll;
+        zoom: 1;
     }
-}
-@media screen and (max-width: 480px) {
-    body {
-        zoom: 0.7;
+    @media screen and (max-width: 768px) {
+        body {
+            zoom: 0.8;
+        }
+    }
+    @media screen and (max-width: 480px) {
+        body {
+            zoom: 0.7;
+        }
     }
-}
-
-main {
-    display: grid;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    grid-template-columns: minmax(200px, 1fr);
-    transform: translate(-50%, -50%);
-    border: 1px;
-    border-style: solid;
-    background: var(--background);
-    padding: 1.75rem;
-    width: 55rem;
-    max-width: 75%;
-    /* ! font-weight: 300; */
-}
 
-h1,
-h2,
-h3 {
-    font-size: 1rem;
-    font-weight: bold;
-}
+    main {
+        display: grid;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        grid-template-columns: minmax(200px, 1fr);
+        transform: translate(-50%, -50%);
+        border: 1px;
+        border-style: solid;
+        background: var(--background);
+        padding: 1.75rem;
+        width: 55rem;
+        max-width: 75%;
+        padding-top: 1.25rem;
+    }
 
-a {
-    font-weight: 300;
-}
-a:link,
-a:visited,
-a:active {
-    background-color: transparent;
-    text-decoration: none;
-    color: var(--secondary);
-}
-a:hover {
-    transition-duration: 0.2s;
-    transition-property: color, text-decoration;
-    text-decoration: underline;
-    color: var(--accent);
-}
+    h1,
+    h2,
+    h3 {
+        font-size: 1rem;
+        font-weight: bold;
+    }
 
+    a {
+        font-weight: 300;
+    }
+    a:link,
+    a:visited,
+    a:active {
+        background-color: transparent;
+        text-decoration: none;
+        color: var(--secondary);
+    }
+    a:hover {
+        transition-duration: 0.2s;
+        transition-property: color, text-decoration;
+        text-decoration: underline;
+        color: var(--accent);
+    }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 172be47..2afde87 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,9 +1,9 @@
 ---
-import Layout from '../layouts/Layout.astro';
-import TerminalBorder from '../components/TerminalBorder.astro'
-import Nav from '../components/Nav.astro'
+import Layout from "../layouts/Layout.astro";
+import TerminalBorder from "../components/TerminalBorder.astro";
+import Nav from "../components/Nav.astro";
 
-const sshKey = `ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIAsrdN6e4XbkJfV/FbH3GY8ujWgxSCSbYiwzQ4rKyren`
+const sshKey = `ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIAsrdN6e4XbkJfV/FbH3GY8ujWgxSCSbYiwzQ4rKyren`;
 const fingerprint = `
 +--[ED25519 256]--+
 |+o.+oE*B%* o     |
@@ -15,7 +15,7 @@ const fingerprint = `
 |. .        .     |
 |..               |
 |.                |
-+----[SHA256]-----+`.trimStart()
++----[SHA256]-----+`.trimStart();
 
 const aboutMe = `
 Hi! I'm Kyren, a software engineer and Minecraft plugin freelancer,
@@ -23,99 +23,156 @@ I love working with Rust, Golang and Java.
 I am also a terminal nerd and linux enthusiast who uses NVIM btw.
 And when I am not coding I am most likely playing video games,
 watching Anime or solving Rubik's cubes fast.
-Test`.trimStart()
+Test`.trimStart();
 ---
+
 <Layout title="Kyren's Website">
-  <main>
-    <Nav path=""/>
-    <div id="content">
-      <div id="left" class="column">
-        <TerminalBorder header='Profile'>
-          <div class="flex items-center space-x-3">
-            <img src="logo.svg" alt="picture" class="h-[100%] object-cover" />
-            <pre id="sshKeyCopy" class="text-[75%] flex-1 ">{fingerprint}</pre>
-          </div>
-        </TerminalBorder>
-        <TerminalBorder header="Name">
-          <span>Kyren</span>
-        </TerminalBorder>
-        <TerminalBorder header="Email">
-          <span>Kyren223@proton.me</span>
-        </TerminalBorder>
-        <TerminalBorder header="Timezone">
-          <span>UTC+2</span>
-        </TerminalBorder>
-        <TerminalBorder header="SSH Key">
-          <div class="w-[100%] flex items-center space-x-2 hover:text-[var(--alt)]">
-            <span id="sshKey" class="hover:text-[var(--alt)] cursor-pointer truncate flex-1">{sshKey}</span>
-            <button id="sshKeyCopy" class="flex items-center justify-center ml-auto hover:text-[var(--alt)]">
-              <svg width="100%" height="100%" viewBox="0 -3 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">
-                <path fill="currentColor" fill-rule="evenodd" d="M4 2a2 2 0 00-2 2v9a2 2 0 002 2h2v2a2 2 0 002 2h9a2 2 0 002-2V8a2 2 0 00-2-2h-2V4a2 2 0 00-2-2H4zm9 4V4H4v9h2V8a2 2 0 012-2h5zM8 8h9v9H8V8z"/>
-              </svg>
-            </button>
-          </div>
-        </TerminalBorder>
-      </div>
-      <div id="right" class="column">
-        <TerminalBorder header="About Me">
-          <p>{aboutMe}</p>
-        </TerminalBorder>
-        <TerminalBorder header="Skills" margin='30px 0px'>
-          <a href="/about/">cd ~/imabanana80/about </a>
-        </TerminalBorder>
-        <TerminalBorder header="Projects">
-          <a href="/works/">cd ~/imabanana80/works</a>
-        </TerminalBorder>
-      </div>
-    </div>
-  </main>
+    <main>
+        <Nav path="" />
+        <div id="content">
+            <div id="left" class="column">
+                <TerminalBorder header="Profile">
+                    <div class="flex items-center space-x-3">
+                        <img
+                            src="logo.svg"
+                            alt="picture"
+                            class="h-[100%] object-cover"
+                        />
+                        <pre
+                            id="sshKeyCopy"
+                            class="text-[75%] flex-1">{fingerprint}</pre>
+                    </div>
+                </TerminalBorder>
+                <TerminalBorder header="Name">
+                    <span>Kyren</span>
+                </TerminalBorder>
+                <TerminalBorder header="Email">
+                    <span>Kyren223@proton.me</span>
+                </TerminalBorder>
+                <TerminalBorder header="Timezone">
+                    <span>UTC+2</span>
+                </TerminalBorder>
+                <TerminalBorder header="SSH Key">
+                    <div
+                        class="w-[100%] flex items-center space-x-2 hover:text-[var(--alt)]"
+                    >
+                        <span
+                            id="sshKey"
+                            class="hover:text-[var(--alt)] cursor-pointer truncate flex-1"
+                            >{sshKey}</span
+                        >
+                        <button
+                            id="sshKeyCopy"
+                            class="flex items-center justify-center ml-auto hover:text-[var(--alt)]"
+                        >
+                            <svg
+                                width="100%"
+                                height="100%"
+                                viewBox="0 -3 24 24"
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                            >
+                                <path
+                                    fill="currentColor"
+                                    fill-rule="evenodd"
+                                    d="M4 2a2 2 0 00-2 2v9a2 2 0 002 2h2v2a2 2 0 002 2h9a2 2 0 002-2V8a2 2 0 00-2-2h-2V4a2 2 0 00-2-2H4zm9 4V4H4v9h2V8a2 2 0 012-2h5zM8 8h9v9H8V8z"
+                                ></path>
+                            </svg>
+                        </button>
+                    </div>
+                </TerminalBorder>
+            </div>
+            <div id="right" class="column">
+                <TerminalBorder header="About Me">
+                    <p>{aboutMe}</p>
+                </TerminalBorder>
+                <TerminalBorder header="Skills" margin="30px 0px">
+                    <a href="/about/">cd ~/imabanana80/about </a>
+                </TerminalBorder>
+                <TerminalBorder header="Projects">
+                    <a href="/works/">cd ~/imabanana80/works</a>
+                </TerminalBorder>
+            </div>
+        </div>
+    </main>
 </Layout>
 
 <script>
-  const sshKey = document.getElementById('sshKey').innerHTML
-  function copySshKeyToClipboard() {
-    navigator.clipboard.writeText(sshKey).then(() => {
-      // TODO: show some feedback for copying
-    }).catch(_err => {
-      // TODO: show same feedback but with err
-    });
-  }
+    const sshKey = document.getElementById("sshKey").innerHTML;
+    function copySshKeyToClipboard() {
+        navigator.clipboard
+            .writeText(sshKey)
+            .then(() => {
+                // TODO: show some feedback for copying
+            })
+            .catch((_err) => {
+                // TODO: show same feedback but with err
+            });
+    }
 
-  document.getElementById('sshKey').addEventListener('click', copySshKeyToClipboard);
-  document.getElementById('sshKeyCopy').addEventListener('click', copySshKeyToClipboard);
+    document
+        .getElementById("sshKey")
+        .addEventListener("click", copySshKeyToClipboard);
+    document
+        .getElementById("sshKeyCopy")
+        .addEventListener("click", copySshKeyToClipboard);
 </script>
 
 <style>
-#left {
-  width: 30%;
-}
-#right {
-  width: 67%;
-}
+    #content {
+        margin-top: 0.5rem;
+        display: flex;
+        justify-content: space-between; /* Removing this makes a cool effect of the right side being "attached" to the left */
+    }
 
-#content {
-  margin-top: 0.5rem;
-  display: flex;
-  justify-content: space-between; /* Removing this makes a cool effect of the right side being "attached" to the left */
-}
+    #left {
+        width: 30%;
+    }
+    #right {
+        width: 67%;
+    }
 
-.column {
-  /* border-style: solid; */
-  border-width: 1px;
-  border-color: var(--alt);
-}
+    .column {
+        /* border-style: solid; */
+        border-width: 1px;
+        border-color: var(--alt);
+    }
 
-button {
-  background-color: var(--background);
-  color: var(--text);
-  border: 0;
-  font-size: 1rem;
-  cursor: pointer;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  line-height: 30px;
-  font-size: 16px;
-}
+    button {
+        background-color: var(--background);
+        color: var(--text);
+        border: 0;
+        font-size: 1rem;
+        cursor: pointer;
+        width: 20px;
+        height: 20px;
+        padding: 0;
+        line-height: 30px;
+        font-size: 16px;
+    }
 
+    nav {
+        font-weight: 300;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        border: 0;
+        border-bottom: 1px;
+        border-style: solid;
+        margin-bottom: 0.75rem;
+        padding-bottom: 0.75rem;
+    }
+    #nav-links a {
+        margin-right: 0.15rem;
+        margin-bottom: 0px;
+        margin-left: 0.15rem;
+        color: var(--primary);
+        font-size: 1rem;
+    }
+    #nav-links a:hover {
+        color: var(--accent);
+    }
+    #nav-path {
+        margin-right: 2rem;
+    }
 </style>