Merge pull request #78 from bartvdbraak/feat/layout-changes

Layout changes

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import '../theme.postcss';
+	import '@skeletonlabs/skeleton/themes/theme-crimson.css';
 	import '@skeletonlabs/skeleton/styles/skeleton.css';
 	import '../app.postcss';
 	import { AppShell, Drawer } from '@skeletonlabs/skeleton';
@@ -31,7 +31,7 @@
 		{ url: '/', label: 'Home' },
 		{ url: '/projects', label: 'Projects' },
 		{ url: '/tools', label: 'Tools' },
-		{ url: '/blog', label: 'Blog' }
+		// { url: '/blog', label: 'Blog' }
 	];
 
 	let progress = 0;

src/routes/+page.svelte

@@ -5,6 +5,7 @@
 
 <svelte:head>
 	<title>hellob.art &mdash; home</title>
+	<meta name="description" content="Meet Bart, a passionate DevOps engineer from Zaandam, Netherlands. With expertise in Azure, Kubernetes, and automation, he loves solving challenges through code. Discover his journey, interests in cats and whiskey, and how to connect with him for exciting collaborations.">
 </svelte:head>
 
 <main class="container mx-auto px-4 py-8 text-left">

src/routes/projects/+page.svelte

@@ -1,7 +1,9 @@
 <script>
-	import videowallImage from '$lib/assets/videowall-irl.jpeg';
-	import tripleLogo from '$lib/assets/triple-logo.png';
-	import zaantjeImage from '$lib/assets/zaantje-3d.png';
+	import videowallImage from '$lib/assets/videowall.jpeg';
+	import videowallLogo from '$lib/assets/videowall-logo.png';
+	import ticketDashboardImage from '$lib/assets/ticketdashboard.png';
+	import ticketDashboardLogo from '$lib/assets/triple-logo.png';
+	import zaantjeImage from '$lib/assets/zaantje.png';
 	import zaantjeLogo from '$lib/assets/zaantje-logo.png';
 	import ProjectCard from '$lib/components/ProjectCard.svelte';
 
@@ -10,16 +12,28 @@
 			id: 1,
 			link: '#',
 			headerImage: videowallImage,
