Improved homepage

package-lock.json

@@ -23,6 +23,7 @@
         "eslint": "^7.32.0",
         "eslint-config-prettier": "^8.3.0",
         "eslint-plugin-svelte3": "^3.2.1",
+        "mdsvex": "^0.10.6",
         "postcss": "^8.4.5",
         "prettier": "^2.4.1",
         "prettier-plugin-svelte": "^2.4.0",
@@ -388,6 +389,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/unist": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
+      "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==",
+      "dev": true
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "5.20.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.20.0.tgz",
@@ -2177,6 +2184,21 @@
         "node": ">=12"
       }
     },
+    "node_modules/mdsvex": {
+      "version": "0.10.6",
+      "resolved": "https://registry.npmjs.org/mdsvex/-/mdsvex-0.10.6.tgz",
+      "integrity": "sha512-aGRDY0r5jx9+OOgFdyB9Xm3EBr9OUmcrTDPWLB7a7g8VPRxzPy4MOBmcVYgz7ErhAJ7bZ/coUoj6aHio3x/2mA==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "^2.0.3",
+        "prism-svelte": "^0.4.7",
+        "prismjs": "^1.17.1",
+        "vfile-message": "^2.0.4"
+      },
+      "peerDependencies": {
+        "svelte": "3.x"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -2546,6 +2568,21 @@
         "svelte": "^3.2.0"
       }
     },
+    "node_modules/prism-svelte": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/prism-svelte/-/prism-svelte-0.4.7.tgz",
+      "integrity": "sha512-yABh19CYbM24V7aS7TuPYRNMqthxwbvx6FF/Rw920YbyBWO3tnyPIqRMgHuSVsLmuHkkBS1Akyof463FVdkeDQ==",
+      "dev": true
+    },
+    "node_modules/prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/progress": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
@@ -3243,6 +3280,19 @@
         "node": ">=4.2.0"
       }
     },
+    "node_modules/unist-util-stringify-position": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
+      "integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "^2.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -3269,6 +3319,20 @@
       "resolved": "https://registry.npmjs.org/vanilla-tilt/-/vanilla-tilt-1.7.2.tgz",
       "integrity": "sha512-arf2wY2Y65rP6Zxve9PnUUnRl9nQ1KenPNae6QRaVq/PEvaIto2bC4jYirNJ19U7nLkzI1H9O+nYtcQlX7BTsA=="
     },
+    "node_modules/vfile-message": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
+      "integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-stringify-position": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/vite": {
       "version": "2.9.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.5.tgz",
@@ -3663,6 +3727,12 @@
         "@types/node": "*"
       }
     },
+    "@types/unist": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
+      "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==",
+      "dev": true
+    },
     "@typescript-eslint/eslint-plugin": {
       "version": "5.20.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.20.0.tgz",
@@ -4840,6 +4910,18 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "mdsvex": {
+      "version": "0.10.6",
+      "resolved": "https://registry.npmjs.org/mdsvex/-/mdsvex-0.10.6.tgz",
+      "integrity": "sha512-aGRDY0r5jx9+OOgFdyB9Xm3EBr9OUmcrTDPWLB7a7g8VPRxzPy4MOBmcVYgz7ErhAJ7bZ/coUoj6aHio3x/2mA==",
+      "dev": true,
+      "requires": {
+        "@types/unist": "^2.0.3",
+        "prism-svelte": "^0.4.7",
+        "prismjs": "^1.17.1",
+        "vfile-message": "^2.0.4"
+      }
+    },
     "merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -5082,6 +5164,18 @@
       "dev": true,
       "requires": {}
     },
+    "prism-svelte": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/prism-svelte/-/prism-svelte-0.4.7.tgz",
+      "integrity": "sha512-yABh19CYbM24V7aS7TuPYRNMqthxwbvx6FF/Rw920YbyBWO3tnyPIqRMgHuSVsLmuHkkBS1Akyof463FVdkeDQ==",
+      "dev": true
+    },
+    "prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "dev": true
+    },
     "progress": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
@@ -5538,6 +5632,15 @@
       "integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==",
       "dev": true
     },
+    "unist-util-stringify-position": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
+      "integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
+      "dev": true,
+      "requires": {
+        "@types/unist": "^2.0.2"
+      }
+    },
     "uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -5564,6 +5667,16 @@
       "resolved": "https://registry.npmjs.org/vanilla-tilt/-/vanilla-tilt-1.7.2.tgz",
       "integrity": "sha512-arf2wY2Y65rP6Zxve9PnUUnRl9nQ1KenPNae6QRaVq/PEvaIto2bC4jYirNJ19U7nLkzI1H9O+nYtcQlX7BTsA=="
     },
