samantha's personal website!~ ✨
samanthanguyen.me
make Header component customizable
+11
-3
+8
-2
src/lib/layout/Header.svelte
+8
-2
src/lib/layout/Header.svelte
···
1
+
<script lang="ts">
2
+
let { heading, subheading }: {
3
+
heading: string
4
+
subheading: string
5
+
} = $props()
6
+
</script>
1
7
<header class="pt-12">
2
8
<hgroup class="flex flex-col gap-1">
3
9
<h1 class={[
4
10
'text-2xl lg:text-4xl',
5
11
'font-mono font-bold lg:font-medium',
6
12
]}>
7
-
samanthanguyen.me
13
+
{heading}
8
14
</h1>
9
15
<p class={[
10
16
'font-mono text-balance text-xs lg:text-base',
11
17
'dark:text-zinc-400',
12
18
]}>
13
-
she / her. artist, software engineer, aspiring computer scientist
19
+
{subheading}
14
20
</p>
15
21
</hgroup>
16
22
</header>
+3
-1
src/routes/+page.svelte
+3
-1
src/routes/+page.svelte
···
4
4
import Quote from '$lib/Quote.svelte'
5
5
</script>
6
6
7
-
<Header />
7
+
<Header
8
+
heading={'samanthanguyen.me'}
9
+
subheading={'she / her. artist, software engineer, aspiring computer scientist'} />
8
10
<main class="flex flex-col gap-8 lg:gap-12 font-mono">
9
11
<span class={[
10
12
'flex flex-col gap-6 lg:gap-8',