✨ Improved website

package.json

@@ -15,20 +15,21 @@
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.3.1",
 		"@sveltejs/adapter-static": "^3.0.8",
-		"@sveltejs/kit": "^2.14.0",
+		"@sveltejs/kit": "^2.15.1",
 		"@sveltejs/vite-plugin-svelte": "^4.0.4",
 		"autoprefixer": "^10.4.20",
 		"bits-ui": "^1.0.0-next.74",
 		"clsx": "^2.1.1",
 		"install": "^0.13.0",
-		"lucide-svelte": "^0.439.0",
+		"lucide-svelte": "^0.469.0",
 		"mode-watcher": "^0.5.0",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.2",
 		"prettier-plugin-tailwindcss": "^0.6.9",
-		"svelte": "^5.15.0",
+		"simple-icons": "^14.0.0",
+		"svelte": "^5.16.0",
 		"svelte-check": "^4.1.1",
-		"tailwind-merge": "^2.5.5",
+		"tailwind-merge": "^2.6.0",
 		"tailwind-variants": "^0.3.0",
 		"tailwindcss": "^3.4.17",
 		"tailwindcss-animate": "^1.0.7",

src/app.css

@@ -90,8 +90,11 @@
 	h3 {
 		@apply scroll-m-20 text-2xl font-semibold tracking-tight;
 	}
+	h4 {
+		@apply scroll-m-20 text-xl font-semibold tracking-tight;
+	}
 	p {
-		@apply leading-7;
+		@apply text-base leading-7;
 	}
 	ul {
 		@apply list-inside list-disc leading-7;

src/lib/components/icons/BlueSky.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Icon } from 'lucide-svelte';
+
+	const iconNode: any = [
+		[
+			'path',
+			{
+				d: 'M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748 114.875 19.55 144.097 84.31 80.986 149.07-119.86 122.992-172.272-30.859-185.702-70.281-3.614-10.608-3.631-7.733-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.291 0 57.946 0-28.906 76.135-1.612 123.121 33.664Z'
+			}
+		]
+	];
+
+	/**
+	 * @component @name Bluesky
+	 * @description Lucide SVG icon component, renders SVG Element with children.
+	 *
+	 * @preview ![img](data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTY4IDUwMC4xMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIzLjEyMSAzMy42NjRDMTg4LjI0MSA4Mi41NTMgMjU4LjI4MSAxODEuNjggMjg0IDIzNC44NzNjMjUuNzE5LTUzLjE5MiA5NS43NTktMTUyLjMyIDE2MC44NzktMjAxLjIxQzQ5MS44NjYtMS42MTEgNTY4LTI4LjkwNiA1NjggNTcuOTQ3YzAgMTcuMzQ2LTkuOTQ1IDE0NS43MTMtMTUuNzc4IDE2Ni41NTUtMjAuMjc1IDcyLjQ1My05NC4xNTUgOTAuOTMzLTE1OS44NzUgNzkuNzQ4IDExNC44NzUgMTkuNTUgMTQ0LjA5NyA4NC4zMSA4MC45ODYgMTQ5LjA3OS0xMTkuODYgMTIyLjk5Mi0xNzIuMjcyLTMwLjg1OS0xODUuNzAyLTcwLjI4MS0zLjYxNC0xMC42MDgtMy42MzEtNy43MzMtMy42MzEgNy43MzMtMTMuNDMgMzkuNDIyLTY1Ljg0MiAxOTMuMjczLTE4NS43MDIgNzAuMjgxLTYzLjExMS02NC43Ni0zMy44OS0xMjkuNTIgODAuOTg2LTE0OS4wNzEtNjUuNzIgMTEuMTg1LTEzOS42LTcuMjk1LTE1OS44NzUtNzkuNzQ4QzkuOTQ1IDIwMy42NTkgMCA3NS4yOTEgMCA1Ny45NDYgMC0yOC45MDYgNzYuMTM1LTEuNjEyIDEyMy4xMjEgMzMuNjY0WiIgLz48L3N2Zz4=) - https://lucide.dev/icons/bluesky
+	 * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
+	 *
+	 * @param {Object} props - Lucide icons props and any valid SVG attribute
+	 * @returns {FunctionalComponent} Svelte component
+	 *
+	 */
+</script>
+
+<Icon name="bluesky" {...$$props} fill="currentColor" viewBox="0 0 568 500.13" {iconNode}>
+	<slot />
+</Icon>

