diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 0000000..d68a3eb
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "blog/themes/ananke"]
+	path = blog/themes/ananke
+	url = https://github.com/theNewDynamic/gohugo-theme-ananke.git
diff --git a/package.json b/package.json
index 0fc72ef..d4dbbcb 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,15 @@
 	"type": "module",
 	"dependencies": {
 		"@unocss/reset": "^0.48.5",
-		"dayjs": "^1.11.9"
+		"dayjs": "^1.11.9",
+		"github-markdown-css": "^5.5.0",
+		"katex": "^0.16.9",
+		"mathjax": "^3.2.2",
+		"mdsvex": "^0.11.0",
+		"rehype-katex": "^7.0.0",
+		"rehype-mathjax": "^6.0.0",
+		"remark-math": "^6.0.0",
+		"remark-rehype": "^11.0.0",
+		"shiki": "^0.14.7"
 	}
 }
diff --git a/src/lib/blog/+post.svelte b/src/lib/blog/+post.svelte
new file mode 100644
index 0000000..f8abb6b
--- /dev/null
+++ b/src/lib/blog/+post.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+	import * as Components from '$lib/blog/components.svelte';
+	export { Components };
+</script>
+
+<div class="blog mt-8 leading-loose text-lg text-gray-700 dark:text-gray-300">
+	<slot />
+</div>
+
+<style uno-safelist>
+	/* I HATE OVERWRITING STYLES  I HATE OVERWRITING STYLES */
+	.blog :global(h1) {
+		@apply text-5xl font-bold;
+	}
+	.blog :global(h2) {
+		@apply text-4xl font-bold;
+	}
+	.blog :global(h3) {
+		@apply text-3xl font-bold;
+	}
+	.blog :global(h4) {
+		@apply text-2xl font-bold;
+	}
+	.blog :global(h5) {
+		@apply text-xl font-bold;
+	}
+	.blog :global(h6) {
+		@apply text-lg font-bold;
+	}
+	.blog :global(p) {
+		@apply text-lg py-2;
+	}
+	.blog :global(a) {
+		@apply text-blue-500;
+	}
+	.blog :global(a:hover) {
+		@apply text-blue-700;
+	}
+	.blog :global(ul) {
+		@apply list-disc list-inside;
+	}
+	.blog :global(ol) {
+		@apply list-decimal list-inside display-inline-block;
+	}
+	.blog :global(ul > li) {
+		@apply ml-4;
+	}
+	.blog :global(ol > li > p) {
+		@apply inline;
+	}
+	.blog :global(ol > li) {
+		@apply ml-4;
+	}
+	.blog :global(blockquote) {
+		@apply border-gray-600 pl-4;
+		@apply border-l-4 'dark:border-gray-300';
+	}
+	.blog :global(pre) {
+		@apply overflow-x-auto;
+	}
+	.blog :global(table) {
+		@apply w-full border-collapse;
+	}
+	.blog :global(th) {
+		@apply text-left p-2 border border-gray-600;
+	}
+	.blog :global(td) {
+		@apply p-2 border border-gray-600 'dark:border-gray-700';
+	}
+	.blog :global(hr) {
+		@apply my-4 border-gray-600 'dark:border-gray-700';
+	}
+	.blog :global(img) {
+		@apply w-full;
+	}
+	.blog :global(code) {
+		@apply text-gray-200;
+		background-color: #282a36;
+	}
+	.blog :global(code) {
+		@apply rounded-1 p-2;
+	}
+	.blog :global(kbd) {
+		@apply rounded-1 p-2;
+	}
+	.blog :global(samp) {
+		@apply rounded-1 p-2;
+	}
+	.blog :global(pre) {
+		@apply rounded-1 p-2;
+	}
+	.blog :global(.prose) {
+		@apply prose;
+	}
+	.blog::-webkit-scrollbar {
+		display: none;
+	}
+	.blog {
+		-ms-overflow-style: none; /* IE and Edge */
+		scrollbar-width: none; /* Firefox */
+	}
+	/* Force dark mode as it is ignored. */
+	:global(.dark, blockquote.dark) {
+		@apply dark;
+	}
+</style>
diff --git a/src/lib/blog/codeblock.css b/src/lib/blog/codeblock.css
new file mode 100644
index 0000000..ec98eb3
--- /dev/null
+++ b/src/lib/blog/codeblock.css
@@ -0,0 +1,122 @@
+/**
+ * Dracula Theme originally by Zeno Rocha [@zenorocha]
+ * https://draculatheme.com/
+ *
+ * Ported for PrismJS by Albert Vallverdu [@byverdu]
+ */
+
+code[class*='language-'],
+pre[class*='language-'] {
+	color: #f8f8f2;
+	background: none;
+	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+/* Code blocks */
+pre[class*='language-'] {
+	padding: 1em;
+	margin: 0.5em 0;
+	overflow: auto;
+	border-radius: 0.3em;
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+	background: #282a36;
+}
+
+/* Inline code */
+:not(pre) > code[class*='language-'] {
+	padding: 0.1em;
+	border-radius: 0.3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #6272a4;
+}
+
+.token.punctuation {
+	color: #f8f8f2;
+}
+
+.namespace {
+	opacity: 0.7;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #ff79c6;
+}
+
+.token.boolean,
+.token.number {
+	color: #bd93f9;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #50fa7b;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+	color: #f8f8f2;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+	color: #f1fa8c;
+}
+
+.token.keyword {
+	color: #8be9fd;
+}
+
+.token.regex,
+.token.important {
+	color: #ffb86c;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
diff --git a/src/lib/blog/components.svelte b/src/lib/blog/components.svelte
new file mode 100644
index 0000000..81b4bb0
--- /dev/null
+++ b/src/lib/blog/components.svelte
@@ -0,0 +1,3 @@
+<h1 class="text-5xl">
+	<slot />
+</h1>
diff --git a/src/lib/navi.svelte b/src/lib/navi.svelte
index 1af1df3..09faa24 100644
--- a/src/lib/navi.svelte
+++ b/src/lib/navi.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import ThemeToggle from '$lib/ThemeToggle.svelte';
     import { fade, fly, slide } from 'svelte/transition';
 
 
@@ -34,7 +33,6 @@
             </div>
         </div>
         <div class="flex-1 justify-center content-center float-right mr-6 my-4 h-7 w-7 md:my-5">
-        <ThemeToggle/> 
         </div>
     </div>
 </div>
diff --git a/src/lib/types.ts b/src/lib/types.ts
new file mode 100644
index 0000000..31f0ee0
--- /dev/null
+++ b/src/lib/types.ts
@@ -0,0 +1,10 @@
+export type Categories = 'sveltekit' | 'svelte';
+
+export type Post = {
+	title: string;
+	slug: string;
+	description: string;
+	date: string;
+	categories: Categories[];
+	published: boolean;
+};
diff --git a/src/lib/utils.js b/src/lib/utils.js
new file mode 100644
index 0000000..4a1f328
--- /dev/null
+++ b/src/lib/utils.js
@@ -0,0 +1,19 @@
+export const convertDate = (published) => {
+	const months = {
+		1: 'Jan',
+		2: 'Feb',
+		3: 'Mar',
+		4: 'Apr',
+		5: 'May',
+		6: 'Jun',
+		7: 'Jul',
+		8: 'Aug',
+		9: 'Sep',
+		10: 'Oct',
+		11: 'Nov',
+		12: 'Dec'
+	};
+	const date = published.substring(0, 10);
+	const [year, month, day] = date.split('-');
+	return `${day}-${months[parseInt(month)]}-${year}`;
+};
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
new file mode 100644
index 0000000..189f71e
--- /dev/null
+++ b/src/routes/+layout.server.ts
@@ -0,0 +1 @@
+export const prerender = true;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 538c002..6492a4d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,65 +1,120 @@
 <script>
-    import data from '$lib/data.json';
-    import { fly } from 'svelte/transition';
-    import { quintOut } from 'svelte/easing';
-</script>                                                                                      
+	import data from '$lib/data.json';
+	import { fly } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
+</script>
 
-<body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans" id="content"> 
-<div class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-25% md:h-screen">
-    <!-- Primary content (left) --> 
-    <div in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut}} out:fly={{ delay: 100, duration: 200, y: 0, easing: quintOut}} class="text-center">                                                                                                                  
-      <div class="md:text-right justify-center flex flex-col items-center md:items-end m-auto shrink overflow-hidden md:pb-0 md:pt-0 pb-10% pt-110% h-1/2 md:h-screen">                                          
-          <div in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut}} out:fly={{ duration: 300, x: -50, easing: quintOut}} >  
-              <h1 class="text-black dark:text-white text-4xl">{data.name}</h1>
-              <p class="text-black dark:text-white pb-5" style="">{@html data.description}</p>                                                                    
-          </div>
-        <hr in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut}} out:fly={{ duration: 300, x: -50, easing: quintOut}}  class="border-black dark:border-white w-100%"/>
-          <div in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut}} out:fly={{ duration: 300, x: -50, easing: quintOut}} class="flex right text-right mt-1 justify-self-end md:flex-col flex-row px-3 md:px-0 place-items-end" >
-              <a href="{data.github}{data.gh}">
-                <div class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded">
-                  <p class="text-2xl md:block hidden md:pr-2">GitHub</p><div class="i-carbon-logo-github px-2 md:px-0 my-auto text-3xl"/>
-                </div>
-              </a>
-              <a href="{data.matrix}{data.mtx}">
-                <div class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded">
-                  <p class="text-2xl md:block hidden md:pr-2">Matrix</p><div class="i-tabler-brand-matrix md:pl-3 px-2 my-auto md:px-0 text-3xl"/>
-                </div>
-              </a>
-              <a href="mailto:{data.mail}">
-                <div class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded">
-                  <p class="text-2xl md:block hidden md:pr-2">Mail</p><div class="i-mdi-at md:pl-3 px-2 md:px-0 my-auto text-3xl"/>
-                </div>
-              </a>
-              <a href="/donate">
-                <div class="flex flex-row py-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded">
-                  <p class="text-2xl md:block hidden md:pr-2">Donate</p><div class="i-ph-currency-circle-dollar-bold md:pl-1 mr-1 px-2 md:px-0 my-auto text-3xl"/>
-                </div>
-              </a>
-          </div>
-      </div>
-    </div>
-           <!-- vertical line -->
-       <div                                                                            
-       in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut}}
-       out:fly={{ duration: 100, y: 0, easing: quintOut}}
-       class="md:mx-4 md:h-1/4 md:w-1 w-3/4 border-1 bg-black border-black dark:border-white dark:bg-white rounded-md hidden md:block"        
-       ></div>
-       <!-- Secondary content (right) -->
-        <div class="flex md:flex-col flex-row gap-2 md:gap-0 mx-5 md:mx-0">
-            <div in:fly={{ delay: 300, duration: 300, x: -20, easing: quintOut}}
-                 out:fly={{ delay: 50, duration: 250, y: 0, easing: quintOut}}
-                 class="flex flex-row rounded md:p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400">
-                <a href="/about" data-sveltekit-preload-code><div class="flex flex-row"><div class="i-gridicons-info text-5xl md:text-4xl align-middle my-auto"/><h2 class="md:pl-2 text-4xl hidden md:block">About</h2></div></a>
-            </div>
-            <div in:fly={{ delay: 350, duration: 300, x: -20, easing: quintOut}}
-                 out:fly={{ delay: 100, duration: 200, y: 0, easing: quintOut}}
-                 class="flex flex-row rounded md:p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400"> 
-                <a href="/projects" data-sveltekit-preload-code><div class="flex flex-row"><div class="i-octicon-project-16 text-5xl md:text-4xl my-auto"/><h2 class="md:pl-2 text-4xl hidden md:block">Projects</h2></div></a> 
-            </div>
-           <!-- <div in:fly={{ delay: 400, duration: 300, x: -20, easing: quintOut}} -->
-           <!--     out:fly={{ delay: 150, duration: 150, y: 0, easing: quintOut}} -->
-           <!--      class="flex flex-row rounded md:p-1"> -->
-           <!--     <a href="/blog"><div class="flex flex-row"><div class="i-ph-book-bold bg-gray-400 dark:bg-gray-600 text-5xl md:text-4xl my-auto"/><h2 class="md:pl-2 text-4xl text-gray-400 dark:text-gray-600 hidden md:block">Blog</h2></div></a> -->
-           <!-- </div> -->
-        </div>
-</body>                                                                                                                                      
+<body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans" id="content">
+	<div
+		class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-25% md:h-screen"
+	>
+		<!-- Primary content (left) -->
+		<div
+			in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut }}
+			out:fly={{ delay: 100, duration: 200, y: 0, easing: quintOut }}
+			class="text-center"
+		>
+			<div
+				class="md:text-right justify-center flex flex-col items-center md:items-end m-auto shrink overflow-hidden md:pb-0 md:pt-0 pb-10% pt-110% h-1/2 md:h-screen"
+			>
+				<div
+					in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut }}
+					out:fly={{ duration: 300, x: -50, easing: quintOut }}
+				>
+					<h1 class="text-black dark:text-white text-4xl">{data.name}</h1>
+					<p class="text-black dark:text-white pb-5" style="">{@html data.description}</p>
+				</div>
+				<hr
+					in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut }}
+					out:fly={{ duration: 300, x: -50, easing: quintOut }}
+					class="border-black dark:border-white w-100%"
+				/>
+				<div
+					in:fly={{ delay: 300, duration: 300, x: 50, easing: quintOut }}
+					out:fly={{ duration: 300, x: -50, easing: quintOut }}
+					class="flex right text-right mt-1 justify-self-end md:flex-col flex-row px-3 md:px-0 place-items-end"
+				>
+					<a href="{data.github}{data.gh}">
+						<div
+							class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded"
+						>
+							<p class="text-2xl md:block hidden md:pr-2">GitHub</p>
+							<div class="i-carbon-logo-github px-2 md:px-0 my-auto text-3xl" />
+						</div>
+					</a>
+					<a href="{data.matrix}{data.mtx}">
+						<div
+							class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded"
+						>
+							<p class="text-2xl md:block hidden md:pr-2">Matrix</p>
+							<div class="i-tabler-brand-matrix md:pl-3 px-2 my-auto md:px-0 text-3xl" />
+						</div>
+					</a>
+					<a href="mailto:{data.mail}">
+						<div
+							class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded"
+						>
+							<p class="text-2xl md:block hidden md:pr-2">Mail</p>
+							<div class="i-mdi-at md:pl-3 px-2 md:px-0 my-auto text-3xl" />
+						</div>
+					</a>
+					<a href="/donate">
+						<div
+							class="flex flex-row py-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded"
+						>
+							<p class="text-2xl md:block hidden md:pr-2">Donate</p>
+							<div
+								class="i-ph-currency-circle-dollar-bold md:pl-1 mr-1 px-2 md:px-0 my-auto text-3xl"
+							/>
+						</div>
+					</a>
+				</div>
+			</div>
+		</div>
+		<!-- vertical line -->
+		<div
+			in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut }}
+			out:fly={{ duration: 100, y: 0, easing: quintOut }}
+			class="md:mx-4 md:h-1/4 md:w-1 w-3/4 border-1 bg-black border-black dark:border-white dark:bg-white rounded-md hidden md:block"
+		/>
+		<!-- Secondary content (right) -->
+		<div class="flex md:flex-col flex-row gap-2 md:gap-0 mx-5 md:mx-0">
+			<div
+				in:fly={{ delay: 300, duration: 300, x: -20, easing: quintOut }}
+				out:fly={{ delay: 50, duration: 250, y: 0, easing: quintOut }}
+				class="flex flex-row rounded md:p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400"
+			>
+				<a href="/about" data-sveltekit-preload-code
+					><div class="flex flex-row">
+						<div class="i-gridicons-info text-5xl md:text-4xl align-middle my-auto" />
+						<h2 class="md:pl-2 text-4xl hidden md:block">About</h2>
+					</div></a
+				>
+			</div>
+			<div
+				in:fly={{ delay: 350, duration: 300, x: -20, easing: quintOut }}
+				out:fly={{ delay: 100, duration: 200, y: 0, easing: quintOut }}
+				class="flex flex-row rounded md:p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400"
+			>
+				<a href="/projects" data-sveltekit-preload-code
+					><div class="flex flex-row">
+						<div class="i-octicon-project-16 text-5xl md:text-4xl my-auto" />
+						<h2 class="md:pl-2 text-4xl hidden md:block">Projects</h2>
+					</div></a
+				>
+			</div>
+			<div
+				in:fly={{ delay: 400, duration: 300, x: -20, easing: quintOut }}
+				out:fly={{ delay: 150, duration: 150, y: 0, easing: quintOut }}
+				class="flex flex-row rounded md:p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400"
+			>
+				<a href="/blog" data-sveltekit-preload-code
+					><div class="flex flex-row">
+						<div class="i-ph-book-bold text-5xl md:text-4xl my-auto" />
+						<h2 class="md:pl-2 text-4xl hidden md:block">Blog</h2>
+					</div></a
+				>
+			</div>
+		</div>
+	</div></body
+>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index bf21c5d..92ff636 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,66 +1,76 @@
 <script>
