ui changes and cs prices

src/lib/components/ProjectIcon.svelte

@@ -0,0 +1,54 @@
+<script lang="ts" module>
+	const images = import.meta.glob<string>('../assets/projects/*.{webp,png,jpg,jpeg,avif,svg}', {
+		eager: true,
+		query: '?url',
+		import: 'default'
+	});
+	const extensions = ['webp', 'png', 'jpg', 'jpeg', 'avif', 'svg'];
+</script>
+
+<script lang="ts">
+	import CandlestickChart from 'lucide-svelte/icons/candlestick-chart';
+	import ChartNoAxesCombined from 'lucide-svelte/icons/chart-no-axes-combined';
+	import FolderKanban from 'lucide-svelte/icons/folder-kanban';
+	import Gamepad2 from 'lucide-svelte/icons/gamepad-2';
+	import Globe2 from 'lucide-svelte/icons/globe-2';
+	import Languages from 'lucide-svelte/icons/languages';
+	import Music2 from 'lucide-svelte/icons/music-2';
+	import PawPrint from 'lucide-svelte/icons/paw-print';
+	import Trophy from 'lucide-svelte/icons/trophy';
+	import Wallet from 'lucide-svelte/icons/wallet';
+
+	let { name, class: className = 'size-5' }: { name: string; class?: string } = $props();
+
+	const icons = {
+		'vash esports': Trophy,
+		'game tracker': Gamepad2,
+		animaldex: PawPrint,
+		'osu! map finder': Music2,
+		'derby lens': ChartNoAxesCombined,
+		'world opinions': Globe2,
+		'language learner': Languages,
+		'money tracker': Wallet,
+		'cs prices': CandlestickChart
+	};
+
+	const Icon = $derived(icons[name as keyof typeof icons] ?? FolderKanban);
+	const filename = $derived(
+		name
+			.toLowerCase()
+			.replace(/[^a-z0-9]+/g, '-')
+			.replace(/^-|-$/g, '')
+	);
+	const image = $derived(
+		extensions
+			.map((extension) => images[`../assets/projects/${filename}.${extension}`])
+			.find(Boolean)
+	);
+</script>
+
+{#if image}
+	<img src={image} alt="" class="size-full rounded-sm object-cover" />
+{:else}
+	<Icon class={className} aria-hidden="true" />
+{/if}