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

updates from notes

Browse Source
This commit is contained in:
Jesse Winton
2025-06-03 14:40:02 -04:00
parent bd8cf52e04
commit c3bd01311b
14 changed files with 241 additions and 638 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.css
View File

@@ -322,7 +322,7 @@
--text-title: clamp(2rem, 5vw, 2.5rem);
--text-title--line-height: clamp(2.125rem, 5.5vw, 2.75rem);
--text-title--letter-spacing: var(--tracking-squeezed);
--text-title-lg: clamp(3rem, 5vw, 3.25rem);
--text-title-lg: clamp(2.85rem, 5vw, 3rem);
--text-title-lg--line-height: clamp(2.75rem, 5.5vw, 3.5rem);
--text-title-lg--letter-spacing: var(--tracking-squeezed);
--text-display: clamp(3rem, 7vw, 4rem);

2
src/icons/optimized/edge.svg
View File

@@ -1 +1 @@
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.925 4.028 C 9.521 4.066,8.877 4.204,8.524 4.328 C 8.123 4.469,7.392 4.849,7.035 5.101 C 6.608 5.403,5.892 6.119,5.591 6.545 C 5.321 6.929,4.984 7.584,4.835 8.018 C 4.401 9.277,4.401 10.708,4.835 11.967 C 5.340 13.435,6.497 14.723,7.918 15.400 C 10.018 16.401,12.497 16.102,14.298 14.630 C 14.650 14.342,15.135 13.821,15.408 13.438 C 15.675 13.063,16.010 12.412,16.165 11.967 C 16.599 10.715,16.599 9.270,16.165 8.018 C 15.445 5.946,13.523 4.360,11.374 4.065 C 10.964 4.009,10.306 3.992,9.925 4.028 M11.305 5.269 C 12.589 5.477,13.793 6.266,14.514 7.372 C 15.950 9.575,15.343 12.526,13.153 13.986 C 12.377 14.505,11.454 14.781,10.500 14.781 C 9.605 14.781,8.772 14.552,8.033 14.104 C 6.863 13.395,6.055 12.239,5.786 10.891 C 5.702 10.471,5.702 9.514,5.786 9.094 C 6.040 7.821,6.785 6.700,7.840 6.005 C 8.366 5.658,9.088 5.368,9.663 5.271 C 10.068 5.204,10.894 5.203,11.305 5.269 " fill="currentColor" stroke="none" fill-rule="evenodd"></path></svg>
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.233 2.465 C 3.093 2.527,2.942 2.724,2.917 2.882 C 2.864 3.205,2.798 3.125,4.745 5.075 C 5.735 6.067,6.545 6.888,6.545 6.899 C 6.545 6.910,6.456 7.052,6.347 7.213 C 5.989 7.746,5.709 8.426,5.576 9.091 C 5.484 9.547,5.493 10.505,5.593 10.961 C 5.817 11.991,6.256 12.801,6.983 13.528 C 7.726 14.272,8.706 14.769,9.748 14.930 C 10.245 15.006,11.107 14.982,11.550 14.880 C 12.187 14.732,12.812 14.461,13.315 14.116 L 13.592 13.925 15.380 15.709 C 16.363 16.690,17.204 17.511,17.249 17.534 C 17.294 17.557,17.398 17.576,17.480 17.576 C 17.887 17.576,18.153 17.252,18.079 16.846 C 18.058 16.728,17.850 16.507,16.255 14.910 C 15.265 13.918,14.455 13.096,14.455 13.083 C 14.455 13.070,14.551 12.917,14.667 12.742 C 15.023 12.211,15.283 11.564,15.423 10.866 C 15.515 10.405,15.507 9.482,15.407 9.024 C 15.184 8.000,14.743 7.180,14.037 6.474 C 13.330 5.767,12.455 5.296,11.463 5.089 C 11.016 4.996,9.984 4.996,9.538 5.089 C 8.884 5.226,8.252 5.491,7.699 5.861 L 7.405 6.058 5.619 4.275 C 4.636 3.294,3.798 2.475,3.756 2.454 C 3.652 2.401,3.366 2.407,3.233 2.465 M10.982 6.231 C 11.798 6.333,12.514 6.681,13.131 7.273 C 13.710 7.829,14.079 8.505,14.225 9.275 C 14.302 9.677,14.296 10.365,14.214 10.763 C 13.933 12.115,12.893 13.248,11.581 13.628 C 10.701 13.883,9.800 13.826,8.963 13.463 C 8.213 13.138,7.483 12.444,7.114 11.708 C 6.840 11.160,6.720 10.638,6.720 9.992 C 6.720 9.159,6.926 8.493,7.392 7.816 C 7.594 7.523,8.085 7.039,8.375 6.848 C 9.162 6.329,10.062 6.116,10.982 6.231 " fill="#19191C" stroke="none" fill-rule="evenodd"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