+    "vfile-message": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
+      "integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
+      "dev": true,
+      "requires": {
+        "@types/unist": "^2.0.0",
+        "unist-util-stringify-position": "^2.0.0"
+      }
+    },
     "vite": {
       "version": "2.9.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.5.tgz",

package.json

@@ -21,6 +21,7 @@
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-svelte3": "^3.2.1",
+    "mdsvex": "^0.10.6",
     "postcss": "^8.4.5",
     "prettier": "^2.4.1",
     "prettier-plugin-svelte": "^2.4.0",

src/lib/Socials.svelte

@@ -1,14 +1,10 @@
 <script>
 	import Social from "./footer/Social.svelte";
-	export let text = false;
+	export let type = "default";
 </script>
 
-<div class="grid {text ? "grid-cols-4" : "lg:grid-cols-6 grid-cols-3"} flex-wrap gap-3">
+{#if type == "default"}
-	{#if text}
+<div class="grid lg:grid-cols-5 grid-cols-1 flex-wrap gap-3">
-		<div class="col-span-2 items-center justify-center flex text-xl font-bold rounded-xl bg-opacity-50 bg-slate-300 dark:bg-slate-800 duration-150 shadow">
-			Social Profiles
-		</div>
-	{/if}
 	<Social
 		url="https://twitter.com/midblep"
 		title="The Bird App"
@@ -39,9 +35,88 @@
 		icon="✉️"
 		text="E-Mail"
 	/>
-	{#if text}
-		<div class="col-span-1 items-center justify-center flex text-xl font-bold rounded-xl bg-opacity-50 bg-slate-300 dark:bg-slate-800 duration-150 shadow">
-			// EOL
-		</div>
-	{/if}
 </div>
+
+{:else if type == "grid"}
+<div class="grid grid-cols-4 flex-wrap gap-3">
+	<div class="col-span-2 items-center justify-center flex text-xl font-bold rounded-xl bg-opacity-50 bg-slate-300 dark:bg-slate-800 duration-150 shadow">
+		Social Profiles
+	</div>
+	<Social
+		url="https://twitter.com/midblep"
+		title="The Bird App"
+		icon="🐦"
+		text="Twitter"
+	/>
+	<Social
+		url="https://gitlab.com/midblep"
+		title="GitLab"
+		icon="🦊"
+		text="GitLab"
+	/>
+	<Social
+		url="https://github.com/midblep"
+		title="Very new, mostly empty"
+		icon="🐙"
+		text="GitHub"
+	/>
+	<Social
+		url="https://discord.com/users/191525900880183296"
+		title="Mid#0001"
+		icon="💬"
+		text="Discord"
+	/>
+	<Social
+		url="mailto:mrrmiddynight@gmail.com"
+		title="mrrmiddynight@gmail.com"
+		icon="✉️"
+		text="E-Mail"
+	/>
+	<div class="col-span-1 items-center justify-center flex text-xl font-bold rounded-xl bg-opacity-50 bg-slate-300 dark:bg-slate-800 duration-150 shadow">
+		// EOL
+	</div>
+</div>
+{:else if type == "list"}
+<div class="grid grid-cols-1 flex-wrap gap-3">
+	<Social
+		url="https://twitter.com/midblep"
+		title="The Bird App"
+		icon="🐦"
+		text="Twitter"
+		justify="start"
+		align="left"
+	/>
+	<Social
+		url="https://gitlab.com/midblep"
+		title="GitLab"
+		icon="🦊"
+		text="GitLab"
+		justify="start"
+		align="left"
+	/>
+	<Social
+		url="https://github.com/midblep"
+		title="Very new, mostly empty"
+		icon="🐙"
+		text="GitHub"
+		justify="start"
+		align="left"
+	/>
+	<Social
+		url="https://discord.com/users/191525900880183296"
+		title="Mid#0001"
+		icon="💬"
+		text="Discord"
+		justify="start"
+		align="left"
+	/>
+	<Social
+		url="mailto:mrrmiddynight@gmail.com"
+		title="mrrmiddynight@gmail.com"
+		icon="✉️"
+		text="E-Mail"
+		justify="start"
+		align="left"
+	/>
+</div>
+{/if}

src/lib/footer/Footer.svelte

@@ -21,14 +21,14 @@
 		<img src="/homepage/fullbody.png" class="lg:block hidden lg:h-[500px] z-10" alt="contact" />
 	</section>
 
-	<hr class="container" />
+	<hr class="container my-10 lg:my-10 opacity-10" />
 
 	<section
 		class="container flex flex-col-reverse lg:flex-row justify-between gap-10"
 	>
 		<div class="flex flex-col gap-3">
-			<h4 class="text-xl font-bold baron-light">Bart Industries</h4>
+			<h4 class="text-2xl font-bold">Bart Industries</h4>
-			<p class="text-xs">Copyright 2022 Mid // Midblep. All rights reserved.</p>
+			<p class="text-sm">Copyright 2022 Pascal van Ginkel. All rights reserved.</p>
 		</div>
 	</section>
 </footer>

src/lib/footer/Social.svelte

@@ -3,6 +3,8 @@
 	export let icon;
 	export let url;
 	export let title;
+	export let align = "center";
+	export let justify = "center";
 
 	if (title == null) title = text;
 </script>
@@ -13,8 +15,8 @@
 	target="_blank"
 	class="rounded-xl bg-opacity-50 hover:bg-opacity-100 bg-slate-300 dark:bg-slate-800 hover:bg-blue-400 dark:hover:bg-blue-600 hover:scale-110 duration-150 shadow"
 >
-	<div class="flex flex-col gap-1 items-center justify-center p-3 lg:p-5">
+	<div class="flex flex-wrap gap-1 items-center justify-{justify} p-3 lg:p-5">
-		<span class="text-xl lg:text-5xl">{icon}</span>
+		<span class="text-2xl lg:text-5xl">{icon}</span>
-		<span class="text-gray-700 dark:text-gray-300 font-light text-xs lg:text-base text-center">{text}</span>
+		<span class="text-gray-700 dark:text-gray-300 font-light text-base lg:text-lg text-{align}">{text}</span>
 	</div>
 </a>

src/lib/header/Nav.svelte

@@ -16,8 +16,8 @@
 		</a>
 		<div class="hidden lg:flex h-16">
 			<NavButton url="/" text="Home" />
-			<NavButton url="#portfolio" text="Portfolio" />
 			<NavButton url="#blog" text="Blog" />
+			<NavButton url="#portfolio" text="Portfolio" />
 			<NavButton url="#furry" text="Furry" />
 			<NavButton url="#contact" text="Contact" />
 		</div>
@@ -28,8 +28,8 @@
 	<div class="flex lg:hidden h-16">
 		<NavDropdown text="🍔">
 			<NavButton url="/" text="Home" />
-			<NavButton url="#portfolio" text="Portfolio" />
 			<NavButton url="#blog" text="Blog" />
+			<NavButton url="#portfolio" text="Portfolio" />
 			<NavButton url="#furry" text="Furry" />
 			<NavButton url="#contact" text="Contact" />
 			<hr class="bg-white" />

src/lib/home/Banner.svelte

@@ -52,19 +52,19 @@
 		"Wordpress",
 		"Vercel",
 		"Netlify",
-		"AWS S3"
+		"AWS S3",
 	];
 
 	onMount(() => {
 		for(let j = 0; j < 20; j++) {
 			let list = document.createElement('div');
-			list.classList.add('flex', 'gap-2');
+			list.classList.add('flex', "gap-2");
 
 			for (let i = 0; i < 20; i++) {
 				const word = words[Math.floor(Math.random() * words.length)];
 				let element = document.createElement('span');
 				element.innerHTML = word;
-				element.classList.add("text-9xl", "p-10");
+				element.classList.add("text-9xl", "p-10", "whitespace-nowrap");
 
 				list.appendChild(element);
 			}
@@ -77,25 +77,25 @@
 	randomBannerPic = "/homepage/banner.png";
 </script>
 
-<main class="flex flex-col lg:flex-row gap-5 items-center pt-5 pb-52 justify-between px-6 lg:px-20 relative z-0 overflow-hidden">
+<main class="flex flex-col lg:flex-row gap-5 items-center pt-5 pb-52 justify-between px-6 lg:px-20 relative z-0 overflow-hidden lg:h-screen">
 	<div class="absolute inset-0 w-full h-screen flex flex-col items-center gap-1 justify-center font-bold anim" id="lists">
 	</div>
 
-	<div class="flex lg:mx-20 gap-10 items-center pt-5 pb-96 px-6 lg:px-20">
+	<div class="flex h-full pt-10 gap-20 px-5 lg:px-0">
-		<div class="hidden lg:block h-full w-1/3 z-10">
+		<div class="hidden lg:block h-full lg:w-1/3 z-10">
 			<img
 				src={randomBannerPic}
 				alt="mid"
 			/>
 		</div>
 
-		<div class="flex flex-col gap-10 justify-center lg:w-4/12 z-10">
+		<div class="flex flex-col h-full gap-10 lg:w-1/3 lg:min-w-[900px] z-10">
 			<span>
 				<img src="/helloblue.png" alt="Hello!" class="h-20 popout" />
 			</span>
 
 			<span class="flex flex-wrap gap-2 items-end">
-				<h2 class="text-4xl font-extrabold relative">I'm Midnight,</h2>
+				<h2 class="text-4xl font-extrabold">I'm Midnight,</h2>
 				<span class="text-3xl font-extralight">
 					and I like to make things on the web
 				</span>
@@ -103,28 +103,30 @@
 
 			<hr class="w-1/4" />
 
-			<p class="text-gray-800 dark:text-gray-300 text-lg">
+			<p class="text-gray-800 dark:text-gray-300 text-lg max-w-[900px]">
-				Bart Industries is an online collection of me such as my socials, work experiences,
+				Bart Industries is my public digital home. A collection of my socials, work experiences,
 				past-time projects, artworks and hobbies, random blogposts, fursonas and anything else I feel proud enough of to share.
 				<br/><br/>
-				For my skills and experiences I implore you to visit my <a href="#portfolio" class="a">portfolio section</a>, but
+				For my skills and experiences I implore you to visit my <a href="#portfolio" class="a">portfolio section</a>,
-				I am always excited to explore other technologies and have new experiences.
+				I am always excited to explore new technologies and opportunities.
 				<br/><br/>
-				I am open to new opportunities and am always eager to work,
+				If you are interested in my work or want to contact me
-				you can reach out using one of the methods below or <a href="#contact" class="a">the contact form</a>.
+				you can reach out via one of my socials below or send me an email via the <a href="#contact" class="a">contact form</a>.
 			</p>
 
 			<hr class="w-1/4" />
 
-			<Socials />
+			<div class="max-w-[700px]">
+				<Socials type="default" />
+			</div>
 		</div>
-
-		<span class="flex absolute left-0 bottom-0 w-full justify-center mb-40 z-50 text-8xl float text-blue-600">
-			<img src="/downarrow.png" class="w-10" />
-		</span>
 	</div>
 
-	<div class="w-screen absolute bottom-0 left-0">
+	<span class="hidden lg:flex absolute left-0 bottom-0 w-full justify-center mb-20 z-50 text-8xl float text-blue-600">
+		<img src="/downarrow.png" class="w-10" />
+	</span>
+
+	<div class="w-screen absolute bottom-0 left-0 lg:-mb-20">
 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
 			<path
 				class="block dark:hidden"

src/lib/home/Card.svelte

@@ -9,7 +9,7 @@
 <div class={classes}>
 	<span class="h-4 group-hover:-translate-y-1 bg-blue-600 rounded-t-xl duration-300"></span>
 
-	<div class="flex-grow flex flex-col gap-2 w-full relative p-10 group-hover:-translate-y-1 duration-300 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700">
+	<div class="flex-grow flex flex-col gap-5 w-full relative p-10 group-hover:-translate-y-1 duration-300 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700">
 		<slot />
 	</div>
 

src/lib/home/Form.svelte

@@ -17,7 +17,7 @@
 <main class="flex flex-col gap-10 w-full">
 	<img src="/homepage/contact.png" class="w-60 mb-2" alt="fullbody of mid" />
 
-	<article class="flex gap-10">
+	<article class="flex flex-col lg:flex-row gap-5 lg:gap-10">
 		<section
 			class="bg-slate-300 bg-opacity-50 dark:bg-slate-800 p-10 rounded-xl shadow w-full flex flex-col gap-5 lg:w-1/3"
 		>
@@ -88,7 +88,7 @@
 			</form>
 		</section>
 
-		<div class="w-1/3"><Socials text={true} /></div>
+		<div class="lg:w-1/3"><Socials type="grid" /></div>
 	</article>
 </main>
 

src/lib/home/Sona.svelte

@@ -1,7 +1,7 @@
 <main class="container flex flex-col gap-20 py-20 relative">
 	<div class="absolute top-0 -mt-20" id="furry"></div>
 
-	<section class="w-full h-full flex justify-between gap-20">
+	<section class="w-full h-full flex flex-col lg:flex-row px-5 lg:px-0 justify-between gap-10 lg:gap-20">
 		<!-- <div class="absolute inset-0 blur-xl overflow-hidden">
 			<img src="/furry/Background.png" class="w-full scale-110" alt="background" />
 		</div> -->
@@ -21,7 +21,7 @@
 		</article>
 
 		<section class="w-full h-full flex flex-col gap-5 text-center">
-			<img src="/VRChat_1920x1080_2022-06-12_00-59-32.363.png" class="rounded-xl shadow-xl hover:-rotate-2 hover:scale-105 duration-300"/>
+			<img src="/VRChat_1920x1080_2022-06-12_00-59-32.363.png" class="rounded-xl shadow-xl hover:-rotate-1 hover:scale-105 duration-300"/>
 			<p class="text-sm text-zinc-700 dark:text-zinc-300">Picture from the SocialVR game VRChat showing the 3D model of Mid.</p>
 		</section>
 	</section>

src/routes/blog/__layout.svelte

@@ -0,0 +1,3 @@
+<main class="container py-20">
+    <slot/>
+</main>

src/routes/blog/blog.md

@@ -0,0 +1,15 @@
+# Uses
+
+**Here's some stuff I use**
+
+- SvelteKit
+- VS Code
+- Emojis 😎
+
+```js
+// JavaScript goes here,
+// And will be syntax-highlighted!
+function main() {
+    lol
+}
+```

src/routes/index.svelte

@@ -12,10 +12,11 @@ import Sona from "$lib/home/Sona.svelte";
 <main class="overflow-x-hidden flex flex-col gap-20">
 	<Banner />
 
-	<section class="bg-gray-200 pb-40 -mt-20 dark:bg-gray-800 z-20 relative">
+	<section class="pb-40 -mt-20 z-20 relative bg-gray-200 dark:bg-gray-800">
 		<div class="absolute top-0 -mt-40" id="blog"></div>
 		<div class="container px-5 flex flex-col gap-10 justify-center">
-			Latest posts
+			<h2 class="text-2xl font-bold">🚧 Blog under construction 🏗️</h2>
+			<p>No posts available...</p>
 		</div>
 	</section>
 
@@ -47,6 +48,7 @@ import Sona from "$lib/home/Sona.svelte";
 						Flame Software is a Software-as-a-Service company that is developing a new communications app
 						that intends to revolutionize the way we talk and socialize online.
 						Our mission is to make the net more connected, more privacy focused, and more healthy for your mind.
+						<br/><br/>
 						We are currently in our early development stage, where I work as the CTO to lay down the groundworks
 						for this new app, which will be built using a combination of languages like Rust and TypeScript.
 					</p>
@@ -78,6 +80,26 @@ import Sona from "$lib/home/Sona.svelte";
 						You may find a beta release public at <a target="_blank" class="a" href="https://beta.puppypride.social">beta.puppypride.social</a>.
 					</p>
 				</Card>
+
+				<Card
+					buttonHref="https://saxion.nl"
+					buttonText="🎓 Open Website"
+				>
+					<h3
+						class="text-xl font-bold inline-flex items-center gap-3"
+					>
+						<img
+							src="/saxion.png"
+							class="h-8 rounded-full"
+							alt="puppypride"
+						/> Saxion University
+					</h3>
+					<p class="text-sm text-gray-800 dark:text-gray-100">
+						I am a year 3 student at the Saxion University of Applied Sciences in The Netherlands doing majoring in Software Engineering, which takes a lot of my weekly time.
+						<br/><br/>
+						Even though the university has taught me much about the business life and how to professionally work in teams, nearly all my programming knowledge is self taught at home.
+					</p>
+				</Card>
 			</div>
 
 			<div class="flex flex-col gap-5 pt-10">

svelte.config.js

@@ -1,9 +1,18 @@
 import adapter from '@sveltejs/adapter-auto';
 import preprocess from 'svelte-preprocess';
 
+import { mdsvex } from 'mdsvex';
+
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	preprocess: preprocess(),
+	extensions: ['.svelte', '.md'],
+
+	preprocess: [
+		preprocess(),
+		mdsvex({
+			extensions: ['.md']
+		})
+	],
 
 	kit: {
 		adapter: adapter()