src/lib/components/icons/Discord.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Icon } from 'lucide-svelte';
+
+	const iconNode: any = [
+		[
+			'path',
+			{
+				d: 'M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z'
+			}
+		]
+	];
+
+	/**
+	 * @component @name Discord
+	 * @description Lucide SVG icon component, renders SVG Element with children.
+	 *
+	 * @preview ![img](data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+RGlzY29yZDwvdGl0bGU+PHBhdGggZD0iTTIwLjMxNyA0LjM2OThhMTkuNzkxMyAxOS43OTEzIDAgMDAtNC44ODUxLTEuNTE1Mi4wNzQxLjA3NDEgMCAwMC0uMDc4NS4wMzcxYy0uMjExLjM3NTMtLjQ0NDcuODY0OC0uNjA4MyAxLjI0OTUtMS44NDQ3LS4yNzYyLTMuNjgtLjI3NjItNS40ODY4IDAtLjE2MzYtLjM5MzMtLjQwNTgtLjg3NDItLjYxNzctMS4yNDk1YS4wNzcgLjA3NyAwIDAwLS4wNzg1LS4wMzdoLS4wMzg1YS4wNjk5LjA2OTkgMCAwMC0uMDMyMS4wMjc3Qy41MzM0IDkuMDQ1OC0uMzE5IDEzLjU3OTkuMDk5MiAxOC4wNTc4YS4wODI0LjA4MjQgMCAwMC4wMzEyLjA1NjFjMi4wNTI4IDEuNTA3NiA0LjA0MTMgMi40MjI4IDUuOTkyOSAzLjAyOTRhLjA3NzcuMDc3NyAwIDAwLjA4NDItLjAyNzZjLjQ2MTYtLjYzMDQuODczMS0xLjI5NTIgMS4yMjYtMS45OTQyYS4wNzYuMDc2IDAgMDAtLjA0MTYtLjEwNTdjLS42NTI4LS4yNDc2LTEuMjc0My0uNTQ5NS0xLjg3MjItLjg5MjNhLjA3Ny4wNzcgMCAwMS0uMDA3Ni0uMTI3N2MxMjU4LS4wOTQzLjI1MTctLjE5MjMuMzcxOC0uMjkxNGEuMDc0My4wNzQzIDAgMDEuMDc3Ni0uMDEwNSAzLjkyNzggMS43OTMzIDguMTggMS43OTMzIDEyLjA2MTQgMGEuMDczOS4wNzM5IDAgMDEuMDc4NS4wMDk1Yy4xMjAyLjA5OS4yNDYuMTk4MS4zNzI4LjI5MjRhLjA3Ny4wNzcgMCAwMS0uMDA2Ni4xMjc2IDEyLjI5ODYgMTIuMjk4NiAwIDAxLTEuODczLjg5MTRhLjA3NjYuMDc2NiAwIDAwLS4wNDA3LjEwNjdjLjM2MDQuNjk4Ljc3MTkgMS4zNjI4IDEuMjI1IDEuOTkzMmEuMDc2LjA3NiAwIDAwLjA4NDIuMDI4NmMxLjk2MS0uNjA2NyAzLjk0OTUtMS41MjE5IDYuMDAyMy0zLjAyOTRhLjA3Ny4wNzcgMCAwMC4wMzEzLS4wNTUyYy41MDA0LTUuMTc3LS44MzgyLTkuNjczOS0zLjU0ODUtMTMuNjYwNGEuMDYxLjA2MSAwIDAwLS4wMzEyLS4wMjg2ek04LjAyIDE1LjMzMTJjLTEuMTgyNSAwLTIuMTU2OS0xLjA4NTctMi4xNTY5LTIuNDE5IDAtMS4zMzMyLjk1NTUtMi40MTg5IDIuMTU3LTIuNDE4OSAxLjIxMDggMCAyLjE3NTcgMS4wOTUyIDIuMTU2OCAyLjQxOSAwIDEuMzMzMi0uOTU1NSAyLjQxODktMi4xNTY5IDIuNDE4OXptNy45NzQ4IDBjLTEuMTgyNSAwLTIuMTU2OS0xLjA4NTctMi4xNTY5LTIuNDE5IDAtMS4zMzMyLjk1NTQtMi40MTg5IDIuMTU2OS0yLjQxODkgMS4yMTA4IDAgMi4xNzU3IDEuMDk1MiAyLjE1NjggMi40MTkgMCAxLjMzMzItLjk0NiAyLjQxODktMi4xNTY4IDIuNDE4OVoiLz48L3N2Zz4=) - https://lucide.dev/icons/discord
+	 * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
+	 *
+	 * @param {Object} props - Lucide icons props and any valid SVG attribute
+	 * @returns {FunctionalComponent} Svelte component
+	 *
+	 */
+</script>
+
+<Icon name="discord" {...$$props} fill="currentColor" strokeWidth={0} {iconNode}>
+	<slot />
+</Icon>

