Fixed the formatting issue

5 files changed, 313 insertions, 205 deletions

diff --git a/package.json b/package.json
index a1a07ce..bc69cc1 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,9 @@
     "tailwindcss": "^3.4.14"
   },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.15"
+    "@tailwindcss/typography": "^0.5.15",
+    "prettier": "^3.3.3",
+    "prettier-plugin-astro": "^0.14.1",
+    "typescript": "^5.6.3"
   }
 }
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 00bdd39..5807cfd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -27,6 +27,15 @@ importers:
       '@tailwindcss/typography':
         specifier: ^0.5.15
         version: 0.5.15(tailwindcss@3.4.14)
+      prettier:
+        specifier: ^3.3.3
+        version: 3.3.3
+      prettier-plugin-astro:
+        specifier: ^0.14.1
+        version: 0.14.1
+      typescript:
+        specifier: ^5.6.3
+        version: 5.6.3
 
 packages:
 
@@ -1722,6 +1731,15 @@ packages:
     resolution: {integrity: sha512-gYBeFTZLu055D8Vv3cSPox/0iTPtkzxpLroSYYA7WXgRi31WCJ51Uyl8ZiPeUUjyvs2MBzK+S8v9JVUgHU/Sqw==}
     engines: {node: '>=18.12'}
 
+  prettier-plugin-astro@0.14.1:
+    resolution: {integrity: sha512-RiBETaaP9veVstE4vUwSIcdATj6dKmXljouXc/DDNwBSPTp8FRkLGDSGFClKsAFeeg+13SB0Z1JZvbD76bigJw==}
+    engines: {node: ^14.15.0 || >=16.0.0}
+
+  prettier@3.3.3:
+    resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   prismjs@1.29.0:
     resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
     engines: {node: '>=6'}
@@ -1836,6 +1854,12 @@ packages:
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
+  s.color@0.0.15:
+    resolution: {integrity: sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA==}
+
+  sass-formatter@0.7.9:
+    resolution: {integrity: sha512-CWZ8XiSim+fJVG0cFLStwDvft1VI7uvXdCNJYXhDvowiv+DsbD1nXLiQ4zrE5UBvj5DWZJ93cwN0NX5PMsr1Pw==}
+
   sax@1.4.1:
     resolution: {integrity: sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==}
 
@@ -1945,6 +1969,9 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
 
+  suf-log@2.5.3:
+    resolution: {integrity: sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==}
+
   supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
@@ -4315,6 +4342,14 @@ snapshots:
       find-yarn-workspace-root2: 1.2.16
       which-pm: 3.0.0
 
+  prettier-plugin-astro@0.14.1:
+    dependencies:
+      '@astrojs/compiler': 2.10.3
+      prettier: 3.3.3
+      sass-formatter: 0.7.9
+
+  prettier@3.3.3: {}
+
   prismjs@1.29.0: {}
 
   prompts@2.4.2:
@@ -4533,6 +4568,12 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
+  s.color@0.0.15: {}
+
+  sass-formatter@0.7.9:
+    dependencies:
+      suf-log: 2.5.3
+
   sax@1.4.1: {}
 
   section-matter@1.0.0:
@@ -4667,6 +4708,10 @@ snapshots:
       pirates: 4.0.6
       ts-interface-checker: 0.1.13
 
+  suf-log@2.5.3:
+    dependencies:
+      s.color: 0.0.15
+
   supports-preserve-symlinks-flag@1.0.0: {}
 
   tailwindcss@3.4.14:
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>