-    import dayjs from "dayjs";
-    import relativeTime from "dayjs/plugin/relativeTime";
-    // DayJS
-    dayjs.extend(relativeTime);
-    let yr = dayjs('2004-07-15').fromNow(true);
-    import { fly } from 'svelte/transition';  
-    import { quintOut } from 'svelte/easing'; 
+	import dayjs from 'dayjs';
+	import relativeTime from 'dayjs/plugin/relativeTime';
+	// DayJS
+	dayjs.extend(relativeTime);
+	let yr = dayjs('2004-07-15').fromNow(true);
+	import { fly } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
 </script>
 
-<body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans md:px-10%" id="content"> 
-    <div class="min-h-screen">
-      <!-- Primary content (Left) -->
-         <div class="text-center">
-          <div
-          class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-screen ">
-          <div
-         in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut}}  
-         out:fly={{ duration: 300, y: -50, easing: quintOut}}              
-          class="flex flex-col">
-          <div class="flex flex-col md:flex-row">
-             <div 
-              class="i-gridicons-info dark:text-white place-content-center place-self-center justify-center content-center text-center pl-0 md:pl-3 text-black text-5xl"
-              ></div>
-             <h1 
-              class="text-black dark:text-white text-4xl md:pr-2"
-              >About me</h1>
-              </div>
-               <p class="md:hidden block text-gray-500 py-1"> I fucking hate css </p>
-               <a href="/">
-               <div class="flex place-content-center place-self-center justify-center content-center flex-row md:pl-25%">
-               <div class="i-ep-back text-4xl md:text-2xl my-auto mr-0 md:mr-1"></div>
-               <p class="md:block hidden"> Go back? </p>
-               </div>
-               </a>
-               </div>
-               <!-- Vertical line -->
-             <div
-              in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut}}
-              out:fly={{ duration: 300, y: 0, easing: quintOut}}
-              class="md:h-1/2 md:w-1 w-3/4 border-1 bg-black border-black dark:bg-white dark:border-white rounded-md"
-              ></div>
-                <!-- Secondary Content (Right) --> 
-               <div
-                in:fly={{ delay: 300, duration: 300, y: -50, easing: quintOut}}   
-                out:fly={{ duration: 300, y: 50, easing: quintOut}}               
-               class="justify-center w-85% md:w-50% h-100% flex flex-col items-center md:m-5 shrink overflow-hidden h-screen "> 
-                   <div class="text-xl text-center overflow-scroll md:text-left text-black dark:text-white ">
-                       <p>I'm a passionate programmer who quite literally is interested in the inner workings of anything related to computers.<br/> 
-                       Such as what? Well it's pretty much anything that revolves around computers, from the hardware to the software.<br/>
-                       Some examples are: decompiling, reverse engineering, programming, experimenting, and so on.<br/>
-                       It's mostly something I love to do in my spare time, and I'm always looking for new things to learn.<br/>
-                       I do hate JS though, but svelte is making it bearable.<br/>
-                       This is just a brief summary of who I am, And I hope you enjoy your (rather short) stay on my website.<br/>
-                       Oh, just in case, I'm a guy, and I'm {yr} old. You don't need to know more than that.<br/>
-                       Finally, feel free to contact me! I love receiving mails and messages from people, and I'll try to respond as soon as possible.<br/>
-                       If it's a question or a request, I'll see if can also publicly document it so that others can benefit from it as well.<br/>
-                       Until then, have a nice day!
-                       </p>
-                   </div>
-               </div>
-             </div>
-        </div> 
-    </div>
+<body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans md:px-10%" id="content">
+	<div class="min-h-screen">
+		<!-- Primary content (Left) -->
+		<div class="text-center">
+			<div
+				class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-screen"
+			>
+				<div
+					in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut }}
+					out:fly={{ duration: 300, y: -50, easing: quintOut }}
+					class="flex flex-col"
+				>
+					<div class="flex flex-col md:flex-row">
+						<div
+							class="i-gridicons-info dark:text-white place-content-center place-self-center justify-center content-center text-center pl-0 md:pl-3 text-black text-5xl"
+						/>
+						<h1 class="text-black dark:text-white text-4xl md:pr-2">About me</h1>
+					</div>
+					<a href="/">
+						<div
+							class="flex place-content-center place-self-center justify-center content-center flex-row md:pl-25%"
+						>
+							<div class="i-ep-back text-4xl md:text-2xl my-auto mr-0 md:mr-1" />
+							<p class="md:block hidden">Go back?</p>
+						</div>
+					</a>
+				</div>
+				<!-- Vertical line -->
+				<div
+					in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut }}
+					out:fly={{ duration: 300, y: 0, easing: quintOut }}
+					class="md:h-1/2 md:w-1 w-3/4 border-1 bg-black border-black dark:bg-white dark:border-white rounded-md"
+				/>
+				<!-- Secondary Content (Right) -->
+				<div
+					in:fly={{ delay: 300, duration: 300, y: -50, easing: quintOut }}
+					out:fly={{ duration: 300, y: 50, easing: quintOut }}
+					class="justify-center w-85% md:w-50% h-100% flex flex-col items-center md:m-5 shrink overflow-hidden h-screen"
+				>
+					<div class="text-xl text-center overflow-scroll md:text-left text-black dark:text-white">
+						<p>
+							I'm a passionate programmer who quite literally is interested in the inner workings of
+							anything related to computers.<br />
+							Such as what? Well it's pretty much anything that revolves around computers, from the hardware
+							to the software.<br />
+							Some examples are: decompiling, reverse engineering, programming, experimenting, and so
+							on.<br />
+							It's mostly something I love to do in my spare time, and I'm always looking for new things
+							to learn.<br />
+							I do hate JS though, but svelte is making it bearable.<br />
+							This is just a brief summary of who I am, And I hope you enjoy your (rather short) stay
+							on my website.<br />
+							Oh, just in case, I'm a guy, and I'm {yr} old. You don't need to know more than that.<br
+							/>
+							Finally, feel free to contact me! I love receiving mails and messages from people, and
+							I'll try to respond as soon as possible.<br />
+							If it's a question or a request, I'll see if can also publicly document it so that others
+							can benefit from it as well.<br />
+							Until then, have a nice day!
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 </body>
-
diff --git a/src/routes/api/posts/+server.ts b/src/routes/api/posts/+server.ts
new file mode 100644
index 0000000..fa5a55e
--- /dev/null
+++ b/src/routes/api/posts/+server.ts
@@ -0,0 +1,30 @@
+import { json } from '@sveltejs/kit';
+import type { Post } from '$lib/types';
+
+async function getPosts() {
+	let posts: Post[] = [];
+
+	const paths = import.meta.glob('/src/routes/blog/posts/mds/*.md', { eager: true });
+
+	for (const path in paths) {
+		const file = paths[path];
+		const slug = path.split('/').at(-1)?.replace('.md', '');
+
+		if (file && typeof file === 'object' && 'metadata' in file && slug) {
+			const metadata = file.metadata as Omit<Post, 'slug'>;
+			const post = { ...metadata, slug } satisfies Post;
+			post.published && posts.push(post);
+		}
+	}
+
+	posts = posts.sort(
+		(first, second) => new Date(second.date).getTime() - new Date(first.date).getTime()
+	);
+
+	return posts;
+}
+
+export async function GET() {
+	const posts = await getPosts();
+	return json(posts);
+}
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 5232070..d71f1e7 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -1,27 +1,95 @@
-<script>
-//
-//  export let content; 
-//  const posts = { content };
-//  console.log(content);
-//
+<script lang="ts">
+	import { fly } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
+	import { convertDate } from '$lib/utils';
+	export let data;
+	// So the data is: title, date, descriptionription,slug.
+	//{#each data.posts as post}
+	// {:else}
+	// <p>Ayo wait a second</p>
+	// {/each}
 </script>
