youwen5/site
1
0
Fork 0
mirror of https://github.com/youwen5/site.git synced 2024-11-24 17:33:51 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: massive improvements to homepage

Browse source
This commit is contained in:
Youwen Wu 2024-04-02 23:01:04 -07:00
parent 43e4f8d49c
commit d52bc7b45a
Signed by: youwen5
GPG key ID: 865658ED1FE61EC3
22 changed files with 690 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

1
package.json
View file

@ -29,6 +29,7 @@
"prettier-plugin-svelte": "^3.1.2",
"svelte": "^4.2.7",
"svelte-check": "^3.6.0",
"svelte-typewriter": "^3.2.3",
"tailwindcss": "^3.4.3",
"tslib": "^2.4.1",
"typescript": "^5.0.0",

147
src/lib/app.css
View file

@ -1,78 +1,81 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 72.2% 50.6%;
--destructive-foreground: 0 0% 98%;
--ring: 240 10% 3.9%;
--radius: 0.5rem;
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--ring: 240 4.9% 83.9%;
}
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 72.2% 50.6%;
--destructive-foreground: 0 0% 98%;
--ring: 240 10% 3.9%;
--radius: 0.5rem;
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--ring: 240 4.9% 83.9%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
.text-link {
@apply text-blue-500 dark:text-blue-600 hover:text-blue-600 dark:hover:text-blue-500 hover:underline visited:text-purple-500 dark:visited:text-purple-600;
}
}

252
src/lib/assets/Coredump.svelte Normal file
View file

