feat: added project and minor changes

src/lib/components/ProjectCard.svelte

@@ -16,7 +16,7 @@
 
 <a class="card bg-initial card-hover overflow-hidden" href={link}>
 	<header>
-		<img src={headerImage} class="bg-black/50 w-full aspect-[21/9] object-cover" alt="Post" />
+		<img src={headerImage} class="bg-black/50 w-full aspect-[21/9] object-cover object-top" alt="Post" />
 	</header>
 	<div class="p-4 space-y-4">
 		<h6 class="h6">{headerSubTitle}</h6>

src/lib/components/Tools.svelte

@@ -1,105 +0,0 @@
-<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 renderContainerId = 'render';
-
-	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({ antialias: true });
-		renderer.setSize(window.innerWidth, window.innerHeight);
-		const renderContainer = document.getElementById(renderContainerId);
-		if (renderContainer) {
-			renderContainer.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>
-
-<style>
-  #render {
-    position: relative;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-</style>
-
-<section id="render" />

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',
@@ -39,6 +53,15 @@
 
 <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