-<!--    <div class="mt-70px md:mt-80px mb-50px md:mb-0 min-h-screen justify-center grid md:grid-rows-3 xl:grid-cols-2 place-items-center md:my-4 mt-4 gap-3 mx-4 grid-cols-1 ">-->
-<!--        {#each content as data (data.id) }-->
-<!--            <div class="dark:bg-slate-400 bg-slate-600 dark:text-white text-black rounded-lg w-[100-40] md:max-w-xl">-->
-<!--                <div class="md:flex"> -->
-<!--                    <div class="md:shrink-0">-->
-<!--                        <img class="md:rounded-l-lg md:rounded-none rounded-lg md:h-full md:w-45 w-screen object-cover h-48" src="{data.img}" alt="e"> -->
-<!--                    </div> -->
-<!--                    <div class="pb-20 pt-5 px-8 md:py-2 md:px-8 md:rounded-lg rounded-b-lg dark:text-white text-black dark:bg-slate-7 bg-slate-200 md:h-full"> -->
-<!--                        <div><h3 class="text-3xl dark:text-white text-black text-center">{data.name}</h3></div> -->
-<!--                        <div class="text-sm dark:text-white text-black text-center">{data.date}</div>             -->       
-<!--                        <div><a class="text-xl bg-sky-5 hover:bg-sky-4 hover:text-white text-white outline-0 hover:shadow-md duration-300 shadow-sky-4/50 px-4 py-1 justify-end m-4 rounded-full float-right" href="eee">Check it out</a></div> -->
-<!--                    </div> -->
-<!--                </div> --> 
-<!--            </div> -->
-<!--            {:else} -->
-<!--            <p>Ayo wait a second</p> -->
-<!--        {/each} -->
-<!--    </div> -->
-<!-- Do you know what i hate the most? Fucking -- s. -->
-<p>Under construction!</p>
+
+<link rel="alternate" type="application/atom+xml" href="/rss.xml" />
+<body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans md:px-10%" id="content">
+	<div class="min-h-screen">
+		<!-- Primary content (Left) -->
+		<div class="text-center">
+			<div
+				class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-screen"
+			>
+				<div
+					in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut }}
+					out:fly={{ duration: 300, y: -50, easing: quintOut }}
+					class="flex flex-col md:pr-3"
+				>
+					<div class="flex flex-col md:flex-row">
+						<div
+							class="i-ph-book-bold dark:text-white place-content-center place-self-center justify-center content-center text-center pl-0 md:pl-3 text-black text-5xl"
+						/>
+						<h1 class="text-black dark:text-white text-4xl md:pl-3 md:pr-2">Blog</h1>
+					</div>
+					<a href="/">
+						<div
+							class="flex place-content-center place-self-center justify-center content-center md:mt-2 flex-row md:pl-25%"
+						>
+							<div class="i-ep-back text-4xl md:text-2xl my-auto mr-0 md:mr-1" />
+							<p class="md:block hidden">Go back?</p>
+						</div>
+					</a>
+				</div>
+
+				<!-- Vertical line -->
+				<div
+					in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut }}
+					out:fly={{ duration: 300, y: 0, easing: quintOut }}
+					class="md:h-1/2 md:w-1 w-3/4 border-1 bg-black border-black dark:bg-white dark:border-white rounded-md"
+				/>
+
+				<div class="md:pl-4 md:gap-1 flex md:h-50% flex-col place-items-start">
+					<div class="overflow-y-auto">
+						{#each data.posts as { title, date, description, slug }, i}
+							<a href="blog/{slug}">
+								<!-- Gotta fix this, it's gonna look ugly when there are too many projects in the list... -->
+								<div
+									in:fly={{ delay: 350, duration: 300 * i, y: -50, easing: quintOut }}
+									out:fly={{ duration: 300, y: 50, easing: quintOut }}
+									class="flex flex-col p-2 rounded dark:hover:bg-#082f49 hover:bg-blue-100"
+								>
+									<div class="my-auto">
+										<div class="flex flex-row place-content-between">
+											<div
+												class="flex flex-col pl-4 md:pl-0 gap-3 my-auto py-2 text-left z-0 place-items-start"
+											>
+												<h3 class="text-3xl dark:text-white text-black text-center">{title}</h3>
+												<p class="text-sm dark:text-white text-black text-center">
+													{convertDate(date)}
+												</p>
+												<p class="dark:text-white text-black text-sm">{description}</p>
+											</div>
+											<div
+												class="md:h-10% h-100% md:w-50 w-50 object-cover rounded backdrop-opacity-10 md:object-contain float-right z-10 overflow-hidden md:block hidden"
+												style="mask-image: linear-gradient(to left, rgba(0, 0, 0, 1.0) 50%, transparent 100%);"
+											>
+												<img
+													class="transition duration-600 top-0 opacity-50 scale-110 hover:opacity-75 object-cover md:object-contain hover:scale-120"
+												/>
+											</div>
+										</div>
+									</div>
+								</div>
+							</a>
+							<hr
+								in:fly={{ delay: 300, duration: 500 * i, y: 0, easing: quintOut }}
+								out:fly={{ duration: 300, y: 50, easing: quintOut }}
+								class="border-black dark:border-white justify-center mx-auto w-85% md:w-100% my-2"
+							/>
+						{:else}
+							<p>Ayo wait a second</p>
+						{/each}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div></body
+>
diff --git a/src/routes/blog/+page.ts b/src/routes/blog/+page.ts
new file mode 100644
index 0000000..39b5b03
--- /dev/null
+++ b/src/routes/blog/+page.ts
@@ -0,0 +1,7 @@
+import type { Post } from '$lib/types'
+
+export async function load({ fetch }) {
+	const response = await fetch('api/posts')
+	const posts: Post[] = await response.json()
+	return { posts }
+}
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
new file mode 100644
index 0000000..53f1ab1
--- /dev/null
+++ b/src/routes/blog/[slug]/+page.svelte
@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { convertDate } from '$lib/utils';
+	import { fly } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
+	import 'github-markdown-css/github-markdown.css';
+
+	export let data;
+</script>
+
+<!-- SEO -->
+<svelte:head>
+	<title>{data.meta.title}</title>
+	<meta property="og:type" content="article" />
+	<meta property="og:title" content={data.meta.title} />
+</svelte:head>
+
+<article>
+	<div class="min-h-screen">
+		<!-- Primary content (Left) -->
+		<div class="text-center">
+			<div
+				class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-screen"
+			>
+				<div
+					in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut }}
+					out:fly={{ duration: 300, y: -50, easing: quintOut }}
+					class="flex flex-col pr-3"
+				>
+					<div class="flex flex-col md:flex-row">
+						<div
+							class="i-gridicons-info dark:text-white place-content-center place-self-center justify-center content-center text-center pl-0 md:pl-3 text-black text-5xl"
+						/>
+						<h1 class="text-black dark:text-white font-bold text-4xl md:px-2">{data.meta.title}</h1>
+					</div>
+					<!-- dirty hack to give the illusion the text is properly visible on both light and dark mode -->
+					<p class="block text-gray-800 md:text-gray-500 p-3 py-1">
+						Tags:
+						{#each data.meta.categories as category}
+							<span class="surface-4"> &num;{category} </span>
+						{/each}
+					</p>
+					<!-- dirty hack to give the illusion the text is properly visible on both light and dark mode -->
+					<p class="block text-gray-800 md:text-gray-500 p-3 py-1">
+						{convertDate(data.meta.date)}
+					</p>
+					<a href="/blog" data-sveltekit-preload-code>
+						<div
+							class="flex place-content-center place-self-center justify-center content-center flex-row md:px-25%"
+						>
+							<div class="i-ep-back text-4xl md:text-2xl my-auto mr-0 md:mr-1" />
+							<p class="md:block hidden">Go back?</p>
+						</div>
+					</a>
+				</div>
+				<!-- Vertical line -->
+				<div
+					in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut }}
+					out:fly={{ duration: 300, y: 0, easing: quintOut }}
+					class="md:h-1/2 md:w-1 w-3/4 border-1 bg-black border-black dark:bg-white dark:border-white rounded-md"
+				/>
+				<!-- Secondary Content (Right) -->
+				<div
+					in:fly={{ delay: 400, duration: 300, y: -50, easing: quintOut }}
+					out:fly={{ duration: 300, y: 50, easing: quintOut }}
+					class="justify-center w-85% md:min-w-20% md:max-w-50% h-100% flex flex-col items-center md:m-5 shrink overflow-hidden h-screen"
+				>
+					<div
+						class="text-xl text-center overflow-scroll md:text-left text-black dark:text-white my-10%"
+					>
+						<div class="prose" />
+						<svelte:component this={data.content} />
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</article>
+
+<style>
+	article {
+		max-inline-size: var(--size-content-3);
+		margin-inline: auto;
+	}
+
+	h1 {
+		text-transform: capitalize;
+	}
+</style>
diff --git a/src/routes/blog/[slug]/+page.ts b/src/routes/blog/[slug]/+page.ts
new file mode 100644
index 0000000..b2fc51e
--- /dev/null
+++ b/src/routes/blog/[slug]/+page.ts
@@ -0,0 +1,15 @@
+import { error } from '@sveltejs/kit'
+
+export async function load({ params }) {
+	try {
+		const post = await import(`../posts/mds/${params.slug}.md`)
+
+		return {
+			content: post.default,
+			meta: post.metadata
+		}
+	} catch (e) {
+		throw error(404, `Could not find ${params.slug}`)
+	}
+}
+
diff --git a/src/routes/blog/posts/mds/firstblog.md b/src/routes/blog/posts/mds/firstblog.md
new file mode 100644
index 0000000..7161640
--- /dev/null
+++ b/src/routes/blog/posts/mds/firstblog.md
@@ -0,0 +1,35 @@
+---
+title: First blog
+description: First blog to test things out!
+author: midou
+date: '2023-12-28'
+categories:
+  - testing
+published: true
+---
+
+# Hello!
+
+Welcome to my blog! It took me a while to ~~copy~~ I mean write code to adapt it to my website!
+
+So you might say "Oh that's cool but What will be in this blog?".
+
+Well, to start things out I'm probably going to put a lot of different topics. These include but are not limited to:
+
+- Rants
+- Devlog
+- Guides (If i can't seem to find a similar one.)
+
+This does not include political opinions. But I'm still going to needlessly rant about big tech annoying the crap out of me :D
+
+_Hopefully_ my website doesn't crash and burn in flames. One of the things I like about this blogpost (and Svelte in general) is that it **does not** require JS.
+So any JS freak can stop crying about "Libre" or "Anti" JS stuff. This should _also_ avoid that situation where archive websites get to scrape the frontend but never the backend
+and we end up with a forever lost and broken archive.
+
+Finally, [the source code for the website is in my github repo, if you're interested.](https://github.com/midou36o/midou36o.github.io) (go to the svelte-stable branch!)
+
+Generally _everything_ is working, minus the dark mode for some parts that you might not notice actually, but I'll figure that out once I feel like hating myself even further, speaking of which, why is JS such a pain to use?
+
+There will be no comments section on my blog. But my email and other accounts are open to discuss with me!
+
+**PS:** If someone knows how to write a proper RSS feed that takes the blogpost into a compatible feed, please send a PR or teach me how!!
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index 991f5f6..c1a773b 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -1,76 +1,86 @@
 <script>
-    import proj from '$lib/project.json'; 
-    import { fly } from 'svelte/transition';   
-    import { quintOut } from 'svelte/easing';  
+	import proj from '$lib/project.json';
+	import { fly } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
 </script>
 
-<body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans md:px-10%" id="content">  
-<div class="min-h-screen">
-      <!-- Primary content (Left) -->
-         <div class="text-center">
-          <div
-          class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-screen ">
-          <div
-         in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut}}  
-         out:fly={{ duration: 300, y: -50, easing: quintOut}}              
-          class="flex flex-col">
-          <div class="flex flex-col md:flex-row">
-             <div 
-              class="i-octicon-project-16 dark:text-white place-content-center place-self-center justify-center content-center text-center pl-0 md:pl-3 text-black text-5xl"
-              ></div>
-             <h1 
-              class="text-black dark:text-white text-4xl md:pl-2 md:pr-2"
-              >Projects</h1>
-              </div>
-               <p class="md:hidden block text-gray-500 py-1"> I fucking hate css </p>
-               <a href="/">
-               <div class="flex place-content-center place-self-center justify-center content-center flex-row md:pl-25%">
-               <div class="i-ep-back text-4xl md:text-2xl my-auto mr-0 md:mr-1"></div>
-               <p class="md:block hidden"> Go back? </p>
-               </div>
-               </a>
-               </div>
+<body class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans md:px-10%" id="content">
+	<div class="min-h-screen">
+		<!-- Primary content (Left) -->
+		<div class="text-center">
+			<div
+				class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-screen"
+			>
+				<div
+					in:fly={{ delay: 300, duration: 300, y: 50, easing: quintOut }}
+					out:fly={{ duration: 300, y: -50, easing: quintOut }}
+					class="flex flex-col"
+				>
+					<div class="flex flex-col md:flex-row">
+						<div
+							class="i-octicon-project-16 dark:text-white place-content-center place-self-center justify-center content-center text-center pl-0 md:pl-3 text-black text-5xl"
+						/>
+						<h1 class="text-black dark:text-white text-4xl md:pl-2 md:pr-2">Projects</h1>
+					</div>
+					<a href="/">
+						<div
+							class="flex place-content-center place-self-center justify-center content-center flex-row md:pl-25%"
+						>
+							<div class="i-ep-back text-4xl md:text-2xl my-auto mr-0 md:mr-1" />
+							<p class="md:block hidden">Go back?</p>
+						</div>
+					</a>
+				</div>
 