@ -0,0 +1,252 @@
<script lang="ts">
import { fly } from 'svelte/transition';
export let height = '192';
export let width = 'auto';
export let href: string;
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 2048 416"
class="diagram select-none font-mono"
text-anchor="middle"
font-size="13px"
stroke-linecap="round"
fill="currentColor"
{height}
{width}
in:fly={{ x: -100, duration: 300, delay: 320 }}
out:fly={{ x: 100, duration: 300 }}
>
<a {href}>
<circle cx="936" cy="192" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="936" cy="208" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="944" cy="128" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="944" cy="272" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="952" cy="128" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="952" cy="272" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="960" cy="112" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="960" cy="288" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="968" cy="112" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="968" cy="288" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="976" cy="112" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="976" cy="176" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="976" cy="192" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="976" cy="208" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="976" cy="224" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="976" cy="288" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="984" cy="112" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="984" cy="288" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="992" cy="112" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="992" cy="288" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1000" cy="112" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1000" cy="288" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1008" cy="112" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1008" cy="160" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1008" cy="240" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1008" cy="288" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1016" cy="112" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1016" cy="160" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1016" cy="240" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1016" cy="288" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1024" cy="176" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1024" cy="192" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1024" cy="208" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1024" cy="224" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1032" cy="112" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1032" cy="288" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1040" cy="112" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1040" cy="288" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1048" cy="128" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1048" cy="272" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1056" cy="128" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1056" cy="272" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1064" cy="176" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1064" cy="192" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1064" cy="208" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1064" cy="224" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1064" cy="240" r="6" class="opendot" fill="none" stroke="currentColor" />
<circle cx="1064" cy="256" r="6" class="opendot" fill="none" stroke="currentColor" />
<g class="text">
<text x="80" y="20">$$$$$</text>
<text x="80" y="36">$:::$</text>
<text x="1516" y="36">dddddddd</text>
<text x="84" y="52">$$$$$:::$$$$$$</text>
<text x="316" y="52">tttt</text>
<text x="440" y="52">hhhhhhh</text>
<text x="1516" y="52">d::::::d</text>
<text x="80" y="68">$$::::::::::::::$</text>
<text x="304" y="68">ttt:::t</text>
<text x="440" y="68">h:::::h</text>
<text x="1516" y="68">d::::::d</text>
<text x="76" y="84">$:::::$$$$$$$::::$</text>
<text x="304" y="84">t:::::t</text>
<text x="440" y="84">h:::::h</text>
<text x="1516" y="84">d::::::d</text>
<text x="28" y="100">$::::$</text>
<text x="128" y="100">$$$$$</text>
<text x="304" y="100">t:::::t</text>
<text x="440" y="100">h:::::h</text>
<text x="1512" y="100">d:::::d</text>
<text x="28" y="116">$::::$</text>
<text x="304" y="116">ttttttt:::::ttttttt</text>
<text x="468" y="116">h::::h hhhhh</text>
<text x="652" y="116">eeeeeeeeeeee</text>
<text x="868" y="116">cccccccccccccccc</text>
<text x="1024" y="116">o</text>
<text x="1088" y="116">rrrrr</text>
<text x="1168" y="116">rrrrrrrrr</text>
<text x="1308" y="116">eeeeeeeeeeee</text>
<text x="1508" y="116">ddddddddd:::::d uuuuuu</text>
<text x="1652" y="116">uuuuuu</text>
<text x="1744" y="116">mmmmmmm</text>
<text x="1832" y="116">mmmmmmm</text>
<text x="1904" y="116">ppppp</text>
<text x="1984" y="116">ppppppppp</text>
<text x="28" y="132">$::::$</text>
<text x="304" y="132">t:::::::::::::::::t</text>
<text x="480" y="132">h::::hh:::::hhh</text>
<text x="652" y="132">ee::::::::::::ee</text>
<text x="860" y="132">cc:::::::::::::::c</text>
<text x="1000" y="132">:::::::::::</text>
<text x="1140" y="132">r::::rrr:::::::::r</text>
<text x="1308" y="132">ee::::::::::::ee</text>
<text x="1500" y="132">dd::::::::::::::d u::::u</text>
<text x="1652" y="132">u::::u</text>
<text x="1740" y="132">mm:::::::m</text>
<text x="1912" y="132">m:::::::mm p::::ppp:::::::::p</text>
<text x="64" y="148">$:::::$$$$$$$$$</text>
<text x="304" y="148">t:::::::::::::::::t</text>
<text x="488" y="148">h::::::::::::::hh</text>
<text x="656" y="148">e::::::eeeee:::::ee</text>
<text x="1000" y="148">c:::::::::::::::::co:::::::::::::::or:::::::::::::::::r</text>
<text x="1416" y="148">e::::::eeeee:::::ee d::::::::::::::::d u::::u</text>
<text x="1652" y="148">u::::u</text>
<text x="1864" y="148">m::::::::::mm::::::::::mp:::::::::::::::::p</text>
<text x="76" y="164">$$::::::::::::$$</text>
<text x="304" y="164">tttttt:::::::tttttt</text>
<text x="528" y="164">h:::::::hhh::::::h e::::::e</text>
<text x="704" y="164">e:::::e</text>
<text x="888" y="164">c:::::::cccccc:::::co:::::ooo</text>
<text x="1156" y="164">:::::orr::::::rrrrr::::::re::::::e</text>
<text x="1464" y="164">e:::::ed:::::::ddddd:::::d u::::u</text>
<text x="1652" y="164">u::::u</text>
<text x="1868" y="164">m::::::::::::::::::::::mpp::::::ppppp::::::p</text>
<text x="88" y="180">$$$$$$$$$:::::$</text>
<text x="304" y="180">t:::::t</text>
<text x="452" y="180">h::::::h</text>
<text x="620" y="180">h::::::he:::::::eeeee::::::e</text>
<text x="804" y="180">c::::::c</text>
<text x="924" y="180">ccccccco::::</text>
<text x="1044" y="180">::::</text>
<text x="1104" y="180">r:::::r</text>
<text x="1312" y="180">r:::::re:::::::eeeee::::::ed::::::d</text>
<text x="1540" y="180">d:::::d u::::u</text>
<text x="1652" y="180">u::::u</text>
<text x="1820" y="180">m:::::mmm::::::mmm:::::m p:::::p</text>
<text x="2016" y="180">p:::::p</text>
<text x="124" y="196">$::::$</text>
<text x="304" y="196">t:::::t</text>
<text x="448" y="196">h:::::h</text>
<text x="620" y="196">h:::::he:::::::::::::::::e</text>
<text x="800" y="196">c:::::c</text>
<text x="956" y="196">::::</text>
<text x="1044" y="196">::::</text>
<text x="1104" y="196">r:::::r</text>
<text x="1308" y="196">rrrrrrre:::::::::::::::::e d:::::d</text>
<text x="1540" y="196">d:::::d u::::u</text>
<text x="1652" y="196">u::::u</text>
<text x="1716" y="196">m::::m</text>
<text x="1788" y="196">m::::m</text>
<text x="1892" y="196">m::::m p:::::p</text>
<text x="2016" y="196">p:::::p</text>
<text x="124" y="212">$::::$</text>
<text x="304" y="212">t:::::t</text>
<text x="448" y="212">h:::::h</text>
<text x="616" y="212">h:::::he::::::eeeeeeeeeee</text>
<text x="800" y="212">c:::::c</text>
<text x="956" y="212">::::</text>
<text x="1044" y="212">::::</text>
<text x="1104" y="212">r:::::r</text>
<text x="1300" y="212">e::::::eeeeeeeeeee</text>
<text x="1416" y="212">d:::::d</text>
<text x="1540" y="212">d:::::d u::::u</text>
<text x="1652" y="212">u::::u</text>
<text x="1716" y="212">m::::m</text>
<text x="1788" y="212">m::::m</text>
<text x="1892" y="212">m::::m p:::::p</text>
<text x="2016" y="212">p:::::p</text>
<text x="24" y="228">$$$$$</text>
<text x="124" y="228">$::::$</text>
<text x="304" y="228">t:::::t</text>
<text x="420" y="228">tttttt h:::::h</text>
<text x="580" y="228">h:::::he:::::::e</text>
<text x="804" y="228">c::::::c</text>
<text x="924" y="228">ccccccco::::</text>
<text x="1044" y="228">::::</text>
<text x="1104" y="228">r:::::r</text>
<text x="1264" y="228">e:::::::e</text>
<text x="1416" y="228">d:::::d</text>
<text x="1580" y="228">d:::::d u:::::uuuu:::::u</text>
<text x="1716" y="228">m::::m</text>
<text x="1788" y="228">m::::m</text>
<text x="1892" y="228">m::::m p:::::p</text>
<text x="2012" y="228">p::::::p</text>
<text x="76" y="244">$::::$$$$$$$:::::$</text>
<text x="376" y="244">t::::::tttt:::::t h:::::h</text>
<text x="584" y="244">h:::::he::::::::e</text>
<text x="888" y="244">c:::::::cccccc:::::co:::::ooo</text>
<text x="1040" y="244">:::::</text>
<text x="1104" y="244">r:::::r</text>
<text x="1268" y="244">e::::::::e</text>
<text x="1564" y="244">d::::::ddddd::::::ddu:::::::::::::::uum::::m</text>
<text x="1788" y="244">m::::m</text>
<text x="1940" y="244">m::::m p:::::ppppp:::::::p</text>
<text x="72" y="260">$::::::::::::::$$</text>
<text x="376" y="260">tt::::::::::::::t h:::::h</text>
<text x="616" y="260">h:::::h e::::::::eeeeeeee</text>
<text x="920" y="260">c:::::::::::::::::co:::::::::::::::</text>
<text x="1104" y="260">r:::::r</text>
<text x="1304" y="260">e::::::::eeeeeeee</text>
<text x="1568" y="260">d:::::::::::::::::d u:::::::::::::::um::::m</text>
<text x="1788" y="260">m::::m</text>
<text x="1936" y="260">m::::m p::::::::::::::::p</text>
<text x="68" y="276">$$$$$$:::$$$$$</text>
<text x="384" y="276">tt:::::::::::tt h:::::h</text>
<text x="544" y="276">h:::::h</text>
<text x="652" y="276">ee:::::::::::::e</text>
<text x="860" y="276">cc:::::::::::::::c</text>
<text x="1000" y="276">:::::::::::</text>
<text x="1104" y="276">r:::::r</text>
<text x="1308" y="276">ee:::::::::::::e</text>
<text x="1476" y="276">d:::::::::ddd::::d</text>
<text x="1652" y="276">uu::::::::uu:::um::::m</text>
<text x="1788" y="276">m::::m</text>
<text x="1932" y="276">m::::m p::::::::::::::pp</text>
<text x="72" y="292">$:::$</text>
<text x="352" y="292">ttttttttttt</text>
<text x="448" y="292">hhhhhhh</text>
<text x="544" y="292">hhhhhhh</text>
<text x="660" y="292">eeeeeeeeeeeeee</text>
<text x="868" y="292">cccccccccccccccc</text>
<text x="1024" y="292">o</text>
<text x="1104" y="292">rrrrrrr</text>
<text x="1316" y="292">eeeeeeeeeeeeee</text>
<text x="1448" y="292">ddddddddd</text>
<text x="1528" y="292">ddddd</text>
<text x="1612" y="292">uuuuuuuu</text>
<text x="1700" y="292">uuuummmmmm</text>
<text x="1788" y="292">mmmmmm</text>
<text x="1924" y="292">mmmmmm p::::::pppppppp</text>
<text x="72" y="308">$$$$$</text>
<text x="1920" y="308">p:::::p</text>
<text x="1920" y="324">p:::::p</text>
<text x="1920" y="340">p:::::::p</text>
<text x="1920" y="356">p:::::::p</text>
<text x="1920" y="372">p:::::::p</text>
<text x="1920" y="388">ppppppppp</text>
</g>
</a>
</svg>

