diff --git a/public/images/socials/arrow-icon.svg b/public/images/socials/arrow-icon.svg
new file mode 100644
index 0000000..2521a23
--- /dev/null
+++ b/public/images/socials/arrow-icon.svg
@@ -0,0 +1,13 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="32"
+    height="32"
+    viewBox="0 0 46.652 46.652"
+>
+    <path
+        id="Icon_ionic-md-arrow-back"
+        data-name="Icon ionic-md-arrow-back"
+        d="M32.988,14.432H7.938L19.484,2.886,16.494,0,0,16.494,16.494,32.988,19.38,30.1,7.938,18.556h25.05Z"
+        transform="translate(46.652 23.326) rotate(135)"
+        fill="#fff"></path>
+</svg>
\ No newline at end of file
diff --git a/public/images/socials/date-time.svg b/public/images/socials/date-time.svg
new file mode 100644
index 0000000..de6f754
--- /dev/null
+++ b/public/images/socials/date-time.svg
@@ -0,0 +1,14 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="size-10"
+>
+    <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+    ></path>
+</svg>
\ No newline at end of file
diff --git a/public/images/socials/discord.svg b/public/images/socials/discord.svg
new file mode 100644
index 0000000..34903c2
--- /dev/null
+++ b/public/images/socials/discord.svg
@@ -0,0 +1,23 @@
+<svg
+    width="48px"
+    height="48px"
+    viewBox="0 0 1024 1024"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="#000000"
+    ><g id="SVGRepo_bgCarrier" stroke-width="0"
+    ></g><g
+        id="SVGRepo_tracerCarrier"
+        stroke-linecap="round"
+        stroke-linejoin="round"></g><g
+        id="SVGRepo_iconCarrier"
+    >
+        <circle
+            cx="512"
+            cy="512"
+            r="512"
+            style="fill:#5865f2"></circle>
+        <path
+            d="M689.43 349a422.21 422.21 0 0 0-104.22-32.32 1.58 1.58 0 0 0-1.68.79 294.11 294.11 0 0 0-13 26.66 389.78 389.78 0 0 0-117.05 0 269.75 269.75 0 0 0-13.18-26.66 1.64 1.64 0 0 0-1.68-.79A421 421 0 0 0 334.44 349a1.49 1.49 0 0 0-.69.59c-66.37 99.17-84.55 195.9-75.63 291.41a1.76 1.76 0 0 0 .67 1.2 424.58 424.58 0 0 0 127.85 64.63 1.66 1.66 0 0 0 1.8-.59 303.45 303.45 0 0 0 26.15-42.54 1.62 1.62 0 0 0-.89-2.25 279.6 279.6 0 0 1-39.94-19 1.64 1.64 0 0 1-.16-2.72c2.68-2 5.37-4.1 7.93-6.22a1.58 1.58 0 0 1 1.65-.22c83.79 38.26 174.51 38.26 257.31 0a1.58 1.58 0 0 1 1.68.2c2.56 2.11 5.25 4.23 8 6.24a1.64 1.64 0 0 1-.14 2.72 262.37 262.37 0 0 1-40 19 1.63 1.63 0 0 0-.87 2.28 340.72 340.72 0 0 0 26.13 42.52 1.62 1.62 0 0 0 1.8.61 423.17 423.17 0 0 0 128-64.63 1.64 1.64 0 0 0 .67-1.18c10.68-110.44-17.88-206.38-75.7-291.42a1.3 1.3 0 0 0-.63-.63zM427.09 582.85c-25.23 0-46-23.16-46-51.6s20.38-51.6 46-51.6c25.83 0 46.42 23.36 46 51.6.02 28.44-20.37 51.6-46 51.6zm170.13 0c-25.23 0-46-23.16-46-51.6s20.38-51.6 46-51.6c25.83 0 46.42 23.36 46 51.6.01 28.44-20.17 51.6-46 51.6z"
+            style="fill:#fff"></path>
+    </g></svg
+>
\ No newline at end of file
diff --git a/public/images/socials/location.svg b/public/images/socials/location.svg
new file mode 100644
index 0000000..964d677
--- /dev/null
+++ b/public/images/socials/location.svg
@@ -0,0 +1,21 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="size-10"
+    width="40"
+    height="40"
+>
+    <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+    ></path>
+    <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"
+    ></path>
+</svg>
\ No newline at end of file
diff --git a/public/images/socials/profile.webp b/public/images/socials/profile.webp
new file mode 100644
index 0000000..b808d9c
Binary files /dev/null and b/public/images/socials/profile.webp differ
diff --git a/public/images/socials/website-icon.svg b/public/images/socials/website-icon.svg
new file mode 100644
index 0000000..d920649
--- /dev/null
+++ b/public/images/socials/website-icon.svg
@@ -0,0 +1,19 @@
+<svg
+    fill="#fff"
+    width="26px"
+    height="26px"
+    viewBox="0 0 32 32"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    ><g id="SVGRepo_bgCarrier" stroke-width="0"
+    ></g><g
+        id="SVGRepo_tracerCarrier"
+        stroke-linecap="round"
+        stroke-linejoin="round"></g><g
+        id="SVGRepo_iconCarrier"
+    >
+        <path
+            d="M32.032 16c0-8.501-6.677-15.472-15.072-15.969-0.173-0.019-0.346-0.032-0.523-0.032-0.052 0-0.104 0.005-0.156 0.007-0.093-0.002-0.186-0.007-0.281-0.007-8.84 0-16.032 7.178-16.032 16.001s7.192 16.001 16.032 16.001c0.094 0 0.188-0.006 0.281-0.008 0.052 0.002 0.104 0.008 0.156 0.008 0.176 0 0.349-0.012 0.523-0.032 8.395-0.497 15.072-7.468 15.072-15.969zM29.049 21.151c-0.551-0.16-1.935-0.507-4.377-0.794 0.202-1.381 0.313-2.84 0.313-4.357 0-1.196-0.069-2.354-0.197-3.469 3.094-0.37 4.45-0.835 4.54-0.867l-0.372-1.050c0.695 1.659 1.080 3.478 1.080 5.386 0 1.818-0.352 3.555-0.987 5.151zM8.921 16c0-1.119 0.074-2.212 0.21-3.263 1.621 0.127 3.561 0.222 5.839 0.243v6.939c-2.219 0.021-4.114 0.111-5.709 0.234-0.22-1.319-0.34-2.715-0.34-4.154zM16.967 2.132c2.452 0.711 4.552 4.115 5.492 8.628-1.512 0.12-3.332 0.209-5.492 0.229v-8.857zM14.971 2.156v8.832c-2.136-0.021-3.965-0.109-5.502-0.226 0.96-4.457 3.076-7.836 5.502-8.606zM14.971 21.913l0 7.929c-2.263-0.718-4.256-3.705-5.293-7.719 1.492-0.11 3.253-0.189 5.292-0.21zM16.967 29.868l-0-7.955c2.061 0.020 3.814 0.102 5.288 0.217-1.019 4.067-3 7.076-5.288 7.738zM16.967 19.92l0-6.939c2.291-0.021 4.218-0.118 5.818-0.25 0.131 1.053 0.203 2.147 0.203 3.268 0 1.442-0.116 2.84-0.329 4.16-1.575-0.128-3.462-0.219-5.692-0.24zM28.588 9.81c-0.302 0.094-1.564 0.453-4.094 0.751-0.564-2.998-1.584-5.561-2.91-7.412 3.048 1.325 5.535 3.697 7.005 6.661zM11.213 2.831c-1.632 1.873-2.963 4.568-3.691 7.754-2.265-0.245-3.623-0.534-4.166-0.665 1.585-3.27 4.407-5.836 7.856-7.088zM2.614 11.787c0.385 0.104 1.841 0.467 4.549 0.766-0.155 1.107-0.24 2.26-0.24 3.447 0 1.509 0.136 2.96 0.383 4.334-2.325 0.251-3.755 0.552-4.396 0.706-0.607-1.566-0.944-3.264-0.944-5.041 0-1.467 0.228-2.883 0.649-4.213zM3.784 22.886c0.727-0.154 2.029-0.39 3.956-0.591 0.759 2.803 1.993 5.175 3.473 6.874-3.16-1.148-5.79-3.398-7.429-6.282v0zM21.583 28.849c1.195-1.665 2.14-3.907 2.728-6.525 1.982 0.227 3.226 0.494 3.853 0.652-1.5 2.596-3.808 4.669-6.581 5.873z"
+        ></path>
+    </g></svg
+>
\ No newline at end of file
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
deleted file mode 100644
index 6e662b5..0000000
--- a/src/pages/blog/[...slug].astro
+++ /dev/null
@@ -1,134 +0,0 @@
----
-import { getCollection } from "astro:content";
-import BackToBlogs from "../../components/blog/BackToBlogs.astro";
-import Layout from "../../layouts/Layout.astro";
-import Footer from "../../components/global/FooterComponent.astro";
-
-export async function getStaticPaths() {
-	const blogEntries = await getCollection("blog");
-	return blogEntries.map((entry) => ({
-		params: { slug: entry.slug },
-		props: { entry },
-	}));
-}
-
-const { entry } = Astro.props;
-const { Content } = await entry.render();
----
-
-<Layout
-	title="Blog"
-	description="Find out how to contact RythonDev, for sponsorship offers or collaboration opportunities!"
->
-	<BackToBlogs />
-	<div id="blog-content-component" class="mx-auto mt-10 pt-10">
-		<h1 class="text-left text-4xl">{entry.data.title}</h1>
-		<p class="mt-3 text-lg text-gray-200">
-			Published
-			{
-				new Date(entry.data.pubDate).toLocaleDateString("en-UK", {
-					day: "numeric",
-					month: "long",
-					year: "numeric",
-				})
-			}
-		</p>
-		<p class="text-lg text-gray-200">by {entry.data.author}</p>
-		<p class="text-lg text-white">{entry.data.description}</p>
-
-		<div class="flex flex-row flex-wrap items-start justify-start">
-			{
-				entry.data.tags?.map((tag) => (
-					<div class="mr-2 rounded-xl border-2 border-solid border-gray-500 bg-[#282828] px-3 py-1 transition-colors duration-150 hover:border-white hover:bg-gray-300 hover:text-black">
-						{tag}
-					</div>
-				))
-			}
-		</div>
-
-		<hr class="my-5" />
-
-		<Content />
-	</div>
-	<div class="mt-10">
-		<Footer />
-	</div>
-</Layout>
-
-<style is:inline>
-	#blog-content-component {
-		width: clamp(310px, 60vw, 800px);
-	}
-
-	a:not(#navbar-div a) {
-		color: lightskyblue;
-		text-decoration: underline;
-		cursor: pointer;
-	}
-
-	p {
-		display: block;
-		font-size: 1.1rem;
-		margin-top: 1em;
-		margin-bottom: 1em;
-		margin-left: 0;
-		margin-right: 0;
-	}
-
-	h1 {
-		display: block;
-		font-size: 2em;
-		margin-top: 0.67em;
-		margin-bottom: 0.67em;
-		margin-left: 0;
-		margin-right: 0;
-		font-weight: bold;
-	}
-
-	h2 {
-		display: block;
-		font-size: 1.5em;
-		margin-top: 0.83em;
-		margin-bottom: 0.83em;
-		margin-left: 0;
-		margin-right: 0;
-		font-weight: bold;
-	}
-
-	h3 {
-		display: block;
-		font-size: 1.17em;
-		margin-top: 1em;
-		margin-bottom: 1em;
-		margin-left: 0;
-		margin-right: 0;
-		font-weight: bold;
-	}
-
-	ul {
-		display: block;
-		list-style-type: disc;
-		margin-left: 0;
-		margin-right: 0;
-		margin-bottom: 0.5em;
-		padding-left: 40px;
-	}
-
-	ul:not(ul ul) {
-		margin-top: 0.5em;
-	}
-
-	li {
-		display: list-item;
-	}
-
-	ol {
-		display: block;
-		list-style-type: decimal;
-		margin-top: 1em;
-		margin-bottom: 1em;
-		margin-left: 0;
-		margin-right: 0;
-		padding-left: 40px;
-	}
-</style>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
deleted file mode 100644
index ed84bac..0000000
--- a/src/pages/blog/index.astro
+++ /dev/null
@@ -1,81 +0,0 @@
----
-import Layout from "../../layouts/Layout.astro";
-import Card from "../../components/global/Card.astro";
-import Footer from "../../components/global/FooterComponent.astro";
-import { getCollection } from "astro:content";
-
-const blogPosts = await getCollection("blog");
----
-
-<Layout
-	title="Blog"
-	description="Find out how to contact RythonDev, for sponsorship offers or collaboration opportunities!"
->
-	<div id="blog-component" class="mt-10 pt-20">
-		<h1 class="text-center text-5xl">Blog</h1>
-		<div class="mt-10 flex flex-col items-center justify-center">
-			<div style="width: clamp(310px, 50vw, 800px);" class="mb-10">
-				<p class="text-center text-lg">
-					This is where I upload my blogs. No paywalls, no ads, no
-					bullshit.
-				</p>
-			</div>
-
-			<!-- Series of blog posts -->
-			<div style="width: clamp(310px, 50vw, 800px);">
-				{
-					blogPosts.map((blog) => (
-						<a class="group mb-5" href={`/blog/${blog.slug}`}>
-							<Card
-								primaryColor={
-									blog.data.color ?? "rgba(0,0,0,0)"
-								}
-								pixelHeight="50px"
-							>
-								<div class="card-content relative px-8 py-3 text-left">
-									<h2 class="mb-1 text-xl font-bold">
-										{blog.data.title}
-									</h2>
-									<p class="line-clamp-2">
-										{blog.data.description}
-									</p>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										fill="none"
-										viewBox="0 0 24 24"
-										stroke-width="1.5"
-										class="absolute top-3 right-3 size-6 stroke-white transition-all duration-150 group-hover:top-2 group-hover:right-2 group-hover:stroke-green-400"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
-										/>
-									</svg>
-								</div>
-							</Card>
-						</a>
-					))
-				}
-			</div>
-		</div>
-	</div>
-	<div class="mt-10">
-		<Footer />
-	</div>
-</Layout>
-
-<style>
-	.card-content {
-		display: flex;
-		flex-direction: column;
-		background-image: radial-gradient(
-			rgba(255, 255, 255, 0.1) 1px,
-			transparent 1px
-		);
-		background-position: 50% 50%;
-		background-size: 1.1rem 1.1rem;
-		border-radius: 1.25rem;
-		overflow: hidden;
-	}
-</style>