Skip to content

Commit 4264b79

Browse files
ducdat0507ducdat0507
committed
2 parents a40bd17 + 7312465 commit 4264b79

10 files changed

Lines changed: 109 additions & 69 deletions

File tree

‎package-lock.json‎

Lines changed: 26 additions & 15 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/MetroNav.svelte‎

Lines changed: 66 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
<script lang="ts">
22
import { page } from "$app/state";
33
import Icon from "@iconify/svelte";
4-
import { onMount } from "svelte";
4+
import { onMount, untrack } from "svelte";
55
6+
type MobileNavButton = {
7+
element: Element,
8+
icon?: string,
9+
href?: string,
10+
highlight: number,
11+
}
612
713
let metroHeader: HTMLDivElement;
814
let metroHeaderItems: HTMLDivElement;
9-
let mobileNavItems: HTMLSpanElement;
15+
let mobileNavItems: MobileNavButton[] = $state([]);
1016
let mobileNavBarItem: HTMLAnchorElement;
1117
1218
let currentPage = $derived(page.url.pathname);
@@ -18,37 +24,36 @@
1824
1925
$effect(() => {
2026
currentPage;
21-
22-
metroHeaderItems.innerHTML = mobileNavItems.innerHTML = "";
23-
24-
let categories = document.querySelectorAll(".category-box > *");
25-
if (!categories[0]) return;
26-
27-
let index = 0;
28-
for (const elm of categories) {
29-
let link = document.createElement("a");
30-
link.innerText = elm.getAttribute("data-category-name") ?? "";
31-
link.href = "#" + elm.id;
32-
metroHeaderItems.appendChild(link);
33-
34-
let btn = document.createElement("a");
35-
btn.innerText = (index + 1).toLocaleString("en-US");
36-
btn.classList.add("pop-out-btn")
37-
btn.href = "#" + elm.id;
38-
btn.onclick = (e) => {
39-
e.preventDefault();
40-
elm.scrollIntoView({inline: "center", behavior: "smooth"});
27+
untrack(() => {
28+
metroHeaderItems.innerHTML = "";
29+
mobileNavItems = []
30+
31+
let categories = document.querySelectorAll(".category-box > *");
32+
if (!categories[0]) return;
33+
34+
let index = 0;
35+
for (const elm of categories) {
36+
let link = document.createElement("a");
37+
link.innerText = elm.getAttribute("data-category-name") ?? "";
38+
link.href = "#" + elm.id;
39+
metroHeaderItems.appendChild(link);
40+
41+
mobileNavItems.push({
42+
element: elm,
43+
icon: elm.getAttribute("data-icon") ?? undefined,
44+
href: "#" + elm.id,
45+
highlight: 0,
46+
});
47+
48+
index++;
4149
}
42-
mobileNavItems.appendChild(btn);
43-
44-
index++;
45-
}
4650
47-
if (lastPage || currentPage != "/") {
48-
categories[0].scrollIntoView({inline: "center"});
49-
}
51+
if (lastPage || currentPage != "/") {
52+
categories[0].scrollIntoView({inline: "center"});
53+
}
5054
51-
lastPage = currentPage;
55+
lastPage = currentPage;
56+
})
5257
})
5358
5459
onMount(() => {
@@ -88,28 +93,42 @@
8893
8994
// Update highlight
9095
let index = 0;
91-
for (let item of items) {
92-
let highlightValue = Math.min(Math.max(1 - Math.abs(index + 1 - progress), 0), 1) + "";
93-
item.style.setProperty("--highlight", highlightValue);
94-
(mobileNavItems.childNodes[index] as HTMLElement).style.setProperty("--highlight", highlightValue);
96+
for (let item of items) {
97+
let highlightValue = Math.min(Math.max(1 - Math.abs(index + 1 - progress), 0), 1);
98+
item.style.setProperty("--highlight", highlightValue + "");
99+
highlightValue = Math.min(Math.max(index - progress + 2, 0), 2);
100+
mobileNavItems[index].highlight = highlightValue;
95101
index++;
96102
}
97-
mobileNavBarItem.style.setProperty("--highlight", Math.max(1 - Math.abs(progress), 0) + "");
103+
mobileNavBarItem.style.setProperty("--highlight", Math.max(1 - progress, 0) + "");
98104
}
99105
100106
function scrollToNavBar(e: Event) {
101107
e.preventDefault();
102108
navBar.scrollIntoView({inline: "center", behavior: "smooth"});
103109
}
110+
111+
function scrollToElement(e: Event, elm: Element) {
112+
e.preventDefault();
113+
elm.scrollIntoView({inline: "center", behavior: "smooth"});
114+
}
104115
</script>
105116

106117

107118
<div class="mobile-nav" aria-hidden="true">
108119
<a class="pop-out-btn" href="#nav-bar" bind:this={mobileNavBarItem} onclick={scrollToNavBar}>
109120
<Icon icon="tabler:menu-2" />
110121
</a>
111-
<span class="mobile-nav-items" bind:this={mobileNavItems}>
112-
122+
<span class="mobile-nav-items">
123+
{#each mobileNavItems as item, i}
124+
<a class="pop-out-btn" href={item.href} onclick={(e) => scrollToElement(e, item.element!)} style:--highlight={item.highlight}>
125+
{#if item.icon}
126+
<Icon icon={item.icon} />
127+
{:else}
128+
{i + 1}
129+
{/if}
130+
</a>
131+
{/each}
113132
</span>
114133
</div>
115134
<div class="metro-header" aria-hidden="true" bind:this={metroHeader}>
@@ -143,8 +162,9 @@
143162
144163
.mobile-nav {
145164
position: fixed;
146-
inset: auto 2em 2em 2em;
165+
inset: auto 0 0 0;
147166
display: flex;
167+
padding: 0 4vw 4vw 4vw;
148168
justify-content: space-between;
149169
z-index: 100;
150170
gap: 6px;
@@ -162,16 +182,20 @@
162182
text-decoration: none;
163183
color: white;
164184
background: black;
165-
width: 2.5em;
166-
height: 2.5em;
185+
width: 3em;
186+
height: 3em;
167187
}
168188
.mobile-nav :global(a)::after {
169189
content: "";
170190
position: absolute;
171-
inset: calc(100% * calc(1 - var(--highlight, 0))) 0 0 0;
172-
background: white;
191+
inset: 0 0 0 0;
192+
background: linear-gradient(white, white) 0 calc(calc(3em - 4px) * calc(1 - var(--highlight, 0))) / 100% 100% no-repeat;
173193
mix-blend-mode: difference;
174194
}
195+
.mobile-nav :global(a > svg) {
196+
width: 1.6em;
197+
height: 1.6em;
198+
}
175199
176200
@media (min-width: 50em) {
177201
.metro-header, .mobile-nav {

‎src/components/TextSplitter.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
let {
33
text,
44
...props
5-
}: HTMLElement & {
5+
}: Partial<HTMLElement> & {
66
text: string
77
} = $props();
88

‎src/components/cards/ProjectLister.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script>
22
import ProjectCard from "./ProjectCard.svelte";
33
4-
let { projects, altNames = null } = $props();
4+
let { projects, altNames = null, altIcons = null } = $props();
55
66
let index = 0;
77
@@ -10,7 +10,7 @@
1010
{(index = 0), ""}
1111
{#each Object.entries(projects) as [sectionName, section]}
1212
{(index += 1), ""}
13-
<section id={sectionName.replaceAll(" ", "-")} data-category-name={altNames?.[index - 1] ?? sectionName}>
13+
<section id={sectionName.replaceAll(" ", "-")} data-category-name={altNames?.[index - 1] ?? sectionName} data-icon={altIcons?.[index - 1]}>
1414
<h2>{sectionName}</h2>
1515
<ul class="subsections">
1616
{#each Object.entries(section) as [categoryName, category]}

‎src/routes/+error.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</svelte:head>
99

1010
<div class="category-box">
11-
<div id="error" data-category-name="uhhhh">
11+
<div id="error" data-category-name="uhhhh" data-icon="tabler:file-alert">
1212
<section class="box big">
1313
<h1>uhhhh</h1>
1414
<p>{page.status}: {page.error?.message}</p>

‎src/routes/+page.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@
115115
</svelte:head>
116116

117117
<div class="category-box">
118-
<div id="socials" data-category-name="socials">
118+
<div id="socials" data-category-name="socials" data-icon="lucide:globe">
119119
<section class="">
120120
<h2>find me on:</h2>
121121
<ul class="widget-box live-tiles" style="grid-auto-flow: row">
@@ -326,7 +326,7 @@
326326
</section>
327327
</div>
328328

329-
<div id="widgets" data-category-name="widgets">
329+
<div id="widgets" data-category-name="widgets" data-icon="octicon:apps-16">
330330
<section>
331331
<h2>boxes of numbers going up:</h2>
332332
<ul class="widget-box live-tiles">

‎src/routes/index/about/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@
8787
</svelte:head>
8888

8989
<div class="category-box">
90-
<div id="about-me" data-category-name="about me">
90+
<div id="about-me" data-category-name="about me" data-icon="tabler:user">
9191
<section class="box big about-me-main">
9292
<h2 class="hide-if-mobile">about me</h2>
9393
<p>

‎src/routes/index/games/+page.svelte‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
</svelte:head>
1212

1313
<div class="category-box">
14-
<section id="featured" data-category-name="featured">
14+
<section id="featured" data-category-name="featured" data-icon="tabler:star">
1515
<h2>featured</h2>
1616
<ul class="project-list big">
1717
{#each [
@@ -26,7 +26,9 @@
2626
{/each}
2727
</ul>
2828
</section>
29-
<ProjectLister projects={games} altNames={["incrementals", "non-incrementals"]} />
29+
<ProjectLister projects={games}
30+
altNames={["incrementals", "non-incrementals"]}
31+
altIcons={["tabler:exposure-plus-1", "tabler:exposure-0"]} />
3032
</div>
3133

3234
<style>

‎src/routes/index/non-games/+page.svelte‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,10 @@
1111
</svelte:head>
1212

1313
<div class="category-box">
14-
<ProjectLister projects={nongames} altNames={["apps & sites", "fun stuff", "web resources"]} />
14+
<ProjectLister projects={nongames}
15+
altNames={["apps & sites", "fun stuff", "web resources", "miscellaneous"]}
16+
altIcons={["tabler:browser", "tabler:dice-5", "tabler:book-2", "material-symbols:box-outline-sharp"]}
17+
/>
1518
</div>
1619

1720
<style>

0 commit comments

Comments
 (0)