src/lib/components/icons/Instagram.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Icon } from 'lucide-svelte';
+
+	const iconNode: any = [
+		[
+			'path',
+			{
+				d: 'M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'
+			}
+		]
+	];
+
+	/**
+	 * @component @name Instagram
+	 * @description Lucide SVG icon component, renders SVG Element with children.
+	 *
+	 * @preview ![img](data:image/svg+xml;base64,...) - https://lucide.dev/icons/instagram
+	 * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
+	 *
+	 * @param {Object} props - Lucide icons props and any valid SVG attribute
+	 * @returns {FunctionalComponent} Svelte component
+	 *
+	 */
+</script>
+
+<Icon name="instagram" {...$$props} fill="currentColor" strokeWidth="0.5" {iconNode}>
+	<slot />
+</Icon>

src/lib/components/ui/accordion/accordion-content.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive, type WithoutChild } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.ContentProps> = $props();
+</script>
+
+<AccordionPrimitive.Content
+	bind:ref
+	class={cn(
+		'overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+		className
+	)}
+	{...restProps}
+>
+	<div class="pb-4 pt-0">
+		{@render children?.()}
+	</div>
+</AccordionPrimitive.Content>

src/lib/components/ui/accordion/accordion-item.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AccordionPrimitive.ItemProps = $props();
+</script>
+
+<AccordionPrimitive.Item bind:ref class={cn('border-b', className)} {...restProps} />

