src: update component names & add anilist

src/lib/components/Anilist.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	export let className: string = ''
+</script>
+
+<svg
+	role="img"
+	class={className}
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+	><title>AniList</title><path
+		d="M24 17.53v2.421c0 .71-.391 1.101-1.1 1.101h-5l-.057-.165L11.84 3.736c.106-.502.46-.788 1.053-.788h2.422c.71 0 1.1.391 1.1 1.1v12.38H22.9c.71 0 1.1.392 1.1 1.101zM11.034 2.947l6.337 18.104h-4.918l-1.052-3.131H6.019l-1.077 3.131H0L6.361 2.948h4.673zm-.66 10.96-1.69-5.014-1.541 5.015h3.23z"
+	/></svg
+>

src/routes/+page.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import Pfp from '$lib/images/pfp.jpg'
-	import Forgejo from '$lib/components/forgejo.svelte'
-	import Bluesky from '$lib/components/bluesky.svelte'
-	import Lastfm from '$lib/components/lastfm.svelte'
-	import Twitch from '$lib/components/twitch.svelte'
+	import Forgejo from '$lib/components/Forgejo.svelte'
+	import Bluesky from '$lib/components/Bluesky.svelte'
+	import Lastfm from '$lib/components/Lastfm.svelte'
+	import Twitch from '$lib/components/Twitch.svelte'
+	import Anilist from '$lib/components/Anilist.svelte'
 </script>
 
 <svelte:head>
@@ -52,5 +53,12 @@
 				/>
 			</span>
 		</a>
+		<a href="https://anilist.co/user/notoh/" aria-label="Anilist">
+			<span class="inline-block motion-preset-expand motion-delay-400">
+				<Anilist
+					className="w-8 h-8 fill-current color-transition hover:text-accent hover:motion-preset-pulse"
+				/>
+			</span>
+		</a>
 	</div>
 </div>