src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import '../app.css';
 	import { page } from '$app/stores';
+	import { name } from '$content/metadata.json';
 	import Footer from "./Footer.svelte";
 	import Navbar from "./Navbar.svelte";
 	import PageTransition from "./PageTransition.svelte";
@@ -11,7 +12,8 @@
 <!-- Homepage has its own navbar with animations -->
 {#if $page.url.pathname != "/"}
 	<div id="layout">
-		<div id="navbar">
+		<div id="nav">
+			<p id="bio-name">{name}</p>
 			<Navbar />
 			<slot name="header" />
 		</div>
@@ -31,6 +33,12 @@
 {/if}
 
 <style>
+	#bio-name {
+		font-family: serif;
+		font-size: 3rem;
+		font-weight: normal;
+		color: var(--name);
+	}
 	#layout {
 		max-width: max(80vw, 100vh);
 		margin-left: auto;
@@ -58,7 +66,7 @@
 		width: min(100vw, max(50vw, 100vh));
 		grid-area: content;
 	}
-	#navbar {
+	#nav {
 		align-self: right;
 		padding-left: 10px;
 		grid-area: nav;

src/routes/Navbar.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { routes } from "$lib/sitemap.ts"
-	import { name } from '$content/metadata.json';
 	import ThemeSwitch from "$lib/components/ThemeSwitch.svelte"
 	import { Rss } from "lucide-svelte";
 
@@ -12,7 +11,6 @@
 </script>
 
 <div id="navbar" class="h-5 space-x-4">
-	<p id="bio-name">{name}</p>
 	{#each routes as item}
 		<a
 			class="nav-link"
@@ -35,7 +33,8 @@
 		display: flex;
 		flex-direction: column;
 		align-items: flex-end;
-		justify-content: between;
+		position: sticky;
+		top: 0;
 	}
 	@media (max-width: 700px) {
 		#navbar {