From 92b2d830e5d7ce30e9d481643abf6380c84bb17b Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Mon, 20 Nov 2023 16:21:27 +0100
Subject: [PATCH] refactor: simplify structures and props

---
 src/routes/+page.svelte                 |   4 +-
 src/routes/projects/ProjectCard.svelte  |   5 +-
 src/routes/projects/projects-assets.ts  |  19 ----
 src/routes/projects/projects-cards.ts   |  18 ++--
 src/routes/timeline/TimelineItem.svelte |   9 +-
 src/routes/toolbox/+page.svelte         |  10 +-
 src/routes/toolbox/tools-assets.ts      |  99 ------------------
 src/routes/toolbox/tools-cards.ts       | 131 ++++++++++++++++--------
 8 files changed, 108 insertions(+), 187 deletions(-)
 delete mode 100644 src/routes/projects/projects-assets.ts
 delete mode 100644 src/routes/toolbox/tools-assets.ts

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 682da18..584a2b4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -17,8 +17,8 @@
 
 	<div class="grid gap-8 md:grid-cols-2 lg:gap-12">
 		<div class="relative">
-			<div class="absolute inset-0 bg-gradient-to-tr from-blue-500 to-transparent bg-repeat"></div>
-			<div class="h-64 overflow-hidden rounded-lg bg-gray-100 shadow-lg md:h-auto sticky top-10">
+			<div class="absolute inset-0 bg-repeat"></div>
+			<div class="h-64 overflow-hidden rounded-lg shadow-lg md:h-auto sticky top-10">
 				<enhanced:img
 					src={bartvdbraakImage}
 					alt="Bart van der Braak with a noire effect"
diff --git a/src/routes/projects/ProjectCard.svelte b/src/routes/projects/ProjectCard.svelte
index f4715e1..419ae8e 100644
--- a/src/routes/projects/ProjectCard.svelte
+++ b/src/routes/projects/ProjectCard.svelte
@@ -20,10 +20,11 @@
 			src={headerImage}
 			class="bg-black/50 w-full aspect-[21/9] object-cover object-top"
 			alt={headerSubTitle}
+			loading="lazy"
 		/>
 	</header>
 	<div class="p-4 space-y-4">
-		<header class="h6">{headerSubTitle}</header>
+		<header class="h6 opacity-50">{headerSubTitle}</header>
 		<span class="h3" data-toc-ignore>{title}</span>
 		<article>
 			<p>
@@ -33,8 +34,8 @@
 	</div>
 	<hr class="opacity-50" />
 	<footer class="p-4 flex justify-start items-center space-x-4">
-		<Avatar src={logo} width="w-8" />
 		<div class="flex-auto flex justify-between items-center">
