feat: added initital code for 3d elements

src/lib/components/Tools.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+	import * as THREE from 'three';
+
+	let camera: THREE.PerspectiveCamera,
+		scene: THREE.Scene,
+		renderer: THREE.WebGLRenderer,
+		cube: THREE.Mesh<THREE.BoxGeometry, THREE.MeshBasicMaterial>;
+
+	const toolsData = [
+		{ name: 'Git', info: 'Short note about Git and its usage.' },
+		{ name: 'DBeaver', info: 'Short note about DBeaver and its usage.' },
+		{ name: 'Notion', info: 'Short note about Notion and its usage.' },
+		{ name: 'Insomnia', info: 'Short note about Insomnia and its usage.' },
+		{ name: 'Cyberduck', info: 'Short note about Cyberduck and its usage.' },
+		{ name: 'Mullvad VPN', info: 'Short note about Mullvad VPN and its usage.' },
+		{ name: 'Maccy', info: 'Short note about Maccy and its usage.' }
+	];
+
+	onMount(() => {
+		init();
+		addTools();
+		animate();
+	});
+
+	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);
+		document.body.appendChild(renderer.domElement);
+
+		camera.position.z = 5;
+	};
+
+	const addTool = (name: string, x: number, y: number, z: number) => {
+		const geometry = new THREE.BoxGeometry();
+		const material = new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff });
+		cube = new THREE.Mesh(geometry, material);
+		cube.position.set(x, y, z);
+		scene.add(cube);
+
+		cube.userData.name = name;
+		cube.userData.info = toolsData.find((tool) => tool.name === name)?.info || '';
+
+		cube.addEventListener('click', () => {
+			alert(`${cube.userData.name}: ${cube.userData.info}`);
+		});
+	};
+
+	const addTools = () => {
+		addTool('Git', -2, 0, 0);
+		addTool('DBeaver', 0, 0, 0);
+		addTool('Notion', 2, 0, 0);
+		addTool('Insomnia', -2, 2, 0);
+		addTool('Cyberduck', 0, 2, 0);
+		addTool('Mullvad VPN', 2, 2, 0);
+		addTool('Maccy', 0, 4, 0);
+	};
+
+	const render = () => {
+		renderer.clear();
+		renderer.render(scene, camera);
+	};
+
+	const isMeshType = (object?: THREE.Object3D): object is THREE.Mesh => {
+		return object?.type === 'Mesh';
+	};
+
+	const animate = () => {
+		if (!browser) {
+			return;
+		}
+
+		requestAnimationFrame(animate);
+
+		scene.traverse((object: THREE.Object3D) => {
+			if (isMeshType(object) && object.isMesh) {
+				object.rotation.x += 0.005;
+				object.rotation.y += 0.005;
+			}
+		});
+
+		render();
+	};
+</script>
+

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>