diff --git a/src/lib/assets/logos/GiteaLogo.svelte b/src/lib/assets/logos/GiteaLogo.svelte
new file mode 100644
index 0000000..7a21aae
--- /dev/null
+++ b/src/lib/assets/logos/GiteaLogo.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	export let clazz = 'w-8 md:w-14 ';
+</script>
+
+<svg class={clazz} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"
+	><path
+		d="M395.9 484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5 21.2-17.9 33.8-11.8 17.2 8.3 27.1 13 27.1 13l-.1-109.2 16.7-.1.1 117.1s57.4 24.2 83.1 40.1c3.7 2.3 10.2 6.8 12.9 14.4 2.1 6.1 2 13.1-1 19.3l-61 126.9c-6.2 12.7-21.4 18.1-33.9 12z"
+		fill="#fff"
+	/><g fill="#609926"
+		><path
+			d="M622.7 149.8c-4.1-4.1-9.6-4-9.6-4s-117.2 6.6-177.9 8c-13.3.3-26.5.6-39.6.7v117.2c-5.5-2.6-11.1-5.3-16.6-7.9 0-36.4-.1-109.2-.1-109.2-29 .4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5c-9.8-.6-22.5-2.1-39 1.5-8.7 1.8-33.5 7.4-53.8 26.9C-4.9 212.4 6.6 276.2 8 285.8c1.7 11.7 6.9 44.2 31.7 72.5 45.8 56.1 144.4 54.8 144.4 54.8s12.1 28.9 30.6 55.5c25 33.1 50.7 58.9 75.7 62 63 0 188.9-.1 188.9-.1s12 .1 28.3-10.3c14-8.5 26.5-23.4 26.5-23.4S547 483 565 451.5c5.5-9.7 10.1-19.1 14.1-28 0 0 55.2-117.1 55.2-231.1-1.1-34.5-9.6-40.6-11.6-42.6zM125.6 353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6 321.8 60 295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5 38.5-30c13.8-3.7 31-3.1 31-3.1s7.1 59.4 15.7 94.2c7.2 29.2 24.8 77.7 24.8 77.7s-26.1-3.1-43-9.1zm300.3 107.6s-6.1 14.5-19.6 15.4c-5.8.4-10.3-1.2-10.3-1.2s-.3-.1-5.3-2.1l-112.9-55s-10.9-5.7-12.8-15.6c-2.2-8.1 2.7-18.1 2.7-18.1L322 273s4.8-9.7 12.2-13c.6-.3 2.3-1 4.5-1.5 8.1-2.1 18 2.8 18 2.8L467.4 315s12.6 5.7 15.3 16.2c1.9 7.4-.5 14-1.8 17.2-6.3 15.4-55 113.1-55 113.1z"
+		/><path
+			d="M326.8 380.1c-8.2.1-15.4 5.8-17.3 13.8-1.9 8 2 16.3 9.1 20 7.7 4 17.5 1.8 22.7-5.4 5.1-7.1 4.3-16.9-1.8-23.1l24-49.1c1.5.1 3.7.2 6.2-.5 4.1-.9 7.1-3.6 7.1-3.6 4.2 1.8 8.6 3.8 13.2 6.1 4.8 2.4 9.3 4.9 13.4 7.3.9.5 1.8 1.1 2.8 1.9 1.6 1.3 3.4 3.1 4.7 5.5 1.9 5.5-1.9 14.9-1.9 14.9-2.3 7.6-18.4 40.6-18.4 40.6-8.1-.2-15.3 5-17.7 12.5-2.6 8.1 1.1 17.3 8.9 21.3 7.8 4 17.4 1.7 22.5-5.3 5-6.8 4.6-16.3-1.1-22.6 1.9-3.7 3.7-7.4 5.6-11.3 5-10.4 13.5-30.4 13.5-30.4.9-1.7 5.7-10.3 2.7-21.3-2.5-11.4-12.6-16.7-12.6-16.7-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3 4.7-9.7 9.4-19.3 14.1-29-4.1-2-8.1-4-12.2-6.1-4.8 9.8-9.7 19.7-14.5 29.5-6.7-.1-12.9 3.5-16.1 9.4-3.4 6.3-2.7 14.1 1.9 19.8l-24.6 50.4z"
+		/></g
+	></svg
+>
diff --git a/src/lib/assets/logos/MatrixLogo.svelte b/src/lib/assets/logos/MatrixLogo.svelte
new file mode 100644
index 0000000..c74e5b7
--- /dev/null
+++ b/src/lib/assets/logos/MatrixLogo.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { modeCurrent } from '@skeletonlabs/skeleton';
+	let clazz = 'w-6 md:w-12';
+	let fillStyle = 'fill: #000000';
+	$: {
+		fillStyle = $modeCurrent ? 'fill: #000000' : 'fill: #ffffff';
+	}
+</script>
+
+<svg class={clazz} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+	<path style={fillStyle} d="M 30,2.0000001 V 30 h -1 -2 v 2 h 5 V -3.3333334e-8 L 27,0 v 2 z" />
+	<path
+		style={fillStyle}
+		d="M 9.9515939,10.594002 V 12.138 h 0.043994 c 0.3845141,-0.563728 0.8932271,-1.031728 1.4869981,-1.368 0.580003,-0.322998 1.244999,-0.485 1.993002,-0.485 0.72,0 1.376999,0.139993 1.971998,0.42 0.595,0.279004 1.047001,0.771001 1.355002,1.477001 0.338003,-0.500001 0.795999,-0.941 1.376999,-1.323001 0.579999,-0.382998 1.265998,-0.574 2.059998,-0.574 0.602003,0 1.160002,0.074 1.674002,0.220006 0.514,0.148006 0.953998,0.382998 1.321999,0.706998 0.36601,0.322999 0.653001,0.746 0.859,1.268002 0.205001,0.521998 0.307994,1.15 0.307994,1.887001 v 7.632997 h -3.127 v -6.463997 c 0,-0.383002 -0.01512,-0.743002 -0.04399,-1.082003 -0.02079,-0.3072 -0.103219,-0.607113 -0.242003,-0.881998 -0.133153,-0.25081 -0.335962,-0.457777 -0.584001,-0.596002 -0.257008,-0.146003 -0.605998,-0.220006 -1.046997,-0.220006 -0.440002,0 -0.796003,0.085 -1.068,0.253002 -0.272013,0.170003 -0.485001,0.390002 -0.639001,0.662003 -0.159119,0.287282 -0.263585,0.601602 -0.307994,0.926997 -0.05197,0.346923 -0.07801,0.697217 -0.07801,1.048002 v 6.353999 h -3.128005 v -6.398 c 0,-0.338003 -0.0072,-0.673001 -0.02116,-1.004001 -0.01134,-0.313663 -0.07487,-0.623229 -0.187994,-0.915999 -0.107943,-0.276623 -0.300435,-0.512126 -0.550001,-0.673001 -0.25799,-0.168 -0.636,-0.253002 -1.134999,-0.253002 -0.198123,0.0083 -0.394383,0.04195 -0.584002,0.100006 -0.258368,0.07446 -0.498455,0.201827 -0.704999,0.373985 -0.227981,0.183987 -0.421999,0.449 -0.583997,0.794003 -0.161008,0.345978 -0.242003,0.797998 -0.242003,1.356998 v 6.618999 H 6.99942 V 10.590001 Z"
+	/>
+	<path style={fillStyle} d="M 2,2.0000001 V 30 h 3 v 2 H 0 V 9.2650922e-8 L 5,0 v 2 z" />
+</svg>
diff --git a/src/lib/components/blog_old/CategoryFilter.svelte b/src/lib/components/blog_old/CategoryFilter.svelte
new file mode 100644
index 0000000..480a4ed
--- /dev/null
+++ b/src/lib/components/blog_old/CategoryFilter.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { Tag } from '$lib/types/post';
+	export let selected: Tag | null = null;
+	export let className = '';
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+
+	const tags: Tag[] = ['Blog', 'Projects', 'Updates'];
+
+	const clickHandler = (value: Tag) => {
+		if (value === selected) {
+			goto(`/blog`, { keepFocus: true, noScroll: true });
+			selected = '';
+			return;
+		}
+		let query = new URLSearchParams($page.url.searchParams.toString());
+		query.set('tag', value);
+		goto(`?${query.toString()}`, { keepFocus: true, noScroll: true });
+		selected = value;
+	};
+</script>
+
+<section class="flex justify-center flex-col items-center {className}">
+	<h3 class="h3 mb-2 md:mb-3">Sort by category</h3>
+	<ul class="flex flex-wrap justify-center gap-2">
+		{#each tags as option}
+			<li>
+				<button
+					class="chip {option === selected
+						? 'variant-filled-primary'
+						: 'variant-soft-primary'}"
+					on:click={() => clickHandler(option)}
+				>
+					{option}
+				</button>
+			</li>
+		{/each}
+	</ul>
+</section>
diff --git a/src/lib/components/blog_old/Feed.svelte b/src/lib/components/blog_old/Feed.svelte
new file mode 100644
index 0000000..351fc11
--- /dev/null
+++ b/src/lib/components/blog_old/Feed.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+	import Preview from '$lib/components/blog/Preview.svelte';
+	import CategoryFilter from '$lib/components/blog/CategoryFilter.svelte';
+	import type { Post, Tag } from '$lib/types/post';
+	import { H_ELLIPSIS_ENTITY } from '$lib/constants';
+	import { page } from '$app/stores';
+	import { onMount } from 'svelte';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+	export let posts: Post[] = [];
+
+	let filter: Tag | null = null;
+	export const displayAmount = 8;
+
+	$: showPosts = displayAmount;
+	$: postCount = posts.length;
+	$: posts = data.posts.filter((post: Post) => (filter ? post.tags?.includes(filter) : true));
+	$: displayPosts = posts.slice(displayAmount);
+
+	const handleClick = () => {
+		showPosts += displayAmount;
+	};
+
+	onMount(() => {
+		const tagParam = $page.url.searchParams.get('tag');
+
+		if (!filter && typeof tagParam == 'string') {
+			filter = tagParam as Tag;
+		}
+	});
+</script>
+
+<section role="feed">
+	<div class="space-y-8">
+		<header class="flex flex-col justify-center items-center">
+			<h1 class="h1 m-4">Blog</h1>
+			<CategoryFilter className="mb-2 md:mb-4" bind:selected={filter} />
+		</header>
+		<div
+			class="grid m-auto max-w-7xl w-full gap-6 grid-cols-none justify-center md:grid-cols-2 lg:grid-cols-3"
+		>
+			{#each posts.slice(0, displayAmount) as post, index}
+				<article
+					class="flex justify-center min-w-[20rem] max-w-sm"
+					aria-posinset={index + 1}
+					aria-setsize={postCount}
+				>
+					<Preview {post} type="blog" />
+				</article>
+			{:else}
+				<p>No posts yet!</p>
+			{/each}
+		</div>
+	</div>
+
+	{#if posts.slice(displayAmount).length > 0}
+		<div>
+			<h2 class="mb-4 text-center">Previous posts</h2>
+			<div
+				class="previous grid m-auto max-w-7xl w-full gap-6 grid-cols-none justify-center md:grid-cols-2 lg:grid-cols-3"
+			>
+				{#each displayPosts as post}
+					<div class="flex justify-center min-w-[20rem] max-w-sm">
+						<Preview {post} type="blog" />
+					</div>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	{#if showPosts < postCount}
+		<button type="submit" on:click={handleClick}>See more {H_ELLIPSIS_ENTITY}</button>
+	{/if}
+</section>
diff --git a/src/lib/components/blog_old/Post.svelte b/src/lib/components/blog_old/Post.svelte
new file mode 100644
index 0000000..54bbcd4
--- /dev/null
+++ b/src/lib/components/blog_old/Post.svelte
@@ -0,0 +1,32 @@
+<!-- <script lang="ts" context="module">
+  import Image from '$lib/components/prose/img.svelte'
+  import table from '$lib/components/prose/table.svelte'
+  export { Image as img, table }
+</script>
+
+<script lang="ts">
+  import { typeOfPost } from '$lib/utils/posts'
+  import Container from '$lib/components/blog/post_container.svelte'
+  // auto-generated
+  export let path
+  export let slug
+  export let toc
+  // common
+  export let created
+  export let updated
+  export let published
+  export let summary
+  export let tags
+  export let flags
+  // specify
+  export let title
+  export let image
+  export let in_reply_to
+  // post
+  let fm = { path, slug, toc, created, updated, published, summary, tags, flags, title, image, in_reply_to }
+  let post = { type: typeOfPost(fm), ...fm }
+</script> -->
+
+<article class="text-token prose prose-slate mx-auto dark:prose-invert lg:prose-lg">
+	<slot />
+</article>
diff --git a/src/lib/components/blog_old/PostLayout.svelte b/src/lib/components/blog_old/PostLayout.svelte
new file mode 100644
index 0000000..223cab5
--- /dev/null
+++ b/src/lib/components/blog_old/PostLayout.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	import SEO from '$lib/components/SEO/index.svelte';
+	import '$lib/assets/prism-nord.css';
+	import type { Post } from '$lib/types/post';
+	import Tags from '$lib/components/blog/Tags.svelte';
+
+	export let post: Post;
+
+	const {
+		postTitle,
+		datePublished,
+		featuredImage,
+		featuredImageAlt,
+		lastUpdated,
+		seoMetaDescription: metadescription,
+		slug,
+		timeToRead,
+		ogImage,
+		ogSquareImage,
+		twitterImage
+	} = post || {};
+
+	const breadcrumbs = [
+		{ name: 'Home', slug: '' },
+		{ name: 'type', slug: post.type },
+		{ name: postTitle, slug }
+	];
+</script>
+
+<SEO
+	article
+	{breadcrumbs}
+	{slug}
+	{postTitle}
+	{datePublished}
+	{lastUpdated}
+	{metadescription}
+	{timeToRead}
+	{featuredImage}
+	{ogImage}
+	{ogSquareImage}
+	{twitterImage}
+/>
+
+<section class="flex justify-center mt-4 mb-8">
+	<div
+		class=" w-full md:w-[50rem] leading-[177.7%] bg-white/50 dark:bg-black/50 m-2 rounded-t-lg mx-auto"
+	>
+		<header>
+			<img
+				src={featuredImage}
+				alt={featuredImageAlt}
+				class=" w-full aspect-[21/9] max-h-[540px] rounded-t-lg"
+			/>
+		</header>
+		<Tags {post} />
+		<div class="space-y-4 m-8">
+			<h2 class="h2" data-toc-ignore>{post.title}</h2>
+			<div class="max-w-none md:w-[720px]">
+				<slot />
+			</div>
+		</div>
+		<hr class="opacity-50" />
+		<footer class="p-4 flex justify-start items-center space-x-4" />
+	</div>
+</section>
+
+<style lang="postcss">
+</style>
diff --git a/src/lib/components/blog_old/Preview.svelte b/src/lib/components/blog_old/Preview.svelte
new file mode 100644
index 0000000..c76b197
--- /dev/null
+++ b/src/lib/components/blog_old/Preview.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+	import { isAnExternalLink, generateURL } from '$lib/utils/helpers';
+	import type { Post } from '$lib/types/post';
+	import { onMount, onDestroy } from 'svelte';
+	import { formatDate } from '$lib/utils/blog';
+
+	export let type: Post['type'];
+	export let post: Post;
+	// export let published: boolean;
+	// export let headlineOrder: 'h3' | '' = '';
+	// export let badge: string = '';
+	// export let textWidth: string = '';
+
+	//window width
+	let iteration = 0;
+	let interval: string | number | NodeJS.Timeout | undefined;
+
+	onMount(() => {
+		const interval = setInterval(() => {
+			console.log(window.innerWidth);
+			iteration++;
+
+			if (iteration === 50) {
+				clearInterval(interval);
+			}
+		}, 1000);
+	});
+
+	$: href = generateURL(post['href'], post.type, post.slug);
+
+	$: target = post && post['href'] && isAnExternalLink(post['href']) ? '_blank' : undefined;
+
+	onDestroy(() => {
+		clearInterval(interval);
+	});
+</script>
+
+<a
+	{href}
+	{target}
+	class="card bg-gradient-to-br variant-glass-primary card-hover overflow-hidden flex flex-col space-y-4"
+>
+	<!-- Blog in long cols, projects in wide rows -->
+	<div class="flex {type === 'blog' ? 'flex-col' : 'flex-row'} justify-between w-full h-full">
+		<header>
+			<!-- <img
+				src={`/images/${type}/${post.slug}/${post.image}`}
+				class="bg-black/200 w-full aspect-[3/2]"
+				alt="Post preview"
+			/> -->
+			<img
+				src={post.featuredImage}
+				alt={post.title}
+				class="bg-black/200 h-[448px] w-[672px] aspect-[3/2]"
+			/>
+		</header>
+		<section class="p-4 space-y-4">
+			<h2 class="h2 text-ellipsis overflow-hidden" data-toc-ignore>{post.title}</h2>
+			<article class="text-ellipsis break-words overflow-hidden max-h-[128px] max-w-4">
+				<p>
+					<!-- cspell:disable -->
+					{post.excerpt}
+					<!-- cspell:enable -->
+				</p>
+			</article>
+		</section>
+		<section>
+			<hr class="opacity-30 bg-tertiary-500" />
+			<footer class="p-4 flex justify-between">
+				<div class="flex flex-wrap gap-2">
+					{#if post.tags && post.tags.length > 0}
+						<small>tags: </small>
+						{#each post.tags as tag}
+							<a
+								data-sveltekit-preload-data="hover"
+								href="/blog?{new URLSearchParams({ tag }).toString()}"
+								class="chip variant-glass-secondary"
+							>
+								<p class="text-md text-token">{tag}</p>
+							</a>
+						{/each}
+					{/if}
+				</div>
+				<div class="mt-auto">
+					<small>
+						{#if post.datePublished}
+							<span class="text-sm ml-4">
+								{formatDate(post.datePublished)}
+							</span>
+						{/if}
+					</small>
+				</div>
+			</footer>
+		</section>
+	</div>
+</a>
diff --git a/src/lib/components/blog_old/Tags.svelte b/src/lib/components/blog_old/Tags.svelte
new file mode 100644
index 0000000..fd70249
--- /dev/null
+++ b/src/lib/components/blog_old/Tags.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { Post } from '$lib/types/post';
+	import { formatDate } from '$lib/utils/blog';
+
+	export let post: Post;
+</script>
+
+<section class="flex-auto flex justify-between items-center py-4 px-2 m-8">
+	{#if post.tags && post.tags.length > 0}
+		<div class="flex mb-2 items-center gap-2">
+			tags: {#each post.tags as tag}
+				<a
+					data-sveltekit-preload-data="hover"
+					href="/{post.type}{new URLSearchParams({ tag }).toString()}"
+				>
+					<span class="chip variant-ghost-surface">{tag}</span>
+				</a>
+			{/each}
+		</div>
+	{/if}
+	<small>On {formatDate(post.datePublished)}</small>
+</section>
diff --git a/src/lib/components/main/MainDrawer.svelte b/src/lib/components/main/MainDrawer.svelte
new file mode 100644
index 0000000..2b9945e
--- /dev/null
+++ b/src/lib/components/main/MainDrawer.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { getDrawerStore, Drawer } from '@skeletonlabs/skeleton';
+	const drawerStore = getDrawerStore();
+	import { NavRoutes } from '$lib/config';
+	import { page } from '$app/stores';
+	$: classesDrawer = $drawerStore.id === 'mobile-nav' ? 'md:hidden' : '';
+</script>
+
+<Drawer class={classesDrawer}>
+	{#if $drawerStore.id === 'demo'}
+		<!-- Doc Sidebar -->
+	{:else if $drawerStore.id === 'mobile-nav'}
+		<!-- Drawer nav only -->
+		<nav
+			class="z-50 flex flex-col gap-2 border border-surface-100-800-token bg-surface-50/50 dark:bg-surface-900/50 backdrop-blur-lg rounded-bl-container-token rounded-br-container-token p-2 shadow-xl"
+		>
+			{#each NavRoutes as route}
+				<a
+					href={route.href}
+					class="btn md:btn-sm hover:variant-soft-primary {route.href ===
+					$page.url.pathname
+						? 'variant-filled-primary'
+						: ''}">{route.title}</a
+				>
+			{/each}
+		</nav>
+	{:else}
+		<!-- Fallback Error -->
+		<div class="w-full h-full flex justify-center items-center">
+			<div class="text-center space-y-2">
+				<p>Invalid <code class="code">$drawerStore.id</code> provided.</p>
+			</div>
+		</div>
+	{/if}
+</Drawer>
diff --git a/src/lib/components/main/MainFooter.svelte b/src/lib/components/main/MainFooter.svelte
new file mode 100644
index 0000000..3bcab82
--- /dev/null
+++ b/src/lib/components/main/MainFooter.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import GiteaLogo from '$lib/assets/logos/GiteaLogo.svelte';
+	import SocialsCloud from '$lib/components/SocialsCloud.svelte';
+
+	const year = new Date().getFullYear();
+</script>
+
+<footer
+	class="page-footer bg-surface-50 dark:bg-surface-900 border-t border-surface-500/10 text-xs mt-4 md:text-base"
+>
+	<SocialsCloud />
+	<hr class="opacity-20" />
+	<div class="w-full max-w-7xl mx-auto p-4 md:py-8 flex items-center justify-center">
+		<!-- <div class="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col"> -->
+		<a class="items-center md:justify-start justify-center" href="/">
+			<p class="sm:pl-4 text-base sm:py-2 sm:mt-0 mt-4 text-center">
+				All content on this website, unless otherwise stated,
+				<br />by Matthieu Morin, is under copyright © {year},
+				<br />all of it licensed under
+				<a
+					class="anchor font-bold"
+					href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">CC BY-SA 4.0</a
+				>.
+				<br />This site, coded by me, is
+				<a
+					class="font-bold anchor"
+					href="https://git.mattmor.in/Madmin/its-personal/src/branch/master/LICENSE"
+					>MIT Licensed</a
+				>.
+			</p>
+		</a>
+	</div>
+</footer>
diff --git a/src/lib/components/main/MainHeader.svelte b/src/lib/components/main/MainHeader.svelte
new file mode 100644
index 0000000..f059803
--- /dev/null
+++ b/src/lib/components/main/MainHeader.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { LightSwitch, Avatar, getDrawerStore } from '@skeletonlabs/skeleton';
+	import type { DrawerSettings } from '@skeletonlabs/skeleton';
+	const drawerStore = getDrawerStore();
+
+	// Components
+	import { page } from '$app/stores';
+	import { NavRoutes } from '$lib/config';
+
+	function triggerStyled() {
+		const drawerSettings: DrawerSettings = {
+			position: 'top',
+			id: 'mobile-nav',
+			// Provide your property overrides:
+			bgDrawer: 'overflow-y-auto ',
+			bgBackdrop:
+				'z-50 bg-gradient-to-tr from-primary-500/50 via-secondary-500/50 to-tertiary-500/50',
+			width: 'w-full h-auto ',
+			rounded: 'rounded-bl-container-token rounded-br-container-token'
+			// Metadata
+			// meta: ''
+		};
+		drawerStore.open(drawerSettings);
+	}
+</script>
+
+<section
+	class="!max-w-7xl mx-auto grid grid-cols-[1fr_auto_auto]
+ md:grid-cols-[48px_1fr_48px] md:place-items-center items-center gap-4 p-4"
+>
+	<a href="/" title="Return to Homepage">
+		<Avatar src={'/images/profile-pic.png'} width="w-16" rounded={'rounded-full'} />
+	</a>
+
+	<section id="mobile-nav" class="hidden md:block">
+		<nav
+			class="flex flex-col md:flex-row gap-2 border md:border-0 border-surface-100-800-token bg-surface-50/50 dark:bg-surface-900/50 backdrop-blur-lg rounded-bl-container-token rounded-br-container-token md:rounded-token p-2 shadow-xl"
+		>
+			{#each NavRoutes as route}
+				<a
+					href={route.href}
+					class="btn md:btn-sm hover:variant-soft-primary {route.href ===
+					$page.url.pathname
+						? 'variant-filled-primary'
+						: ''}"
+				>
+					{route.title}
+				</a>
+			{/each}
+		</nav>
+	</section>
+
+	<section class="block md:hidden" id="mobile-nav">
+		<button class="btn variant-filled-primary" on:click={triggerStyled}>
+			<i class="fa-solid fa-bars" /> <span>Menu</span>
+		</button>
+	</section>
+	<LightSwitch />
+</section>
diff --git a/src/lib/components/main/ObfuscatedEmail.svelte b/src/lib/components/main/ObfuscatedEmail.svelte
new file mode 100644
index 0000000..b69d930
--- /dev/null
+++ b/src/lib/components/main/ObfuscatedEmail.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import socials from '$lib/socialsObjects';
+	export let mail: string = socials[0].href;
+	export let clazz: string = '';
+	export let iconClazz: string = '';
+	export let h: number = 16;
+	export let w: number = 16;
+</script>
+
+<div class={` ${clazz}`}>
+	<svg xmlns="http://www.w3.org/2000/svg" lang="en-GB" aria-labelledby="title">
+		<title id="title">Send me a mail!</title>
+
+		<defs />
+
+		<a href="mailto:{mail}" target="" rel="noreferrer" aria-label="Send me a mail!">
+			<rect class="fill-current text-transparent" width="100%" height="100%" />
+
+			<foreignObject x="0" y="0" width="100%" height="100%">
+				<div class="email-icon-wrapper">
+					<i class={`${iconClazz} `} />
+				</div>
+			</foreignObject>
+		</a>
+	</svg>
+</div>
+
+<style lang="postcss">
+	.email-icon-wrapper {
+		@apply flex items-center justify-center w-full h-full;
+	}
+</style>