mirror of
https://github.com/youwen5/site.git
synced 2024-11-24 17:33:51 -08:00
feat: massive improvements to homepage
This commit is contained in:
parent
43e4f8d49c
commit
d52bc7b45a
GPG key ID:
865658ED1FE61EC3
22 changed files with 690 additions and 85 deletions
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -75,4 +75,7 @@
|
|||
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
252
src/lib/assets/Coredump.svelte
Normal 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>
|
||||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
© Youwen Wu 2024 | Built with <strong>SvelteKit</strong> and
|
||||
© 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
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
{#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
34
src/lib/components/TextCycle.svelte
Normal 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
27
src/lib/components/UnderConstruction.svelte
Normal 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
13
src/lib/components/ui/card/card-content.svelte
Normal 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
13
src/lib/components/ui/card/card-description.svelte
Normal 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
13
src/lib/components/ui/card/card-footer.svelte
Normal 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
13
src/lib/components/ui/card/card-header.svelte
Normal 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
21
src/lib/components/ui/card/card-title.svelte
Normal 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
22
src/lib/components/ui/card/card.svelte
Normal 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
24
src/lib/components/ui/card/index.ts
Normal 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
15
src/routes/+error.svelte
Normal 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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
<script>
|
||||
import UnderConstruction from '$lib/components/UnderConstruction.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Youwen Wu | About</title>
|
||||
</svelte:head>
|
||||
|
||||
<UnderConstruction />
|
||||
|
|
@ -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
5
src/routes/projects/+page.svelte
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<script>
|
||||
import UnderConstruction from '$lib/components/UnderConstruction.svelte';
|
||||
</script>
|
||||
|
||||
<UnderConstruction />
|
||||
Loading…
Reference in a new issue