src/lib/components/ui/accordion/accordion-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive, type WithoutChild } from 'bits-ui';
+	import ChevronDown from 'lucide-svelte/icons/chevron-down';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.TriggerProps> & {
+		level?: AccordionPrimitive.HeaderProps['level'];
+	} = $props();
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+	<AccordionPrimitive.Trigger
+		bind:ref
+		class={cn(
+			'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<ChevronDown class="size-4 shrink-0 transition-transform duration-200" />
+	</AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>

src/lib/components/ui/accordion/index.ts

@@ -0,0 +1,17 @@
+import { Accordion as AccordionPrimitive } from 'bits-ui';
+import Content from './accordion-content.svelte';
+import Item from './accordion-item.svelte';
+import Trigger from './accordion-trigger.svelte';
+const Root = AccordionPrimitive.Root;
+
+export {
+	Root,
+	Content,
+	Item,
+	Trigger,
+	//
+	Root as Accordion,
+	Content as AccordionContent,
+	Item as AccordionItem,
+	Trigger as AccordionTrigger
+};

src/lib/index.ts

@@ -15,6 +15,19 @@ export const skills = [
 	{ name: 'Git & GitHub', icon: '🔧', url: 'https://github.com/' }
 ];
 
+import { Github, Mail } from 'lucide-svelte';
+import BlueSky from '$lib/components/icons/BlueSky.svelte';
+import Discord from '$lib/components/icons/Discord.svelte';
+import Instagram from '$lib/components/icons/Instagram.svelte';
+
+export const socials = [
+	{ name: 'GitHub', url: 'https://github.com/nwrenger', icon: Github },
+	{ name: 'BlueSky', url: 'https://bsky.app/profile/nilch.bsky.social', icon: BlueSky },
+	{ name: 'Discord', url: 'https://discordlookup.com/user/567331495484719134', icon: Discord },
+	{ name: 'Instagram', url: 'https://www.instagram.com/_nilch', icon: Instagram },
+	{ name: 'Mails', url: 'mailto:[email protected]', icon: Mail }
+];
+
 export const projects = [
 	{
 		title: 'console-utils-rs',

src/routes/+layout.svelte

@@ -56,7 +56,7 @@
 		</div>
 	</header>
 
-	<div class="container max-w-6xl space-y-8 px-4 py-5">
+	<div class="container max-w-6xl space-y-4 px-4 py-5">
 		{@render children?.()}
 	</div>
 </div>

src/routes/+page.svelte

@@ -1,10 +1,11 @@
 <script>
-	import { skills } from '$lib';
+	import { skills, socials } from '$lib';
 	import * as Card from '$lib/components/ui/card';
+	import * as Accordion from '$lib/components/ui/accordion';
 </script>
 
 <svelte:head>
-	<title>portfolio</title>
+	<title>Portfolio</title>
 	<meta
 		name="description"
 		content="Hi, there! I'm Nils, a high school student passionate about coding, particularly in Rust and in Svelte."
@@ -18,53 +19,90 @@
 		I'm Nils, a high-school <code>Rust</code> enthusiast passionate about coding. I've worked on
 		various projects so far, so look for that under
 		<a href="/projects" class="link">Projects</a>. Feel free to reach out for a chat about coding or
-		anything else via email at
-		<a href="mailto:[email protected]" class="link" target="_parent">[email protected]</a>!
+		anything else!
 	</p>
 </div>
 
-<div class="mt-10 space-y-3">
-	<h3>Skills</h3>
-	<p>
-		My focus is on UI development (websites, apps, and TUIs) and performance-driven projects like
-		algorithms and databases. Therefore, my proficiency lies in <code>Rust</code> and in
-		<code>Svelte</code>
-		(i.e., <code>JavaScript</code> / <code>TypeScript</code>). But in the past, I have tried out
-		other programming languages like <code>Go</code> and
-		<code>Python</code>, or even a game engine like
-		<code>Godot</code>, so keep your eyes peeled! Or just check out the list below:
-	</p>
-	<div class="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-4">
-		{#each skills as skill}
-			<a href={skill.url} target="_blank" rel="noopener noreferrer">
-				<Card.Root
-					class="group flex h-full transform-gpu flex-col items-start justify-start overflow-hidden rounded-lg border-none transition-all duration-300 ease-out hover:scale-[104%] hover:bg-primary hover:text-accent hover:shadow-lg hover:shadow-primary/30"
-				>
-					<Card.Header class="w-full p-4">
-						<div class="flex w-full items-center justify-between">
-							<Card.Title class="font-semibold">{skill.name}</Card.Title>
+<Accordion.Root type="single" class="w-full">
+	<Accordion.Item value="skills">
+		<Accordion.Trigger><h4>What Skills do I have?</h4></Accordion.Trigger>
+		<Accordion.Content>
+			<p>
+				My focus is on UI development (websites, apps, and TUIs) and performance-driven projects
+				like algorithms and databases. Therefore, my proficiency lies in <code>Rust</code> and in
+				<code>Svelte</code>
+				(i.e., <code>JavaScript</code> / <code>TypeScript</code>). But in the past, I have tried out
+				other programming languages like <code>Go</code> and
+				<code>Python</code>, or even a game engine like
+				<code>Godot</code>, so keep your eyes peeled! Or just check out the list below:
+			</p>
+
+			<div class="grid grid-cols-2 gap-6 p-3 md:grid-cols-3 lg:grid-cols-4">
+				{#each skills as skill}
+					<a href={skill.url} target="_blank" rel="noopener noreferrer">
+						<Card.Root
+							class="group flex h-full transform-gpu flex-col items-start justify-start overflow-hidden rounded-lg border-none bg-card p-4 shadow transition-all duration-300 ease-out hover:scale-[102%] hover:shadow-lg"
+						>
+							<div class="flex w-full items-center justify-between">
+								<Card.Title
+									class="font-semibold text-foreground transition-colors duration-300 group-hover:text-primary"
+								>
+									{skill.name}
+								</Card.Title>
+
+								<span
+									class="text-3xl transition-all duration-300 ease-out group-hover:rotate-6 group-hover:text-primary"
+								>
+									{skill.icon}
+								</span>
+							</div>
+						</Card.Root>
+					</a>
+				{/each}
+			</div>
+		</Accordion.Content>
+	</Accordion.Item>
+
+	<Accordion.Item value="socials">
+		<Accordion.Trigger><h4>Where am I online?</h4></Accordion.Trigger>
+		<Accordion.Content>
+			<p>I am online on multiple platforms. Check out the list below:</p>
+			<div class="grid grid-cols-1 gap-4 p-3 md:grid-cols-2 lg:grid-cols-3">
+				{#each socials as social}
+					<Card.Root
+						class="group flex transform-gpu items-center space-x-3 overflow-hidden rounded-lg border-none bg-card p-4 shadow transition-all duration-300 ease-out hover:scale-[102%] hover:shadow-lg"
+					>
+						<a
+							href={social.url}
+							target="_blank"
+							rel="noopener noreferrer"
+							class="flex flex-1 items-center space-x-3"
+						>
+							<social.icon
+								class="h-6 w-6 text-foreground transition-colors duration-300 group-hover:text-primary"
+							/>
 							<span
-								class="text-3xl transition-transform duration-300 ease-out group-hover:rotate-3"
+								class="text-lg font-medium text-foreground transition-colors duration-300 group-hover:text-primary"
 							>
-								{skill.icon}
+								{social.name}
 							</span>
-						</div>
-					</Card.Header>
-				</Card.Root>
-			</a>
-		{/each}
-	</div>
-</div>
+						</a>
+					</Card.Root>
+				{/each}
+			</div>
+		</Accordion.Content>
+	</Accordion.Item>
 
-<div class="mt-10 space-y-3">
-	<h3>Sponsor Me</h3>
-	<p>
-		You can also sponsor me <a
-			href="https://github.com/sponsors/nwrenger"
-			class="link"
-			target="_blank"
-		>
-			here on GitHub
-		</a> to support my work and to get some cool perks like early access to certain projects!
-	</p>
-</div>
+	<Accordion.Item value="sponsor">
+		<Accordion.Trigger><h4>Sponsor Me?</h4></Accordion.Trigger>
+		<Accordion.Content>
+			<p>
+				You can also sponsor me
+				<a href="https://github.com/sponsors/nwrenger" class="link" target="_blank">
+					here on GitHub
+				</a>
+				to support my work and to get some cool perks like early access to certain projects!
+			</p>
+		</Accordion.Content>
+	</Accordion.Item>
+</Accordion.Root>

src/routes/projects/+page.svelte

@@ -26,7 +26,7 @@
 	<div class="grid w-full gap-6 md:grid-cols-2">
 		{#each projects as { title, summary, picture, description, link, archived }}
 			<Card.Root
-				class="flex h-full transform-gpu flex-col items-start justify-start overflow-hidden rounded-lg border-none transition-all duration-300 ease-out hover:scale-[102%] hover:shadow-md"
+				class="flex h-full transform-gpu flex-col items-start justify-start overflow-hidden rounded-lg border-none shadow transition-all duration-300 ease-out hover:scale-[102%] hover:shadow-lg"
 			>
 				<a href={'projects/' + picture} target="_blank" class="w-full">
 					<ImageLoader