feat: added initital code for 3d elements

src/routes/+page.svelte

@@ -1,8 +1,11 @@
-<!-- About.svelte -->
 <script lang='ts'>
 	import { calculateAge } from '$lib/calculate-age';
 </script>
 
+<svelte:head>
+	<title>hellob.art &mdash; home</title>
+</svelte:head>
+
 <main class="container mx-auto px-4 py-8 text-left">
 	<h2 class="text-3xl font-bold mb-4">About Me</h2>
 

src/routes/blog/+page.svelte

@@ -1,3 +1,7 @@
+<svelte:head>
+	<title>hellob.art &mdash; blog</title>
+</svelte:head>
+
 <main class="container mx-auto px-4 py-8 text-left">
 	<h2 class="text-3xl font-bold mb-8">Blog posts</h2>
 </main>

src/routes/blog/[slug]/+page.svelte

@@ -3,5 +3,9 @@
   export let data;
 </script>
 
+<svelte:head>
+	<title>hellob.art &mdash; {data.title}</title>
+</svelte:head>
+
 <!-- <h1>{data.title}</h1>
 <div>{@html data.content}</div> -->

src/routes/projects/+page.svelte

@@ -33,6 +33,10 @@
 	];
 </script>
 
+<svelte:head>
+	<title>hellob.art &mdash; projects</title>
+</svelte:head>
+
 <main class="container mx-auto px-4 py-8 text-left">
 	<h2 class="text-3xl font-bold mb-8">My Projects</h2>
 	<div class="w-full text-token grid grid-cols-1 md:grid-cols-2 gap-4">

src/routes/tools/+page.svelte

@@ -1,5 +1,61 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import * as THREE from 'three';
+
+	if (browser) {
+		let camera: THREE.PerspectiveCamera;
+		let scene: THREE.Scene;
+		let renderer: THREE.WebGLRenderer;
+		let cube: THREE.Mesh<THREE.BoxGeometry, THREE.MeshBasicMaterial>;
+
+		const renderContainerId = 'renderOne';
+
+		const init = () => {
+			scene = new THREE.Scene();
+			camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+
+			renderer = new THREE.WebGLRenderer();
+			renderer.setSize(window.innerWidth, window.innerHeight);
+			const renderContainer = document.getElementById(renderContainerId);
+			if (renderContainer) {
+				renderContainer.appendChild(renderer.domElement);
+				console.log('success')
+			}
+
+			const geometry = new THREE.BoxGeometry(1, 1, 1);
+			const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
+			cube = new THREE.Mesh(geometry, material);
+			scene.add(cube);
+
+			camera.position.z = 5;
+		};
+
+		const render = () => {
+			renderer.clear();
+			renderer.render(scene, camera);
+		};
+
+		const animate = () => {
+			requestAnimationFrame(animate);
+
+			cube.rotation.x += 0.005;
+			cube.rotation.y += 0.005;
+
+			render();
+		};
+
+		init();
+		animate();
+	}
+</script>
+
+<svelte:head>
+	<title>hellob.art &mdash; tools</title>
+</svelte:head>
+
 <main class="container mx-auto px-4 py-8 text-left">
 	<h2 class="text-3xl font-bold mb-8">DevOps</h2>
+	<section id="renderOne"> </section>
 	<h2 class="text-3xl font-bold mb-8">MacOS</h2>
 	<h2 class="text-3xl font-bold mb-8">Other</h2>
 </main>