feat: added profile picture

src/lib/components/Navigation.svelte

@@ -10,7 +10,7 @@
 	}
 </script>
 
-<nav class="list-nav p-4">
+<nav class="list-nav p-3">
 	<ul>
 		{#each routes as route}
 			<li>

src/routes/+layout.svelte

@@ -27,7 +27,7 @@
 </Drawer>
 
 <AppShell
-	slotSidebarLeft="w-0 md:w-52"
+	slotSidebarLeft="w-0 md:w-40"
 	on:scroll={handleScroll}
 >
 	<svelte:fragment slot="header">
@@ -37,7 +37,7 @@
 		<Navigation {routes} />
 	</svelte:fragment>
 	<!-- Router Slot -->
-	<div class="container p-10 mx-auto">
+	<div class="container p-4 mx-auto">
 		<slot />
 	</div>
 	<!-- ---- / ---- -->

src/routes/+page.svelte

@@ -1,5 +1,6 @@
-<script lang='ts'>
+<script lang="ts">
 	import { calculateAge } from '$lib/calculate-age';
+	import picture from '$lib/assets/bartvdbraak_profile_noire.jpg';
 </script>
 
 <svelte:head>
@@ -9,37 +10,46 @@
 <main class="container mx-auto px-4 py-8 text-left">
 	<h2 class="text-3xl font-bold mb-4">About Me</h2>
 
-	<p class="text-lg leading-relaxed mb-8">
+	<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
-		Welcome to my homepage! I'm a passionate DevOps engineer based in Zaandam, Netherlands. At {calculateAge("1994-10-18")}
+		<div class="md:col-span-2">
-		years old, I've already gathered a wealth of experience and expertise in the world of
+			<p class="text-lg leading-relaxed mb-8">
-		technology. From programming in Python, Javascript, and Bash to utilizing cutting-edge
+				Welcome to my homepage! I'm a passionate DevOps engineer based in Zaandam, Netherlands. At {calculateAge(
-		technologies like Terraform, Bicep, and Kubernetes, I've honed my skills to drive efficient and
+					'1994-10-18'
-		innovative solutions. My journey in the tech industry began during my Information Sciences
+				)}
-		studies, where I fell in love with data-driven projects and statistical learning. This passion
+				years old, I've already gathered a wealth of experience and expertise in the world of technology.
-		led me to explore languages like Python and LaTeX, enabling me to bring ideas to life through
+				From programming in Python, Javascript, and Bash to utilizing cutting-edge technologies like
-		powerful data management and visualization.
+				Terraform, Bicep, and Kubernetes, I've honed my skills to drive efficient and innovative solutions.
-	</p>
+				My journey in the tech industry began during my Information Sciences studies, where I fell in
+				love with data-driven projects and statistical learning. This passion led me to explore languages
+				like Python and LaTeX, enabling me to bring ideas to life through powerful data management and
+				visualization.
+			</p>
 
-	<h2 class="text-3xl font-bold mb-4">Empowering the Cloud with Azure</h2>
+			<h2 class="text-3xl font-bold mb-4">Empowering the Cloud with Azure</h2>
 
-	<p class="text-lg leading-relaxed mb-8">
+			<p class="text-lg leading-relaxed mb-8">
-		My career took off when I joined Triple as a DevOps Engineer. At Triple, I've embraced the world
+				My career took off when I joined Triple as a DevOps Engineer. At Triple, I've embraced the
-		of Azure and Azure DevOps, mastering the intricacies of cloud architecture and deployment.
+				world of Azure and Azure DevOps, mastering the intricacies of cloud architecture and
-		Holding certifications like AZ-104 and CKA has further solidified my expertise, empowering me to
+				deployment. Holding certifications like AZ-104 and CKA has further solidified my expertise,
-		build and manage robust, scalable, and secure cloud environments. My proficiency in
+				empowering me to build and manage robust, scalable, and secure cloud environments. My
-		containerization and Kubernetes has allowed me to take application development to new heights,
+				proficiency in containerization and Kubernetes has allowed me to take application
-		ensuring seamless and efficient deployment at scale.
+				development to new heights, ensuring seamless and efficient deployment at scale.
-	</p>
+			</p>
+		</div>
+		<div class="md:col-span-1 flex justify-end">
+			<img src={picture} alt="Bart van der Braak with a noire effect" class="max-w-1/3 mb-4 object-cover" />
+		</div>
+	</div>
 	
 	<h2 class="text-3xl font-bold mb-4">Solving Problems with Code and Automation</h2>
 
 	<p class="text-lg leading-relaxed mb-8">
 		As a DevOps engineer, I thrive on solving complex challenges with the power of code and
-		automation. My passion for streamlining workflows led me to create internal tooling using APIs,
+		automation. My passion for streamlining workflows led me to create internal tooling using
-		boosting productivity for myself and my colleagues. Outside of work, I enjoy taking on side
+		APIs, boosting productivity for myself and my colleagues. Outside of work, I enjoy taking on
-		projects that push my boundaries, expanding my skill set, and exploring new technologies. I
+		side projects that push my boundaries, expanding my skill set, and exploring new
-		strongly believe that innovation and continuous learning are key drivers of success in the
+		technologies. I strongly believe that innovation and continuous learning are key drivers of
-		ever-evolving tech landscape.
+		success in the ever-evolving tech landscape.
 	</p>
 	
 	<h2 class="text-3xl font-bold mb-4">Cat Lover and Whiskey Enthusiast</h2>