From 353d51971bf710c81b365d0df294b8e67c74bba3 Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Thu, 27 Jul 2023 16:45:26 +0200
Subject: [PATCH] feat: added initital code for 3d elements

---
 package.json                        | 16 ++++--
 pnpm-lock.yaml                      | 47 +++++++++++++++
 src/lib/components/Tools.svelte     | 89 +++++++++++++++++++++++++++++
 src/routes/+page.svelte             |  5 +-
 src/routes/blog/+page.svelte        |  4 ++
 src/routes/blog/[slug]/+page.svelte |  4 ++
 src/routes/projects/+page.svelte    |  4 ++
 src/routes/tools/+page.svelte       | 56 ++++++++++++++++++
 8 files changed, 218 insertions(+), 7 deletions(-)
 create mode 100644 src/lib/components/Tools.svelte

diff --git a/package.json b/package.json
index 50a6e7f..bd13ced 100644
--- a/package.json
+++ b/package.json
@@ -17,20 +17,24 @@
 		"@sveltejs/kit": "^1.20.4",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
 		"@typescript-eslint/parser": "^5.45.0",
+		"autoprefixer": "^10.4.14",
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte": "^2.30.0",
+		"postcss": "^8.4.24",
+		"postcss-load-config": "^4.0.1",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.10.1",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
+		"tailwindcss": "^3.3.2",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
-		"vite": "^4.4.2",
-		"postcss": "^8.4.24",
-		"postcss-load-config": "^4.0.1",
-		"autoprefixer": "^10.4.14",
-		"tailwindcss": "^3.3.2"
+		"vite": "^4.4.2"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@types/three": "^0.154.0",
+		"three": "^0.154.0"
+	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 96fc67f..84c2fd4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,6 +4,14 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+dependencies:
+  '@types/three':
+    specifier: ^0.154.0
+    version: 0.154.0
+  three:
+    specifier: ^0.154.0
+    version: 0.154.0
+
 devDependencies:
   '@skeletonlabs/skeleton':
     specifier: ^1.10.0
@@ -478,6 +486,10 @@ packages:
       - supports-color
     dev: true
 
+  /@tweenjs/tween.js@18.6.4:
+    resolution: {integrity: sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ==}
+    dev: false
+
   /@types/cookie@0.5.1:
     resolution: {integrity: sha512-COUnqfB2+ckwXXSFInsFdOAWQzCCx+a5hq2ruyj+Vjund94RJQd4LG2u9hnvJrTgunKAaax7ancBYlDrNYxA0g==}
     dev: true
@@ -498,6 +510,25 @@ packages:
     resolution: {integrity: sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==}
     dev: true
 
+  /@types/stats.js@0.17.0:
+    resolution: {integrity: sha512-9w+a7bR8PeB0dCT/HBULU2fMqf6BAzvKbxFboYhmDtDkKPiyXYbjoe2auwsXlEFI7CFNMF1dCv3dFH5Poy9R1w==}
+    dev: false
+
+  /@types/three@0.154.0:
+    resolution: {integrity: sha512-IioqpGhch6FdLDh4zazRn3rXHj6Vn2nVOziJdXVbJFi9CaI65LtP9qqUtpzbsHK2Ezlox8NtsLNHSw3AQzucjA==}
+    dependencies:
+      '@tweenjs/tween.js': 18.6.4
+      '@types/stats.js': 0.17.0
+      '@types/webxr': 0.5.2
+      fflate: 0.6.10
+      lil-gui: 0.17.0
+      meshoptimizer: 0.18.1
+    dev: false
+
+  /@types/webxr@0.5.2:
+    resolution: {integrity: sha512-szL74BnIcok9m7QwYtVmQ+EdIKwbjPANudfuvDrAF8Cljg9MKUlIoc1w5tjj9PMpeSH3U1Xnx//czQybJ0EfSw==}
+    dev: false
+
   /@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0)(eslint@8.45.0)(typescript@5.1.6):
     resolution: {integrity: sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1142,6 +1173,10 @@ packages:
       reusify: 1.0.4
     dev: true
 
+  /fflate@0.6.10:
+    resolution: {integrity: sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==}
+    dev: false
+
   /file-entry-cache@6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -1386,6 +1421,10 @@ packages:
       type-check: 0.4.0
     dev: true
 
+  /lil-gui@0.17.0:
+    resolution: {integrity: sha512-MVBHmgY+uEbmJNApAaPbtvNh1RCAeMnKym82SBjtp5rODTYKWtM+MXHCifLe2H2Ti1HuBGBtK/5SyG4ShQ3pUQ==}
+    dev: false
+
   /lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
@@ -1440,6 +1479,10 @@ packages:
     engines: {node: '>= 8'}
     dev: true
 
+  /meshoptimizer@0.18.1:
+    resolution: {integrity: sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==}
+    dev: false
+
   /micromatch@4.0.5:
     resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
     engines: {node: '>=8.6'}
@@ -2109,6 +2152,10 @@ packages:
       any-promise: 1.3.0
     dev: true
 
+  /three@0.154.0:
+    resolution: {integrity: sha512-Uzz8C/5GesJzv8i+Y2prEMYUwodwZySPcNhuJUdsVMH2Yn4Nm8qlbQe6qRN5fOhg55XB0WiLfTPBxVHxpE60ug==}
+    dev: false
+
   /to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
diff --git a/src/lib/components/Tools.svelte b/src/lib/components/Tools.svelte
new file mode 100644
index 0000000..eb671de
--- /dev/null
+++ b/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>
+
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b9ac09f..3de0c2a 100644
--- a/src/routes/+page.svelte
+++ b/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>
 
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 9c54344..1e2881b 100644
--- a/src/routes/blog/+page.svelte
+++ b/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>
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
index b56c5c1..fdc9b04 100644
--- a/src/routes/blog/[slug]/+page.svelte
+++ b/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> -->
\ No newline at end of file
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index ebf32ac..f833dbb 100644
--- a/src/routes/projects/+page.svelte
+++ b/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">
diff --git a/src/routes/tools/+page.svelte b/src/routes/tools/+page.svelte
index bd13c54..a842522 100644
--- a/src/routes/tools/+page.svelte
+++ b/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>