LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-09 12:57:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

some final polish

Browse Source
This commit is contained in:
Jesse Winton
2024-06-14 16:20:55 -04:00
parent 226faa6b04
commit b4614112ab
5 changed files with 180 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/lib/animations/Products/Products.svelte
View File

@@ -154,7 +154,7 @@
import { Storage, storageController } from './storage'; import { Storage, storageController } from './storage';
import { Functions, functionsController } from './functions'; import { Functions, functionsController } from './functions';
import { Realtime, realtimeController } from './realtime'; import { Realtime, realtimeController } from './realtime';
import { Messaging as MessagingAnimation, messagingController } from './messaging'; import { Messaging, messagingController } from './messaging';
import { postController } from './post'; import { postController } from './post';
import Post from './post/post.svelte'; import Post from './post/post.svelte';
import { anyify } from '$lib/utils/anyify'; import { anyify } from '$lib/utils/anyify';
@@ -328,7 +328,7 @@
{#if active.product === 'auth'} {#if active.product === 'auth'}
<Auth.Box /> <Auth.Box />
{:else if active.product === 'messaging'} {:else if active.product === 'messaging'}
<MessagingAnimation.Box /> <Messaging.Box />
{:else if active.product === 'databases'} {:else if active.product === 'databases'}
<Databases.Box /> <Databases.Box />
{:else if active.product === 'storage'} {:else if active.product === 'storage'}
@@ -348,7 +348,7 @@
{:else if active.product === 'functions'} {:else if active.product === 'functions'}
<Functions.Code /> <Functions.Code />
{:else if active.product === 'messaging'} {:else if active.product === 'messaging'}
<MessagingAnimation.Code /> <Messaging.Code />
{/if} {/if}
</CodeWindow> </CodeWindow>
</div> </div>
@@ -369,7 +369,7 @@
{:else if active.product === 'storage'} {:else if active.product === 'storage'}
<Storage.Phone /> <Storage.Phone />
{:else if active.product === 'messaging'} {:else if active.product === 'messaging'}
<MessagingAnimation.Phone /> <Messaging.Phone />
{:else if active.product === 'functions'} {:else if active.product === 'functions'}
<Functions.Phone /> <Functions.Phone />
{:else if !['auth', 'databases', 'storage', 'messaging', 'functions'].includes(anyify(active.product))} {:else if !['auth', 'databases', 'storage', 'messaging', 'functions'].includes(anyify(active.product))}
@@ -391,7 +391,7 @@
#products { #products {
min-height: 500vh; min-height: 500vh;
height: 5000px; height: fit-content;
position: relative; position: relative;
--debug-bg: transparent; --debug-bg: transparent;
@@ -568,7 +568,7 @@
); );
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(8px); //backdrop-filter: blur(8px);
padding: 0.5rem; padding: 0.5rem;
width: 275px; width: 275px;

33
src/lib/animations/Products/messaging/code.svelte
View File

@@ -1,8 +1,5 @@
<script lang="ts"> <script lang="ts">
import { portal } from '$lib/actions';
import Code from '$lib/animations/CodeWindow/Code.svelte'; import Code from '$lib/animations/CodeWindow/Code.svelte';
import { fade } from 'svelte/transition';
import { messagingController } from '.';
let content = ` let content = `
await messaging.createPush( await messaging.createPush(
@@ -10,36 +7,6 @@ await messaging.createPush(
'New task assigned to you', 'New task assigned to you',
'You were assigned a new task in your board. Tap to check it out.', 'You were assigned a new task in your board. Tap to check it out.',
);`.trim(); );`.trim();
const { state } = messagingController;
</script> </script>
<Code {content} /> <Code {content} />
<div use:portal={{ target: '#code-bottom' }} class="bottom">
{#if $state.submit === 'loading'}
<span in:fade>Sending push notification...</span>
<div class="loader is-small" in:fade />
{:else if $state.submit === 'success'}
<span in:fade>Push notification sent!</span>
{/if}
</div>
<style lang="scss">
.bottom {
display: flex;
align-items: center;
gap: 0.5rem;
height: 3rem;
padding-inline: 1rem;
color: var(--color-bw-white, #fff);
font-family: Inter;
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 1.3125rem */
letter-spacing: -0.00875rem;
}
</style>

4
src/lib/animations/Products/messaging/index.ts
View File

@@ -38,7 +38,7 @@ const state = createResettable<State>({
{ {
id: '...3397fecdedb1', id: '...3397fecdedb1',
type: 'SMS', type: 'SMS',
icon: './images/icons/illustrated/dark/push.png', icon: './images/icons/illustrated/dark/sms.png',
status: 'sent' status: 'sent'
}, },
{ {
@@ -120,7 +120,7 @@ const execute = async () => {
] ]
})); }));
await sleep(1000); await sleep(1250);
update((p) => ({ update((p) => ({
...p, ...p,

9
src/lib/animations/Products/messaging/phone.svelte
View File

@@ -53,10 +53,11 @@
gap: 0.75rem; gap: 0.75rem;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
z-index: 10; z-index: 1000;
border-radius: 20px; border-radius: 20px;
background: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
box-shadow: 3px -8px 32px 0px rgba(0, 0, 0, 0.24);
.icon { .icon {
height: 38px; height: 38px;
@@ -76,7 +77,7 @@
font-size: 0.75rem; font-size: 0.75rem;
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
line-height: 1.375rem; /* 137.5% */ line-height: 1rem; /* 137.5% */
letter-spacing: -0.014rem; letter-spacing: -0.014rem;
} }
@@ -86,7 +87,7 @@
font-size: 0.75rem; font-size: 0.75rem;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
line-height: 1.375rem; /* 137.5% */ line-height: 1rem; /* 137.5% */
letter-spacing: -0.014rem; letter-spacing: -0.014rem;
} }
} }
@@ -96,7 +97,7 @@
font-size: 0.75rem; font-size: 0.75rem;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
line-height: 1.375rem; /* 137.5% */ line-height: 1rem; /* 137.5% */
letter-spacing: -0.014rem; letter-spacing: -0.014rem;
} }
} }

