fix eslint errors

src/lib/components/BlogCard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import dayjs from 'dayjs';
+	import { resolve } from '$app/paths';
 	import { Link } from '@lucide/svelte';
+	import dayjs from 'dayjs';
 	import Image from './Image.svelte';
 
 	interface Props {
@@ -15,8 +16,6 @@
 	}
 
 	let { id, img, title, published, topics }: Props = $props();
-
-	let blogLink = $derived(`/blog/${id}`);
 </script>
 
 <div class="card">
@@ -29,7 +28,7 @@
 		<div class="absolute z-20 opacity-0 transition-opacity group-hover:opacity-75">
 			<Link size={32} />
 		</div>
-		<a href={blogLink} class="h-full w-full">
+		<a href={resolve(`/blog/[slug]`, { slug: id })} class="h-full w-full">
 			<Image
 				class="z-10 aspect-4/2 w-full object-cover transition-transform group-hover:scale-110 group-hover:blur-xs"
 				src={img.url}
@@ -45,7 +44,7 @@
 				</p>
 				<h2 class="card-title text-xl">{title}</h2>
 			</div>
-			<a href={blogLink} class="btn btn-primary">Read Now</a>
+			<a href={resolve(`/blog/[slug]`, { slug: id })} class="btn btn-primary">Read Now</a>
 		</div>
 	</div>
 </div>

src/lib/components/Hero.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
+
 	interface Props {
 		photo: string;
 		titles: string[];
@@ -33,8 +35,8 @@
 					{description}
 				</p>
 				<div class="flex flex-col gap-2 sm:flex-row lg:gap-4">
-					<a href="/resume" class="btn btn-outline btn-primary btn-wide">Resume</a>
-					<a href="/contact" class="btn btn-primary btn-wide">Contact</a>
+					<a href={resolve('/resume')} class="btn btn-outline btn-primary btn-wide">Resume</a>
+					<a href={resolve('/contact')} class="btn btn-primary btn-wide">Contact</a>
 				</div>
 			</div>
 		</div>

src/lib/components/Navbar.svelte

@@ -1,19 +1,22 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
+	import type { ResolvedPathname } from '$app/types';
 	import { Menu } from '@lucide/svelte';
 
 	interface Props {
 		drawerId: string;
 		title: string;
-		pages: { slug: string; name: string }[];
+		pages: { slug: ResolvedPathname; name: string }[];
 		route: { id: string | null };
 	}
 
 	let { drawerId, title, pages, route }: Props = $props();
 </script>
 
+/** eslint-disable svelte/no-navigation-without-resolve */
 <nav class="navbar">
 	<div class="flex flex-1 items-center gap-4">
-		<a href="/">
+		<a href={resolve('/')}>
 			<div class="avatar avatar-placeholder animate-pulse">
 				<div
 					class="ring-primary ring-offset-base-100 bg-base-200 text-base-content mx-auto w-8 rounded-full ring-2 ring-offset-2 transition-all ease-in hover:text-2xl lg:w-12"
@@ -34,6 +37,7 @@
 		{#each pages as page (page.slug)}
 			<a
 				href={page.slug}
+				rel="external"
 				class="link hover:link-secondary transition-colors"
 				class:link-secondary={route.id === page.slug}
 			>

src/lib/components/markdown/Link.svelte

@@ -3,9 +3,9 @@
 
 	type Props = Omit<SvelteHTMLElements['a'], 'class'>;
 
-	const { href, children }: Props = $props();
+	const { children, ...rest }: Props = $props();
 </script>
 
-<a {href} target="_blank" class="link link-primary">
+<a {...rest} target="_blank" class="link link-primary">
 	{@render children?.()}
 </a>