15
src/icons/svg/edge.svg
View File

@@ -1,14 +1,5 @@
<svg
width="21"
height="20"
viewBox="0 0 21 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.5 14.8C13.151 14.8 15.3 12.651 15.3 10C15.3 7.34903 13.151 5.2 10.5 5.2C7.84903 5.2 5.7 7.34903 5.7 10C5.7 12.651 7.84903 14.8 10.5 14.8ZM10.5 16C13.8137 16 16.5 13.3137 16.5 10C16.5 6.68629 13.8137 4 10.5 4C7.18629 4 4.5 6.68629 4.5 10C4.5 13.3137 7.18629 16 10.5 16Z"
fill="currentColor"
/>
d="M3.07619 2.57566C3.28117 2.37086 3.59729 2.3449 3.83009 2.49851L3.92384 2.57566L7.41505 6.06687C8.26493 5.39934 9.3355 4.99948 10.5 4.99948L10.7569 5.00632C13.3987 5.14004 15.4998 7.32442 15.5 9.99948L15.4932 10.2563C15.4393 11.3213 15.0517 12.2984 14.4336 13.0854L17.9238 16.5757L18.001 16.6694C18.1547 16.9022 18.1287 17.2183 17.9238 17.4233C17.7188 17.6283 17.4028 17.6543 17.1699 17.5005L17.0762 17.4233L13.586 13.9331C12.7361 14.6009 11.6648 14.9995 10.5 14.9995L10.2432 14.9926C7.68619 14.8633 5.63624 12.8133 5.50685 10.2563L5.50001 9.99948C5.50011 8.83482 5.89864 7.76343 6.56642 6.91355L3.07619 3.42331L2.99904 3.32956C2.84545 3.0967 2.87123 2.78061 3.07619 2.57566ZM10.5 6.19968C8.40148 6.19968 6.70044 7.901 6.70021 9.99948C6.70021 12.0982 8.40133 13.7993 10.5 13.7993C12.5987 13.7992 14.2998 12.0981 14.2998 9.99948C14.2996 7.90103 12.5985 6.19972 10.5 6.19968Z"
fill="#19191C" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 509 B

After

Width:  |  Height:  |  Size: 1.0 KiB

10
src/lib/components/appwrite-network/map-nav.svelte
View File

