turn things into components

src/lib/components/Home/HeroContainer.svelte

@@ -0,0 +1,7 @@
+<script>
+	export let className = '';
+</script>
+
+<div class="flex md:w-[42rem] p-2 bg-black/75 rounded-lg shadow-lg {className}">
+	<slot />
+</div>

src/lib/components/Home/SocialIcon.svelte

@@ -0,0 +1,12 @@
+<script>
+	export let href = '',
+		color = '';
+</script>
+
+<a class="flex text-xl group" {href}>
+	<div
+		class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:{color} group-focus:{color}"
+	>
+		<slot />
+	</div></a
+>

src/lib/config.js

@@ -3,6 +3,6 @@ export default {
 	LASTFM: 'RAAAAAAAAAAAH',
 	BLUESKY: 'cirroskais.xyz',
 	TWITTER: '@cirroskais',
-	FEDIVERSE: '@cirroskais@chadthundercock.com',
+	FEDIVERSE: 'https://chadthundercock.com/@cirroskais',
 	GITHUB: 'cirroskais'
 };

src/routes/+page.svelte

@@ -2,7 +2,9 @@
 	import { page } from '$app/stores';
 	import config from '$lib/config';
 
-	import ImgButton from '$lib/components/ImgButton.svelte';
+	import SocialIcon from '$lib/components/Home/SocialIcon.svelte';
+	import HeroContainer from '$lib/components/Home/HeroContainer.svelte';
+	import ImgButton from '$lib/components/Home/Button.svelte';
 	import Image from '$lib/components/Image.svelte';
 
 	import Discord from '$lib/components/Icons/Discord.svelte';
@@ -19,8 +21,8 @@
 
 <div class="hero w-full h-[calc(100vh-5.125rem)] rounded-lg mx-auto my-auto">
 	<div class="flex p-4 h-full rounded-lg">
-		<div class="my-auto md:w-fit md:mx-auto min-h-max">
+		<div class="gap-1 my-auto space-y-1 md:w-fit md:mx-auto">
-			<div class="flex md:w-[42rem] p-2 bg-black/75 rounded-lg shadow-lg">
+			<HeroContainer>
 				<Image
 					style="mr-2 h-20 w-20 rounded-full md:h-24 md:w-24"
 					src="https://cdn.discordapp.com/avatars/{$page.data.discord.id}/{$page.data.discord
@@ -30,56 +32,30 @@
 				<p class="my-auto text-3xl md:text-4xl text-neutral-300">
 					{$page.data.discord?.username}
 				</p>
-			</div>
+			</HeroContainer>
 
-			<div
+			<HeroContainer className="place-content-center space-x-2">
-				class="md:w-[42rem] flex place-content-center space-x-2 text-xl p-2 bg-black/75 rounded-lg mt-1 shadow-lg"
+				<SocialIcon href="https://www.last.fm/user/{config.LASTFM}" color="text-red-500">
-			>
+					<Lastfm />
-				<a class="flex group" href="https://www.last.fm/user/{config.LASTFM}">
+				</SocialIcon>
-					<div
+				<SocialIcon href="https://github.com/{config.GITHUB}" color="text-black">
-						class="my-auto w-7 h-7 transition-colors text-neutral-400 group-focus:text-red-500 group-hover:text-red-500"
+					<GitHub />
-					>
+				</SocialIcon>
-						<Lastfm />
+				<SocialIcon href={config.FEDIVERSE} color="text-indigo-700">
-					</div>
+					<Mastodon />
-				</a>
+				</SocialIcon>
-				<a class="flex group" href="https://github.com/{config.GITHUB}">
+				<SocialIcon href="https://discord.com/users/{config.DISCORD}" color="text-blue-600">
-					<div
+					<Discord />
-						class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-black group-focus:text-black"
+				</SocialIcon>
-					>
+				<SocialIcon href="https://x.com/{config.TWITTER}" color="text-black">
-						<GitHub />
+					<X />
-					</div>
+				</SocialIcon>
-				</a>
+				<SocialIcon href="https://bsky.app/profile/{config.BLUESKY}" color="text-blue-400">
-				<a class="flex group" href="https://mastodon.social/{config.FEDIVERSE}">
+					<Bluesky />
-					<div
+				</SocialIcon>
-						class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-indigo-700 group-focus:text-indigo-700"
+			</HeroContainer>
-					>
-						<Mastodon />
-					</div>
-				</a>
-				<a class="flex group" href="https://discord.com/users/{config.DISCORD}">
-					<div
-						class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-blue-600 group-focus:text-blue-600"
-					>
-						<Discord />
-					</div>
-				</a>
-				<a class="flex group" href="https://x.com/{config.TWITTER}">
-					<div
-						class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-black group-focus:text-black"
-					>
-						<X />
-					</div>
-				</a>
-				<a class="flex group" href="https://bsky.app/profile/{config.BLUESKY}">
-					<div
-						class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-blue-400 group-focus:text-blue-400"
-					>
-						<Bluesky />
-					</div>
-				</a>
-			</div>
 
-			<div class="md:w-[42rem] p-2 bg-black/75 rounded-lg mt-1 shadow-lg">
+			<HeroContainer>
 				<div class="flex space-x-2.5">
 					<Image
 						style="w-16 h-16 md:w-24 md:h-24"
@@ -97,11 +73,9 @@
 						</p>
 					</div>
 				</div>
-			</div>
+			</HeroContainer>
 
-			<div
+			<HeroContainer className="justify-center flex-wrap gap-2 ">
-				class="md:w-[42rem] p-2 bg-black/75 rounded-lg mt-1 flex justify-center flex-wrap gap-2 shadow-lg"
-			>
 				<ImgButton href="https://cirroskais.xyz" src="/img/buttons/cirro.png"></ImgButton>
 				<ImgButton href="https://twitter.com/Porpss1" src="/img/buttons/rovin.png"></ImgButton>
 				<ImgButton href="https://split.pet" src="/img/buttons/split.png"></ImgButton>
@@ -112,7 +86,7 @@
 				<ImgButton src="/img/buttons/lol.gif"></ImgButton>
 				<ImgButton src="/img/buttons/twopaws.png"></ImgButton>
 				<ImgButton src="/img/buttons/flag-gaymen.png"></ImgButton>
-			</div>
+			</HeroContainer>
 		</div>
 	</div>
 </div>