goated

src/app.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -6,6 +8,10 @@ html,
 body {
 	background-color: #171717;
 	color: white;
+	font-family: 'Nunito', sans-serif;
+	font-optical-sizing: auto;
+	font-weight: 400;
+	font-style: normal;
 }
 
 .hero {
@@ -24,8 +30,3 @@ a {
 	@apply hover:text-neutral-400;
 	@apply transition-colors;
 }
-
-a > div {
-	@apply hover:text-neutral-400;
-	@apply transition-colors;
-}

src/lib/components/ImgButton.svelte

@@ -0,0 +1,39 @@
+<script>
+	// @ts-nocheck
+	// lol
+
+	import { onMount } from 'svelte';
+
+	export let src, href;
+	let e;
+
+	// https://github.com/nbitzz/newnewwebsite/blob/a751e690a9993923aabd1984d9645c502f148c69/src/components/buttons/Buttons.astro#L74-L95
+	onMount(() => {
+		let startEffect = (ev) => {
+			let yP = 1 - (ev.offsetY / 31) * 2;
+			let xP = -1 + (ev.offsetX / 88) * 2;
+			e.style.transform =
+				'scale(105%)' +
+				` rotate3d(${yP.toFixed(2)}, ${xP.toFixed(2)},0,20deg)` +
+				` translate(${3 * xP}px,${-5 * yP}px)`;
+		};
+
+		e.addEventListener('mouseover', startEffect);
+		e.addEventListener('mousemove', startEffect);
+		e.addEventListener('mouseleave', () => {
+			e.style.transform = '';
+		});
+	});
+</script>
+
+<a {href} target="_blank">
+	<img class="imgbutton" {src} alt="Button" bind:this={e} />
+</a>
+
+<style lang="postcss">
+	.imgbutton {
+		transition-property: transform;
+		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+		transition-duration: 85ms;
+	}
+</style>

src/routes/+layout.svelte

@@ -28,7 +28,7 @@
 </div>
 
 {#key $page.url}
-	<div in:fade class="container mx-auto py-2 min-h-[calc(100vh-7rem)]">
+	<div in:fade class="container flex mx-auto py-2 min-h-[calc(100vh-3rem)]">
 		<slot />
 	</div>
 {/key}

src/routes/+page.svelte

@@ -2,6 +2,8 @@
 	import { page } from '$app/stores';
 	import config from '$lib/config';
 
+	import ImgButton from '$lib/components/ImgButton.svelte';
+
 	import Discord from '$lib/components/Icons/Discord.svelte';
 	import Lastfm from '$lib/components/Icons/LastFM.svelte';
 	import GitHub from '$lib/components/Icons/GitHub.svelte';
@@ -14,7 +16,7 @@
 	<title>{$page.data.discord?.username}/home</title>
 </svelte:head>
 
-<div class="hero w-full h-[50rem] rounded-lg mx-auto">
+<div class="hero w-full h-[50rem] rounded-lg mx-auto my-auto">
 	<div class="h-full rounded-lg p-4 md:flex">
 		<div class="md:w-fit md:mx-auto my-auto min-h-max">
 			<div class="flex md:w-[42rem] p-2 bg-black/75 rounded-lg">
@@ -24,53 +26,48 @@
 						.avatar}.png"
 					alt="{$page.data.discord?.username}'s profile picture"
 				/>
-				<div class="my-auto flex flex-col">
-					<p class="tracking-wider text-2xl md:text-5xl text-white/75">
-						{$page.data.discord?.global_name}
-					</p>
-					<p class="text-md md:text-2xl text-white/50">
-						{$page.data.discord?.username}
-					</p>
-				</div>
+				<p class="text-xl md:text-4xl text-neutral-300 my-auto">
+					{$page.data.discord?.username}
+				</p>
 			</div>
 
 			<div
 				class="md:w-[42rem] flex place-content-center space-x-2 text-xl p-2 bg-black/75 rounded-lg mt-1"
 			>
 				<a class="flex" href="https://www.last.fm/user/{config.LASTFM}">
-					<div class="h-7 w-7 my-auto text-white/75">
+					<div class="h-7 w-7 my-auto text-neutral-500 hover:text-red-500 transition-colors">
 						<Lastfm />
 					</div>
 				</a>
 				<a class="flex" href="https://github.com/{config.GITHUB}">
-					<div class="h-7 w-7 my-auto text-white/75">
+					<div class="h-7 w-7 my-auto text-neutral-500 hover:text-black transition-colors">
 						<GitHub />
 					</div>
 				</a>
 				<a class="flex" href="https://mastodon.social/{config.FEDIVERSE}">
-					<div class="h-7 w-7 my-auto text-white/75">
+					<div class="h-7 w-7 my-auto text-neutral-500 hover:text-indigo-700 transition-colors">
 						<Mastodon />
 					</div>
 				</a>
 				<a class="flex" href="https://discord.com/users/{config.DISCORD}">
-					<div class="h-7 w-7 my-auto text-white/75">
+					<div class="h-7 w-7 my-auto text-neutral-500 hover:text-blue-600 transition-colors">
 						<Discord />
 					</div>
 				</a>
 				<a class="flex" href="https://x.com/{config.TWITTER}">
-					<div class="h-7 w-7 my-auto text-white/75">
+					<div class="h-7 w-7 my-auto text-neutral-500 hover:text-black transition-colors">
 						<X />
 					</div>
 				</a>
 				<a class="flex" href="https://bsky.app/profile/{config.BLUESKY}">
-					<div class="h-7 w-7 my-auto text-white/75">
+					<div class="h-7 w-7 my-auto text-neutral-500 hover:text-blue-400 transition-colors">
 						<Bluesky />
 					</div>
 				</a>
 			</div>
 
 			<div class="md:w-[42rem] p-2 bg-black/75 rounded-lg mt-1">
-				<div class="flex space-x-4">
+				<div class="flex space-x-2.5">
 					<img
 						class="w-24 h-24"
 						src={$page.data.lastfm?.recenttracks?.track[0]?.image.find(
@@ -78,16 +75,20 @@
 						)?.['#text']}
 						alt="Album art for {$page.data.lastfm?.recenttracks?.track[0]?.name}"
 					/>
-					<div class="w-full py-3.5">
-						<p class="text-2xl text-white/75 whitespace-nowrap overflow-clip">
+					<div class="w-full my-auto">
+						<p class="text-2xl text-neutral-300 whitespace-nowrap overflow-clip">
 							{$page.data.lastfm?.recenttracks?.track[0]?.name}
 						</p>
-						<p class="text-xl text-white/50">
+						<p class="text-xl text-neutral-500">
 							{$page.data.lastfm?.recenttracks?.track[0]?.artist?.['#text']}
 						</p>
 					</div>
 				</div>
 			</div>
+
+			<div class="md:w-[42rem] p-2 bg-black/75 rounded-lg mt-1 flex justify-center flex-wrap gap-1">
+				<ImgButton href="https://cirroskais.xyz" src="/cirro-button.png"></ImgButton>
+			</div>
 		</div>
 	</div>
 </div>