diff --git a/src/lib/components/BannerImage.svelte b/src/lib/components/BannerImage.svelte
index 8807414..b34e38c 100644
--- a/src/lib/components/BannerImage.svelte
+++ b/src/lib/components/BannerImage.svelte
@@ -3,7 +3,7 @@
 	import { browser } from '$app/environment';
 	import Image from '$lib/components/Image.svelte';
 
-	export let imageData;
+	let { imageData } = $props();
 
 	onMount(() => {
 		if (browser) {
diff --git a/src/lib/components/BlogPostSummary.svelte b/src/lib/components/BlogPostSummary.svelte
index 1b33d57..4c7ce6a 100644
--- a/src/lib/components/BlogPostSummary.svelte
+++ b/src/lib/components/BlogPostSummary.svelte
@@ -3,10 +3,7 @@
 	import { H_ELLIPSIS_ENTITY } from '$lib/constants/entities';
 	import { goto } from '$app/navigation';
 
-	export let postTitle;
-	export let datePublished;
-	export let seoMetaDescription;
-	export let slug;
+	let { postTitle, datePublished, seoMetaDescription, slug } = $props();
 
 	/**
 	 * @param event {MouseEvent} - click
@@ -36,9 +33,9 @@
 <div
 	role="presentation"
 	class="container"
-	on:mouseenter={handleMouseEnter}
-	on:mouseleave={handleMouseLeave}
-	on:mousedown={handleMouseDown}
+	onmouseenter={handleMouseEnter}
+	onmouseleave={handleMouseLeave}
+	onmousedown={handleMouseDown}
 >
 	<div class="content" data-sveltekit-preload-data="hover">
 		<h3>
diff --git a/src/lib/components/BlogRoll.svelte b/src/lib/components/BlogRoll.svelte
index 4f390c7..fdbff69 100644
--- a/src/lib/components/BlogRoll.svelte
+++ b/src/lib/components/BlogRoll.svelte
@@ -2,12 +2,11 @@
 	import BlogPostSummary from '$lib/components/BlogPostSummary.svelte';
 	import { H_ELLIPSIS_ENTITY } from '$lib/constants/entities';
 
-	export let initialPosts = 4;
-	export let posts;
+	let { initialPosts = 4, posts } = $props();
 
 	const postCount = posts.length;
-	$: showPosts = initialPosts;
-	$: displayPosts = posts.slice(0, showPosts);
+	let showPosts = $state(initialPosts);
+	let displayPosts = $derived(posts.slice(0, showPosts));
 
 	const handleClick = () => {
 		showPosts += initialPosts;
@@ -29,6 +28,6 @@
 		<p>No posts yet!</p>
 	{/each}
 	{#if showPosts < postCount}
-		<button type="submit" on:click={handleClick}>See more {H_ELLIPSIS_ENTITY}</button>
+		<button type="submit" onclick={handleClick}>See more {H_ELLIPSIS_ENTITY}</button>
 	{/if}
 </section>
diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
index aa9090a..291509e 100644
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@@ -1,10 +1,12 @@
 <script>
 	import '$lib/styles/index.scss';
+
+	let { children } = $props();
 </script>
 
 <section class="container">
 	<div class="content">
-		<slot />
+		{@render children?.()}
 	</div>
 </section>
 
diff --git a/src/lib/components/ExternalLink.svelte b/src/lib/components/ExternalLink.svelte
index e94b170..44a4de0 100644
--- a/src/lib/components/ExternalLink.svelte
+++ b/src/lib/components/ExternalLink.svelte
@@ -1,8 +1,11 @@
 <script>
-	export let rel = 'nofollow noopener noreferrer';
-	export let target = '_blank';
-	export let href;
-	export let ariaLabel;
+	let {
+		children,
+		rel = 'nofollow noopener noreferrer',
+		target = '_blank',
+		href,
+		ariaLabel,
+	} = $props();
 </script>
 
-<a aria-label={ariaLabel} {href} {rel} {target}><slot /></a>
+<a aria-label={ariaLabel} {href} {rel} {target}>{@render children?.()}</a>
diff --git a/src/lib/components/Icons/Camera.svelte b/src/lib/components/Icons/Camera.svelte
index a0b3ef9..cc4bed7 100644
--- a/src/lib/components/Icons/Camera.svelte
+++ b/src/lib/components/Icons/Camera.svelte
@@ -2,10 +2,7 @@
 	import 'iconify-icon';
 	import { addCollection } from 'iconify-icon';
 
-	export let label = 'Camera icon';
-	export let colour = 'inherit';
-	export let ariaHidden = false;
-	export let width = 24;
+	let { label = 'Camera icon', colour = 'inherit', ariaHidden = false, width = 24 } = $props();
 
 	addCollection(
 		{
diff --git a/src/lib/components/Icons/Email.svelte b/src/lib/components/Icons/Email.svelte
index cdfbeac..b287f6c 100644
--- a/src/lib/components/Icons/Email.svelte
+++ b/src/lib/components/Icons/Email.svelte
@@ -2,10 +2,7 @@
 	import 'iconify-icon';
 	import { addCollection } from 'iconify-icon';
 
-	export let label = 'Email icon';
-	export let colour = 'inherit';
-	export let ariaHidden = false;
-	export let width = 24;
+	let { label = 'Email icon', colour = 'inherit', ariaHidden = false, width = 24 } = $props();
 
 	addCollection(
 		{
diff --git a/src/lib/components/Icons/Facebook.svelte b/src/lib/components/Icons/Facebook.svelte
index a8e3f6b..49ebc11 100644
--- a/src/lib/components/Icons/Facebook.svelte
+++ b/src/lib/components/Icons/Facebook.svelte
@@ -2,10 +2,7 @@
 	import 'iconify-icon';
 	import { addCollection } from 'iconify-icon';
 
-	export let label = 'Facebook icon';
-	export let colour = 'inherit';
-	export let ariaHidden = false;
-	export let width = 24;
+	let { label = 'Facebook icon', colour = 'inherit', ariaHidden = false, width = 24 } = $props();
 
 	addCollection(
 		{
diff --git a/src/lib/components/Icons/GitHub.svelte b/src/lib/components/Icons/GitHub.svelte
index 6aa3ac9..6ae866b 100644
--- a/src/lib/components/Icons/GitHub.svelte
+++ b/src/lib/components/Icons/GitHub.svelte
@@ -2,10 +2,7 @@
 	import 'iconify-icon';
 	import { addCollection } from 'iconify-icon';
 
-	export let label = 'Git hub icon';
-	export let colour = 'inherit';
-	export let ariaHidden = false;
-	export let width = 24;
+	let { label = 'Git hub icon', colour = 'inherit', ariaHidden = false, width = 24 } = $props();
 
 	addCollection(
 		{
diff --git a/src/lib/components/Icons/LinkedIn.svelte b/src/lib/components/Icons/LinkedIn.svelte
index a685702..86881fe 100644
--- a/src/lib/components/Icons/LinkedIn.svelte
+++ b/src/lib/components/Icons/LinkedIn.svelte
@@ -2,10 +2,7 @@
 	import 'iconify-icon';
 	import { addCollection } from 'iconify-icon';
 
-	export let label = 'Linked in icon';
-	export let colour = 'inherit';
-	export let ariaHidden = false;
-	export let width = 24;
+	let { label = 'Linked in icon', colour = 'inherit', ariaHidden = false, width = 24 } = $props();
 
 	addCollection(
 		{
diff --git a/src/lib/components/Icons/Telegram.svelte b/src/lib/components/Icons/Telegram.svelte
index 697f2d9..55ea6f9 100644
--- a/src/lib/components/Icons/Telegram.svelte
+++ b/src/lib/components/Icons/Telegram.svelte
@@ -2,10 +2,12 @@
 	import 'iconify-icon';
 	import { addCollection } from 'iconify-icon';
 
-	export let label = 'Telegram app icon';
-	export let colour = 'inherit';
-	export let ariaHidden = false;
-	export let width = 24;
+	let {
+		label = 'Telegram app icon',
+		colour = 'inherit',
+		ariaHidden = false,
+		width = 24,
+	} = $props();
 
 	addCollection(
 		{
diff --git a/src/lib/components/Icons/Tiktok.svelte b/src/lib/components/Icons/Tiktok.svelte
index 2c8e0f0..cb5618d 100644
--- a/src/lib/components/Icons/Tiktok.svelte
+++ b/src/lib/components/Icons/Tiktok.svelte
@@ -2,10 +2,7 @@
 	import 'iconify-icon';
 	import { addCollection } from 'iconify-icon';
 
-	export let label = 'Tik tok icon';
-	export let colour = 'inherit';
-	export let ariaHidden = false;
-	export let width = 24;
+	let { label = 'Tik tok icon', colour = 'inherit', ariaHidden = false, width = 24 } = $props();
 
 	addCollection(
 		{
diff --git a/src/lib/components/Icons/Twitter.svelte b/src/lib/components/Icons/Twitter.svelte
index a2bf84a..57c478d 100644
--- a/src/lib/components/Icons/Twitter.svelte
+++ b/src/lib/components/Icons/Twitter.svelte
@@ -2,10 +2,7 @@
 	import 'iconify-icon';
 	import { addCollection } from 'iconify-icon';
 
-	export let label = 'Twitter icon';
-	export let colour = 'inherit';
-	export let ariaHidden = false;
-	export let width = 24;
+	let { label = 'Twitter icon', colour = 'inherit', ariaHidden = false, width = 24 } = $props();
 
 	addCollection(
 		{
diff --git a/src/lib/components/Icons/Wire.svelte b/src/lib/components/Icons/Wire.svelte
index d10c8e9..40f3c43 100644
--- a/src/lib/components/Icons/Wire.svelte
+++ b/src/lib/components/Icons/Wire.svelte
@@ -2,10 +2,7 @@
 	import 'iconify-icon';
 	import { addCollection } from 'iconify-icon';
 
-	export let label = 'Wire app icon';
-	export let colour = 'inherit';
-	export let ariaHidden = false;
-	export let width = 24;
+	let { label = 'Wire app icon', colour = 'inherit', ariaHidden = false, width = 24 } = $props();
 
 	addCollection(
 		{
diff --git a/src/lib/components/Image.svelte b/src/lib/components/Image.svelte
index df40d9b..0b4b24c 100644
--- a/src/lib/components/Image.svelte
+++ b/src/lib/components/Image.svelte
@@ -1,15 +1,17 @@
 <script>
-	export let alt;
-	export let height; // needed to reduce CLS
-	export let src;
-	export let sources;
-	export let placeholder;
-	export let width; // needed to reduce CLS
-	export let maxWidth = '1280px';
-	export let sizes = `(max-width: ${maxWidth}) 100vw, ${maxWidth}}`;
-	export let importance = undefined;
-	export let loading = 'lazy';
-	export let style = '';
+	let {
+		alt,
+		height, // needed to reduce CLS
+		src,
+		sources,
+		placeholder,
+		width, // needed to reduce CLS
+		maxWidth = '1280px',
+		sizes = `(max-width: ${maxWidth}) 100vw, ${maxWidth}}`,
+		importance = undefined,
+		loading = 'lazy',
+		style = '',
+	} = $props();
 </script>
 
 <picture>
diff --git a/src/lib/components/Link.svelte b/src/lib/components/Link.svelte
index da7a91a..e309740 100644
--- a/src/lib/components/Link.svelte
+++ b/src/lib/components/Link.svelte
@@ -1,8 +1,5 @@
 <script>
-	export let rel = '';
-	export let target = '';
-	export let href;
-	export let ariaLabel;
+	let { children, rel = '', target = '', href, ariaLabel } = $props();
 </script>
 
-<a aria-label={ariaLabel} {href} {rel} {target}><slot /></a>
+<a aria-label={ariaLabel} {href} {rel} {target}> {@render children?.()}</a>
diff --git a/src/lib/components/SEO/OpenGraph.svelte b/src/lib/components/SEO/OpenGraph.svelte
index a33199c..8301546 100644
--- a/src/lib/components/SEO/OpenGraph.svelte
+++ b/src/lib/components/SEO/OpenGraph.svelte
@@ -1,16 +1,18 @@
 <script>
-	export let article = false;
-	export let datePublished;
-	export let lastUpdated;
-	export let facebookAuthorPage = '';
-	export let facebookPage = '';
-	export let image;
-	export let squareImage;
-	export let metadescription;
-	export let ogLanguage;
-	export let pageTitle;
-	export let siteTitle;
-	export let url;
+	let {
+		article = false,
+		datePublished,
+		lastUpdated,
+		facebookAuthorPage = '',
+		facebookPage = '',
+		image,
+		squareImage,
+		metadescription,
+		ogLanguage,
+		pageTitle,
+		siteTitle,
+		url,
+	} = $props();
 </script>
 
 <svelte:head>
diff --git a/src/lib/components/SEO/SchemaOrg.svelte b/src/lib/components/SEO/SchemaOrg.svelte
index 38162c8..c3e04aa 100644
--- a/src/lib/components/SEO/SchemaOrg.svelte
+++ b/src/lib/components/SEO/SchemaOrg.svelte
@@ -1,35 +1,29 @@
 <script>
 	import hash from 'object-hash';
-	export let article = false;
-	export let author;
 
-	/**
-	 * @type {{ name: string; slug: string }[]}
-	 */
-	export let breadcrumbs;
-
-	export let datePublished;
-	export let entity;
-	export let lastUpdated;
-	export let featuredImage;
-	export let metadescription;
-	export let siteLanguage;
-	export let siteTitle;
-	export let siteTitleAlt;
-	export let siteUrl;
-	export let title;
-	export let url;
-	export let facebookPage;
-	export let githubPage;
-	export let linkedinProfile;
-	export let telegramUsername;
-	export let tiktokUsername;
-	export let twitterUsername;
-
-	/**
-	 * @type {{ url: string; faviconWidth: number; faviconHeight: number } | null}
-	 */
-	export let entityMeta = null;
+	let {
+		article = false,
+		author,
+		breadcrumbs,
+		datePublished,
+		entity,
+		lastUpdated,
+		featuredImage,
+		metadescription,
+		siteLanguage,
+		siteTitle,
+		siteTitleAlt,
+		siteUrl,
+		title,
+		url,
+		facebookPage,
+		githubPage,
+		linkedinProfile,
+		telegramUsername,
+		tiktokUsername,
+		twitterUsername,
+		entityMeta = null,
+	} = $props();
 
 	const entityHash = hash({ author }, { algorithm: 'md5' });
 
diff --git a/src/lib/components/SEO/Twitter.svelte b/src/lib/components/SEO/Twitter.svelte
index 0be3bb1..e24fd15 100644
--- a/src/lib/components/SEO/Twitter.svelte
+++ b/src/lib/components/SEO/Twitter.svelte
@@ -1,9 +1,5 @@
 <script>
-	export let article = false;
-	export let author;
-	export let twitterUsername;
-	export let image;
-	export let timeToRead = 0;
+	let { article = false, author, twitterUsername, image, timeToRead = 0 } = $props();
 
 	/*
 	 * When there is an equivalent og tag present, Twitter takes that so check OpenGraph before
diff --git a/src/lib/components/SEO/index.svelte b/src/lib/components/SEO/index.svelte
index 9a5f44b..68b1b19 100644
--- a/src/lib/components/SEO/index.svelte
+++ b/src/lib/components/SEO/index.svelte
@@ -27,39 +27,39 @@
 		twitterUsername,
 	} = website;
 
-	export let article = false;
-	export let breadcrumbs = [];
-	export let entityMeta = null;
-	export let lastUpdated;
-	export let datePublished;
-	export let metadescription;
-	export let slug;
-	export let timeToRead = 0;
-	export let title;
-
 	const defaultAlt =
 		'picture of a person with long, curly hair, wearing a red had taking a picture with an analogue camera';
 
-	// imported props with fallback defaults
-	export let featuredImage = {
-		url: defaultFeaturedImage,
-		alt: defaultAlt,
-		width: 672,
-		height: 448,
-		caption: 'Home page',
-	};
-	export let ogImage = {
-		url: defaultOgImage,
-		alt: defaultAlt,
-	};
-	export let ogSquareImage = {
-		url: defaultOgSquareImage,
-		alt: defaultAlt,
-	};
-	export let twitterImage = {
-		url: defaultTwitterImage,
-		alt: defaultAlt,
-	};
+	let {
+		article = false,
+		breadcrumbs = [],
+		entityMeta = null,
+		lastUpdated,
+		datePublished,
+		metadescription,
+		slug,
+		timeToRead = 0,
+		title,
+		featuredImage = {
+			url: defaultFeaturedImage,
+			alt: defaultAlt,
+			width: 672,
+			height: 448,
+			caption: 'Home page',
+		},
+		ogImage = {
+			url: defaultOgImage,
+			alt: defaultAlt,
+		},
+		ogSquareImage = {
+			url: defaultOgSquareImage,
+			alt: defaultAlt,
+		},
+		twitterImage = {
+			url: defaultTwitterImage,
+			alt: defaultAlt,
+		},
+	} = $props();
 
 	const pageTitle = `${siteTitle} ${VERTICAL_LINE_ENTITY} ${title}`;
 	const url = `${siteUrl}/${slug}`;
diff --git a/src/lib/utilities/blog.js b/src/lib/utilities/blog.js
index 6f947ec..3ea2945 100644
--- a/src/lib/utilities/blog.js
+++ b/src/lib/utilities/blog.js
@@ -32,7 +32,7 @@ export async function getPostsContent() {
 			const lastIndex = element.lastIndexOf('/index.md');
 			const firstIndex = element.lastIndexOf('/', lastIndex - 1) + 1;
 			const slug = element.slice(firstIndex, lastIndex);
-			const content = (await import(`${element}?raw`)).default;
+			const content = (await import(/* @vite-ignore */ `${element}?raw`)).default;
 
 			return { slug, content };
 		});
