From 4a99aca1013562fc86a28cda78cf3c0f0adbaca2 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sat, 14 Jun 2025 14:09:08 -0400 Subject: [PATCH] Use new Avatar component --- src/lib/components/Avatar.stories.js | 50 ++ src/lib/components/Avatar.svelte | 550 +++++---------------- src/lib/components/AvatarHeadphones.svelte | 102 ++++ src/lib/components/AvatarSVG.svelte | 184 +++++++ src/routes/about/+page.svelte | 14 +- 5 files changed, 476 insertions(+), 424 deletions(-) create mode 100644 src/lib/components/Avatar.stories.js create mode 100644 src/lib/components/AvatarHeadphones.svelte create mode 100644 src/lib/components/AvatarSVG.svelte diff --git a/src/lib/components/Avatar.stories.js b/src/lib/components/Avatar.stories.js new file mode 100644 index 0000000..346c4f0 --- /dev/null +++ b/src/lib/components/Avatar.stories.js @@ -0,0 +1,50 @@ +import Avatar from './Avatar.svelte' + +export default { + title: 'Components/Avatar', + component: Avatar, + parameters: { + docs: { + description: { + component: + 'Streamlined avatar component with interactive states and music playing indicator.' + } + } + }, + argTypes: { + forcePlayingMusic: { + control: 'boolean', + description: 'Force the music playing state (shows headphones)' + } + } +} + +export const Default = { + args: { + forcePlayingMusic: false + } +} + +export const PlayingMusic = { + args: { + forcePlayingMusic: true + } +} + +export const Interactive = { + args: { + forcePlayingMusic: false + }, + render: (args) => ({ + Component: Avatar, + props: args + }), + parameters: { + docs: { + story: { + inline: false, + height: '400px' + } + } + } +} \ No newline at end of file diff --git a/src/lib/components/Avatar.svelte b/src/lib/components/Avatar.svelte index 7bb0395..3449294 100644 --- a/src/lib/components/Avatar.svelte +++ b/src/lib/components/Avatar.svelte @@ -1,13 +1,16 @@ + +{#if isVisible} +
+ + + + + + + + + + + + + + + + + +
+{/if} + + \ No newline at end of file diff --git a/src/lib/components/AvatarSVG.svelte b/src/lib/components/AvatarSVG.svelte new file mode 100644 index 0000000..62044b5 --- /dev/null +++ b/src/lib/components/AvatarSVG.svelte @@ -0,0 +1,184 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index 0c3fdf6..9ed428c 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -61,10 +61,12 @@ San Francisco.

- Right now, I'm spending my free time building a hobby journaling app called Maitsu. I've spent time at several companies over the last 11 years, but you might know me from + Currently, I'm a product designer at Grammarly. I spend my free time building a hobby journaling app called + Maitsu and running a competitive crew in + Granblue Fantasy. I've spent time + at several companies over the last 15 years, but you might know me from Pinterest, where I was the first design hire.

@@ -152,6 +154,10 @@ background: $grey-100; border-radius: $card-corner-radius; + p { + margin-bottom: $unit-2x; + } + p:first-child { margin-top: 0; }