samantha's personal website!~ ✨
samanthanguyen.me
smaller header gap on mobile make component
+20
-15
+18
src/lib/Header.svelte
+18
src/lib/Header.svelte
···
1
+
<script>
2
+
import { twJoin } from 'tailwind-merge'
3
+
</script>
4
+
5
+
<header class="flex flex-col gap-1 lg:gap-2">
6
+
<h1 class={twJoin(
7
+
"pt-12 flex items-end",
8
+
"text-2xl lg:text-4xl font-domine font-bold lg:font-medium",
9
+
)}>
10
+
samanthanguyen.me
11
+
</h1>
12
+
<span class={twJoin(
13
+
"text-sm lg:text-base dark:text-zinc-500",
14
+
"font-domine",
15
+
)}>
16
+
she / her. artist, software engineer, aspiring computer scientist
17
+
</span>
18
+
</header>
+2
-15
src/routes/+page.svelte
+2
-15
src/routes/+page.svelte
···
1
1
<script>
2
2
import Footer from '$lib/Footer.svelte'
3
-
import { twJoin } from 'tailwind-merge'
3
+
import Header from '$lib/Header.svelte'
4
4
</script>
5
5
6
-
<header class="flex flex-col gap-2">
7
-
<h1 class={twJoin(
8
-
"pt-12 flex items-end",
9
-
"text-2xl lg:text-4xl font-domine font-bold lg:font-medium",
10
-
)}>
11
-
samanthanguyen.me
12
-
</h1>
13
-
<span class={twJoin(
14
-
"text-sm lg:text-base dark:text-zinc-500",
15
-
"font-domine",
16
-
)}>
17
-
she / her. artist, software engineer, aspiring computer scientist
18
-
</span>
19
-
</header>
6
+
<Header />
20
7
<main class="flex flex-col gap-8 lg:gap-12">
21
8
<span class="flex flex-col gap-6 lg:gap-8 font-domine text-sm lg:text-base text-left lg:text-balance">
22
9
<p>