feat: revamped tool page with 3d graphics

src/lib/assets/vectors/github.svg

@@ -1 +0,0 @@
-<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>

src/routes/tools/+page.svelte

@@ -3,9 +3,10 @@
 	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>
@@ -15,41 +16,95 @@
 <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>