samanthanguyen.me
samantha's personal website!~ ✨
samanthanguyen.me
change font, format code, minor copywriting updates
+268
-108
+7
-7
src/app.css
+7
-7
src/app.css
···
1
1
@import 'tailwindcss';
2
2
3
3
@theme {
4
-
--font-mono: 'Departure Mono', monospace;
5
-
--font-serif: sans-serif;
4
+
--font-mono: 'Spline Sans Mono', monospace;
5
+
--font-serif: 'Spline Sans', sans-serif;
6
6
}
7
7
8
8
body {
9
+
/* light mode */
9
10
@apply bg-[#f6f8f6] text-[#110b11];
10
-
@apply dark:bg-zinc-900 dark:text-zinc-100;
11
-
}
11
+
@apply selection:bg-zinc-900 selection:text-zinc-100;
12
12
13
-
::selection {
14
-
@apply bg-zinc-900 text-zinc-100;
15
-
@apply dark:bg-[#f6f8f6] dark:text-[#110b11];
13
+
/* dark mode */
14
+
@apply dark:bg-zinc-900 dark:text-zinc-100;
15
+
@apply dark:selection:bg-[#f6f8f6] dark:selection:text-[#110b11];
16
16
}
+3
-1
src/app.html
+3
-1
src/app.html
···
12
12
<link type="image/png" sizes="32x32" rel="icon" href="%sveltekit.assets%/favicons/android-chrome-512x512.png">
13
13
<link type="image/png" sizes="180x180" rel="apple-touch-icon" href="%sveltekit.assets%/favicons/apple-touch-icon.png">
14
14
<link type="image/png" sizes="180x180" rel="apple-touch-icon-precomposed" href="%sveltekit.assets%/favicons/apple-touch-icon-precomposed.png">
15
-
<link type="font/woff2" as="font" rel="preload" href="%sveltekit.assets%/fonts/DepartureMono-Regular.woff2" crossorigin="anonymous">
15
+
<link type="font/ttf" rel="preload" as="font" crossorigin="anonymous" href="%sveltekit.assets%/fonts/SplineSans-Variable.ttf">
16
+
<link type="font/ttf" rel="preload" as="font" crossorigin="anonymous" href="%sveltekit.assets%/fonts/SplineSansMono-Variable.ttf">
17
+
<link type="font/ttf" rel="preload" as="font" crossorigin="anonymous" href="%sveltekit.assets%/fonts/SplineSansMono-Italic-Variable.ttf">
16
18
%sveltekit.head%
17
19
</head>
18
20
<body data-sveltekit-preload-data="hover">
+16
-15
src/lib/datetime/Time.svelte
+16
-15
src/lib/datetime/Time.svelte
···
1
1
<script lang="ts">
2
-
import { formatAttribute } from './dates'
2
+
import { formatAttribute } from "./dates";
3
3
4
-
type Options = Intl.DateTimeFormatOptions
5
-
export let date: Date
6
-
export let locale = 'en-US'
7
-
export let calendar: Options['calendar'] = undefined
8
-
export let dayPeriod: Options['dayPeriod'] = undefined
9
-
export let numberingSystem: Options['numberingSystem'] = undefined
10
-
export let dateStyle: Options['dateStyle'] = undefined
11
-
export let timeStyle: Options['timeStyle'] = undefined
12
-
export let hourCycle: Options['hourCycle'] = undefined
13
-
export let formatMatcher: Options['formatMatcher'] = undefined
14
-
export let fractionalSecondDigits: Options['fractionalSecondDigits'] = undefined
4
+
type Options = Intl.DateTimeFormatOptions;
5
+
export let date: Date;
6
+
export let locale = "en-US";
7
+
export let calendar: Options["calendar"] = undefined;
8
+
export let dayPeriod: Options["dayPeriod"] = undefined;
9
+
export let numberingSystem: Options["numberingSystem"] = undefined;
10
+
export let dateStyle: Options["dateStyle"] = undefined;
11
+
export let timeStyle: Options["timeStyle"] = undefined;
12
+
export let hourCycle: Options["hourCycle"] = undefined;
13
+
export let formatMatcher: Options["formatMatcher"] = undefined;
14
+
export let fractionalSecondDigits: Options["fractionalSecondDigits"] =
15
+
undefined;
15
16
16
17
const formatter = new Intl.DateTimeFormat(locale, {
17
18
calendar: calendar,
···
22
23
hourCycle: hourCycle,
23
24
formatMatcher: formatMatcher,
24
25
fractionalSecondDigits: fractionalSecondDigits,
25
-
})
26
-
const value = formatter.format(date)
27
-
const attribute = formatAttribute(date, timeStyle, dateStyle)
26
+
});
27
+
const value = formatter.format(date);
28
+
const attribute = formatAttribute(date, timeStyle, dateStyle);
28
29
</script>
29
30
30
31
<time datetime={attribute}>
+24
-14
src/lib/layout/Header.svelte
+24
-14
src/lib/layout/Header.svelte
···
1
1
<script lang="ts">
2
-
let { heading, subheading }: {
3
-
heading: string
4
-
subheading: string
5
-
} = $props()
2
+
let {
3
+
heading,
4
+
subheading,
5
+
}: {
6
+
heading: string;
7
+
subheading: string;
8
+
} = $props();
6
9
</script>
10
+
7
11
<header class="pt-12">
8
12
<hgroup class="flex flex-col gap-1">
9
-
<h1 class={[
10
-
'text-2xl lg:text-4xl',
11
-
'font-mono font-bold lg:font-medium',
12
-
]}>
13
+
<h1
14
+
class={[
15
+
"text-2xl lg:text-4xl",
16
+
"font-mono font-bold lg:font-medium",
17
+
]}
18
+
>
13
19
{heading}
14
20
</h1>
15
-
<p class={[
16
-
'font-mono text-balance text-xs lg:text-base',
17
-
'dark:text-zinc-400',
18
-
]}>
19
-
{subheading}
20
-
</p>
21
+
{#if subheading !== null}
22
+
<p
23
+
class={[
24
+
"font-mono text-balance text-xs lg:text-base",
25
+
"dark:text-zinc-400",
26
+
]}
27
+
>
28
+
{subheading}
29
+
</p>
30
+
{/if}
21
31
</hgroup>
22
32
</header>
+4
-6
src/lib/palette/CommandGroupHeading.svelte
+4
-6
src/lib/palette/CommandGroupHeading.svelte
···
1
-
<script lang='ts'>
2
-
import { Command } from 'bits-ui'
3
-
let { children } = $props()
1
+
<script lang="ts">
2
+
import { Command } from "bits-ui";
3
+
let { children } = $props();
4
4
</script>
5
5
6
-
<Command.GroupHeading
7
-
class="px-3 pb-2 pt-4 text-xs text-muted-foreground"
8
-
>
6
+
<Command.GroupHeading class="px-3 pb-2 pt-4 text-xs text-muted-foreground">
9
7
{@render children()}
10
8
</Command.GroupHeading>
+14
-11
src/lib/palette/CommandItem.svelte
+14
-11
src/lib/palette/CommandItem.svelte
···
1
-
<script lang='ts'>
2
-
import { Command } from 'bits-ui'
3
-
type Props = {
4
-
children: any
5
-
keywords?: string[]
6
-
}
7
-
let { children, keywords = [] }: Props = $props()
1
+
<script lang="ts">
2
+
import { Command } from "bits-ui";
3
+
import type { Snippet } from "svelte";
4
+
let {
5
+
children,
6
+
keywords = [],
7
+
}: {
8
+
children: Snippet;
9
+
keywords?: string[];
10
+
} = $props();
8
11
</script>
9
12
10
13
<Command.Item
11
14
class={[
12
-
'flex items-center gap-2 h-10 px-3 py-2.5',
13
-
'cursor-pointer select-none text-sm capitalize',
14
-
'outline-none data-[selected]:bg-muted',
15
+
"flex items-center gap-2 h-10 px-3 py-2.5",
16
+
"cursor-pointer select-none text-sm capitalize",
17
+
"outline-none data-[selected]:bg-muted",
15
18
]}
16
-
keywords={keywords}
19
+
{keywords}
17
20
>
18
21
{@render children()}
19
22
</Command.Item>
+77
-45
src/lib/palette/CommandPalette.svelte
+77
-45
src/lib/palette/CommandPalette.svelte
···
1
1
<script>
2
-
import { Command, Dialog } from 'bits-ui'
3
-
import CommandItem from './CommandItem.svelte'
4
-
import CommandGroupHeading from './CommandGroupHeading.svelte'
5
-
let { open = $bindable() } = $props()
2
+
import { Command, Dialog } from "bits-ui";
3
+
import CommandItem from "./CommandItem.svelte";
4
+
import CommandGroupHeading from "./CommandGroupHeading.svelte";
5
+
let { open = $bindable() } = $props();
6
6
</script>
7
7
8
-
<Dialog.Root bind:open={open}>
8
+
<Dialog.Root bind:open>
9
9
<Dialog.Portal>
10
-
<Dialog.Overlay class={[
11
-
'fixed inset-0 z-50',
12
-
'data-[state=open]:animate-in',
13
-
'data-[state=closed]:animate-out',
14
-
'data-[state=closed]:fade-out-0',
15
-
'data-[state=open]:fade-in-0',
16
-
]} />
10
+
<Dialog.Overlay
11
+
class={[
12
+
"fixed inset-0 z-50",
13
+
"data-[state=open]:animate-in",
14
+
"data-[state=closed]:animate-out",
15
+
"data-[state=closed]:fade-out-0",
16
+
"data-[state=open]:fade-in-0",
17
+
]}
18
+
/>
17
19
</Dialog.Portal>
18
-
<Dialog.Content class={[
19
-
'fixed left-[50%] top-[50%] z-50 w-full',
20
-
'max-w-[94%] translate-x-[-50%] translate-y-[-50%]',
21
-
'rounded-card-lg bg-background shadow-popover outline-none',
22
-
'data-[state=open]:animate-in',
23
-
'data-[state=closed]:animate-out',
24
-
'data-[state=closed]:fade-out-0',
25
-
'data-[state=open]:fade-in-0',
26
-
'data-[state=closed]:zoom-out-95',
27
-
'data-[state=open]:zoom-in-95',
28
-
'data-[state=closed]:slide-out-to-left-1/2',
29
-
'data-[state=closed]:slide-out-to-top-[48%]',
30
-
'data-[state=open]:slide-in-from-left-1/2',
31
-
'data-[state=open]:slide-in-from-top-[48%]',
32
-
'sm:max-w-[490px] md:w-full',
33
-
]}>
34
-
<Command.Root class={[
35
-
'flex h-full w-full flex-col self-start',
36
-
'divide-y divide-border overflow-hidden',
37
-
'rounded-xl border border-muted bg-slate-100',
38
-
]}>
20
+
<Dialog.Content
21
+
class={[
22
+
"fixed left-[50%] top-[50%] z-50 w-full",
23
+
"max-w-[94%] translate-x-[-50%] translate-y-[-50%]",
24
+
"rounded-card-lg bg-background shadow-popover outline-none",
25
+
"data-[state=open]:animate-in",
26
+
"data-[state=closed]:animate-out",
27
+
"data-[state=closed]:fade-out-0",
28
+
"data-[state=open]:fade-in-0",
29
+
"data-[state=closed]:zoom-out-95",
30
+
"data-[state=open]:zoom-in-95",
31
+
"data-[state=closed]:slide-out-to-left-1/2",
32
+
"data-[state=closed]:slide-out-to-top-[48%]",
33
+
"data-[state=open]:slide-in-from-left-1/2",
34
+
"data-[state=open]:slide-in-from-top-[48%]",
35
+
"sm:max-w-[490px] md:w-full",
36
+
]}
37
+
>
38
+
<Command.Root
39
+
class={[
40
+
"flex h-full w-full flex-col self-start",
41
+
"divide-y divide-border overflow-hidden",
42
+
"rounded-xl border border-muted bg-slate-100",
43
+
]}
44
+
>
39
45
<Command.Input
40
46
class={[
41
-
'inline-flex h-input w-[296px] p-4',
42
-
'truncate text-sm',
43
-
'bg-background transition-colors placeholder:text-foreground-alt/50',
44
-
'focus-override focus:outline-none focus:ring-0',
45
-
'appearance-none bg-[unset]',
47
+
"inline-flex h-input w-[296px] p-4",
48
+
"truncate text-sm",
49
+
"bg-background transition-colors placeholder:text-foreground-alt/50",
50
+
"focus-override focus:outline-none focus:ring-0",
51
+
"appearance-none bg-[unset]",
46
52
]}
47
53
placeholder="Search for something..."
48
54
/>
49
-
<Command.List class="max-h-[280px] overflow-y-auto overflow-x-hidden px-2 pb-2">
55
+
<Command.List
56
+
class="max-h-[280px] overflow-y-auto overflow-x-hidden px-2 pb-2"
57
+
>
50
58
<Command.Viewport>
51
59
<Command.Empty
52
60
class="flex w-full items-center justify-center pb-6 pt-8 text-sm text-muted-foreground"
···
56
64
<Command.Group>
57
65
<CommandGroupHeading>Suggestions</CommandGroupHeading>
58
66
<Command.GroupItems>
59
-
<CommandItem keywords={['getting started', 'tutorial']}>Introduction</CommandItem>
60
-
<CommandItem keywords={['child', 'custom element', 'snippets']}>Delegation</CommandItem>
61
-
<CommandItem keywords={['css', 'theme', 'colors', 'fonts', 'tailwind']}>Styling</CommandItem>
67
+
<CommandItem
68
+
keywords={["getting started", "tutorial"]}
69
+
>Introduction</CommandItem
70
+
>
71
+
<CommandItem
72
+
keywords={[
73
+
"child",
74
+
"custom element",
75
+
"snippets",
76
+
]}>Delegation</CommandItem
77
+
>
78
+
<CommandItem
79
+
keywords={[
80
+
"css",
81
+
"theme",
82
+
"colors",
83
+
"fonts",
84
+
"tailwind",
85
+
]}>Styling</CommandItem
86
+
>
62
87
</Command.GroupItems>
63
88
</Command.Group>
64
89
<Command.Separator />
65
90
<Command.Group>
66
91
<CommandGroupHeading>Components</CommandGroupHeading>
67
92
<Command.GroupItems>
68
-
<CommandItem keywords={['dates', 'times']}>Calendar</CommandItem>
69
-
<CommandItem keywords={['buttons', 'forms']}>Radio Group</CommandItem>
70
-
<CommandItem keywords={['inputs', 'text', 'autocomplete']}>Combobox</CommandItem>
93
+
<CommandItem keywords={["dates", "times"]}
94
+
>Calendar</CommandItem
95
+
>
96
+
<CommandItem keywords={["buttons", "forms"]}
97
+
>Radio Group</CommandItem
98
+
>
99
+
<CommandItem
100
+
keywords={["inputs", "text", "autocomplete"]}
101
+
>Combobox</CommandItem
102
+
>
71
103
</Command.GroupItems>
72
104
</Command.Group>
73
105
</Command.Viewport>
+26
-4
src/routes/+layout.svelte
+26
-4
src/routes/+layout.svelte
···
22
22
23
23
<style>
24
24
@font-face {
25
-
font-family: "Departure Mono";
25
+
font-family: "Spline Sans";
26
26
font-style: normal;
27
-
font-weight: 400;
27
+
font-weight: 300 700;
28
28
src:
29
-
local("Departure Mono"),
30
-
url("/fonts/DepartureMono-Regular.woff2") format("woff2");
29
+
local("Spline Sans"),
30
+
url("/fonts/SplineSans-Variable.ttf") format("truetype-variations");
31
+
font-display: swap;
32
+
}
33
+
34
+
@font-face {
35
+
font-family: "Spline Sans Mono";
36
+
font-style: normal;
37
+
font-weight: 300 700;
38
+
src:
39
+
local("Spline Sans"),
40
+
url("/fonts/SplineSansMono-Variable.ttf")
41
+
format("truetype-variations");
42
+
font-display: swap;
43
+
}
44
+
45
+
@font-face {
46
+
font-family: "Spline Sans Mono";
47
+
font-style: italic;
48
+
font-weight: 300 700;
49
+
src:
50
+
local("Spline Sans"),
51
+
url("/fonts/SplineSansMono-Italic-Variable.ttf")
52
+
format("truetype-variations");
31
53
font-display: swap;
32
54
}
33
55
</style>
+4
-5
src/routes/+page.svelte
+4
-5
src/routes/+page.svelte
···
5
5
import Quote from "$lib/Quote.svelte";
6
6
</script>
7
7
8
-
<Header
9
-
heading={"samanthanguyen.me"}
10
-
subheading={"she / her. artist, software engineer"}
11
-
/>
8
+
<Header heading={"samanthanguyen.me"} />
12
9
<main class="flex flex-col gap-8 lg:gap-12 font-mono">
13
10
<span
14
11
class={[
···
19
16
]}
20
17
>
21
18
<p>
22
-
My main interests mainly revolve in low-level programming, including
19
+
Hi there, my name is Samantha (she/her), and I'm an artist and
20
+
software engineer. My main interests mainly revolve in low-level
21
+
programming, including
23
22
<Highlight>compiler design</Highlight>,
24
23
<Highlight>programming languages</Highlight>,
25
24
<Highlight>operating systems</Highlight>, and
static/fonts/LICENSE
static/fonts/DepartureMono-LICENSE.txt
static/fonts/LICENSE
static/fonts/DepartureMono-LICENSE.txt
+93
static/fonts/SplineSans-LICENSE.txt
+93
static/fonts/SplineSans-LICENSE.txt
···
1
+
Copyright 2021 The Spline Sans Project Authors (https://github.com/SorkinType/SplineSans)
2
+
3
+
This Font Software is licensed under the SIL Open Font License, Version 1.1.
4
+
This license is copied below, and is also available with a FAQ at:
5
+
https://openfontlicense.org
6
+
7
+
8
+
-----------------------------------------------------------
9
+
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
10
+
-----------------------------------------------------------
11
+
12
+
PREAMBLE
13
+
The goals of the Open Font License (OFL) are to stimulate worldwide
14
+
development of collaborative font projects, to support the font creation
15
+
efforts of academic and linguistic communities, and to provide a free and
16
+
open framework in which fonts may be shared and improved in partnership
17
+
with others.
18
+
19
+
The OFL allows the licensed fonts to be used, studied, modified and
20
+
redistributed freely as long as they are not sold by themselves. The
21
+
fonts, including any derivative works, can be bundled, embedded,
22
+
redistributed and/or sold with any software provided that any reserved
23
+
names are not used by derivative works. The fonts and derivatives,
24
+
however, cannot be released under any other type of license. The
25
+
requirement for fonts to remain under this license does not apply
26
+
to any document created using the fonts or their derivatives.
27
+
28
+
DEFINITIONS
29
+
"Font Software" refers to the set of files released by the Copyright
30
+
Holder(s) under this license and clearly marked as such. This may
31
+
include source files, build scripts and documentation.
32
+
33
+
"Reserved Font Name" refers to any names specified as such after the
34
+
copyright statement(s).
35
+
36
+
"Original Version" refers to the collection of Font Software components as
37
+
distributed by the Copyright Holder(s).
38
+
39
+
"Modified Version" refers to any derivative made by adding to, deleting,
40
+
or substituting -- in part or in whole -- any of the components of the
41
+
Original Version, by changing formats or by porting the Font Software to a
42
+
new environment.
43
+
44
+
"Author" refers to any designer, engineer, programmer, technical
45
+
writer or other person who contributed to the Font Software.
46
+
47
+
PERMISSION & CONDITIONS
48
+
Permission is hereby granted, free of charge, to any person obtaining
49
+
a copy of the Font Software, to use, study, copy, merge, embed, modify,
50
+
redistribute, and sell modified and unmodified copies of the Font
51
+
Software, subject to the following conditions:
52
+
53
+
1) Neither the Font Software nor any of its individual components,
54
+
in Original or Modified Versions, may be sold by itself.
55
+
56
+
2) Original or Modified Versions of the Font Software may be bundled,
57
+
redistributed and/or sold with any software, provided that each copy
58
+
contains the above copyright notice and this license. These can be
59
+
included either as stand-alone text files, human-readable headers or
60
+
in the appropriate machine-readable metadata fields within text or
61
+
binary files as long as those fields can be easily viewed by the user.
62
+
63
+
3) No Modified Version of the Font Software may use the Reserved Font
64
+
Name(s) unless explicit written permission is granted by the corresponding
65
+
Copyright Holder. This restriction only applies to the primary font name as
66
+
presented to the users.
67
+
68
+
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
69
+
Software shall not be used to promote, endorse or advertise any
70
+
Modified Version, except to acknowledge the contribution(s) of the
71
+
Copyright Holder(s) and the Author(s) or with their explicit written
72
+
permission.
73
+
74
+
5) The Font Software, modified or unmodified, in part or in whole,
75
+
must be distributed entirely under this license, and must not be
76
+
distributed under any other license. The requirement for fonts to
77
+
remain under this license does not apply to any document created
78
+
using the Font Software.
79
+
80
+
TERMINATION
81
+
This license becomes null and void if any of the above conditions are
82
+
not met.
83
+
84
+
DISCLAIMER
85
+
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
86
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
87
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
88
+
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
89
+
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
90
+
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
91
+
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
92
+
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
93
+
OTHER DEALINGS IN THE FONT SOFTWARE.
static/fonts/SplineSans-Variable.ttf
static/fonts/SplineSans-Variable.ttf
This is a binary file and will not be displayed.
static/fonts/SplineSansMono-Italic-Variable.ttf
static/fonts/SplineSansMono-Italic-Variable.ttf
This is a binary file and will not be displayed.
static/fonts/SplineSansMono-Variable.ttf
static/fonts/SplineSansMono-Variable.ttf
This is a binary file and will not be displayed.