+			<Avatar src={logo} width="w-8" />
 			{#each contributors as contributor}
 				<Avatar src={contributor.imageSrc} width="w-8" />
 			{/each}
diff --git a/src/routes/projects/projects-assets.ts b/src/routes/projects/projects-assets.ts
deleted file mode 100644
index 9284476..0000000
--- a/src/routes/projects/projects-assets.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import videowallImage from '$lib/assets/projects/videowall.jpg?enhanced';
-import videowallLogo from '$lib/assets/projects/videowall-logo.png';
-import ticketDashboardImage from '$lib/assets/projects/ticketdashboard.png?enhanced';
-import ticketDashboardLogo from '$lib/assets/projects/triple-logo.png';
-import zaantjeImage from '$lib/assets/projects/zaantje.png?enhanced';
-import zaantjeLogo from '$lib/assets/projects/zaantje-logo.png';
-import keyweaveImage from '$lib/assets/projects/keyweave-terminal.jpg?enhanced';
-import keyweaveLogo from '$lib/assets/projects/keyweave-logo.png';
-
-export {
-	videowallImage,
-	videowallLogo,
-	ticketDashboardImage,
-	ticketDashboardLogo,
-	zaantjeImage,
-	zaantjeLogo,
-	keyweaveImage,
-	keyweaveLogo
-};
diff --git a/src/routes/projects/projects-cards.ts b/src/routes/projects/projects-cards.ts
index cf549f3..785d78b 100644
--- a/src/routes/projects/projects-cards.ts
+++ b/src/routes/projects/projects-cards.ts
@@ -1,13 +1,11 @@
-import {
-	ticketDashboardImage,
-	ticketDashboardLogo,
-	videowallImage,
-	videowallLogo,
-	zaantjeImage,
-	zaantjeLogo,
-	keyweaveImage,
-	keyweaveLogo
-} from './projects-assets';
+import videowallImage from '$lib/assets/projects/videowall.jpg?enhanced';
+import videowallLogo from '$lib/assets/projects/videowall-logo.png';
+import ticketDashboardImage from '$lib/assets/projects/ticketdashboard.png?enhanced';
+import ticketDashboardLogo from '$lib/assets/projects/triple-logo.png';
+import zaantjeImage from '$lib/assets/projects/zaantje.png?enhanced';
+import zaantjeLogo from '$lib/assets/projects/zaantje-logo.png';
+import keyweaveImage from '$lib/assets/projects/keyweave-terminal.jpg?enhanced';
+import keyweaveLogo from '$lib/assets/projects/keyweave-logo.png';
 
 interface Contributor {
 	name: string;
diff --git a/src/routes/timeline/TimelineItem.svelte b/src/routes/timeline/TimelineItem.svelte
index e2e9d01..fefd5b6 100644
--- a/src/routes/timeline/TimelineItem.svelte
+++ b/src/routes/timeline/TimelineItem.svelte
@@ -1,15 +1,12 @@
 <script lang="ts">
-	import type { TimelineItem } from './timeline-items';
-
-	export let title: TimelineItem['title'];
-	export let description: TimelineItem['description'];
-	export let date: TimelineItem['date'];
+	export let title: string;
+	export let description: string;
+	export let date: string;
 </script>
 
 <div
 	class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active"
 >
-	<!-- Icon -->
 	<div
 		class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2"
 	>
diff --git a/src/routes/toolbox/+page.svelte b/src/routes/toolbox/+page.svelte
index 8a38042..48719c8 100644
--- a/src/routes/toolbox/+page.svelte
+++ b/src/routes/toolbox/+page.svelte
@@ -36,15 +36,9 @@
 	</div>
 
 	<ul class="columns-1 md:columns-2 lg:columns-3 gap-6 w-full mb-12">
-		{#each tools as tool}
+		{#each tools as { name, title, description, logo, toolUrl }}
 			<li>
-				<ToolCard
-					name={tool.name}
-					title={tool.title}
-					description={tool.description}
-					logo={tool.logo}
-					toolUrl={tool.toolUrl}
-				/>
+				<ToolCard {name} {title} {description} {logo} {toolUrl} />
 			</li>
 		{/each}
 	</ul>
diff --git a/src/routes/toolbox/tools-assets.ts b/src/routes/toolbox/tools-assets.ts
deleted file mode 100644
index f24ad5a..0000000
--- a/src/routes/toolbox/tools-assets.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import GitHubLogo from '$lib/assets/tools/github.svg';
-import OverleafLogo from '$lib/assets/tools/overleaf.svg';
-import ArgoCDLogo from '$lib/assets/tools/argocd.svg';
-import Studio3TLogo from '$lib/assets/tools/studio3t.svg';
-import WarpLogo from '$lib/assets/tools/warp.svg';
-import K9sLogo from '$lib/assets/tools/k9s.png';
-import FigmaLogo from '$lib/assets/tools/figma.svg';
-import AzureCLILogo from '$lib/assets/tools/azure-cli.svg';
-import KeystoreExplorer from '$lib/assets/tools/keystore-exporer.png';
-import TogglTrackLogo from '$lib/assets/tools/toggl-track.svg';
-import HelmLogo from '$lib/assets/tools/helm.svg';
-import RoyalTSXLogo from '$lib/assets/tools/royal-tsx.png';
-import PoetryLogo from '$lib/assets/tools/poetry.svg';
-import MaccyLogo from '$lib/assets/tools/maccy.png';
-import BalenaEtcherLogo from '$lib/assets/tools/balena-etcher.svg';
-import SendGridLogo from '$lib/assets/tools/sendgrid.svg';
-import InsomniaLogo from '$lib/assets/tools/insomnia.svg';
-import BlenderLogo from '$lib/assets/tools/blender.svg';
-import BitwardenLogo from '$lib/assets/tools/bitwarden.svg';
-import AzureDataStudioLogo from '$lib/assets/tools/azure-data-studio.png';
-import WiresharkLogo from '$lib/assets/tools/wireshark.png';
-import RectangleLogo from '$lib/assets/tools/rectangle.png';
-import PyCharmLogo from '$lib/assets/tools/pycharm.svg';
-import DockerLogo from '$lib/assets/tools/docker.webp';
-import CyberduckLogo from '$lib/assets/tools/cyberduck.png';
-import MullvadVPNLogo from '$lib/assets/tools/mullvad-vpn.svg';
-import JqLogo from '$lib/assets/tools/jq.svg';
-import AkamaiLogo from '$lib/assets/tools/akamai.svg';
-import CloudFlareLogo from '$lib/assets/tools/cloudflare.svg';
-import VisualStudioCodeLogo from '$lib/assets/tools/visual-studio-code.svg';
-import OpsGenieLogo from '$lib/assets/tools/opsgenie.svg';
-import VimLogo from '$lib/assets/tools/vim.svg';
-import NotionLogo from '$lib/assets/tools/notion.svg';
-import NvmLogo from '$lib/assets/tools/nvm.svg';
-import GIMPLogo from '$lib/assets/tools/gimp.svg';
-import AzureStorageExplorerLogo from '$lib/assets/tools/azure-storage-explorer.svg';
-import MeldLogo from '$lib/assets/tools/meld.svg';
-import KarabinerElementsLogo from '$lib/assets/tools/karabiner-elements.png';
-import KustomizeLogo from '$lib/assets/tools/kustomize.svg';
-import InkScapeLogo from '$lib/assets/tools/inkscape.svg';
-import OBSLogo from '$lib/assets/tools/obs.svg';
-import WireGuardLogo from '$lib/assets/tools/wireguard.svg';
-import SwitchHostsLogo from '$lib/assets/tools/switchhosts.svg';
-import SlackLogo from '$lib/assets/tools/slack.svg';
-import NmapLogo from '$lib/assets/tools/nmap.svg';
-import DBeaverLogo from '$lib/assets/tools/dbeaver.svg';
-import OpenTofuLogo from '$lib/assets/tools/opentofu.svg';
-import GitLensLogo from '$lib/assets/tools/gitlens.png';
-
-export {
-	GitHubLogo,
-	OverleafLogo,
-	ArgoCDLogo,
-	Studio3TLogo,
-	WarpLogo,
-	K9sLogo,
-	FigmaLogo,
-	AzureCLILogo,
-	KeystoreExplorer,
-	TogglTrackLogo,
-	HelmLogo,
-	RoyalTSXLogo,
-	PoetryLogo,
-	MaccyLogo,
-	BalenaEtcherLogo,
-	SendGridLogo,
-	InsomniaLogo,
-	BlenderLogo,
-	BitwardenLogo,
-	AzureDataStudioLogo,
-	RectangleLogo,
-	PyCharmLogo,
-	DockerLogo,
-	CyberduckLogo,
-	MullvadVPNLogo,
-	JqLogo,
-	AkamaiLogo,
-	CloudFlareLogo,
-	VisualStudioCodeLogo,
-	OpsGenieLogo,
-	VimLogo,
-	NotionLogo,
-	NvmLogo,
-	GIMPLogo,
-	AzureStorageExplorerLogo,
-	MeldLogo,
-	KarabinerElementsLogo,
-	KustomizeLogo,
-	InkScapeLogo,
-	OBSLogo,
-	WireGuardLogo,
-	SwitchHostsLogo,
-	WiresharkLogo,
-	SlackLogo,
-	NmapLogo,
-	DBeaverLogo,
-	OpenTofuLogo,
-	GitLensLogo
-};
diff --git a/src/routes/toolbox/tools-cards.ts b/src/routes/toolbox/tools-cards.ts
index 29e401e..210b70e 100644
--- a/src/routes/toolbox/tools-cards.ts
+++ b/src/routes/toolbox/tools-cards.ts
@@ -1,53 +1,102 @@
-import {
-	AkamaiLogo,
-	ArgoCDLogo,
-	AzureCLILogo,
-	AzureDataStudioLogo,
-	AzureStorageExplorerLogo,
-	BalenaEtcherLogo,
-	BitwardenLogo,
-	BlenderLogo,
-	CloudFlareLogo,
-	CyberduckLogo,
-	DBeaverLogo,
-	DockerLogo,
-	FigmaLogo,
-	GIMPLogo,
+import GitHubLogo from '$lib/assets/tools/github.svg';
+import OverleafLogo from '$lib/assets/tools/overleaf.svg';
+import ArgoCDLogo from '$lib/assets/tools/argocd.svg';
+import Studio3TLogo from '$lib/assets/tools/studio3t.svg';
+import WarpLogo from '$lib/assets/tools/warp.svg';
+import K9sLogo from '$lib/assets/tools/k9s.png';
+import FigmaLogo from '$lib/assets/tools/figma.svg';
+import AzureCLILogo from '$lib/assets/tools/azure-cli.svg';
+import KeystoreExplorer from '$lib/assets/tools/keystore-exporer.png';
+import TogglTrackLogo from '$lib/assets/tools/toggl-track.svg';
+import HelmLogo from '$lib/assets/tools/helm.svg';
+import RoyalTSXLogo from '$lib/assets/tools/royal-tsx.png';
+import PoetryLogo from '$lib/assets/tools/poetry.svg';
+import MaccyLogo from '$lib/assets/tools/maccy.png';
+import BalenaEtcherLogo from '$lib/assets/tools/balena-etcher.svg';
+import SendGridLogo from '$lib/assets/tools/sendgrid.svg';
+import InsomniaLogo from '$lib/assets/tools/insomnia.svg';
+import BlenderLogo from '$lib/assets/tools/blender.svg';
+import BitwardenLogo from '$lib/assets/tools/bitwarden.svg';
+import AzureDataStudioLogo from '$lib/assets/tools/azure-data-studio.png';
+import WiresharkLogo from '$lib/assets/tools/wireshark.png';
+import RectangleLogo from '$lib/assets/tools/rectangle.png';
+import PyCharmLogo from '$lib/assets/tools/pycharm.svg';
+import DockerLogo from '$lib/assets/tools/docker.webp';
+import CyberduckLogo from '$lib/assets/tools/cyberduck.png';
+import MullvadVPNLogo from '$lib/assets/tools/mullvad-vpn.svg';
+import JqLogo from '$lib/assets/tools/jq.svg';
+import AkamaiLogo from '$lib/assets/tools/akamai.svg';
+import CloudFlareLogo from '$lib/assets/tools/cloudflare.svg';
+import VisualStudioCodeLogo from '$lib/assets/tools/visual-studio-code.svg';
+import OpsGenieLogo from '$lib/assets/tools/opsgenie.svg';
+import VimLogo from '$lib/assets/tools/vim.svg';
+import NotionLogo from '$lib/assets/tools/notion.svg';
+import NvmLogo from '$lib/assets/tools/nvm.svg';
+import GIMPLogo from '$lib/assets/tools/gimp.svg';
+import AzureStorageExplorerLogo from '$lib/assets/tools/azure-storage-explorer.svg';
+import MeldLogo from '$lib/assets/tools/meld.svg';
+import KarabinerElementsLogo from '$lib/assets/tools/karabiner-elements.png';
+import KustomizeLogo from '$lib/assets/tools/kustomize.svg';
+import InkScapeLogo from '$lib/assets/tools/inkscape.svg';
+import OBSLogo from '$lib/assets/tools/obs.svg';
+import WireGuardLogo from '$lib/assets/tools/wireguard.svg';
+import SwitchHostsLogo from '$lib/assets/tools/switchhosts.svg';
+import SlackLogo from '$lib/assets/tools/slack.svg';
+import NmapLogo from '$lib/assets/tools/nmap.svg';
+import DBeaverLogo from '$lib/assets/tools/dbeaver.svg';
+import OpenTofuLogo from '$lib/assets/tools/opentofu.svg';
+import GitLensLogo from '$lib/assets/tools/gitlens.png';
+
+export {
 	GitHubLogo,
-	GitLensLogo,
-	HelmLogo,
-	InkScapeLogo,
-	InsomniaLogo,
-	JqLogo,
+	OverleafLogo,
+	ArgoCDLogo,
+	Studio3TLogo,
+	WarpLogo,
 	K9sLogo,
-	KarabinerElementsLogo,
+	FigmaLogo,
+	AzureCLILogo,
 	KeystoreExplorer,
-	KustomizeLogo,
+	TogglTrackLogo,
+	HelmLogo,
+	RoyalTSXLogo,
+	PoetryLogo,
 	MaccyLogo,
-	MeldLogo,
+	BalenaEtcherLogo,
+	SendGridLogo,
+	InsomniaLogo,
+	BlenderLogo,
+	BitwardenLogo,
+	AzureDataStudioLogo,
+	RectangleLogo,
+	PyCharmLogo,
+	DockerLogo,
+	CyberduckLogo,
 	MullvadVPNLogo,
-	NmapLogo,
+	JqLogo,
+	AkamaiLogo,
+	CloudFlareLogo,
+	VisualStudioCodeLogo,
+	OpsGenieLogo,
+	VimLogo,
 	NotionLogo,
 	NvmLogo,
+	GIMPLogo,
+	AzureStorageExplorerLogo,
+	MeldLogo,
+	KarabinerElementsLogo,
+	KustomizeLogo,
+	InkScapeLogo,
 	OBSLogo,
-	OpsGenieLogo,
-	OverleafLogo,
-	PoetryLogo,
-	PyCharmLogo,
-	RectangleLogo,
-	RoyalTSXLogo,
-	SendGridLogo,
-	SlackLogo,
-	Studio3TLogo,
-	SwitchHostsLogo,
-	OpenTofuLogo,
-	TogglTrackLogo,
-	VimLogo,
-	VisualStudioCodeLogo,
-	WarpLogo,
 	WireGuardLogo,
-	WiresharkLogo
-} from './tools-assets';
+	SwitchHostsLogo,
+	WiresharkLogo,
+	SlackLogo,
+	NmapLogo,
+	DBeaverLogo,
+	OpenTofuLogo,
+	GitLensLogo
+};
 
 export interface Tool {
 	name: string;