From 1c4068ff8768b0d0da4e3a3798ea3ffed6ca9dfc Mon Sep 17 00:00:00 2001
From: cirroskais <cirroskais@madhouselabs.net>
Date: Thu, 18 Apr 2024 15:47:10 -0400
Subject: [PATCH] messing w/ design

---
 .env.example                             |  2 -
 src/lib/components/Icons/Mastodon.svelte | 10 +++
 src/routes/+page.svelte                  | 88 ++++++++++++++----------
 3 files changed, 60 insertions(+), 40 deletions(-)
 create mode 100644 src/lib/components/Icons/Mastodon.svelte

diff --git a/.env.example b/.env.example
index fc20ab1..b02aefe 100644
--- a/.env.example
+++ b/.env.example
@@ -1,4 +1,2 @@
 DISCORD_TOKEN=
-
-LASTFM_KEY=
 LASTFM_SECRET=
diff --git a/src/lib/components/Icons/Mastodon.svelte b/src/lib/components/Icons/Mastodon.svelte
new file mode 100644
index 0000000..ff76eed
--- /dev/null
+++ b/src/lib/components/Icons/Mastodon.svelte
@@ -0,0 +1,10 @@
+<svg
+	role="img"
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+	stroke="none"
+	fill="currentColor"
+	><title>Mastodon</title><path
+		d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"
+	/></svg
+>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 07ad59f..4a6ee57 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -5,6 +5,7 @@
 	import Discord from '$lib/components/Icons/Discord.svelte';
 	import Lastfm from '$lib/components/Icons/LastFM.svelte';
 	import GitHub from '$lib/components/Icons/GitHub.svelte';
+	import Mastodon from '$lib/components/Icons/Mastodon.svelte';
 </script>
 
 <svelte:head>
@@ -12,56 +13,67 @@
 </svelte:head>
 
 <div class="hero w-full h-[50rem] rounded-lg mx-auto">
-	<div class="h-full w-full rounded-lg p-4">
-		<div class="flex max-w-lg p-2 bg-black/75 rounded-lg mt-24">
-			<img
-				class="mr-2 h-20 md:h-24 rounded-full"
-				src="https://cdn.discordapp.com/avatars/{$page.data.discord.id}/{$page.data.discord
-					.avatar}.png"
-				alt="{$page.data.discord?.username}'s profile picture"
-			/>
-			<p class="my-auto tracking-widest text-2xl md:text-5xl text-white/75">
-				{$page.data.discord?.username}
-			</p>
-			<div
-				class="w-9 md:w-12 h-9 md:h-12 my-auto px-2 pt-3 md:pt-3.5 text-sm md:text-3xl text-white/75"
-			>
-				<Discord />
+	<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">
+				<img
+					class="mr-2 h-20 md:h-24 rounded-full"
+					src="https://cdn.discordapp.com/avatars/{$page.data.discord.id}/{$page.data.discord
+						.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>
 			</div>
-		</div>
 
-		<div class="md:w-[32rem] flex place-content-between text-xl p-2 bg-black/75 rounded-lg mt-1">
-			<p class="py-1 text-white/50">Full stack JavaScript developer.</p>
-			<div class="text-2xl flex space-x-4">
+			<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/50">
+					<div class="h-7 w-7 my-auto text-white/75">
 						<Lastfm />
 					</div>
 				</a>
 				<a class="flex" href="https://github.com/{config.GITHUB}">
-					<div class="h-7 w-7 my-auto text-white/50">
+					<div class="h-7 w-7 my-auto text-white/75">
 						<GitHub />
 					</div>
 				</a>
+				<a class="flex" href="https://mastodon.social/{config.FEDIVERSE}">
+					<div class="h-7 w-7 my-auto text-white/75">
+						<Mastodon />
+					</div>
+				</a>
+				<a class="flex" href="https://discord.com/users/{config.DISCORD}">
+					<div class="h-7 w-7 my-auto text-white/75">
+						<Discord />
+					</div>
+				</a>
 			</div>
-		</div>
 
-		<div class="max-w-lg p-2 bg-black/75 rounded-lg mt-1">
-			<div class="flex space-x-4">
-				<img
-					class="w-24 h-24 rounded-lg"
-					src={$page.data.lastfm?.recenttracks?.track[0]?.image.find(
-						(_) => _.size == 'extralarge'
-					)?.['#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">
-						{$page.data.lastfm?.recenttracks?.track[0]?.name}
-					</p>
-					<p class="text-xl text-white/50">
-						{$page.data.lastfm?.recenttracks?.track[0]?.artist?.['#text']}
-					</p>
+			<div class="md:w-[42rem] p-2 bg-black/75 rounded-lg mt-1">
+				<div class="flex space-x-4">
+					<img
+						class="w-24 h-24 rounded-lg"
+						src={$page.data.lastfm?.recenttracks?.track[0]?.image.find(
+							(_) => _.size == 'extralarge'
+						)?.['#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">
+							{$page.data.lastfm?.recenttracks?.track[0]?.name}
+						</p>
+						<p class="text-xl text-white/50">
+							{$page.data.lastfm?.recenttracks?.track[0]?.artist?.['#text']}
+						</p>
+					</div>
 				</div>
 			</div>
 		</div>