🔥 Removed custom cursor && moved to webp

Author: nwrenger

src/app.css

@@ -73,10 +73,7 @@
 		@apply h-full;
 	}
 	* {
-		@apply cursor-none border-border;
-	}
-	*:hover {
-		@apply cursor-none;
+		@apply border-border;
 	}
 	body {
 		@apply h-full bg-background text-foreground;

src/lib/index.ts

@@ -19,7 +19,7 @@ export const projects = [
 	{
 		title: 'console-utils-rs',
 		summary: 'CLI Input Library for Rust',
-		picture: 'console-utils.png',
+		picture: 'console-utils.webp',
 		description:
 			"This project was initiated by writing Python during my Computer Science lessons. The thing is that Rust itself (the std library) does'nt have a very “nice” way of retrieving user input. In comparison, python has the super simple <code >input</code> function which can do that very easily! Therefore, I decided to develop this crate which main point is to be very developer friendly with providing high functionality!",
 		link: 'https://crates.io/crates/console-utils',
@@ -28,7 +28,7 @@ export const projects = [
 	{
 		title: 'dashboard',
 		summary: 'A dashboard of all my websites',
-		picture: 'dashboard.png',
+		picture: 'dashboard.webp',
 		description:
 			'The summary basically is enough to explain this project: A dashboard of all my websites. I am here going to explain further how it came to this project. I bought some time ago the domain <code>nwrenger.dev</code> and wanted to host under that domain some websites, which btw was harder than I thought because of DNS, the provider and GH-Pages. Nevertheless, the idea of an overview of all my websites began to grow, and now here we are!',
 		link: 'https://github.com/nwrenger/dashboard',
@@ -37,7 +37,7 @@ export const projects = [
 	{
 		title: 'doenermann-bot',
 		summary: 'The Discord Bot',
-		picture: 'doenermann-bot.png',
+		picture: 'doenermann-bot.webp',
 		description:
 			'Before I am explaining the origins/need of this bot, please note that the black bars in the picture are there to protect personal information, nothing more, nothing less! So, this bot was created for a discord server which I am also a part of. It can track birthdays (second message seen in the picture), copy messages from a channel (first message seen in the picture), give users automatically roles on certain conditions, ... This was created as a drop-in replacement of Mee6, which did some very shady stuff lately.',
 		link: 'https://github.com/nwrenger/doenermann-bot',
@@ -46,7 +46,7 @@ export const projects = [
 	{
 		title: 'Escaping-from-the-Supernova',
 		summary: 'A procedural generated textadventure',
-		picture: 'efts.png',
+		picture: 'efts.webp',
 		description:
 			'This project marks my first attempt at writing in Rust, and the original version is available under the "old" branch. After gaining more experience and developing my own CLI crate <code>console-utils</code>, I expanded the project into a procedurally generated text adventure with a total of 16 different endings. Have fun exploring them!',
 		link: 'https://github.com/nwrenger/Escaping-from-the-Supernova',
@@ -55,7 +55,7 @@ export const projects = [
 	{
 		title: 'eta',
 		summary: 'A Code Editor made in egui',
-		picture: 'eta.png',
+		picture: 'eta.webp',
 		description:
 			'As explained in the summary, this is a code editor made in <code>egui</code> which focuses on efficiency. Furthermore, this was created due to the lack of performance seen in VSC, the most used code editor, and my curiosity of how a project editor app works and how hard is it to create one, which I now know it is <code>VERY HARD</code>.',
 		link: 'https://github.com/nwrenger/eta',
@@ -64,7 +64,7 @@ export const projects = [
 	{
 		title: 'flip-ui',
 		summary: 'The UI Builder for the Flipper Zero',
-		picture: 'flip-ui.png',
+		picture: 'flip-ui.webp',
 		description:
 			"This is a UI build for the flipperzero, a small IoT device which was mainly hyped due to it's hacking capabilities. The idea itself came from building a Flipperzero App myself and seeing how unnecessary, difficult that was. Nevertheless, the workflow when using this is to create a UI using the website and then use a Rust crate which converts the UI data and your own custom functions into a flipperzero compatible binary.",
 		link: 'https://github.com/flip-ui',
@@ -73,7 +73,7 @@ export const projects = [
 	{
 		title: 'gluer',
 		summary: 'A Rust wrapper for backends that eliminates redundant definitions',
-		picture: 'gluer.png',
+		picture: 'gluer.webp',
 		description:
 			'As the summary suggests, this project aims to streamline development by eliminating redundant definitions in both the backend and frontend through static analysis of routes, functions, structs, enums and types. Utilizing the <code>#[metadata]</code> procedural attribute macro and the <code>generate!</code> procedural macro, the project extracts relevant information and generates the corresponding <code>api</code> in a TypeScript file. Currently, the project supports the <code>axum</code> framework, with plans to extend support to additional backends in the future.',
 		link: 'https://crates.io/crates/gluer',
@@ -82,7 +82,7 @@ export const projects = [
 	{
 		title: 'hadar',
 		summary: "Codebase of a 'simple' Battlesnake agent",
-		picture: 'hadar.png',
+		picture: 'hadar.webp',
 		description:
 			'This is a very simple Battlesnake agent, a bot designed to play competitive snake against other bots. Its sole mission is to seek food and avoid killing itself when it gets too long. The results of this strategy are displayed in the picture above!',
 		link: 'https://github.com/nwrenger/hadar',
@@ -91,7 +91,7 @@ export const projects = [
 	{
 		title: 'light-magic',
 		summary: 'A persistent in-memory database',
-		picture: 'light-magic.png',
+		picture: 'light-magic.webp',
 		description:
 			"A powerful and user-friendly in-memory database crate that extends Rust's standard data types, such as as the <code>Table</code> type, and the macro system for generating data types, interactions, and data operations. It features efficient <code>search</code> and <code>join!</code> functions for seamless data management and rust's beautiful type system for creating the database table. Give it a try and experience the simplicity and performance of this innovative database solution!",
 		link: 'https://crates.io/crates/light-magic',
@@ -100,7 +100,7 @@ export const projects = [
 	{
 		title: 'omega',
 		summary: 'A performant terminal-based project editor',
-		picture: 'omega.png',
+		picture: 'omega.webp',
 		description:
 			"This project was created after I created <code>eta</code> from which I learned a lot. It's a terminal-based project editor with syntax highlighting, great performance and very useful and powerful shortcuts. So please give it a try!",
 		link: 'https://crates.io/crates/omega',
@@ -109,7 +109,7 @@ export const projects = [
 	{
 		title: 'portfolio',
 		summary: 'My personal Portfolio',
-		picture: 'portfolio.png',
+		picture: 'portfolio.webp',
 		description:
 			'You are aCtuAlLy currently viewing my portfolio. Feel free to explore the project source code to understand how I built this website and provide feedback on areas for improvement. This portfolio style emphasizes simplicity with a touch of design and fun. My portfolio/personal website has evolved significantly over time, so don’t hesitate to revisit and see what has changed!',
 		link: 'https://github.com/nwrenger/portfolio',
@@ -118,7 +118,7 @@ export const projects = [
 	{
 		title: 'quickmaths',
 		summary: 'A school project...QUICKMATHS!!!',
-		picture: 'quickmaths.png',
+		picture: 'quickmaths.webp',
 		description:
 			"Indeed, this summary hints at something math-related, and that's essentially accurate. Developed during my school lessons, this website focuses on learning math calculations and uniquely features local co-op! Surprising, right? Grab a friend, try it out below, and see who excels at calculations!",
 		link: 'https://quickmaths.nwrenger.dev',
@@ -127,7 +127,7 @@ export const projects = [
 	{
 		title: 'schiller-db',
 		summary: "Schillernova's Database Software",
-		picture: 'schiller-db.png',
+		picture: 'schiller-db.webp',
 		description:
 			"Developed for a project week (a school-wide activity for a week, in my case we were our own state), this project unfortunately didn't meet expectations, but that's a tale for another time! Here, authorities could access an overview of all citizens, including the unemployed, as well as a record of crimes committed by citizens. The aim was to assist authorities in state management by eliminating the need for extensive paperwork, which is typically essential in bureaucratic processes.",
 		link: 'https://github.com/nwrenger/schiller-db',
@@ -136,7 +136,7 @@ export const projects = [
 	{
 		title: 'schiller-lib',
 		summary: 'The Schiller School Library App',
-		picture: 'schiller-lib.png',
+		picture: 'schiller-lib.webp',
 		description:
 			"Like many schools, mine also has a library where students can read and borrow books. My brother and I developed this piece of software to address this need. Originally, the library's software was a Windows application, but now it has been transformed into a comprehensive website plus server with OAuth for authentication. This update was made to eliminate the need for Windows/PC and to simplify the user interface for younger students.",
 		link: 'https://github.com/wrenger/schiller-lib',
@@ -145,7 +145,7 @@ export const projects = [
 	{
 		title: 'schulen-im-chaos',
 		summary: 'Homework-Sharing Platform',
-		picture: 'sic.png',
+		picture: 'sic.webp',
 		description:
 			'The "Schulen im Chaos" (Schools in Chaos) project, which I was invited to develop the infrastructure and website for, focuses—as the summary suggests—on sharing notes on various school subjects, such as Mathematics, Physics, Computer Science, etc. It\'s important to note that the current scope of this project is limited to German schools only, due to the significant differences in school systems worldwide.',
 		link: 'https://schulenimchaos.de',
@@ -154,7 +154,7 @@ export const projects = [
 	{
 		title: 'shitboard',
 		summary: 'Online Soundboard App',
-		picture: 'shitboard.png',
+		picture: 'shitboard.webp',
 		description:
 			'Developed at the request of a friend who wanted a sound-sharing platform but never ended up uploading anything... So please, if you have content to share, go ahead and upload it. What gets uploaded won’t be deleted. Have fun! Note: Not everything will stay there indefinitely, so please don’t upload illegal material!',
 		link: 'https://shitboard.nwrenger.dev',
@@ -163,7 +163,7 @@ export const projects = [
 	{
 		title: 'songwriting',
 		summary: 'Songwriting Portfolio',
-		picture: 'songwriting.png',
+		picture: 'songwriting.webp',
 		description:
 			'I developed my Songwriting Portfolio for my music class. Please note that it is entirely written in <code>German</code>. I utilized the new <code>Skeleton Framework</code> and created some impressive components and animations. Enjoy exploring it!',
 		link: 'https://songwriting.nwrenger.dev',

src/routes/+layout.svelte

@@ -6,104 +6,16 @@
 	import { Sun, Moon } from 'lucide-svelte';
 
 	import { page } from '$app/state';
-	import { onMount, type Snippet } from 'svelte';
-	import { fade } from 'svelte/transition';
+	import { type Snippet } from 'svelte';
 	interface Props {
 		children?: Snippet;
 	}
 
 	let { children }: Props = $props();
-
-	let coords = $state({ x: 0, y: 0 });
-	let size = $state(0);
-	let button_down = false;
-
-	function handleLeave(e: PointerEvent) {
-		button_down = false;
-
-		coords = { x: e.clientX, y: e.clientY };
-		size = 0;
-	}
-
-	function handleEnter(e: PointerEvent) {
-		button_down = false;
-
-		coords = { x: e.clientX, y: e.clientY };
-		size = 10;
-	}
-
-	function handleMove(e: PointerEvent) {
-		coords = { x: e.clientX, y: e.clientY };
-		const target = e.target as HTMLElement;
-
-		if (!button_down) {
-			if (target.closest('a') || target.closest('button')) {
-				size = 15;
-			} else {
-				size = 10;
-			}
-		}
-	}
-
-	function handleDown(e: PointerEvent) {
-		button_down = true;
-
-		coords = { x: e.clientX, y: e.clientY };
-		const target = e.target as HTMLElement;
-
-		if (target.closest('a') || target.closest('button')) {
-			size = 9;
-		} else {
-			size = 7;
-		}
-	}
-
-	function handleUp(e: PointerEvent) {
-		button_down = false;
-
-		coords = { x: e.clientX, y: e.clientY };
-		const target = e.target as HTMLElement;
-
-		if (target.closest('a') || target.closest('button')) {
-			size = 15;
-		} else {
-			size = 10;
-		}
-	}
-
-	function handleScroll() {
-		let target = document.elementFromPoint(coords.x, coords.y);
-
-		if (target && !button_down) {
-			if (target.closest('a') || target.closest('button')) {
-				size = 15;
-			} else {
-				size = 10;
-			}
-		}
-	}
-
-	let mounted = $state(false);
-	onMount(() => (mounted = true));
-
-	let isTouchDevice = $state(false);
-	$effect(() => {
-		if (mounted) isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
-	});
 </script>
 
 <ModeWatcher disableTransitions={false} />
 
-<svelte:body
-	onpointerleave={!isTouchDevice ? handleLeave : null}
-	onpointerenter={!isTouchDevice ? handleEnter : null}
-	onpointerdown={!isTouchDevice ? handleDown : null}
-	onpointerup={!isTouchDevice ? handleUp : null}
-	onpointermove={!isTouchDevice ? handleMove : null}
-/>
-
-<svelte:window onscroll={!isTouchDevice ? handleScroll : null} />
-
 <div class="min-h-screen">
 	<header
 		class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
@@ -148,25 +60,3 @@
 		{@render children?.()}
 	</div>
 </div>
-
-{#if !isTouchDevice}
-	<div
-		class="pointer-events-none fixed left-0 top-0 z-[1000] rounded-[50%] bg-white mix-blend-difference"
-		style="
-			transition: width 0.15s ease-out, height 0.15s ease-out;
-			transform: translate(calc({coords.x}px - 50%), calc({coords.y}px - 50%));
-			width: {size * 2}px;
-			height: {size * 2}px;
-		"
-	></div>
-	{#if mounted && size === 0}
-		<div
-			transition:fade
-			class="fixed left-0 top-0 z-[999] flex h-full w-full items-center justify-center bg-background/30 text-lg backdrop-blur supports-[backdrop-filter]:bg-background/30"
-		>
-			<div in:fade class="animate-pulse text-center">
-				<p>Move, click, or interact using your cursor!</p>
-			</div>
-		</div>
-	{/if}
-{/if}

src/routes/projects/+page.svelte

@@ -33,7 +33,7 @@
 						src={'projects/' + picture}
 						alt={title}
 						height="h-52 md:h-64"
-						rounded="rounded-t-md"
+						rounded="rounded-t-md rounded-b-none"
 					/>
 				</a>
 				<Card.Header class="w-full p-4">