Added import alises and also fixed font issues

src/components/BlogItem.astro

@@ -1,5 +1,5 @@
 ---
-import TerminalBorder from "../components/TerminalBorder.astro";
+import TerminalBorder from "@components/TerminalBorder.astro";
 
 function formatDate(date: Date) {
     const day = date.getDate();

src/components/Markdown.astro

@@ -1,10 +1,10 @@
 ---
-import "../styles/markdown/asides.css";
-import "../styles/markdown/markdown.css";
-import "../styles/markdown/props.css";
-import "../styles/markdown/reset.css";
-import "../styles/markdown/shiki.css";
-import "../styles/markdown/util.css";
+import "@styles/markdown/asides.css";
+import "@styles/markdown/markdown.css";
+import "@styles/markdown/props.css";
+import "@styles/markdown/reset.css";
+import "@styles/markdown/shiki.css";
+import "@styles/markdown/util.css";
 ---
 
 <div class="sl-markdown-content">

src/components/Project.astro

@@ -1,6 +1,6 @@
 ---
-import TerminalBorder from "../components/TerminalBorder.astro";
-import Link from "../components/Link.astro";
+import TerminalBorder from "@components/TerminalBorder.astro";
+import Link from "@components/Link.astro";
 
 interface Props {
     title: string;

src/components/RadarChart.astro

@@ -1,5 +1,5 @@
 ---
-import "../styles/terminal.css"
+import "@styles/terminal.css"
 
 interface Entry {
     name: string;

src/layouts/Blog.astro

@@ -1,5 +1,5 @@
 ---
-import Markdown from "../components/Markdown.astro";
+import Markdown from "@components/Markdown.astro";
 
 interface Props {
     title: string;

src/layouts/Terminal.astro

@@ -1,6 +1,6 @@
 ---
-import "../styles/terminal.css";
-import Nav from "../components/Nav.astro";
+import "@styles/terminal.css";
+import Nav from "@components/Nav.astro";
 
 interface Props {
     path: string;

src/pages/404.astro

@@ -1,6 +1,6 @@
 ---
-import TerminalBorder from "../components/TerminalBorder.astro"
-import Terminal from "../layouts/Terminal.astro"
+import TerminalBorder from "@components/TerminalBorder.astro"
+import Terminal from "@layouts/Terminal.astro"
 
 const url = new URL(Astro.request.url).pathname.substring(1);
 ---

src/pages/blogs.astro

@@ -1,7 +1,7 @@
 ---
-import Terminal from "../layouts/Terminal.astro";
-import TerminalBorder from "../components/TerminalBorder.astro";
-import BlogItem from "../components/BlogItem.astro";
+import Terminal from "@layouts/Terminal.astro";
+import TerminalBorder from "@components/TerminalBorder.astro";
+import BlogItem from "@components/BlogItem.astro";
 import { getCollection } from "astro:content";
 
 const blogs = (await getCollection("blogs"))

src/pages/blogs/[...slug].astro

@@ -1,5 +1,5 @@
 ---
-import Blog from "../../layouts/Blog.astro";
+import Blog from "@layouts/Blog.astro";
 import { getCollection } from "astro:content";
 
 export async function getStaticPaths() {

src/pages/index.astro

@@ -1,9 +1,9 @@
 ---
 import { getCollection } from "astro:content";
-import Terminal from "../layouts/Terminal.astro";
-import TerminalBorder from "../components/TerminalBorder.astro";
-import Link from "../components/Link.astro";
-import BlogItem from "../components/BlogItem.astro";
+import Terminal from "@layouts/Terminal.astro";
+import TerminalBorder from "@components/TerminalBorder.astro";
+import Link from "@components/Link.astro";
+import BlogItem from "@components/BlogItem.astro";
 
 const latestBlog = (await getCollection("blogs")).reduce((latest, blog) => {
     const blogDate = new Date(blog.data.date);
@@ -123,7 +123,9 @@ watching Anime or solving Rubik's cubes fast.`.trimStart();
             <BlogItem
                 header="Latest Blog Post"
                 title={latestBlog.data.title}
-                description={latestBlog.data.description ? latestBlog.data.description : ""}
+                description={latestBlog.data.description
+                    ? latestBlog.data.description
+                    : ""}
                 date={latestBlog.data.date}
                 href={"/blogs/" + latestBlog.slug}
             />

src/pages/projects.astro

@@ -1,6 +1,6 @@
 ---
-import Terminal from "../layouts/Terminal.astro";
-import Project from "../components/Project.astro";
+import Terminal from "@layouts/Terminal.astro";
+import Project from "@components/Project.astro";
 ---
 
 <Terminal path="skills">

src/pages/skills.astro

@@ -1,7 +1,7 @@
 ---
-import Terminal from "../layouts/Terminal.astro";
-import RadarChart from "../components/RadarChart.astro";
-import TerminalBorder from "../components/TerminalBorder.astro";
+import Terminal from "@layouts/Terminal.astro";
+import RadarChart from "@components/RadarChart.astro";
+import TerminalBorder from "@components/TerminalBorder.astro";
 
 const max = 100;
 const data = [

src/styles/fonts/JetBrainsMono.css

@@ -1,108 +1,108 @@
 @font-face {
     font-family: "Jetbrains Mono";
-    src: url("JetBrainsMono-Thin.woff2") format("woff2");
+    src: url("/fonts/JetBrainsMono-Thin.woff2") format("woff2");
     font-weight: 100;
     font-style: normal;
 }
 @font-face {
     font-family: "Jetbrains Mono";
-    src: url("JetBrainsMono-ThinItalic.woff2") format("woff2");
+    src: url("/fonts/JetBrainsMono-ThinItalic.woff2") format("woff2");
     font-weight: 100;
     font-style: italic;
 }
 @font-face {
     font-family: "Jetbrains Mono";
-    src: url("JetBrainsMono-ExtraLight.woff2") format("woff2");
+    src: url("/fonts/JetBrainsMono-ExtraLight.woff2") format("woff2");
     font-weight: 200;
     font-style: normal;
 }
 @font-face {
     font-family: "Jetbrains Mono";
-    src: url("JetBrainsMono-ExtraLightItalic.woff2") format("woff2");
+    src: url("/fonts/JetBrainsMono-ExtraLightItalic.woff2") format("woff2");
     font-weight: 200;
     font-style: italic;
 }
 @font-face {
     font-family: "Jetbrains Mono";
-    src: url("JetBrainsMono-Light.woff2") format("woff2");
+    src: url("/fonts/JetBrainsMono-Light.woff2") format("woff2");
     font-weight: 300;
     font-style: normal;
 }
 @font-face {
     font-family: "Jetbrains Mono";
-    src: url("JetBrainsMono-LightItalic.woff2") format("woff2");
+    src: url("/fonts/JetBrainsMono-LightItalic.woff2") format("woff2");
     font-weight: 300;
     font-style: italic;
 }
 @font-face {
     font-family: "Jetbrains Mono";
-    src: url("JetBrainsMono-Regular.woff2") format("woff2");
+    src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
     font-weight: 400;
     font-style: normal;
 }
 @font-face {
     font-family: "Jetbrains Mono";
-    src: url("JetBrainsMono-Italic.woff2") format("woff2");
+    src: url("/fonts/JetBrainsMono-Italic.woff2") format("woff2");
     font-weight: 400;
     font-style: italic;
 }
 @font-face {
     font-family: "Jetbrains Mono";
-    src: url("JetBrainsMono-Medium.woff2") format("woff2");
+    src: url("/fonts/JetBrainsMono-Medium.woff2") format("woff2");
     font-weight: 500;
     font-style: normal;
 }
 @font-face {
     font-family: "Jetbrains Mono";
-    src: url("JetBrainsMono-MediumItalic.woff2") format("woff2");
+    src: url("/fonts/JetBrainsMono-MediumItalic.woff2") format("woff2");
     font-weight: 500;
     font-style: italic;
 }
 @font-face {
     font-family: "Jetbrains Mono";
-    src: url("JetBrainsMono-SemiBold.woff2") format("woff2");
+    src: url("/fonts/JetBrainsMono-SemiBold.woff2") format("woff2");
     font-weight: 600;
     font-style: normal;
 }
 @font-face {
     font-family: "Jetbrains Mono";
-    src: url("JetBrainsMono-SemiBoldItalic.woff2") format("woff2");
+    src: url("/fonts/JetBrainsMono-SemiBoldItalic.woff2") format("woff2");
     font-weight: 600;
     font-style: italic;
 }
 @font-face {
     font-family: "Jetbrains Mono";
-    src: url("JetBrainsMono-Bold.woff2") format("woff2");
+    src: url("/fonts/JetBrainsMono-Bold.woff2") format("woff2");
     font-weight: 700;
     font-style: normal;
 }
 @font-face {
     font-family: "Jetbrains Mono";
-    src: url("JetBrainsMono-BoldItalic.woff2") format("woff2");
+    src: url("/fonts/JetBrainsMono-BoldItalic.woff2") format("woff2");
     font-weight: 700;
     font-style: italic;
 }
 @font-face {
     font-family: "Jetbrains Mono";
-    src: url("JetBrainsMono-ExtraBold.woff2") format("woff2");
+    src: url("/fonts/JetBrainsMono-ExtraBold.woff2") format("woff2");
     font-weight: 800;
     font-style: normal;
 }
 @font-face {
     font-family: "Jetbrains Mono";
-    src: url("JetBrainsMono-ExtraBoldItalic.woff2") format("woff2");
+    src: url("/fonts/JetBrainsMono-ExtraBoldItalic.woff2") format("woff2");
     font-weight: 800;
     font-style: italic;
 }
 @font-face {
     font-family: "Jetbrains Mono";
-    src: url("JetBrainsMono-ExtraBold.woff2") format("woff2");
+    src: url("/fonts/JetBrainsMono-ExtraBold.woff2") format("woff2");
     font-weight: 900;
     font-style: normal;
 }
 @font-face {
     font-family: "Jetbrains Mono";
-    src: url("JetBrainsMono-ExtraBoldItalic.woff2") format("woff2");
+    src: url("/fonts/JetBrainsMono-ExtraBoldItalic.woff2") format("woff2");
     font-weight: 900;
     font-style: italic;
 }

src/styles/terminal.css

@@ -1,4 +1,4 @@
-@import url("../styles/fonts/JetBrainsMono.css");
+@import url("@styles/fonts/JetBrainsMono.css");
 
 :root {
   --primary: #54d7a9;

tsconfig.json

@@ -1,6 +1,18 @@
 {
     "extends": "astro/tsconfigs/base",
     "compilerOptions": {
-        "strictNullChecks": true
+        "strictNullChecks": true,
+        "baseUrl": ".",
+        "paths": {
+            "@layouts/*": [
+                "src/layouts/*"
+            ],
+            "@components/*": [
+                "src/components/*"
+            ],
+            "@styles/*": [
+                "src/styles/*"
+            ]
+        }
     }
 }