@@ -20,7 +20,7 @@
let selectedTab = $state('pop-locations');
function getDescription() {
const getDescription = () => {
switch (selectedTab) {
case 'pop-locations':
return 'Points of presence ensure <50ms ping around the globe.';
@@ -31,7 +31,7 @@
default:
return '';
}
}
};
</script>
<div class="flex flex-col gap-4 text-center">
@@ -45,8 +45,8 @@
>
<Tabs.List
class={classNames(
'border-smooth animate-fade-in relative grid w-full max-w-xl grid-cols-1 place-content-center gap-3 overflow-hidden p-1 px-8 drop-shadow-md md:grid-cols-3 md:rounded-full md:border md:px-1',
theme === 'light' ? 'md:bg[var(--card, rgba(255,255,255,0.90))]' : 'md:bg-card'
'border-smooth animate-fade-in relative grid w-full max-w-xl grid-cols-1 place-content-center gap-3 overflow-hidden p-1 px-8 shadow-[0px_4px_8p_rgba(0,0,0,0.04)] md:grid-cols-3 md:rounded-full md:border md:px-1',
theme === 'light' ? 'md:bg-white' : 'md:bg-card'
)}
>
{#each navItems as { label, icon, value }, index}
@@ -72,7 +72,7 @@
</Tabs.List>
</Tabs.Root>
<p class="text-caption px-4">
<p class="text-caption text-secondary px-4">
{getDescription()}
</p>
</div>

27
src/lib/components/appwrite-network/map.svelte
View File

@@ -9,6 +9,7 @@
handleResetActiveTooltip
} from './map-tooltip.svelte';
import { createMap } from 'svg-dotted-map';
import { Icon } from '../ui';
let activeSegment = $state<string>('pop-locations');
let activeMarkers = $derived(pins[activeSegment as PinSegment]);
@@ -79,30 +80,10 @@
const { theme = 'dark' }: Props = $props();
</script>
<div class="relative -mt-8 w-full overflow-x-scroll [scrollbar-width:none]">
<div
class="sticky left-0 mx-auto block max-w-[calc(100vw_-_calc(var(--spacing)_*-2))] md:hidden"
>
<div class="relative mx-16">
<select
id="map-select"
class="web-input-text mx-auto w-full appearance-none"
onchange={(e) => handleSetActiveMarker(e.currentTarget.value)}
>
{#each pins[activeSegment as PinSegment] as pin}
<option value={pin.city}>{pin.city}-({pin.code})</option>
{/each}
</select>
<span
class="icon-cheveron-down web-u-pointer-events-none absolute top-[11px] right-2"
aria-hidden="true"
></span>
</div>
</div>
<div class="relative mx-auto h-full w-[250vw] [scrollbar-width:none] md:w-full" use:inView>
<div class="relative w-full overflow-x-scroll [scrollbar-width:none]">
<div class="relative mx-auto h-full [scrollbar-width:none] md:w-full" use:inView>
<div
class="relative mx-auto h-fit w-full max-w-5xl origin-bottom -translate-x-20 transform-[perspective(25px)_rotateX(1deg)_scale3d(1.2,_1.2,_1)] transition-all [scrollbar-width:none]"
class="relative mx-auto my-10 h-fit w-full max-w-5xl origin-bottom transform-[perspective(25px)_rotateX(1deg)_scale3d(1.2,_1.2,_1)] transition-all [scrollbar-width:none] md:my-0 md:-translate-x-20"
use:mousePosition
>
<svg viewBox={`0 0 ${height * 2} ${height}`}>

8
src/lib/components/marketing/pullquote.svelte
View File

@@ -21,13 +21,15 @@
)}
>
<h2 class="text-description text-primary font-medium">
<span class="text-accent">“</span>
<span class="text-accent -mr-1">“</span>
{@render children?.()}
<span class="text-accent">”</span>
<span class="text-accent -ml-1">”</span>
</h2>
<div class="flex items-center gap-2">
<img src={avatar} alt={name} class="size-6 rounded-full" />
<h5 class="text-caption font-medium">{name}, {title}</h5>
<h5 class="text-caption text-primary font-medium">
{name}, <span class="text-secondary">{title}</span>
</h5>
</div>
</blockquote>
</div>

701
src/lib/components/ui/icon/sprite/sprite.svelte
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 95 KiB

After

Width:  |  Height:  |  Size: 92 KiB

65
src/lib/components/ui/icon/types.ts
View File

@@ -1,64 +1 @@
export type IconType =
| 'apple'
| 'appwrite'
| 'arrow-down'
| 'arrow-ext-link'
| 'arrow-left'
| 'arrow-right'
| 'arrow-up'
| 'bluesky'
| 'calendar'
| 'check'
| 'chevron-down'
| 'chevron-left'
| 'chevron-right'
| 'chevron-up'
| 'close'
| 'command'
| 'copy'
| 'customize'
| 'daily-dev'
| 'dark'
| 'discord'
| 'divider-vertical'
| 'download'
| 'edge'
| 'ext-link'
| 'firebase'
| 'github'
| 'google'
| 'hamburger-menu'
| 'instagram'
| 'light'
| 'linkedin'
| 'location'
| 'logout-left'
| 'logout-right'
| 'mailgun'
| 'mcp'
| 'message'
| 'microsoft'
| 'minus'
| 'nuxt'
| 'platform'
| 'play'
| 'plus'
| 'pop-locations'
| 'product-hunt'
| 'refine'
| 'regions'
| 'remix'
| 'rest'
| 'search'
| 'sendgrid'
| 'sparkle'
| 'star'
| 'system'
| 'textmagic'
| 'ticket'
| 'tiktok'
| 'twitter'
| 'vue'
| 'x'
| 'ycombinator'
| 'youtube';
export type IconType = "apple" | "appwrite" | "arrow-down" | "arrow-ext-link" | "arrow-left" | "arrow-right" | "arrow-up" | "bluesky" | "calendar" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "close" | "command" | "copy" | "customize" | "daily-dev" | "dark" | "discord" | "divider-vertical" | "download" | "edge" | "ext-link" | "firebase" | "github" | "google" | "hamburger-menu" | "instagram" | "light" | "linkedin" | "location" | "logout-left" | "logout-right" | "mailgun" | "mcp" | "message" | "microsoft" | "minus" | "nuxt" | "platform" | "play" | "plus" | "pop-locations" | "product-hunt" | "refine" | "regions" | "remix" | "rest" | "search" | "sendgrid" | "sparkle" | "star" | "system" | "textmagic" | "ticket" | "tiktok" | "twitter" | "vue" | "x" | "ycombinator" | "youtube";