7
src/lib/assets/Name.svelte
View file

@ -1,4 +1,6 @@
<script lang="ts">
import { fly } from 'svelte/transition';
export let height = '192';
export let width = 'auto';
export let href: string;
@ -8,14 +10,15 @@
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 2104 416"
class="diagram select-none hidden sm:block"
class="diagram select-none hidden sm:block font-mono"
text-anchor="middle"
font-family="monospace"
font-size="13px"
stroke-linecap="round"
fill="currentColor"
{height}
{width}
in:fly={{ x: -100, duration: 300, delay: 320 }}
out:fly={{ x: 100, duration: 300 }}
>
<a {href}>
<path d="M 112,352 L 232,112" fill="none" stroke="black" />

12
src/lib/components/Footer.svelte
View file

@ -3,13 +3,17 @@
</script>
<footer class="h-24 px-2 mb-4 text-sm md:text-md xl:text-lg">
<hr class="my-4" />
<hr class="mb-4" />
<div class="flex justify-center flex-col gap-4">
<div class="flex justify-around gap-4 brightness-75 hover:brightness-100">
<a href="https://github.com/couscousdude" target="_blank"><GithubLogo /></a>
<div class="flex justify-around gap-4">
<a
href="https://github.com/couscousdude"
target="_blank"
class="dark:brightness-75 dark:hover:brightness-100"><GithubLogo /></a
>
</div>
<p class="text-zinc-400 dark:text-zinc-700 text-center">
&copy Youwen Wu 2024 | Built with <strong>SvelteKit</strong> and
&copy 2024 Youwen Wu | Built with <strong>SvelteKit</strong> and
<strong>shad-cn</strong> |
<a href="https://github.com/couscousdude/coredump" target="_blank" class="hover:underline"
>View the source</a