330
src/lib/animations/Products/realtime/index.ts
View File

@@ -6,229 +6,233 @@ import { getElSelector } from '../Products.svelte';
import { animate } from 'motion'; import { animate } from 'motion';
type Task = { type Task = {
title: string; title: string;
tags: string[]; tags: string[];
images?: string[]; images?: string[];
}; };
type User = { type User = {
name: string; name: string;
color: string; color: string;
}; };
type State = { type State = {
tasks: { tasks: {
todo: Task[]; todo: Task[];
doing: Task[]; doing: Task[];
done: Task[]; done: Task[];
}; };
users: User[]; users: User[];
}; };
const state = createResettable<State>({ const state = createResettable<State>({
tasks: { tasks: {
todo: [ todo: [
{ {
title: 'Edit images for website', title: 'Edit images for website',
tags: ['design', 'content'], tags: ['design', 'content'],
images: ['./images/animations/storage-2.png', './images/animations/storage-3.png'] images: ['./images/animations/storage-2.png', './images/animations/storage-3.png']
} }
], ],
doing: [ doing: [
{ {
title: 'Handoff meet', title: 'Handoff meet',
tags: ['design', 'dev'] tags: ['design', 'dev']
} }
], ],
done: [] done: []
}, },
users: [] users: []
}); });
export const connectionsProg = createResettable(0); export const connectionsProg = createResettable(0);
const addUser = (update: typeof state.update, user: User) => { const addUser = (update: typeof state.update, user: User) => {
update((p) => ({ update((p) => ({
...p, ...p,
users: [...p.users, user] users: [...p.users, user]
})); }));
}; };
const addTask = (update: typeof state.update, group: keyof State['tasks'], task: Task) => { const addTask = (update: typeof state.update, group: keyof State['tasks'], task: Task) => {
update((p) => ({ update((p) => ({
...p, ...p,
tasks: { tasks: {
...p.tasks, ...p.tasks,
[group]: [task, ...p.tasks[group]] [group]: [task, ...p.tasks[group]]
} }
})); }));
}; };
const execute = async () => { const execute = async () => {
const phone = getElSelector('phone'); const phone = getElSelector('phone');
const code = getElSelector('code'); const code = getElSelector('code');
const box = getElSelector('box');
const walter = getElSelector('user-Walter'); const walter = getElSelector('user-Walter');
const aditya = getElSelector('user-Aditya'); const aditya = getElSelector('user-Aditya');
const sara = getElSelector('user-Sara'); const sara = getElSelector('user-Sara');
const addTodo = getElSelector('add-todo'); const addTodo = getElSelector('add-todo');
const addDoing = getElSelector('add-doing'); const addDoing = getElSelector('add-doing');
const addDone = getElSelector('add-done'); const addDone = getElSelector('add-done');
const graphBox = getElSelector('graph-box'); const graphBox = getElSelector('graph-box');
const pd = getElSelector('pd'); const pd = getElSelector('pd');
const { update } = state.reset(); const { update } = state.reset();
const { set: setConn } = connectionsProg.reset(); const { set: setConn } = connectionsProg.reset();
await Promise.all([ await Promise.all([
safeAnimate(phone, { x: 0, y: 0, width: '660px' }, { duration: 0.5 })?.finished, safeAnimate(box, { opacity: 0 }, { duration: 0.5 })?.finished,
safeAnimate(code, { opacity: 0 }, { duration: 0.5 })?.finished, safeAnimate(phone, { x: 0, y: 0, width: '660px' }, { duration: 0.5 })?.finished,
safeAnimate(graphBox, { opacity: 0, x: 0, y: 0, visibility: 'visible' }, { duration: 0 }) safeAnimate(code, { opacity: 0 }, { duration: 0.5 })?.finished,
?.finished, safeAnimate(graphBox, { opacity: 0, x: 0, y: 0, visibility: 'visible' }, { duration: 0 })
safeAnimate(pd, { opacity: 1, y: 0 }, { duration: 0.5 })?.finished ?.finished,
]); safeAnimate(pd, { opacity: 1, y: 0 }, { duration: 0.5 })?.finished
]);
// Graphbox // Graphbox
sleep(1250).then(async () => { sleep(1250).then(async () => {
await safeAnimate(graphBox, { opacity: 1 }, { duration: 0.5 })?.finished; await safeAnimate(graphBox, { opacity: 1 }, { duration: 0.5 })?.finished;
animate( animate(
(y) => { (y) => {
setConn(y); setConn(y);
}, },
{ duration: 2.5, easing: 'ease-in' } { duration: 2.5, easing: 'ease-in' }
); );
}); });
// Walter // Walter
sleep(500).then(async () => { sleep(500).then(async () => {
addUser(update, { name: 'Walter', color: '#fd366e' }); addUser(update, { name: 'Walter', color: '#fd366e' });
await sleep(500); await sleep(500);
await safeAnimate(walter, { x: -200, y: -100, scale: 1 }, { duration: 0.5 })?.finished; await safeAnimate(walter, { x: -200, y: -100, scale: 1 }, { duration: 0.5 })?.finished;
await Promise.all([ await Promise.all([
safeAnimate(walter, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished, safeAnimate(walter, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished,
safeAnimate(addTodo, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished safeAnimate(addTodo, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished
]); ]);
addTask(update, 'todo', { addTask(update, 'todo', {
title: 'Handoff meet', title: 'Handoff meet',
tags: ['design', 'dev'] tags: ['design', 'dev']
}); });
await safeAnimate(walter, { scale: 1, x: -180, y: -160 }, { duration: 0.75, delay: 0.5 }) await safeAnimate(walter, { scale: 1, x: -180, y: -160 }, { duration: 0.75, delay: 0.5 })
?.finished; ?.finished;
await sleep(500); await sleep(500);
await safeAnimate(walter, { x: 210, y: -100, scale: 1 }, { duration: 0.5 })?.finished; await safeAnimate(walter, { x: 210, y: -100, scale: 1 }, { duration: 0.5 })?.finished;
await Promise.all([ await Promise.all([
safeAnimate(walter, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished, safeAnimate(walter, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished,
safeAnimate(addDone, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished safeAnimate(addDone, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished
]); ]);
addTask(update, 'done', { addTask(update, 'done', {
title: 'Create migrations script', title: 'Create migrations script',
tags: ['Dev'] tags: ['Dev']
}); });
safeAnimate(walter, { scale: 1, x: 230, y: -20 }, { duration: 0.75, delay: 0.5 }); safeAnimate(walter, { scale: 1, x: 230, y: -20 }, { duration: 0.75, delay: 0.5 });
await sleep(750); await sleep(750);
await safeAnimate(walter, { x: -10, y: -100, scale: 1 }, { duration: 0.5 })?.finished; await safeAnimate(walter, { x: -10, y: -100, scale: 1 }, { duration: 0.5 })?.finished;
await Promise.all([ await Promise.all([
safeAnimate(walter, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished, safeAnimate(walter, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished,
safeAnimate(addDoing, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished safeAnimate(addDoing, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished
]); ]);
addTask(update, 'doing', { addTask(update, 'doing', {
title: 'Configure blog SEO', title: 'Configure blog SEO',
tags: ['dev', 'content'] tags: ['dev', 'content']
}); });
await safeAnimate(walter, { scale: 1, x: -70, y: 80 }, { duration: 0.75, delay: 0.25 }); await safeAnimate(walter, { scale: 1, x: -70, y: 80 }, { duration: 0.75, delay: 0.25 });
}); });
// Aditya // Aditya
sleep(1500).then(async () => { sleep(1500).then(async () => {
addUser(update, { name: 'Aditya', color: 'rgba(124, 103, 254, 1)' }); addUser(update, { name: 'Aditya', color: 'rgba(124, 103, 254, 1)' });
await sleep(500); await sleep(500);
await safeAnimate(aditya, { x: 200, y: -100, scale: 1 }, { duration: 0.5 })?.finished; await safeAnimate(aditya, { x: 200, y: -100, scale: 1 }, { duration: 0.5 })?.finished;
await Promise.all([ await Promise.all([
safeAnimate(aditya, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished, safeAnimate(aditya, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished,
safeAnimate(addDone, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished safeAnimate(addDone, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished
]); ]);
addTask(update, 'done', { addTask(update, 'done', {
title: 'Write up briefing', title: 'Write up briefing',
tags: ['dev-rel'] tags: ['dev-rel']
}); });
await safeAnimate(aditya, { scale: 1, x: 180, y: 60 }, { duration: 0.75, delay: 0.5 }) await safeAnimate(aditya, { scale: 1, x: 180, y: 60 }, { duration: 0.75, delay: 0.5 })
?.finished; ?.finished;
await sleep(750); await sleep(750);
await safeAnimate(aditya, { x: -210, y: -100, scale: 1 }, { duration: 0.5 })?.finished; await safeAnimate(aditya, { x: -210, y: -100, scale: 1 }, { duration: 0.5 })?.finished;
await Promise.all([ await Promise.all([
safeAnimate(aditya, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished, safeAnimate(aditya, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished,
safeAnimate(addTodo, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished safeAnimate(addTodo, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished
]); ]);
addTask(update, 'todo', { addTask(update, 'todo', {
title: 'Review branding blog post', title: 'Review branding blog post',
tags: ['dev-rel'] tags: ['dev-rel']
}); });
await safeAnimate(aditya, { scale: 1, x: 70, y: -220 }, { duration: 0.75, delay: 0.5 }) await safeAnimate(aditya, { scale: 1, x: 70, y: -220 }, { duration: 0.75, delay: 0.5 })
?.finished; ?.finished;
}); });
// Sara // Sara
sleep(2500).then(async () => { sleep(2500).then(async () => {
addUser(update, { name: 'Sara', color: 'rgba(103, 163, 254, 1)' }); addUser(update, { name: 'Sara', color: 'rgba(103, 163, 254, 1)' });
await sleep(500); await sleep(500);
await safeAnimate(sara, { x: 0, y: -100, scale: 1 }, { duration: 0.5 })?.finished; await safeAnimate(sara, { x: 0, y: -100, scale: 1 }, { duration: 0.5 })?.finished;
await Promise.all([ await Promise.all([
safeAnimate(sara, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished, safeAnimate(sara, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished,
safeAnimate(addDoing, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished safeAnimate(addDoing, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished
]); ]);
addTask(update, 'doing', { addTask(update, 'doing', {
title: 'Prepare design system presentation', title: 'Prepare design system presentation',
tags: ['design'] tags: ['design']
}); });
await safeAnimate(sara, { scale: 1, y: 60, x: -50 }, { duration: 0.75, delay: 0.5 })?.finished; await safeAnimate(sara, { scale: 1, y: 60, x: -50 }, { duration: 0.75, delay: 0.5 })
await sleep(250); ?.finished;
await sleep(250);
await safeAnimate(sara, { x: 200, y: -100, scale: 1 }, { duration: 0.5 })?.finished; await safeAnimate(sara, { x: 200, y: -100, scale: 1 }, { duration: 0.5 })?.finished;
await Promise.all([ await Promise.all([
safeAnimate(sara, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished, safeAnimate(sara, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished,
safeAnimate(addDone, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished safeAnimate(addDone, { scale: [1, 0.9, 1] }, { duration: 0.25 })?.finished
]); ]);
addTask(update, 'done', { addTask(update, 'done', {
title: 'QA branding animations', title: 'QA branding animations',
tags: ['Dev'] tags: ['Dev']
}); });
await safeAnimate(sara, { scale: 1, x: 180, y: 60 }, { duration: 0.75, delay: 0.5 })?.finished; await safeAnimate(sara, { scale: 1, x: 180, y: 60 }, { duration: 0.75, delay: 0.5 })
}); ?.finished;
});
}; };
export const realtimeController = { export const realtimeController = {
execute, execute,
state state
}; };
export const Realtime = { export const Realtime = {
Phone Phone
}; };