2
src/lib/utils/is-mobile.ts
View File

@@ -1,7 +1,7 @@
import { MediaQuery } from 'svelte/reactivity';
export const isMobile = () => {
const mediaQuery = new MediaQuery('(max-width: 767px)');
const mediaQuery = new MediaQuery('(max-width: 1024px)');
return mediaQuery.current;
};

12
src/routes/(marketing)/(components)/features.svelte
View File

@@ -53,10 +53,12 @@
];
</script>
<div class="light bg-[#EDEDF0] pt-40 pb-20">
<div class="light bg-[#EDEDF0] pt-20 pb-12 md:pt-40">
<div class="container mx-auto">
<section class="flex flex-col items-start md:flex-row">
<h2 class="text-title-lg font-aeonik-pro text-primary max-w-[700px] text-pretty">
<h2
class="text-title-lg font-aeonik-pro text-primary max-w-[700px] leading-12 text-pretty"
>
Self-host your data or take it to the Cloud<span class="text-accent">_</span>
</h2>
<p class="text-secondary text-description mt-4 max-w-xl font-medium">
@@ -66,10 +68,10 @@
</section>
</div>
<div class="mt-20 border-y border-dashed border-black/8">
<div class="container grid grid-cols-1 overflow-hidden md:grid-cols-2 lg:grid-cols-4">
<div class="container grid grid-cols-2 overflow-hidden lg:grid-cols-4">
{#each features as box}
<a
class="text-sub-body group relative border-b border-dashed border-black/8 py-8 font-medium last-of-type:border-0 nth-of-type-[4]:border-r-0 max-lg:even:border-r-0 md:border-r md:px-8 lg:nth-of-type-[5]:border-b-0 lg:nth-of-type-[6]:border-b-0 lg:nth-of-type-[7]:border-b-0 lg:nth-of-type-[8]:border-b-0"
class="text-sub-body group relative border-b border-dashed border-black/8 px-4 py-8 font-medium last-of-type:border-0 nth-of-type-[4]:border-r-0 nth-of-type-[7]:border-b-0 max-lg:even:border-r-0 md:border-r lg:nth-of-type-[5]:border-b-0 lg:nth-of-type-[6]:border-b-0 lg:nth-of-type-[8]:border-b-0"
href={box.href}
>
<img src={box.icon} width="40" height="40" alt="" />
@@ -78,7 +80,7 @@
<Icon
name="arrow-right"
class="-rotate-45 opacity-0 transition-all group-hover:translate-x-0.25 group-hover:-translate-y-0.25 group-hover:opacity-100"
class="-rotate-45 transition-all group-hover:translate-x-0.25 group-hover:-translate-y-0.25 group-hover:opacity-100 group-focus:translate-x-0.25 group-focus:-translate-y-0.25 group-focus:opacity-100 xl:opacity-0"
/>
</h3>
<p class="text-secondary mt-1">

2
src/routes/(marketing)/(components)/map.svelte
View File

@@ -10,7 +10,7 @@
const { theme = 'light' }: Props = $props();
</script>
<div class={classNames('-mt-6 py-32', theme)}>
<div class={classNames('border-smooth -mt-6 border-b pb-12 md:py-32', theme)}>
<div class="mb-12 flex flex-col items-center gap-6 text-center">
<h2 class="text-primary font-aeonik-pro text-5xl">
The Appwrite Network<span class="text-accent">_</span>

25
src/routes/(marketing)/(components)/pricing.svelte
View File

@@ -1,4 +1,5 @@
<script lang="ts">
import Noise from '$lib/components/fancy/noise.svelte';
import { Button } from '$lib/components/ui';
import { classNames } from '$lib/utils/classnames';
import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
@@ -38,13 +39,13 @@
</script>
<div
class="relative -mt-6 flex min-h-[650px] max-w-screen items-center justify-center overflow-hidden pt-20 pb-10"
class="relative -mt-6 flex min-h-[650px] max-w-screen items-center justify-center overflow-hidden pt-40 pb-10"
>
<div class="container flex w-full flex-col items-center justify-center gap-10">
<div
class={classNames(
'animate-lighting absolute top-0 left-0 -z-10 h-screen w-[200vw] -translate-x-[25%] translate-y-8 rotate-25 overflow-hidden blur-3xl md:w-full',
'bg-[image:radial-gradient(ellipse_390px_50px_at_10%_30%,_rgba(254,_149,_103,_0.2)_0%,_rgba(254,_149,_103,_0)_70%),_radial-gradient(ellipse_1100px_170px_at_15%_40%,rgba(253,_54,_110,_0.08)_0%,_rgba(253,_54,_110,_0)_70%),_radial-gradient(ellipse_1200px_180px_at_30%_30%,_rgba(253,_54,_110,_0.08)_0%,_rgba(253,_54,_110,_0)_70%)]',
'bg-[image:radial-gradient(ellipse_390px_250px_at_10%_30%,_rgba(254,_149,_103,_0.75)_0%,_rgba(254,_149,_103,_0)_70%),_radial-gradient(ellipse_1100px_450px_at_15%_40%,rgba(253,_54,_110,_0.5)_0%,_rgba(253,_54,_110,_0)_70%),_radial-gradient(ellipse_1200px_180px_at_30%_30%,_rgba(253,_54,_110,_0.08)_0%,_rgba(253,_54,_110,_0)_70%)]',
'bg-position-[0%_0%]'
)}
></div>
@@ -56,7 +57,7 @@
Start building like a team of hundreds today<span class="text-accent">_</span>
</h2>
<div class="flex flex-col gap-4 md:flex-row">
<div class="mt-4 flex flex-col gap-2 lg:flex-row">
<Button href={getAppwriteDashboardUrl()} class="w-full! md:w-fit!"
>Start building for free</Button
>
@@ -67,13 +68,13 @@
</div>
<div
class="border-smooth divide-smooth grid min-h-75 w-full grid-cols-1 gap-y-12 divide-y divide-dashed rounded-3xl border bg-white/2 px-4 py-8 backdrop-blur-lg md:grid-cols-2 md:divide-y-0 lg:grid-cols-4 lg:divide-x"
class="border-smooth divide-smooth grid min-h-75 w-full grid-cols-1 divide-y divide-dashed rounded-3xl border bg-white/2 backdrop-blur-lg md:grid-cols-2 md:gap-y-12 md:divide-y-0 md:px-4 md:py-8 lg:grid-cols-4 lg:divide-x"
>
{#each plans as { name, price, tag: label, subtitle, description }}
{@const isEnterprise = name === 'Enterprise'}
<div class="flex h-full w-full grow flex-col gap-1 px-6 pb-8 md:pb-0">
<div class="flex items-center gap-4">
<span class="text-description text-secondary">{name}</span>
<div class="flex h-full w-full grow flex-col gap-1 px-5 py-5 md:pb-0">
<div class="flex items-center gap-2.5">
<span class="text-description text-secondary font-medium">{name}</span>
{#if label}
<span
class="bg-accent-200 text-caption rounded-lg px-1.5 py-0.5 font-medium text-white"
@@ -83,10 +84,12 @@
</div>
<div class="flex flex-1 flex-col">
<span class="text-title font-aeonik-pro text-primary">{price}</span>
{#if subtitle}
<span class="text-caption text-secondary">{subtitle}</span>
{/if}
<p class="text-caption text-secondary mt-4 mb-0 block">{description}</p>
<span class="text-caption text-secondary h-[22px]">{subtitle}</span>
<p class="text-caption text-secondary mt-4 mb-0 block font-medium">
{description}
</p>
</div>
<Button

6
src/routes/(marketing)/(components)/scale.svelte
View File

@@ -88,7 +88,7 @@
</script>
<div
class={classNames('relative -mb-8 flex min-h-[700px] flex-col gap-4 py-12', theme)}
class={classNames('relative -mb-8 flex min-h-[700px] flex-col gap-4 pb-20 md:pb-0', theme)}
use:visible
>
<div class="relative z-10 container w-fit md:w-full">
@@ -98,14 +98,14 @@
class="text-accent">_</span
>
</h2>
<p class="text-secondary border-accent mt-5 border-l-2 pr-28 pl-2 font-medium">
<p class="text-secondary border-accent mt-5 border-l-2 pl-4 font-medium md:pr-28">
<span class="text-accent">“</span>{@render children()}<span class="text-accent"
>”</span
>
</p>
{#if testimonial}
<div class="mt-4 flex items-center gap-3">
<div class="mt-4 ml-4 flex items-center gap-3">
<img
src={testimonial.image}
class="size-6 rounded-full"

2
src/routes/(marketing)/+page.svelte
View File

@@ -26,7 +26,7 @@
<Bento />
<Pullquote
name="Phil McCluskey"
title="Development lead, Majik Kids"
title="App Manager, Majik Kids"
avatar="/images/testimonials/phil.jpg"
>
<span class="text-secondary">Just like a Swiss Army Knife</span> you can choose and use the tools