add spotify and navbar

cubedhuang · Sep 10, 2023 · 1cd9346 · 1cd9346
1 parent 1024ace
commit 1cd9346
Show file tree

Hide file tree

Showing 24 changed files with 335 additions and 127 deletions.
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
 		"eslint-config-prettier": "^9.0.0",
 		"eslint-plugin-svelte": "^2.33.1",
 		"postcss": "^8.4.29",
+		"postcss-each": "^1.1.0",
 		"postcss-load-config": "^4.0.1",
 		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/postcss.config.cjs b/postcss.config.cjs
@@ -1,13 +1,9 @@
+const postcssEach = require('postcss-each');
 const tailwindcss = require('tailwindcss');
 const autoprefixer = require('autoprefixer');
 
 const config = {
-	plugins: [
-		//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
-		tailwindcss(),
-		//But others, like autoprefixer, need to run after,
-		autoprefixer
-	]
+	plugins: [postcssEach, tailwindcss(), autoprefixer]
 };
 
 module.exports = config;
diff --git a/src/app.postcss b/src/app.postcss
@@ -53,16 +53,33 @@
 		@apply mx-auto max-w-screen-md px-8;
 	}
 
-	.focus-outline {
-		@apply outline-none outline-2 outline-offset-2
-			focus-visible:outline-purple-500;
+	main > *,
+	nav {
+		animation-name: fade-in;
+		animation-duration: 800ms;
+		animation-fill-mode: both;
+		animation-timing-function: cubic-bezier(0.37, 0.69, 0.39, 0.99);
 	}
 
-	.link {
-		@apply focus-outline rounded-lg
-			inline-block no-underline mx-0.5 text-purple-600 font-semibold relative transition duration-300
-			after:absolute after:block after:-inset-x-1 after:bottom-1 after:h-4 after:opacity-10 after:bg-current after:rounded-full after:transition-all after:duration-300
-			hocus:text-purple-700 hocus:after:inset-x-0 hocus:after:bottom-1 hocus:after:h-2 hocus:after:opacity-30;
+	nav {
+		animation-delay: 1500ms;
+	}
+
+	@each $i in 1, 2, 3, 4, 5, 6, 7, 8, 9 {
+		main > *:nth-child($(i)) {
+			animation-delay: calc($(i) * 100ms);
+		}
+	}
+
+	@keyframes fade-in {
+		from {
+			opacity: 0;
+			transform: translateY(1rem);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
 	}
 }
 

diff --git a/src/lib/components/SpotifyInfo.svelte b/src/lib/components/SpotifyInfo.svelte
diff --git a/src/lib/components/icons/Envelope.svelte b/src/lib/components/icons/Envelope.svelte
@@ -0,0 +1,13 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	fill="currentColor"
+	class="w-6 h-6"
+>
+	<path
+		d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z"
+	/>
+	<path
+		d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z"
+	/>
+</svg>
diff --git a/src/lib/components/icons/GitHub.svelte b/src/lib/components/icons/GitHub.svelte
@@ -1,9 +1,8 @@
 <svg
 	xmlns="http://www.w3.org/2000/svg"
-	width="24"
-	height="24"
 	viewBox="0 0 24 24"
 	fill="currentColor"
+	class="w-6 h-6"
 >
 	<path
 		fill-rule="evenodd"

diff --git a/src/lib/components/icons/Linkedin.svelte b/src/lib/components/icons/Linkedin.svelte
@@ -0,0 +1,10 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	fill="currentColor"
+	class="w-6 h-6"
+>
+	<path
+		d="M20 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM8.339 18.337H5.667v-8.59h2.672v8.59zM7.003 8.574a1.548 1.548 0 1 1 0-3.096 1.548 1.548 0 0 1 0 3.096zm11.335 9.763h-2.669V14.16c0-.996-.018-2.277-1.388-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248h-2.667v-8.59h2.56v1.174h.037c.355-.675 1.227-1.387 2.524-1.387 2.704 0 3.203 1.778 3.203 4.092v4.71z"
+	/>
+</svg>
diff --git a/src/lib/components/icons/MusicalNote.svelte b/src/lib/components/icons/MusicalNote.svelte
@@ -0,0 +1,12 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 20 20"
+	fill="currentColor"
+	class="w-5 h-5"
+>
+	<path
+		fill-rule="evenodd"
+		d="M17.721 1.599a.75.75 0 01.279.584v11.29a2.25 2.25 0 01-1.774 2.198l-2.041.442a2.216 2.216 0 01-.938-4.333l2.662-.576a.75.75 0 00.591-.734V6.112l-8 1.73v7.684a2.25 2.25 0 01-1.774 2.2l-2.042.44a2.216 2.216 0 11-.935-4.33l2.659-.574A.75.75 0 007 12.53V4.237a.75.75 0 01.591-.733l9.5-2.054a.75.75 0 01.63.149z"
+		clip-rule="evenodd"
+	/>
+</svg>
diff --git a/src/lib/components/icons/Spotify.svelte b/src/lib/components/icons/Spotify.svelte
@@ -1,9 +1,8 @@
 <svg
 	xmlns="http://www.w3.org/2000/svg"
-	width="24"
-	height="24"
 	viewBox="0 0 24 24"
 	fill="currentColor"
+	class="w-6 h-6"
 >
 	<path
 		d="M12.01 2.019c-5.495 0-9.991 4.496-9.991 9.991 0 5.494 4.496 9.99 9.991 9.99 5.494 0 9.99-4.496 9.99-9.99 0-5.495-4.446-9.991-9.99-9.991zm4.595 14.436c-.199.299-.549.4-.85.201-2.349-1.45-5.296-1.75-8.793-.951-.348.102-.648-.148-.748-.449-.101-.35.149-.648.45-.749 3.795-.85 7.093-.499 9.69 1.1.35.149.4.548.251.848zm1.2-2.747c-.251.349-.7.499-1.051.249-2.697-1.646-6.792-2.148-9.939-1.148-.398.101-.85-.1-.949-.498-.101-.402.1-.852.499-.952 3.646-1.098 8.143-.548 11.239 1.351.3.149.45.648.201.998zm.099-2.799c-3.197-1.897-8.542-2.097-11.59-1.146a.938.938 0 0 1-1.148-.6.937.937 0 0 1 .599-1.151c3.547-1.049 9.392-.85 13.089 1.351.449.249.599.849.349 1.298-.25.35-.849.498-1.299.248z"

diff --git a/src/lib/components/icons/Twitter.svelte b/src/lib/components/icons/Twitter.svelte
@@ -1,9 +1,8 @@
 <svg
 	xmlns="http://www.w3.org/2000/svg"
-	width="24"
-	height="24"
 	viewBox="0 0 24 24"
 	fill="currentColor"
+	class="w-6 h-6"
 >
 	<path
 		d="M19.633 7.997c.013.175.013.349.013.523 0 5.325-4.053 11.461-11.46 11.461-2.282 0-4.402-.661-6.186-1.809.324.037.636.05.973.05a8.07 8.07 0 0 0 5.001-1.721 4.036 4.036 0 0 1-3.767-2.793c.249.037.499.062.761.062.361 0 .724-.05 1.061-.137a4.027 4.027 0 0 1-3.23-3.953v-.05c.537.299 1.16.486 1.82.511a4.022 4.022 0 0 1-1.796-3.354c0-.748.199-1.434.548-2.032a11.457 11.457 0 0 0 8.306 4.215c-.062-.3-.1-.611-.1-.923a4.026 4.026 0 0 1 4.028-4.028c1.16 0 2.207.486 2.943 1.272a7.957 7.957 0 0 0 2.556-.973 4.02 4.02 0 0 1-1.771 2.22 8.073 8.073 0 0 0 2.319-.624 8.645 8.645 0 0 1-2.019 2.083z"

diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -0,0 +1,9 @@
+export type NowPlayingResponse = {
+	/**
+	 * Whether the track is from recently played or currently playing.
+	 */
+	isPlayingNow: boolean;
+	isPaused: boolean;
+	progessMs: number;
+	track: SpotifyApi.TrackObjectFull | null;
+};
diff --git a/src/routes/(home)/+page.svelte b/src/routes/(home)/+page.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+	import Clock from './Clock.svelte';
+	import DiscordInfo from './DiscordInfo.svelte';
+	import SocialLink from './SocialLink.svelte';
+	import SpotifyInfo from './SpotifyInfo.svelte';
+
+	import GitHub from '$lib/components/icons/GitHub.svelte';
+	import Envelope from '$lib/components/icons/Envelope.svelte';
+	import Linkedin from '$lib/components/icons/Linkedin.svelte';
+	import Spotify from '$lib/components/icons/Spotify.svelte';
+	import Twitter from '$lib/components/icons/Twitter.svelte';
+</script>
+
+<svelte:head>
+	<title>Daniel</title>
+</svelte:head>
+
+<main class="wrapper">
+	<h1 class="text-6xl font-black">Daniel!</h1>
+
+	<p class="mt-4 text-gray-400">
+		Hey! I'm <b>Daniel</b>, a 17-year-old developer from
+		<b>Atlanta, Georgia</b>.
+	</p>
+
+	<div class="mt-4 flex gap-4">
+		<SocialLink href="https://github.com/cubedhuang" name="GitHub">
+			<GitHub />
+		</SocialLink>
+
+		<SocialLink
+			href="https://www.linkedin.com/in/cubedhuang"
+			name="LinkedIn"
+		>
+			<Linkedin />
+		</SocialLink>
+
+		<SocialLink href="https://twitter.com/cubedhuang" name="Twitter">
+			<Twitter />
+		</SocialLink>
+
+		<SocialLink
+			href="https://open.spotify.com/user/22ah5au2dajm7rqn3znkf4tnq?si=95e89d77cb0046f5"
+			name="Spotify"
+		>
+			<Spotify />
+		</SocialLink>
+
+		<SocialLink href="mailto:[email protected]" name="Email">
+			<Envelope />
+		</SocialLink>
+	</div>
+
+	<Clock />
+
+	<DiscordInfo />
+	<SpotifyInfo />
+</main>
diff --git a/src/lib/components/Clock.svelte → src/routes/(home)/Clock.svelte b/src/lib/components/Clock.svelte → src/routes/(home)/Clock.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { now } from '$lib/stores';
 
-	import Sun from './icons/Sun.svelte';
-	import Moon from './icons/Moon.svelte';
+	import Sun from '$lib/components/icons/Sun.svelte';
+	import Moon from '$lib/components/icons/Moon.svelte';
 
 	const df = new Intl.DateTimeFormat('en-US', {
 		day: 'numeric',
@@ -22,12 +22,14 @@
 	$: isDay = $now.getUTCHours() - 4 >= 6 && $now.getUTCHours() - 4 < 18;
 </script>
 
-{#if isDay}
-	<Sun />
-{:else}
-	<Moon />
-{/if}
+<p class="mt-8 flex text-sm gap-2 items-center text-white">
+	{#if isDay}
+		<Sun />
+	{:else}
+		<Moon />
+	{/if}
 
-{df.format($now)}
-&middot;
-{tf.format($now)}
+	{df.format($now)}
+	&middot;
+	{tf.format($now)}
+</p>
diff --git a/src/lib/components/DiscordInfo.svelte → src/routes/(home)/DiscordInfo.svelte b/src/lib/components/DiscordInfo.svelte → src/routes/(home)/DiscordInfo.svelte
@@ -10,37 +10,38 @@
 	const statusColors: Record<string, string> = {
 		online: 'bg-emerald-500',
 		idle: 'bg-amber-400',
-		dnd: 'bg-rose-400'
+		dnd: 'bg-rose-400',
+		offline: 'bg-gray-600'
 	};
 
 	$: customStatus = $lanyard?.activities.find(a => a.type === 4);
 </script>
 
-<div class="mt-8 flex rounded-full items-center bg-zinc-900">
+<div class="mt-8 flex rounded-full items-center bg-gray-900">
 	<div class="relative w-20 h-20 shrink-0">
 		{#if $lanyard}
 			<img
 				src="https://cdn.discordapp.com/avatars/{discordId}/{$lanyard
 					?.discord_user.avatar}"
 				alt=""
-				class="w-20 h-20 rounded-full bg-zinc-800"
+				class="w-20 h-20 rounded-full bg-gray-800"
 			/>
 
 			<span
-				class="absolute w-4 h-4 bottom-1 right-1 rounded-full ring-4 ring-zinc-900
+				class="z-10 absolute w-4 h-4 bottom-1 right-1 rounded-full ring-4 ring-gray-900
 					{statusColors[$lanyard.discord_status]}"
 			/>
 		{:else}
-			<div class="w-20 h-20 rounded-full bg-zinc-800" />
+			<div class="w-20 h-20 rounded-full bg-gray-800" />
 		{/if}
 	</div>
 
-	<div class="ml-4 py-2 pr-8">
+	<div class="ml-4 py-2 pr-6">
 		<p class="text-white font-semibold">
 			{#if $lanyard}
 				{$lanyard.discord_user.display_name}
 
-				<span class="ml-2 text-zinc-400 font-normal">
+				<span class="ml-1 text-gray-400 font-normal">
 					{$lanyard.discord_user.username}
 				</span>
 			{/if}

diff --git a/src/routes/(home)/SocialLink.svelte b/src/routes/(home)/SocialLink.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	export let href: string;
+	export let name: string;
+</script>
+
+<a
+	{href}
+	aria-label={name}
+	target="_blank"
+	rel="noopener noreferrer"
+	class="transition hover:text-gray-400"
+>
+	<slot />
+</a>