From 3bb13dbdb0f30e19bc4fee34219a51fcc4648169 Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Tue, 16 Jan 2024 19:41:09 +0100
Subject: [PATCH 1/4] refactor: use consistent styling for icons and footer
---
src/lib/components/site/mode-toggle.svelte | 6 +++---
src/lib/components/site/nav/mobile-nav.svelte | 2 +-
src/lib/components/site/site-footer.svelte | 14 +++++++++++---
src/lib/components/site/site-header.svelte | 10 +++++-----
4 files changed, 20 insertions(+), 12 deletions(-)
diff --git a/src/lib/components/site/mode-toggle.svelte b/src/lib/components/site/mode-toggle.svelte
index 086d37d..afffe5c 100644
--- a/src/lib/components/site/mode-toggle.svelte
+++ b/src/lib/components/site/mode-toggle.svelte
@@ -7,12 +7,12 @@
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
- <Button builders={[builder]} variant="ghost" class="w-9 px-0">
+ <Button builders={[builder]} variant="ghost" class="h-9 w-9">
<Sun
- class="dark:-roate-90 h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:scale-0"
+ class="absolute h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
/>
<Moon
- class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+ class="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
/>
<span class="sr-only">Toggle theme</span>
</Button>
diff --git a/src/lib/components/site/nav/mobile-nav.svelte b/src/lib/components/site/nav/mobile-nav.svelte
index e04e153..8777ca7 100644
--- a/src/lib/components/site/nav/mobile-nav.svelte
+++ b/src/lib/components/site/nav/mobile-nav.svelte
@@ -23,7 +23,7 @@
</Sheet.Trigger>
<Sheet.Content side="right" class="pr-0">
<MobileLink href="/" class="flex items-center" bind:open>
- <span class="sr-only">Return to home</span>
+ <span class="sr-only">Logo icon (return home)</span>
<img src={Icons.logoIcon} class="mr-2 h-4 w-4" alt="icon of hellob.art" />
<span class="font-mono font-bold tracking-tighter">{siteConfig.name}</span>
</MobileLink>
diff --git a/src/lib/components/site/site-footer.svelte b/src/lib/components/site/site-footer.svelte
index 51e1100..e8def73 100644
--- a/src/lib/components/site/site-footer.svelte
+++ b/src/lib/components/site/site-footer.svelte
@@ -1,6 +1,8 @@
<script lang="ts">
+ import { Blocks, Cloud } from 'lucide-svelte';
import { siteConfig } from '$lib/config/site';
import Separator from '$lib/components/ui/separator/separator.svelte';
+ import { Code } from 'radix-icons-svelte';
</script>
<footer class="container py-6">
@@ -13,7 +15,9 @@
<div class="flex justify-center">
<div class="flex h-5 items-center space-x-4 text-xs">
<div>
- Built using <a
+ <span class="hidden sm:inline">Built using</span>
+ <Blocks class="inline h-[1rem] w-[1rem] sm:hidden" />
+ <a
href={siteConfig.links.shadcnSvelte}
target="_blank"
rel="noreferrer"
@@ -22,7 +26,9 @@
</div>
<Separator orientation="vertical" />
<div>
- Hosted on <a
+ <span class="hidden sm:inline">Hosted on</span>
+ <Cloud class="inline h-[1rem] w-[1rem] sm:hidden" />
+ <a
href={siteConfig.links.vercel}
target="_blank"
rel="noreferrer"
@@ -31,7 +37,9 @@
</div>
<Separator orientation="vertical" />
<div>
- Source code at <a
+ <span class="hidden sm:inline">Source code at</span>
+ <Code class="inline h-[1rem] w-[1rem] sm:hidden" />
+ <a
href={siteConfig.links.gitHubProject}
target="_blank"
rel="noreferrer"
diff --git a/src/lib/components/site/site-header.svelte b/src/lib/components/site/site-header.svelte
index c662beb..cefdf38 100644
--- a/src/lib/components/site/site-header.svelte
+++ b/src/lib/components/site/site-header.svelte
@@ -10,12 +10,12 @@
>
<div class="container flex h-14 items-center">
<a href="/" class="mr-6 flex items-center space-x-2">
- <span class="sr-only">Return to home</span>
+ <span class="sr-only">Logo (return home)</span>
<Icons.logo />
</a>
<MainNav />
<div class="flex flex-1 items-center justify-between space-x-2 sm:space-x-4 md:justify-end">
- <nav class="flex items-center">
+ <nav class="flex">
<a href={siteConfig.links.gitHubProfile} target="_blank" rel="noopener noreferrer">
<div
class={cn(
@@ -23,7 +23,7 @@
size: 'sm',
variant: 'ghost'
}),
- 'w-9 px-0'
+ 'h-9 w-9 px-0'
)}
>
<Icons.gitHub class="h-4 w-4" />
@@ -37,10 +37,10 @@
size: 'sm',
variant: 'ghost'
}),
- 'w-9 px-0'
+ 'h-9 w-9 px-0'
)}
>
- <Icons.linkedIn class="h-3 w-3 fill-current" />
+ <Icons.linkedIn class="h-4 w-4" />
<span class="sr-only">LinkedIn</span>
</div>
</a>
From 39422344c89e305c6041f7cfbe0fff8ae7a06479 Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Tue, 16 Jan 2024 20:44:42 +0100
Subject: [PATCH 2/4] feat: update icon references and title
---
src/app.html | 11 +++++++++--
src/lib/components/site/metadata.svelte | 5 +----
2 files changed, 10 insertions(+), 6 deletions(-)
diff --git a/src/app.html b/src/app.html
index ca926f2..b78caeb 100644
--- a/src/app.html
+++ b/src/app.html
@@ -2,8 +2,15 @@
<html lang="en">
<head>
<meta charset="utf-8" />
- <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
- <meta name="viewport" content="width=device-width" />
+ <link rel="icon" href="%sveltekit.assets%/favicon.ico">
+ <meta name="viewport" content="width=device-width">
+ <link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png">
+ <link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png">
+ <link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png">
+ <link rel="manifest" href="%sveltekit.assets%/site.webmanifest">
+ <link rel="mask-icon" href="%sveltekit.assets%/safari-pinned-tab.svg" color="#000000">
+ <meta name="msapplication-TileColor" content="#da532c">
+ <meta name="theme-color" content="#ffffff">
%sveltekit.head%
</head>
<body
diff --git a/src/lib/components/site/metadata.svelte b/src/lib/components/site/metadata.svelte
index 7bd9e58..6d2786e 100644
--- a/src/lib/components/site/metadata.svelte
+++ b/src/lib/components/site/metadata.svelte
@@ -4,7 +4,7 @@
export let title: string = siteConfig.name;
- $: title = $page.data?.title ? `${$page.data.title} - ${siteConfig.name}` : siteConfig.name;
+ $: title = $page.data?.title ? `${$page.data.title} — ${siteConfig.name}` : siteConfig.name;
</script>
<svelte:head>
@@ -29,7 +29,4 @@
<meta property="og:description" content={siteConfig.description} />
<meta property="og:site_name" content={siteConfig.name} />
<meta property="og:locale" content="EN_US" />
- <link rel="icon" href="/favicon.ico" />
- <link rel="shortcut icon" href="/favicon-16x16.png" />
- <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</svelte:head>
From 1f0532eacc78256359718739c09341f59767cbba Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Tue, 16 Jan 2024 20:44:57 +0100
Subject: [PATCH 3/4] feat: update services and technologies in page.svelte
---
src/routes/+page.svelte | 7 ++++---
1 file changed, 4 insertions(+), 3 deletions(-)
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 958449e..6770d8b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -56,9 +56,10 @@
rel="noreferrer"
class="font-medium underline underline-offset-4"
href="https://www.wearetriple.com">Triple</a
- >, I've been diving deep into Azure and Azure DevOps. Nailed down certifications like
- AZ-104 and CKA. I'm not just pushing code, but building and managing solid, scalable
- cloud setups.
+ >, my role involves providing services to clients including HEINEKEN, BAM, and citizenM.
+ I utilize tools like Akamai, Azure, Azure DevOps and SendGrid to create and maintain
+ robust, scalable cloud infrastructures. For operational purposes, I employ technologies
+ like SaltStack, PRTG, and LogicMonitor.
</p>
<p class="mt-2">
I love to work on personal projects or playing games with friends. Beyond the screens,
From 11bde637f7728367fe35baa1a705da6a28a73520 Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Tue, 16 Jan 2024 20:52:45 +0100
Subject: [PATCH 4/4] feat: update HTML meta tags and link attributes
---
src/app.html | 18 +++++++++---------
1 file changed, 9 insertions(+), 9 deletions(-)
diff --git a/src/app.html b/src/app.html
index b78caeb..8e74737 100644
--- a/src/app.html
+++ b/src/app.html
@@ -2,15 +2,15 @@
<html lang="en">
<head>
<meta charset="utf-8" />
- <link rel="icon" href="%sveltekit.assets%/favicon.ico">
- <meta name="viewport" content="width=device-width">
- <link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png">
- <link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png">
- <link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png">
- <link rel="manifest" href="%sveltekit.assets%/site.webmanifest">
- <link rel="mask-icon" href="%sveltekit.assets%/safari-pinned-tab.svg" color="#000000">
- <meta name="msapplication-TileColor" content="#da532c">
- <meta name="theme-color" content="#ffffff">
+ <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+ <meta name="viewport" content="width=device-width" />
+ <link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png" />
+ <link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png" />
+ <link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png" />
+ <link rel="manifest" href="%sveltekit.assets%/site.webmanifest" />
+ <link rel="mask-icon" href="%sveltekit.assets%/safari-pinned-tab.svg" color="#000000" />
+ <meta name="msapplication-TileColor" content="#da532c" />
+ <meta name="theme-color" content="#ffffff" />
%sveltekit.head%
</head>
<body