-                
-        
-                    <!-- Vertical line -->
-             <div
-              in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut}}
-              out:fly={{ duration: 300, y: 0, easing: quintOut}}
-              class="md:h-1/2 md:w-1 w-3/4 border-1 bg-black border-black dark:bg-white dark:border-white rounded-md"
-              ></div>
- 
+				<!-- Vertical line -->
+				<div
+					in:fly={{ delay: 300, duration: 300, y: 0, easing: quintOut }}
+					out:fly={{ duration: 300, y: 0, easing: quintOut }}
+					class="md:h-1/2 md:w-1 w-3/4 border-1 bg-black border-black dark:bg-white dark:border-white rounded-md"
+				/>
 
-<div class="md:pl-4 md:gap-1 flex md:h-50% flex-col place-items-start">
-    <div class="overflow-y-auto">
-    {#each proj as { name, date, desc, url, image, imdes }, i}
-        <a href="{url}">
-        <!-- Gotta fix this, it's gonna look ugly when there are too many projects in the list... -->  
-        <div
-        in:fly={{ delay: 350, duration: 300 * i, y: -50, easing: quintOut}} 
-        out:fly={{ duration: 300 , y: 50, easing: quintOut}}            
-        class="flex flex-col p-2 rounded dark:hover:bg-#082f49 hover:bg-blue-100">
-            <div class="my-auto"> 
-                <div class="flex flex-row place-content-between">
-                    <div class="flex flex-col pl-4 md:pl-0 gap-3 my-auto py-2 text-left z-0 place-items-start">
-                        <h3 class="text-3xl dark:text-white text-black text-center">{name}</h3>
-                        <p class="text-sm dark:text-white text-black text-center">{date}</p>                    
-                        <p class="dark:text-white text-black text-sm">{desc}</p>
-                    </div>                
-                    <div class="md:h-10% h-100% md:w-50 w-50 object-cover rounded backdrop-opacity-10 md:object-contain float-right z-10 overflow-hidden md:block hidden" style="mask-image: linear-gradient(to left, rgba(0, 0, 0, 1.0) 50%, transparent 100%);"> 
-                        <img class="transition duration-600  top-0 opacity-50 scale-110 hover:opacity-75 object-cover md:object-contain hover:scale-120" src="{image}" alt="{imdes}">  
-                    </div>
-                </div>
-            </div>
-        </div>
-        </a>
-        <hr
-        in:fly={{ delay: 300, duration: 500 * i, y: 0, easing: quintOut}}  
-        out:fly={{ duration: 300 , y: 50, easing: quintOut}}                 
-        class="border-black dark:border-white justify-center mx-auto w-85% md:w-100% my-2"/>
-    {/each}    
-    </div>
-</div>
-</div>
-</div>  
-        </body>
+				<div class="md:pl-4 md:gap-1 flex md:h-50% flex-col place-items-start">
+					<div class="overflow-y-auto">
+						{#each proj as { name, date, desc, url, image, imdes }, i}
+							<a href={url}>
+								<!-- Gotta fix this, it's gonna look ugly when there are too many projects in the list... -->
+								<div
+									in:fly={{ delay: 350, duration: 300 * i, y: -50, easing: quintOut }}
+									out:fly={{ duration: 300, y: 50, easing: quintOut }}
+									class="flex flex-col p-2 rounded dark:hover:bg-#082f49 hover:bg-blue-100"
+								>
+									<div class="my-auto">
+										<div class="flex flex-row place-content-between">
+											<div
+												class="flex flex-col pl-4 md:pl-0 gap-3 my-auto py-2 text-left z-0 place-items-start"
+											>
+												<h3 class="text-3xl dark:text-white text-black text-center">{name}</h3>
+												<p class="text-sm dark:text-white text-black text-center">{date}</p>
+												<p class="dark:text-white text-black text-sm">{desc}</p>
+											</div>
+											<div
+												class="md:h-10% h-100% md:w-50 w-50 object-cover rounded backdrop-opacity-10 md:object-contain float-right z-10 overflow-hidden md:block hidden"
+												style="mask-image: linear-gradient(to left, rgba(0, 0, 0, 1.0) 50%, transparent 100%);"
+											>
+												<img
+													class="transition duration-600 top-0 opacity-50 scale-110 hover:opacity-75 object-cover md:object-contain hover:scale-120"
+													src={image}
+													alt={imdes}
+												/>
+											</div>
+										</div>
+									</div>
+								</div>
+							</a>
+							<hr
+								in:fly={{ delay: 300, duration: 500 * i, y: 0, easing: quintOut }}
+								out:fly={{ duration: 300, y: 50, easing: quintOut }}
+								class="border-black dark:border-white justify-center mx-auto w-85% md:w-100% my-2"
+							/>
+						{/each}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div></body
+>
diff --git a/src/routes/rss.xml/+server.ts b/src/routes/rss.xml/+server.ts
new file mode 100644
index 0000000..f076811
--- /dev/null
+++ b/src/routes/rss.xml/+server.ts
@@ -0,0 +1,35 @@
+import type { Post } from '$lib/types';
+
+export async function GET({ fetch }) {
+	const response = await fetch('api/posts');
+	const posts: Post[] = await response.json();
+
+	const headers = { 'Content-Type': 'application/xml' };
+
+	const xml = `
+		<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
+			<channel>
+				<title>Midou's blog</title>
+				<description>A blog covering about anything that comes into my mind!</description>
+				<link>https://midou.dev/</link>
+				<atom:link href="https://midou.dev/blog/rss.xml" rel="self" type="application/rss+xml"/>
+				${posts
+					.map(
+						(post) => `
+						<item>
+							<title>${post.title}</title>
+							<description>${post.description}</description>
+							<link>https://midou.dev/blog/${post.slug}</link>
+							<guid isPermaLink="true">https://midou.dev/blog/${post.slug}</guid>
+							<p> Since I am a dumbass, I don't know how to put the paragraph here! </p>
+							<pubDate>${new Date(post.date).toUTCString()}</pubDate>
+						</item>
+					`
+					)
+					.join('')}
+			</channel>
+		</rss>
+	`.trim();
+
+	return new Response(xml, { headers });
+}
diff --git a/svelte.config.js b/svelte.config.js
index e0d01c2..461b199 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,12 +1,39 @@
 // import adapter from '@sveltejs/adapter-auto';
 import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/kit/vite';
+import { mdsvex, escapeSvelte } from 'mdsvex';
+import shiki from 'shiki';
+import math from 'remark-math';
+import rehype from 'remark-rehype';
+//import rehypeMathjax from 'rehype-mathjax';
+import rehypeKatex from 'rehype-katex';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: vitePreprocess(),
+	preprocess: [
+		vitePreprocess(),
+		mdsvex({
+			extensions: ['.md', 'svx'],
+			layout: 'src/lib/blog/+post.svelte',
+			highlight: {
+				highlighter: async (code, lang = 'text') => {
+					const highlighter = await shiki.getHighlighter({ theme: 'dracula' });
+					const html = escapeSvelte(highlighter.codeToHtml(code, { lang }));
+					return `{@html \`${html}\` }`;
+				},
+				alias: {
+					js: 'javascript',
+					sh: 'bash',
+					glsl: 'glsl'
+				}
+			},
+			remarkPlugins: [[math, rehype]],
+			rehypePlugins: [[rehypeKatex]]
+		})
+	],
+	extensions: ['.svelte', '.md', '.svx'],
 
 	kit: {
 		adapter: adapter({
diff --git a/vite.config.ts b/vite.config.ts
index 14f5103..86e0264 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,19 +1,19 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import type { UserConfig } from 'vite';
-import { defineConfig } from "vite";
+//import { defineConfig } from 'vite';
 import UnoCSS from 'unocss/vite';
-import presetIcons from '@unocss/preset-icons';
-import presetWebFonts from '@unocss/preset-web-fonts'
-
-
+//import presetIcons from '@unocss/preset-icons';
+//import presetWebFonts from '@unocss/preset-web-fonts';
 
 const config: UserConfig = {
-	plugins: [sveltekit(), UnoCSS(),
+	plugins: [
+		sveltekit(),
+		UnoCSS()
 		/* Self note: Don't add a config between the (), it just overrides the external config. */
-],
+	],
 	optimizeDeps: {
-		include: ["dayjs/plugin/relativeTime.js"],
-	},
+		include: ['dayjs/plugin/relativeTime.js']
+	}
 };
 
 export default config;