diff --git a/src/lib/utilities/file.js b/src/lib/utilities/file.js
deleted file mode 100644
index 6c84805..0000000
--- a/src/lib/utilities/file.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { promises as fsp } from 'fs';
-
-export async function makeDirectory(directoryPath) {
-	await fsp.mkdir(directoryPath, { recursive: true }, (err) => {
-		if (err) {
-			return console.error(err);
-		}
-	});
-}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8029e18..da84d89 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -19,13 +19,15 @@
 	import Footer from '$lib/components/Footer.svelte';
 	import Header from '$lib/components/Header.svelte';
 	import PWA from '$lib/components/PWA.svelte';
+
+	let { children } = $props();
 </script>
 
 <PWA />
 <div class="container">
 	<Header />
 	<main class="main-container">
-		<slot />
+		{@render children?.()}
 	</main>
 	<Footer />
 </div>
diff --git a/src/routes/[slug]/+layout.svelte b/src/routes/[slug]/+layout.svelte
index bf4c05d..ae1faa3 100644
--- a/src/routes/[slug]/+layout.svelte
+++ b/src/routes/[slug]/+layout.svelte
@@ -2,9 +2,11 @@
 	import lazyload from 'vanilla-lazyload';
 	import { browser } from '$app/environment';
 
+	let { children } = $props();
+
 	if (browser && !document.lazyloadInstance) {
 		document.lazyloadInstance = new lazyload();
 	}
 </script>
 
-<slot />
+{@render children?.()}
diff --git a/src/routes/[slug]/+page.server.js b/src/routes/[slug]/+page.server.js
index 6b68550..dd58cb0 100644
--- a/src/routes/[slug]/+page.server.js
+++ b/src/routes/[slug]/+page.server.js
@@ -1,7 +1,7 @@
 import { markdown_to_html as markdownToHtml } from '@rodneylab/parsedown';
 import createDOMPurify from 'dompurify';
 import { JSDOM } from 'jsdom';
-import { separateFrontmatter } from '../../lib/utilities/blog';
+import { separateFrontmatter } from '$lib/utilities/blog';
 
 export const prerender = true;
 
diff --git a/src/routes/sitemap.xml/+server.js b/src/routes/sitemap.xml/+server.js
index 5562c02..fe3c62b 100644
--- a/src/routes/sitemap.xml/+server.js
+++ b/src/routes/sitemap.xml/+server.js
@@ -1,6 +1,6 @@
 import website from '$lib/config/website';
 import { error } from '@sveltejs/kit';
-import { separateFrontmatter } from '../../lib/utilities/blog';
+import { separateFrontmatter } from '$lib/utilities/blog';
 
 export const prerender = true;