Skip to content

Commit 625b14c

Browse files
neowslneowsl
committed
feat!: events
1 parent 36439d6 commit 625b14c

19 files changed

Lines changed: 366 additions & 54 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
## Project Structure
66

77
Derived from the [Bulletproof React](https://github.com/alan2207/bulletproof-react/blob/master/docs/project-structure.md) project structure.
8+
89
- `src/app/routes/` is renamed to `src/app/views/` since this is an SPA.
910
- `src/stores/` is renamed to `src/state/` to reflect Svelte's state management.
1011
- `tests/` contains unit tests.

‎bun.lock‎

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

‎eslint.config.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,8 @@ export default ts.config(
2121
globals: { ...globals.browser, ...globals.node },
2222
},
2323
rules: {
24-
// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
25-
// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
2624
"no-undef": "off",
25+
"@typescript-eslint/no-empty-object-type": "off",
2726
},
2827
},
2928
{

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"@threlte/extras": "^9.4.3",
2121
"daisyui": "^5.0.50",
2222
"gsap": "^3.13.0",
23+
"js-yaml": "^4.1.0",
2324
"three": "^0.179.1"
2425
},
2526
"devDependencies": {
@@ -32,6 +33,7 @@
3233
"@sveltejs/vite-plugin-svelte": "^6.0.0",
3334
"@tailwindcss/typography": "^0.5.16",
3435
"@tailwindcss/vite": "^4.0.0",
36+
"@types/js-yaml": "^4.0.9",
3537
"eslint": "^9.18.0",
3638
"eslint-config-prettier": "^10.0.1",
3739
"eslint-plugin-svelte": "^3.0.0",

‎src/features/navbar/components/Navbar.svelte‎

Lines changed: 45 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,26 @@
11
<script>
2-
import { Github } from "@lucide/svelte";
2+
import { Github, Menu, X } from "@lucide/svelte";
3+
import { slide } from "svelte/transition";
4+
5+
let menuOpen = $state(false);
6+
7+
const toggleMenu = () => {
8+
menuOpen = !menuOpen;
9+
};
10+
11+
const closeMenu = () => {
12+
menuOpen = false;
13+
};
314
</script>
415

516
<nav id="navbar" class="flex h-16 items-center bg-base-300 px-4">
617
<a class="font-rocket-rinder text-xl text-secondary" href="/">
718
Neal Wang
819
</a>
9-
<div class="absolute left-1/2 -translate-x-1/2 font-cascadia-code">
20+
21+
<div
22+
class="absolute left-1/2 hidden -translate-x-1/2 font-cascadia-code md:block"
23+
>
1024
<a class="link link-secondary link-hover" href="/bio">main</a>
1125
<span> :: </span>
1226
<a class="link link-secondary link-hover" href="/experience">
@@ -17,7 +31,7 @@
1731
Research
1832
</a>
1933
<span> -> </span>
20-
<a class="link link-secondary link-hover" href="/event">Talks</a>
34+
<a class="link link-secondary link-hover" href="/event">Events</a>
2135
<span> -> </span>
2236
<a class="link link-secondary link-hover" href="/art" target="_blank">
2337
Creative
@@ -26,12 +40,40 @@
2640
<a class="link link-secondary link-hover" href="/uses">Uses</a>
2741
<span class="text-primary">()</span>
2842
</div>
43+
2944
<div class="flex-1"></div>
45+
3046
<div class="tooltip tooltip-left" data-tip="GitHub repo">
3147
<a href="https://github.com/neowsl/neowsl.github.io" target="_blank">
3248
<Github />
3349
</a>
3450
</div>
51+
52+
<div class="flex md:hidden">
53+
<div class="w-4"></div>
54+
<button class="hover:cursor-pointer" onclick={toggleMenu}>
55+
{#if !menuOpen}
56+
<Menu />
57+
{:else}
58+
<X />
59+
{/if}
60+
</button>
61+
</div>
62+
63+
{#if menuOpen}
64+
<ul
65+
transition:slide
66+
class="absolute top-16 left-0 z-50 flex w-full flex-col items-center gap-4 bg-base-100 p-4 shadow-lg md:hidden"
67+
>
68+
<li><a href="/" onclick={closeMenu}>Synthwave</a></li>
69+
<li><a href="/bio" onclick={closeMenu}>Bio</a></li>
70+
<li><a href="/experience" onclick={closeMenu}>Experience</a></li>
71+
<li><a href="/publication" onclick={closeMenu}>Research</a></li>
72+
<li><a href="/event" onclick={closeMenu}>Events</a></li>
73+
<li><a href="/art" onclick={closeMenu}>Creative</a></li>
74+
<li><a href="/uses" onclick={closeMenu}>Uses</a></li>
75+
</ul>
76+
{/if}
3577
</nav>
3678

3779
<style>

‎src/lib/components/Glitch.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
{#if glitched}
2525
<sub class="flex items-center pt-2 md:pt-4">
2626
<p
27-
class="glitch text-primary font-[Zhi_Mang_Xing] text-4xl select-none sm:text-6xl md:text-7xl"
27+
class="glitch font-[Zhi_Mang_Xing] text-4xl text-primary select-none sm:text-6xl md:text-7xl"
2828
>
2929
<span aria-hidden="true">{TEXT}</span>
3030
{TEXT}
@@ -33,7 +33,7 @@
3333
</sub>
3434
{:else}
3535
<sub
36-
class="font-streamster text-secondary sub-glow text-3xl select-none sm:text-5xl md:text-6xl"
36+
class="sub-glow font-streamster text-3xl text-secondary select-none sm:text-5xl md:text-6xl"
3737
>
3838
Software Engineer
3939
</sub>

‎src/lib/components/MetallicText.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44

55
<div class="relative inline-block tracking-wide">
66
<span
7-
class="soft-shadow font-rocket-rinder absolute animate-pulse select-none"
7+
class="soft-shadow absolute animate-pulse font-rocket-rinder select-none"
88
>
99
{@render children()}
1010
</span>
11-
<span class="metallic font-rocket-rinder relative select-none">
11+
<span class="metallic relative font-rocket-rinder select-none">
1212
{@render children()}
1313
</span>
1414
</div>

‎src/routes/event/+page.svelte‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<script lang="ts">
2+
import MetallicText from "$lib/components/MetallicText.svelte";
3+
import EventCard from "./EventCard.svelte";
4+
5+
const { data } = $props();
6+
const { events } = data;
7+
</script>
8+
9+
<div id="hero" class="hero h-64">
10+
<div class="hero-overlay bg-black/70"></div>
11+
<div class="hero-content text-center text-neutral-content">
12+
<div class="max-w-md">
13+
<a href="/">
14+
<h1 id="name" class="mb-4 text-5xl md:text-6xl">
15+
<MetallicText>Events</MetallicText>
16+
</h1>
17+
</a>
18+
</div>
19+
</div>
20+
</div>
21+
22+
<div class="mt-12 flex p-4 sm:p-8 md:justify-center">
23+
<article class="prose max-w-none md:max-w-2/3 lg:prose-xl">
24+
<h1>Recent & Upcoming Events</h1>
25+
<div class="not-prose flex flex-col gap-4">
26+
{#each events as event, i (i)}
27+
<EventCard {event} />
28+
{/each}
29+
</div>
30+
</article>
31+
</div>
32+
33+
<style>
34+
#hero {
35+
background-image: url("/images/water_drop.png");
36+
}
37+
38+
#name {
39+
view-transition-name: name;
40+
}
41+
</style>

‎src/routes/event/+page.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import yaml from "js-yaml";
2+
import type { PageLoad } from "./$types";
3+
import talksRaw from "./events.yaml?raw";
4+
5+
export interface Event {
6+
id: string;
7+
title: string;
8+
image?: string;
9+
imageAlt?: string;
10+
abstract: string;
11+
date: Date;
12+
end: Date;
13+
name: string;
14+
location: string;
15+
link?: string;
16+
}
17+
18+
const events: Event[] = yaml.load(talksRaw) as Event[];
19+
20+
export const prerender = true;
21+
22+
export const load: PageLoad = () => {
23+
return { events };
24+
};

‎src/routes/event/EventCard.svelte‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script lang="ts">
2+
import type { Event } from "./[id]/+page";
3+
4+
interface Props {
5+
event: Event;
6+
}
7+
8+
const { event }: Props = $props();
9+
const { id, title, image, imageAlt, abstract, date } = event;
10+
</script>
11+
12+
<a class="card bg-base-200 shadow-sm lg:card-side" href={`/event/${id}`}>
13+
{#if image}
14+
<figure class="md:h-64 md:w-[400px]">
15+
<img
16+
class="h-full object-cover transition-transform duration-500 hover:scale-120"
17+
src={image}
18+
alt={imageAlt ?? title}
19+
/>
20+
</figure>
21+
{/if}
22+
<div class="card-body">
23+
<h2 class="card-title">{title}</h2>
24+
<p>{abstract}</p>
25+
<div class="card-actions">
26+
<p class="font-oxanium text-violet-400">
27+
{date.toLocaleDateString("en-CA")}
28+
</p>
29+
</div>
30+
</div>
31+
</a>

0 commit comments

Comments
 (0)