15
src/lib/components/Navbar/Navbar.svelte
View file

@ -5,8 +5,9 @@
import Name from '$lib/assets/Name.svelte';
import { onMount } from 'svelte';
import { navigating } from '$app/stores';
import Coredump from '$lib/assets/Coredump.svelte';
let current: 'blog' | 'about' | 'home' | string;
let current: 'blog' | 'about' | 'home' | 'projects' | string;
const updateCurrent = () => {
const path = window.location.pathname;
@ -25,7 +26,11 @@
<nav class="h-20 bg-background bg-opacity-50 backdrop-blur-md fixed w-full">
<div class="container mx-auto flex justify-between items-center h-full gap-4">
<Name height="100%" href="/" />
{#if current === 'blog'}
<Coredump height="95%" href="/blog" />
{:else}
<Name height="100%" href="/" />
{/if}
<div class="flex gap-14 justify-around align-middle">
<a
href="/"
@ -37,11 +42,17 @@
class="text-md sm:text-lg md:text-xl font-medium dark:text-zinc-50 text-zinc-700 px-4 py-1 rounded-3xl hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors duration-200"
class:selected={current === 'about'}>About</a
>
<a
href="/projects"
class="text-md sm:text-lg md:text-xl font-medium dark:text-zinc-50 text-zinc-700 px-4 py-1 rounded-3xl hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors duration-200"
class:selected={current === 'projects'}>Projects</a
>
<a
href="/blog"
class="text-md sm:text-lg md:text-xl font-medium dark:text-zinc-50 text-zinc-700 px-4 py-1 rounded-3xl hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors duration-200"
class:selected={current === 'blog'}>Blog</a
>
<Button on:click={toggleMode} variant="outline" size="icon">
<Sun
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"

34
src/lib/components/TextCycle.svelte Normal file
View file

@ -0,0 +1,34 @@
<script lang="ts">
import { onMount } from 'svelte';
import { fly } from 'svelte/transition';
export let items: string[];
export let interval: number = 2000;
export let beforeText: string = '';
let currentIndex: number = 0;
let timer: number;
let temp = true;
onMount(() => {
timer = setInterval(() => {
currentIndex = (currentIndex + 1) % items.length;
temp = !temp;
}, interval);
return () => clearInterval(timer);
});
</script>
<div class="flex gap-2 text-nowrap flex-wrap">
{beforeText}
{#if temp}
<p in:fly={{ y: -50, duration: 300, delay: 320 }} out:fly={{ y: 50, duration: 300 }}>
{items[currentIndex]}
</p>
{:else}
<p in:fly={{ y: -50, duration: 300, delay: 320 }} out:fly={{ y: 50, duration: 300 }}>
{items[currentIndex]}
</p>
{/if}
</div>

27
src/lib/components/UnderConstruction.svelte Normal file
View file

@ -0,0 +1,27 @@
<main class="background w-full h-screen">
<div class="container max-w-3xl mx-auto p-10">
<h1 class="text-4xl md:text-5xl font-bold text-center tracking-tight mt-20">
🚧 Under Construction 🚧
</h1>
<div class="text-2xl md:text-3xl font-medium mt-10 text-center">
<p>Please excuse the mess! This page is currently under construction.</p>
</div>
</div>
</main>
<style lang="postcss">
.background {
--dot-bg: theme('colors.background');
--dot-color: theme('colors.foreground');
--dot-size: 1px;
--dot-space: 22px;
background:
linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%)
center / var(--dot-space) var(--dot-space),
linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center /
var(--dot-space) var(--dot-space),
var(--dot-color);
--cursor-color: theme('colors.foreground');
}
</style>

13
src/lib/components/ui/card/card-content.svelte Normal file
View file

@ -0,0 +1,13 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
type $$Props = HTMLAttributes<HTMLDivElement>;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<div class={cn("p-6 pt-0", className)} {...$$restProps}>
<slot />
</div>

13
src/lib/components/ui/card/card-description.svelte Normal file
View file

@ -0,0 +1,13 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
type $$Props = HTMLAttributes<HTMLParagraphElement>;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<p class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
<slot />
</p>

13
src/lib/components/ui/card/card-footer.svelte Normal file
View file

@ -0,0 +1,13 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
type $$Props = HTMLAttributes<HTMLDivElement>;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<div class={cn("flex items-center p-6 pt-0", className)} {...$$restProps}>
<slot />
</div>

13
src/lib/components/ui/card/card-header.svelte Normal file
View file

@ -0,0 +1,13 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
type $$Props = HTMLAttributes<HTMLDivElement>;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<div class={cn("flex flex-col space-y-1.5 p-6", className)} {...$$restProps}>
<slot />
</div>

21
src/lib/components/ui/card/card-title.svelte Normal file
View file

@ -0,0 +1,21 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import type { HeadingLevel } from "./index.js";
import { cn } from "$lib/utils.js";
type $$Props = HTMLAttributes<HTMLHeadingElement> & {
tag?: HeadingLevel;
};
let className: $$Props["class"] = undefined;
export let tag: $$Props["tag"] = "h3";
export { className as class };
</script>
<svelte:element
this={tag}
class={cn("font-semibold leading-none tracking-tight", className)}
{...$$restProps}
>
<slot />
</svelte:element>

22
src/lib/components/ui/card/card.svelte Normal file
View file

@ -0,0 +1,22 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
type $$Props = HTMLAttributes<HTMLDivElement>;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class={cn("rounded-xl border bg-card text-card-foreground shadow", className)}
{...$$restProps}
on:click
on:focusin
on:focusout
on:mouseenter
on:mouseleave
>
<slot />
</div>

24
src/lib/components/ui/card/index.ts Normal file
View file

@ -0,0 +1,24 @@
import Root from "./card.svelte";
import Content from "./card-content.svelte";
import Description from "./card-description.svelte";
import Footer from "./card-footer.svelte";
import Header from "./card-header.svelte";
import Title from "./card-title.svelte";
export {
Root,
Content,
Description,
Footer,
Header,
Title,
//
Root as Card,
Content as CardContent,
Description as CardDescription,
Footer as CardFooter,
Header as CardHeader,
Title as CardTitle,
};
export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";

15
src/routes/+error.svelte Normal file
View file

@ -0,0 +1,15 @@
<script>
import { page } from '$app/stores';
import Button from '$lib/components/ui/button/button.svelte';
import { Home } from 'svelte-radix';
const error = $page.error ?? { message: 'unknown' };
</script>
<main class="flex justify-center h-screen">
<div class="max-w-md p-8 rounded outline-primary outline-1 outline mt-20 h-min">
<h1 class="text-4xl font-bold mb-4">Oops!</h1>
<p class="text-gray-600 mb-8">An error occurred: {error.message}</p>
<Button href="/" size="lg"><Home class="mr-2" />Back to homepage</Button>
</div>
</main>

8
src/routes/+layout.svelte
View file

@ -7,9 +7,15 @@
import Footer from '$lib/components/Footer.svelte';
</script>
<svelte:head>
<title>Youwen Wu</title>
<meta name="description" content="My personal website and blog." />
<meta name="author" content="Youwen Wu" />
</svelte:head>
<ModeWatcher />
<Navbar />
<div class="pb-24 px-4 pt-24">
<div class="px-4 pt-24">
<slot />
</div>

113
src/routes/+page.svelte
View file

@ -1,7 +1,112 @@
<script>
import { faker } from '@faker-js/faker';
import Footer from '$lib/components/Footer.svelte';
import Button from '$lib/components/ui/button/button.svelte';
import * as Card from '$lib/components/ui/card';
import { ArrowRight, GithubLogo } from 'svelte-radix';
import Typewriter from 'svelte-typewriter';
</script>
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
{faker.word.words(2000)}
<svelte:head>
<title>Youwen Wu | Home</title>
<meta name="description" content="My personal website and blog." />
<meta name="author" content="Youwen Wu" />
</svelte:head>
<main class="background py-2">
<div class="container max-w-3xl mx-auto p-10">
<Typewriter mode="scramble" scrambleDuration={500}>
<h1 class="text-4xl md:text-6xl font-bold text-center tracking-tight mt-20">
👋 Hi, I'm Youwen.
</h1>
</Typewriter>
<div class="text-2xl md:text-3xl font-medium mt-10 text-center">
<Typewriter cursor mode="loop">
<p>Student.</p>
<p>Programmer.</p>
<p>Math enthusiast.</p>
<p>Musician.</p>
<p>Hacker.</p>
</Typewriter>
<br />
<Typewriter mode="scramble" scrambleDuration={1000}>
I'm interested in systems programming, web design, data science, and statistics.
</Typewriter>
</div>
<span class="flex gap-2 justify-center my-8">
<Button href="/about" size="lg" class="text-xl">About Me</Button>
<Button
href="https://github.com/couscousdude"
target="_blank"
variant="outline"
size="lg"
class="text-xl"><GithubLogo class="mr-2" />My GitHub</Button
>
</span>
<div class="grid sm:grid-cols-2 gap-4 grid-cols-1">
<Card.Root>
<Card.Header>
<Card.Title>Blog</Card.Title>
</Card.Header>
<Card.Content>
<p>
Check out my blog, <strong>The Coredump</strong>, where I occasionally write about
computer science, math, and everything else on my mind.
</p>
</Card.Content>
<Card.Footer>
<Button variant="outline" href="/blog">Go<ArrowRight class="ml-2" /></Button>
</Card.Footer>
</Card.Root>
<Card.Root>
<Card.Header>
<Card.Title>Projects</Card.Title>
</Card.Header>
<Card.Content>
I'm currently working on:
<ul class="list-disc ml-4">
<li>
<a class="text-link" href="https://github.com/couscousdude/discard" target="_blank"
>discard</a
>, a lightweight self-generating flashcards app.
</li>
<li>
<a class="text-link" href="https://github.com/couscousdude/aural" target="_blank"
>aural</a
>, a no-frills Ollama client for interfacing with local LLMs using voice-to-text,
without any internet.
</li>
</ul>
</Card.Content>
<Card.Footer>
<span class="flex gap-2">
<Button variant="outline" href="/projects"
>My Projects<ArrowRight class="ml-2" /></Button
>
<Button
variant="secondary"
size="icon"
href="https://github.com/couscousdude?tab=repositories"><GithubLogo /></Button
>
</span>
</Card.Footer>
</Card.Root>
</div>
</div>
</main>
<style lang="postcss">
.background {
--dot-bg: theme('colors.background');
--dot-color: theme('colors.foreground');
--dot-size: 1px;
--dot-space: 22px;
background:
linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%)
center / var(--dot-space) var(--dot-space),
linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center /
var(--dot-space) var(--dot-space),
var(--dot-color);
--cursor-color: theme('colors.foreground');
}
</style>

9
src/routes/about/+page.svelte
View file

@ -0,0 +1,9 @@
<script>
import UnderConstruction from '$lib/components/UnderConstruction.svelte';
</script>
<svelte:head>
<title>Youwen Wu | About</title>
</svelte:head>
<UnderConstruction />

11
src/routes/blog/+page.svelte
View file

@ -0,0 +1,11 @@
<script>
import UnderConstruction from '$lib/components/UnderConstruction.svelte';
</script>
<svelte:head>
<title>Youwen Wu | The Coredump</title>
<meta name="description" content="My blog on computer science, math, and more." />
<meta name="author" content="Youwen Wu" />
</svelte:head>
<UnderConstruction />

5
src/routes/projects/+page.svelte Normal file
View file

@ -0,0 +1,5 @@
<script>
import UnderConstruction from '$lib/components/UnderConstruction.svelte';
</script>
<UnderConstruction />