Merge pull request #73 from bartvdbraak/feat/3js-tools

3js additions
2025-04-26 17:11:21 +00:00 · 2023-07-29 17:24:30 +02:00 · 2023-07-29 17:24:30 +02:00 · efa6099958
commit efa6099958
parent bcde770547 e35966d7ff
8 changed files with 49 additions and 34 deletions
--- a/src/app.html
+++ b/src/app.html
@ -11,6 +11,7 @@
  <link rel="mask-icon" href="%sveltekit.assets%/safari-pinned-tab.svg" color="#5bbad5">
 	<meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">
+  <title></title>
 	%sveltekit.head%
 </head>
 <body data-sveltekit-preload-data="hover">
--- a/src/lib/assets/bartvdbraak_profile_noire.jpg
+++ b/src/lib/assets/bartvdbraak_profile_noire.jpg
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@ -22,7 +22,7 @@
 	</svelte:fragment>
 	<svelte:fragment slot="trail">
 		<a
-			href="https://github.com/bartvdbraak/hellob.art"
+			href="https://github.com/bartvdbraak"
 			target="_blank"
 			rel="noopener noreferrer"
 			class="btn-icon variant-primary"><GitHub /></a
--- a/src/lib/components/Navigation.svelte
+++ b/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>
--- a/src/routes/+layout.svelte
+++ b/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>
 	<!-- ---- / ---- -->
--- a/src/routes/+page.svelte
+++ b/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,39 +10,48 @@
 <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">
-		Welcome to my homepage! I'm a passionate DevOps engineer based in Zaandam, Netherlands. At {calculateAge("1994-10-18")}
-		years old, I've already gathered a wealth of experience and expertise in the world of
-		technology. From programming in Python, Javascript, and Bash to utilizing cutting-edge
-		technologies like Terraform, Bicep, and Kubernetes, I've honed my skills to drive efficient and
-		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
-		led me to explore languages like Python and LaTeX, enabling me to bring ideas to life through
-		powerful data management and visualization.
-	</p>
+	<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+		<div class="md:col-span-2">
+			<p class="text-lg leading-relaxed mb-8">
+				Welcome to my homepage! I'm a passionate DevOps engineer based in Zaandam, Netherlands. At {calculateAge(
+					'1994-10-18'
+				)}
+				years old, I've already gathered a wealth of experience and expertise in the world of technology.
+				From programming in Python, Javascript, and Bash to utilizing cutting-edge technologies like
+				Terraform, Bicep, and Kubernetes, I've honed my skills to drive efficient and 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 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>
-
-	<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
-		of Azure and Azure DevOps, mastering the intricacies of cloud architecture and deployment.
-		Holding certifications like AZ-104 and CKA has further solidified my expertise, empowering me to
-		build and manage robust, scalable, and secure cloud environments. My proficiency in
-		containerization and Kubernetes has allowed me to take application development to new heights,
-		ensuring seamless and efficient deployment at scale.
-	</p>
+			<h2 class="text-3xl font-bold mb-4">Empowering the Cloud with Azure</h2>

+			<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 of Azure and Azure DevOps, mastering the intricacies of cloud architecture and
+				deployment. Holding certifications like AZ-104 and CKA has further solidified my expertise,
+				empowering me to build and manage robust, scalable, and secure cloud environments. My
+				proficiency in containerization and Kubernetes has allowed me to take application
+				development to new heights, ensuring seamless and efficient deployment at scale.
+			</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,
-		boosting productivity for myself and my colleagues. Outside of work, I enjoy taking on side
-		projects that push my boundaries, expanding my skill set, and exploring new technologies. I
-		strongly believe that innovation and continuous learning are key drivers of success in the
-		ever-evolving tech landscape.
+		automation. My passion for streamlining workflows led me to create internal tooling using
+		APIs, boosting productivity for myself and my colleagues. Outside of work, I enjoy taking on
+		side projects that push my boundaries, expanding my skill set, and exploring new
+		technologies. I strongly believe that innovation and continuous learning are key drivers of
+		success in the ever-evolving tech landscape.
 	</p>
-
+	
 	<h2 class="text-3xl font-bold mb-4">Cat Lover and Whiskey Enthusiast</h2>

 	<p class="text-lg leading-relaxed mb-8">
--- a/src/routes/tools/+page.svelte
+++ b/src/routes/tools/+page.svelte
@ -13,6 +13,5 @@

 	<Canvas>
 		<Scene />
-		<Github3d />
 	</Canvas>
 </main>
--- a/src/routes/tools/Scene.svelte
+++ b/src/routes/tools/Scene.svelte
@ -21,6 +21,8 @@
 	}}
 />

+<T.DirectionalLight position={[0, 10, 10]} />
+
 <T.Mesh
 	rotation.y={rotation}
 	position.y={1}
@ -30,13 +32,16 @@
 	on:click={() => scale.set(3)}
 >
 	<T.BoxGeometry args={[1, 2, 1]} />
-	<T.MeshBasicMaterial color={[0, 0, 0]} />
+	<T.MeshBasicMaterial color={[255, 255, 255]} />
 </T.Mesh>

+
 <Github3d
  position={[0, 0, 0]}
 	scale={$scale}
 	on:pointerenter={() => scale.set(1.5)}
 	on:pointerleave={() => scale.set(1)}
 	on:click={() => scale.set(3)}
-/>
+>
+</Github3d>
+