-			headerSubTitle: 'Internal Project',
+			headerSubTitle: 'Private Project',
 			title: 'Videowall',
 			description: `An internal application to control an impressive 6x5 monitor setup with a user-friendly
-										frontend built on Next.js and a powerful backend developed in Golang.`,
-			logo: tripleLogo,
+										frontend built with React and Next.js utilizing a powerful backend developed in Golang.`,
+			logo: videowallLogo,
 			contributors: [],
 			date: '2021'
 		},
 		{
 			id: 2,
+			link: '#',
+			headerImage: ticketDashboardImage,
+			headerSubTitle: 'Private Project',
+			title: 'Ticket Dashboard',
+			description: `Web app that consolidates tickets from various sources into one view for easy navigation, filters, and search for efficient 
+			ticket management. Developed with Next.js for frontend and Golang for backend.`,
+			logo: ticketDashboardLogo,
+			contributors: [],
+			date: '2020'
+		},
+		{
+			id: 3,
 			link: 'https://zaantje.com',
 			headerImage: zaantjeImage,
 			headerSubTitle: 'Personal Project',
@@ -35,10 +49,20 @@
 
 <svelte:head>
 	<title>hellob.art &mdash; projects</title>
+	<meta name="description" content="Explore a diverse collection of web applications and virtual tours in the portfolio of a passionate DevOps engineer. Discover innovative projects in React, Golang, Next.js, and more.">
 </svelte:head>
 
 <main class="container mx-auto px-4 py-8 text-left">
 	<h2 class="text-3xl font-bold mb-8">My Projects</h2>
+
+	<p class="text-lg leading-relaxed mb-8">
+		Here, you'll find a curated collection of projects that I've either created or contributed to as
+		a passionate DevOps engineer and developer. This portfolio encompasses a diverse range of
+		endeavors, including both public and private projects. With a mix of open-source contributions
+		and private collaborations from my corporate endeavors, this showcase represents my dedication
+		to pushing the boundaries of innovation in various domains.
+	</p>
+
 	<div class="w-full text-token grid grid-cols-1 md:grid-cols-2 gap-4">
 		{#each projects as project}
 			<ProjectCard

src/routes/tools/+page.svelte

@@ -3,53 +3,109 @@
 	import { Canvas } from '@threlte/core';
 	import { T } from '@threlte/core';
 	import { ContactShadows, Float, Grid, OrbitControls } from '@threlte/extras';
-	import Github from './Github.svelte';
-	import TerraformFlat from './TerraformFlat.svelte';
-	import Kubernetes from './Kubernetes.svelte';
+	import Github from './models/Github.svelte';
+	import TerraformFlat from './models/TerraformFlat.svelte';
+	import Kubernetes from './models/Kubernetes.svelte';
+	import Warp from './models/Warp.svelte';
 </script>
 
 <svelte:head>
 	<title>hellob.art &mdash; tools</title>
+	<meta name="description" content="Explore essential DevOps tools like Kubernetes, Terraform, Warp, and version control platforms GitHub, Azure DevOps, and GitLab.">
 </svelte:head>
 
 <main class="container mx-auto px-4 py-8 text-left">
 	<h2 class="text-3xl font-bold mb-8">Tools</h2>
 
-	<Canvas>
-		<T.PerspectiveCamera makeDefault position={[-10, 10, 30]} fov={15}>
-			<OrbitControls
-				autoRotate
-				enableZoom={false}
-				enableDamping
-				autoRotateSpeed={0.2}
-				target.y={3}
-			/>
-		</T.PerspectiveCamera>
+	<h2 class="text-2xl font-bold mb-8">Kubernetes</h2>
 
-		<T.DirectionalLight intensity={0.5} position.x={5} position.y={10} />
-		<T.AmbientLight intensity={0.2} />
+	<p class="text-lg leading-relaxed mb-8">
+		Kubernetes is an indispensable part of my daily routine, providing powerful container
+		orchestration capabilities for seamless application deployment and scaling. I enhance my
+		Kubernetes workflows with essential tools like k9s for cluster interactions, ArgoCD for
+		GitOps-based continuous delivery, Kustomize for configuration customization, and AKS (Azure
+		Kubernetes Service) for managed solutions. This combination streamlines my tasks and ensures
+		efficient, reliable application management.
+	</p>
 
-		<Grid
+	<h2 class="text-2xl font-bold mb-8">Terraform</h2>
+
+	<p class="text-lg leading-relaxed mb-8">
+		Terraform plays a central role in my DevOps toolkit, empowering me to manage and provision
+		infrastructure efficiently as code. It saves valuable time and effort while maintaining
+		consistency across deployments, preventing configuration drift in dynamic cloud environments.
+		The reproductibility that Terraform offers is a game-changer, enabling easy and reliable
+		environment recreation for testing and development. Seamless integration with Azure DevOps
+		allows for streamlined CI/CD pipelines, instilling confidence in continuously delivering
+		infrastructure changes. Embracing Terraform has simplified my daily tasks and enhanced the
+		overall robustness and stability of our cloud infrastructure.
+	</p>
+
+	<div class="max-h-80">
+		<Canvas>
+			<T.PerspectiveCamera makeDefault position={[-10, 15, 20]} fov={10}>
+				<OrbitControls
+					autoRotate
+					enableZoom={false}
+					enableDamping
+					autoRotateSpeed={0.2}
+					target.y={3}
+				/>
+			</T.PerspectiveCamera>
+
+			<T.DirectionalLight intensity={0.5} position.x={5} position.y={3} />
+			<T.AmbientLight intensity={0.2} />
+
+			<!-- <Grid
 			position.y={-0.001}
 			cellColor="#ffffff"
 			sectionColor="#ffffff"
 			sectionThickness={0}
 			fadeDistance={40}
 			cellSize={2}
-		/>
+		/> -->
 
-		<ContactShadows scale={10} blur={2} far={2.5} opacity={0.5} />
+			<ContactShadows scale={10} blur={2} far={2.5} opacity={0.5} />
 
-		<Float floatIntensity={1} floatingRange={[0, 1]}>
-			<Github position.y={0.4} position.z={-0.75} scale={50} />
-		</Float>
+			<Float floatIntensity={1} floatingRange={[0, 1]}>
+				<Github position.y={0} position.z={-0.75} scale={50} />
+			</Float>
 
-		<Float floatIntensity={1} floatingRange={[0, 1]}>
-			<TerraformFlat position.y={0.4} position.z={-4} scale={10} />
-		</Float>
+			<Float floatIntensity={1} floatingRange={[0, 1]}>
+				<TerraformFlat position.y={0} position.z={-8} position.x={-5} scale={10} />
+			</Float>
 
-		<Float floatIntensity={1} floatingRange={[0, 1]}>
-			<Kubernetes position.y={0.4} position.z={-2} position.x={-3} scale={100} />
-		</Float>
-	</Canvas>
+			<Float floatIntensity={1} floatingRange={[0, 1]}>
+				<Kubernetes position.y={0} position.z={-2} position.x={-5} scale={100} />
+			</Float>
+
+			<Float floatIntensity={1} floatingRange={[0, 1]}>
+				<Warp position.y={0} position.z={-1} position.x={6} scale={8} />
+			</Float>
+		</Canvas>
+	</div>
+
+	<h2 class="text-2xl font-bold mb-8">Warp</h2>
+
+	<p class="text-lg leading-relaxed mb-8">
+		Warp, the high-performance terminal built in Rust, is an essential tool I rely on daily for
+		development and operations. Its full-text editor for commands, visual grouping of outputs into
+		blocks, and enhanced shortcuts have significantly boosted my productivity and made CLI
+		interactions more intuitive. With its impressive speed, multiplatform support, and seamless
+		integration into existing shells, Warp excels in handling complex tasks, making it indispensable
+		for efficient and responsive terminal operations.
+	</p>
+
+	<h2 class="text-2xl font-bold mb-8">GitHub, Azure DevOps and Gitlab</h2>
+
+	<p class="text-lg leading-relaxed mb-8">
+		In my daily work, essential platforms like GitHub, Azure DevOps, and GitLab play a crucial role.
+		For public and personal projects, GitHub provides robust version control and collaboration
+		tools. Azure DevOps, on the other hand, is my preferred choice for private and corporate
+		projects, thanks to seamless integration with Azure services and powerful CI/CD capabilities,
+		optimizing application development and deployment. Additionally, I leverage GitLab for specific
+		projects, benefiting from its strong version control features and CI/CD pipelines. Together,
+		these platforms empower efficient collaboration, project management, and development processes,
+		catering to a wide range of contexts.
+	</p>
 </main>

src/routes/tools/models/Kubernetes.svelte

@@ -22,12 +22,12 @@ Command: npx @threlte/gltf@1.0.0-next.13 ./static/models/kubernetes.glb --transf
     <T.Mesh
       geometry={gltf.nodes.Curve.geometry}
       material={gltf.materials['SVGMat.006']}
-      rotation={[Math.PI / 2, 0, 0]}
+      rotation={[Math.PI / 2, 0, 0.9]}
     />
     <T.Mesh
       geometry={gltf.nodes.Curve001.geometry}
       material={gltf.materials['SVGMat.007']}
-      rotation={[Math.PI / 2, 0, 0]}
+      rotation={[Math.PI / 2, 0, 0.9]}
     />
   {:catch error}
     <slot name="error" {error} />

src/routes/tools/models/Warp.svelte

@@ -0,0 +1,29 @@
+<!--
+Auto-generated by: https://github.com/threlte/threlte/tree/main/packages/gltf
+Command: npx @threlte/gltf@1.0.0-next.13 ./static/models/warp.glb --transform
+-->
+
+<script>
+  import { Group } from 'three'
+  import { T, forwardEventHandlers } from '@threlte/core'
+  import { useGltf } from '@threlte/extras'
+
+  export const ref = new Group()
+
+  const gltf = useGltf('/models/warp-transformed.glb', { useDraco: true })
+
+  const component = forwardEventHandlers()
+</script>
+
+<T is={ref} dispose={false} {...$$restProps} bind:this={$component}>
+  {#await gltf}
+    <slot name="fallback" />
+  {:then gltf}
+    <T.Mesh geometry={gltf.nodes.Warp.geometry} material={gltf.materials.SVGMat} rotation={[Math.PI / 2, 0, 0.3]} />
+    <T.Mesh geometry={gltf.nodes.Warp001.geometry} material={gltf.materials.Gradient} rotation={[Math.PI / 2, 0, 0.3]} />
+  {:catch error}
+    <slot name="error" {error} />
+  {/await}
+
+  <slot {ref} />
+</T>