More stuffs

.env.example

@@ -0,0 +1,4 @@
+DISCORD_TOKEN=
+
+LASTFM_KEY=
+LASTFM_SECRET=

src/app.d.ts

@@ -7,12 +7,41 @@ interface PostsObject {
 	image: string;
 }
 
+interface Discord {
+	id: number;
+	username: string;
+	global_name: string;
+	avatar: string;
+	clan: unknown;
+}
+
+interface LastFMImage {
+	size: string;
+	'#text': string;
+}
+
+interface LastFMTrack {
+	image: Array<LastFMImage>;
+	name: string;
+	artist: {
+		'#text': string;
+	};
+}
+
+interface LastFM {
+	recenttracks: {
+		track: Array<LastFMTrack>;
+	};
+}
+
 declare global {
 	namespace App {
 		// interface Error {}
 		// interface Locals {}
 		interface PageData {
 			posts?: Array<PostsObject>;
+			discord: Discord;
+			lastfm: LastFM;
 		}
 		// interface PageState {}
 		// interface Platform {}

src/lib/config.js

@@ -1,8 +1,8 @@
 export default {
-	DISCORD: '000000000000000000',
-	LASTFM: 'lastfm',
-	BLUESKY: 'n',
-	TWITTER: 'dope',
-	FEDIVERSE: 'idfk',
-	NOSTR: 'forgot how that worked'
+	DISCORD: '223004006299992064',
+	LASTFM: 'RAAAAAAAAAAAH',
+	BLUESKY: 'cirroskais.xyz',
+	TWITTER: '@cirroskais',
+	FEDIVERSE: '@cirroskais@chadthundercock.com',
+	GITHUB: 'cirroskais'
 };

src/lib/server/discord.js

@@ -0,0 +1,11 @@
+import { DISCORD_TOKEN } from '$env/static/private';
+import config from '$lib/config';
+
+export default async function () {
+	const response = await fetch(`https://discord.com/api/users/${config.DISCORD}`, {
+		method: 'GET',
+		headers: { Authorization: `Bot ${DISCORD_TOKEN}` }
+	});
+
+	return response.json();
+}

src/lib/server/lastfm.js

@@ -0,0 +1,17 @@
+import { LASTFM_KEY } from '$env/static/private';
+import config from '$lib/config';
+
+const BASE_URL = 'https://ws.audioscrobbler.com/2.0';
+const METHOD = 'user.getRecentTracks&limit=1';
+
+export default async function () {
+	const response = await fetch(
+		`${BASE_URL}/?method=${METHOD}&user=${config.LASTFM}&api_key=${LASTFM_KEY}&format=json`,
+		{
+			method: 'GET',
+			headers: { 'User-Agent': 'cirroskais/2.0' }
+		}
+	);
+
+	return response.json();
+}

src/routes/+layout.server.js

@@ -0,0 +1,10 @@
+import discord from '$lib/server/discord';
+import lastfm from '$lib/server/lastfm';
+
+/** @type {import("./$types").LayoutServerLoad} */
+export async function load() {
+	return {
+		discord: await discord(),
+		lastfm: await lastfm()
+	};
+}

src/routes/+layout.svelte

@@ -10,6 +10,12 @@
 
 <svelte:head>
 	<link href="https://chadthundercock.com/@cirroskais" rel="me" />
+	<link
+		rel="icon"
+		type="image/png"
+		href="https://cdn.discordapp.com/avatars/{$page.data.discord.id}/{$page.data.discord
+			.avatar}.png"
+	/>
 </svelte:head>
 
 <div class="w-screen h-[3rem]">

src/routes/+page.svelte

@@ -1,9 +1,69 @@
+<script>
+	import { page } from '$app/stores';
+	import config from '$lib/config';
+
+	import Discord from '$lib/components/Icons/Discord.svelte';
+	import Lastfm from '$lib/components/Icons/LastFM.svelte';
+	import GitHub from '$lib/components/Icons/GitHub.svelte';
+</script>
+
 <svelte:head>
-	<title>cirroskais/home</title>
+	<title>{$page.data.discord?.username}/home</title>
 </svelte:head>
 
 <div class="hero w-full h-[50rem] rounded-lg mx-auto">
-	<div class="h-full w-full rounded-lg">
-		<div></div>
+	<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>
+		</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">
+				<a class="flex" href="https://www.last.fm/user/{config.LASTFM}">
+					<div class="h-7 w-7 my-auto text-white/50">
+						<Lastfm />
+					</div>
+				</a>
+				<a class="flex" href="https://github.com/{config.GITHUB}">
+					<div class="h-7 w-7 my-auto text-white/50">
+						<GitHub />
+					</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>
+			</div>
+		</div>
 	</div>
 </div>

src/routes/blog/+page.svelte

@@ -1,6 +1,7 @@
 <script>
 	import { onMount } from 'svelte';
 	import { writable } from 'svelte/store';
+	import { page } from '$app/stores';
 
 	import ListedPost from '$lib/components/Blog/ListedPost.svelte';
 	import First from '$lib/components/Icons/First.svelte';
@@ -23,7 +24,7 @@
 </script>
 
 <svelte:head>
-	<title>cirroskais/blog</title>
+	<title>{$page.data.discord?.username}/blog</title>
 </svelte:head>
 
 <div class="">

src/routes/projects/+page.svelte

@@ -1,3 +1,7 @@
+<script>
+	import { page } from '$app/stores';
+</script>
+
 <svelte:head>
-	<title>cirroskais/projects</title>
+	<title>{$page.data.discord?.username}/projects</title>
 </svelte:head>