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

style: add some nicer fonts, fix dark mode

Browse source
This commit is contained in:
Youwen Wu 2024-04-03 16:22:43 -07:00
parent 13eb780246
commit 708c6b1376
Signed by: youwen5
GPG key ID: 865658ED1FE61EC3
12 changed files with 126 additions and 141 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

2
package.json
View file

@ -43,6 +43,8 @@
"@faker-js/faker": "^8.4.1",
"@fontsource/geist-mono": "^5.0.2",
"@fontsource/geist-sans": "^5.0.2",
"@fontsource/merriweather": "^5.0.12",
"@fontsource/zilla-slab": "^5.0.12",
"bits-ui": "^0.21.2",
"clsx": "^2.1.0",
"marked": "^12.0.1",

6
src/lib/app.css
View file

@ -4,16 +4,16 @@
@layer base {
:root {
--background: 0 0% 100%;
--background: 0 0% 93%;
--foreground: 240 10% 3.9%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--popover: 0 0% 100%;
--popover: 0 0% 96%;
--popover-foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card: 0 0% 96%;
--card-foreground: 240 10% 3.9%;
--border: 240 5.9% 90%;

99
src/lib/assets/Coredump.svelte
View file

@ -21,54 +21,54 @@
out:fly={{ x: 100, duration: 300 }}
>
<a {href}>
<circle cx="936" cy="192" r="6" class="opendot" />
<circle cx="936" cy="208" r="6" class="opendot" />
<circle cx="944" cy="128" r="6" class="opendot" />
<circle cx="944" cy="272" r="6" class="opendot" />
<circle cx="952" cy="128" r="6" class="opendot" />
<circle cx="952" cy="272" r="6" class="opendot" />
<circle cx="960" cy="112" r="6" class="opendot" />
<circle cx="960" cy="288" r="6" class="opendot" />
<circle cx="968" cy="112" r="6" class="opendot" />
<circle cx="968" cy="288" r="6" class="opendot" />
<circle cx="976" cy="112" r="6" class="opendot" />
<circle cx="976" cy="176" r="6" class="opendot" />
<circle cx="976" cy="192" r="6" class="opendot" />
<circle cx="976" cy="208" r="6" class="opendot" />
<circle cx="976" cy="224" r="6" class="opendot" />
<circle cx="976" cy="288" r="6" class="opendot" />
<circle cx="984" cy="112" r="6" class="opendot" />
<circle cx="984" cy="288" r="6" class="opendot" />
<circle cx="992" cy="112" r="6" class="opendot" />
<circle cx="992" cy="288" r="6" class="opendot" />
<circle cx="1000" cy="112" r="6" class="opendot" />
<circle cx="1000" cy="288" r="6" class="opendot" />
<circle cx="1008" cy="112" r="6" class="opendot" />
<circle cx="1008" cy="160" r="6" class="opendot" />
<circle cx="1008" cy="240" r="6" class="opendot" />
<circle cx="1008" cy="288" r="6" class="opendot" />
<circle cx="1016" cy="112" r="6" class="opendot" />
<circle cx="1016" cy="160" r="6" class="opendot" />
<circle cx="1016" cy="240" r="6" class="opendot" />
<circle cx="1016" cy="288" r="6" class="opendot" />
<circle cx="1024" cy="176" r="6" class="opendot" />
<circle cx="1024" cy="192" r="6" class="opendot" />
<circle cx="1024" cy="208" r="6" class="opendot" />
<circle cx="1024" cy="224" r="6" class="opendot" />
<circle cx="1032" cy="112" r="6" class="opendot" />
<circle cx="1032" cy="288" r="6" class="opendot" />
<circle cx="1040" cy="112" r="6" class="opendot" />
<circle cx="1040" cy="288" r="6" class="opendot" />
<circle cx="1048" cy="128" r="6" class="opendot" />
<circle cx="1048" cy="272" r="6" class="opendot" />
<circle cx="1056" cy="128" r="6" class="opendot" />
<circle cx="1056" cy="272" r="6" class="opendot" />
<circle cx="1064" cy="176" r="6" class="opendot" />
<circle cx="1064" cy="192" r="6" class="opendot" />
<circle cx="1064" cy="208" r="6" class="opendot" />
<circle cx="1064" cy="224" r="6" class="opendot" />
<circle cx="1064" cy="240" r="6" class="opendot" />
<circle cx="1064" cy="256" r="6" class="opendot" />
<circle cx="936" cy="192" r="3" class="opendot" />
<circle cx="936" cy="208" r="3" class="opendot" />
<circle cx="944" cy="128" r="3" class="opendot" />
<circle cx="944" cy="272" r="3" class="opendot" />
<circle cx="952" cy="128" r="3" class="opendot" />
<circle cx="952" cy="272" r="3" class="opendot" />
<circle cx="960" cy="112" r="3" class="opendot" />
<circle cx="960" cy="288" r="3" class="opendot" />
<circle cx="968" cy="112" r="3" class="opendot" />
<circle cx="968" cy="288" r="3" class="opendot" />
<circle cx="976" cy="112" r="3" class="opendot" />
<circle cx="976" cy="176" r="3" class="opendot" />
<circle cx="976" cy="192" r="3" class="opendot" />
<circle cx="976" cy="208" r="3" class="opendot" />
<circle cx="976" cy="224" r="3" class="opendot" />
<circle cx="976" cy="288" r="3" class="opendot" />
<circle cx="984" cy="112" r="3" class="opendot" />
<circle cx="984" cy="288" r="3" class="opendot" />
<circle cx="992" cy="112" r="3" class="opendot" />
<circle cx="992" cy="288" r="3" class="opendot" />
<circle cx="1000" cy="112" r="3" class="opendot" />
<circle cx="1000" cy="288" r="3" class="opendot" />
<circle cx="1008" cy="112" r="3" class="opendot" />
<circle cx="1008" cy="160" r="3" class="opendot" />
<circle cx="1008" cy="240" r="3" class="opendot" />
<circle cx="1008" cy="288" r="3" class="opendot" />
<circle cx="1016" cy="112" r="3" class="opendot" />
<circle cx="1016" cy="160" r="3" class="opendot" />
<circle cx="1016" cy="240" r="3" class="opendot" />
<circle cx="1016" cy="288" r="3" class="opendot" />
<circle cx="1024" cy="176" r="3" class="opendot" />
<circle cx="1024" cy="192" r="3" class="opendot" />
<circle cx="1024" cy="208" r="3" class="opendot" />
<circle cx="1024" cy="224" r="3" class="opendot" />
<circle cx="1032" cy="112" r="3" class="opendot" />
<circle cx="1032" cy="288" r="3" class="opendot" />
<circle cx="1040" cy="112" r="3" class="opendot" />
<circle cx="1040" cy="288" r="3" class="opendot" />
<circle cx="1048" cy="128" r="3" class="opendot" />
<circle cx="1048" cy="272" r="3" class="opendot" />
<circle cx="1056" cy="128" r="3" class="opendot" />
<circle cx="1056" cy="272" r="3" class="opendot" />
<circle cx="1064" cy="176" r="3" class="opendot" />
<circle cx="1064" cy="192" r="3" class="opendot" />
<circle cx="1064" cy="208" r="3" class="opendot" />
<circle cx="1064" cy="224" r="3" class="opendot" />
<circle cx="1064" cy="240" r="3" class="opendot" />
<circle cx="1064" cy="256" r="3" class="opendot" />
<g class="text">
<text x="80" y="20">$$$$$</text>
<text x="80" y="36">$:::$</text>
@ -253,8 +253,7 @@
<style lang="postcss">
.opendot {
/* @apply stroke-zinc-400 dark:stroke-zinc-400 fill-none; */
@apply stroke-zinc-400 dark:stroke-zinc-300 fill-none stroke-2;
@apply stroke-primary fill-none stroke-2;
}
.logo {
& .text {

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

@ -23,55 +23,55 @@
<a {href}>
<path d="M 112,352 L 232,112" fill="none" stroke="black" />
<path d="M 160,352 L 280,112" fill="none" stroke="black" />
<circle cx="680" cy="144" r="6" class="opendot" />
<circle cx="680" cy="160" r="6" class="opendot" />
<circle cx="680" cy="176" r="6" class="opendot" />
<circle cx="680" cy="192" r="6" class="opendot" />
<circle cx="680" cy="208" r="6" class="opendot" />
<circle cx="680" cy="224" r="6" class="opendot" />
<circle cx="680" cy="240" r="6" class="opendot" />
<circle cx="680" cy="256" r="6" class="opendot" />
<circle cx="688" cy="128" r="6" class="opendot" />
<circle cx="688" cy="272" r="6" class="opendot" />
<circle cx="696" cy="128" r="6" class="opendot" />
<circle cx="696" cy="272" r="6" class="opendot" />
<circle cx="704" cy="112" r="6" class="opendot" />
<circle cx="704" cy="288" r="6" class="opendot" />
<circle cx="712" cy="112" r="6" class="opendot" />
<circle cx="712" cy="288" r="6" class="opendot" />
<circle cx="720" cy="112" r="6" class="opendot" />
<circle cx="720" cy="176" r="6" class="opendot" />
<circle cx="720" cy="192" r="6" class="opendot" />
<circle cx="720" cy="208" r="6" class="opendot" />
<circle cx="720" cy="224" r="6" class="opendot" />
<circle cx="720" cy="288" r="6" class="opendot" />
<circle cx="728" cy="112" r="6" class="opendot" />
<circle cx="728" cy="288" r="6" class="opendot" />
<circle cx="736" cy="112" r="6" class="opendot" />
<circle cx="736" cy="288" r="6" class="opendot" />
<circle cx="744" cy="112" r="6" class="opendot" />
<circle cx="744" cy="288" r="6" class="opendot" />
<circle cx="752" cy="112" r="6" class="opendot" />
<circle cx="752" cy="160" r="6" class="opendot" />
<circle cx="752" cy="240" r="6" class="opendot" />
<circle cx="752" cy="288" r="6" class="opendot" />
<circle cx="760" cy="112" r="6" class="opendot" />
<circle cx="760" cy="160" r="6" class="opendot" />
<circle cx="760" cy="240" r="6" class="opendot" />
<circle cx="760" cy="288" r="6" class="opendot" />
<circle cx="768" cy="176" r="6" class="opendot" />
<circle cx="768" cy="192" r="6" class="opendot" />
<circle cx="768" cy="208" r="6" class="opendot" />
<circle cx="768" cy="224" r="6" class="opendot" />
<circle cx="776" cy="112" r="6" class="opendot" />
<circle cx="776" cy="288" r="6" class="opendot" />
<circle cx="784" cy="112" r="6" class="opendot" />
<circle cx="784" cy="288" r="6" class="opendot" />
<circle cx="792" cy="128" r="6" class="opendot" />
<circle cx="792" cy="272" r="6" class="opendot" />
<circle cx="800" cy="128" r="6" class="opendot" />
<circle cx="800" cy="272" r="6" class="opendot" />
<circle cx="808" cy="256" r="6" class="opendot" />
<circle cx="680" cy="144" r="3" class="opendot" />
<circle cx="680" cy="160" r="3" class="opendot" />
<circle cx="680" cy="176" r="3" class="opendot" />
<circle cx="680" cy="192" r="3" class="opendot" />
<circle cx="680" cy="208" r="3" class="opendot" />
<circle cx="680" cy="224" r="3" class="opendot" />
<circle cx="680" cy="240" r="3" class="opendot" />
<circle cx="680" cy="256" r="3" class="opendot" />
<circle cx="688" cy="128" r="3" class="opendot" />
<circle cx="688" cy="272" r="3" class="opendot" />
<circle cx="696" cy="128" r="3" class="opendot" />
<circle cx="696" cy="272" r="3" class="opendot" />
<circle cx="704" cy="112" r="3" class="opendot" />
<circle cx="704" cy="288" r="3" class="opendot" />
<circle cx="712" cy="112" r="3" class="opendot" />
<circle cx="712" cy="288" r="3" class="opendot" />
<circle cx="720" cy="112" r="3" class="opendot" />
<circle cx="720" cy="176" r="3" class="opendot" />
<circle cx="720" cy="192" r="3" class="opendot" />
<circle cx="720" cy="208" r="3" class="opendot" />
<circle cx="720" cy="224" r="3" class="opendot" />
<circle cx="720" cy="288" r="3" class="opendot" />
<circle cx="728" cy="112" r="3" class="opendot" />
<circle cx="728" cy="288" r="3" class="opendot" />
<circle cx="736" cy="112" r="3" class="opendot" />
<circle cx="736" cy="288" r="3" class="opendot" />
<circle cx="744" cy="112" r="3" class="opendot" />
<circle cx="744" cy="288" r="3" class="opendot" />
<circle cx="752" cy="112" r="3" class="opendot" />
<circle cx="752" cy="160" r="3" class="opendot" />
<circle cx="752" cy="240" r="3" class="opendot" />
<circle cx="752" cy="288" r="3" class="opendot" />
<circle cx="760" cy="112" r="3" class="opendot" />
<circle cx="760" cy="160" r="3" class="opendot" />
<circle cx="760" cy="240" r="3" class="opendot" />
<circle cx="760" cy="288" r="3" class="opendot" />
<circle cx="768" cy="176" r="3" class="opendot" />
<circle cx="768" cy="192" r="3" class="opendot" />
<circle cx="768" cy="208" r="3" class="opendot" />
<circle cx="768" cy="224" r="3" class="opendot" />
<circle cx="776" cy="112" r="3" class="opendot" />
<circle cx="776" cy="288" r="3" class="opendot" />
<circle cx="784" cy="112" r="3" class="opendot" />
<circle cx="784" cy="288" r="3" class="opendot" />
<circle cx="792" cy="128" r="3" class="opendot" />
<circle cx="792" cy="272" r="3" class="opendot" />
<circle cx="800" cy="128" r="3" class="opendot" />
<circle cx="800" cy="272" r="3" class="opendot" />
<circle cx="808" cy="256" r="3" class="opendot" />
<g class="text">
<text x="256" y="116">/////</text>
<text x="504" y="116">yyyyyyy</text>
@ -279,7 +279,7 @@
<style lang="postcss">
.opendot {
@apply stroke-zinc-400 dark:stroke-zinc-400 dark:fill-zinc-500 fill-zinc-300;
@apply stroke-primary fill-none stroke-2;
}
.logo {
& .text {

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

@ -7,7 +7,7 @@
<Separator class="mb-4" />
<div class="flex justify-center flex-col gap-4">
<Socials center />
<p class="text-zinc-400 dark:text-zinc-700 text-center">
<p class="text-muted-foreground text-center">
&copy 2024 Youwen Wu | Built with <a
href="https://kit.svelte.dev"
target="_blank"

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

@ -25,7 +25,7 @@
});
</script>
<nav class="h-20 bg-background bg-opacity-50 backdrop-blur-md fixed w-full z-50">
<nav class="h-20 bg-background bg-opacity-50 backdrop-blur-md fixed w-full z-50 font-display">
<div class="container mx-auto flex justify-between items-center h-full gap-4 overflow-x-auto">
{#if current === 'blog'}
<Coredump height="95%" href="/blog" />
@ -35,32 +35,28 @@
<div class="flex gap-4 lg:gap-14 justify-around align-middle">
<a
href="/"
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="text-lg sm:text-xl md:text-2xl font-medium text-primary px-4 py-1 rounded-3xl hover:bg-zinc-300 dark:hover:bg-zinc-800 transition-colors duration-200"
class:selected={current === 'home'}>Home</a
>
<a
href="/about"
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="text-lg sm:text-xl md:text-2xl font-medium text-primary px-4 py-1 rounded-3xl hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors duration-200"
class:selected={current === 'about'}>About</a
>
<a
href="/portfolio"
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="text-lg sm:text-xl md:text-2xl font-medium text-primary px-4 py-1 rounded-3xl hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors duration-200"
class:selected={current === 'portfolio'}>Portfolio</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="text-lg sm:text-xl md:text-2xl font-medium text-primary px-4 py-1 rounded-3xl hover:bg-zinc-200 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"
/>
<Moon
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
/>
<Button on:click={toggleMode} variant="outline" size="icon" class="my-1">
<Sun class="dark:hidden" />
<Moon class="hidden dark:block" />
<span class="sr-only">Toggle theme</span>
</Button>
</div>

17
src/lib/components/UnderConstruction.svelte
View file

@ -8,20 +8,3 @@
</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>

2
src/routes/+layout.svelte
View file

@ -4,6 +4,8 @@
import { ModeWatcher } from 'mode-watcher';
import '@fontsource/geist-sans/latin.css';
import '@fontsource/geist-mono/latin.css';
import '@fontsource/zilla-slab/latin.css';
import '@fontsource/merriweather/latin.css';
import Footer from '$lib/components/Footer.svelte';
import { Toaster } from '$lib/components/ui/sonner';
</script>

9
src/routes/+page.svelte
View file

@ -16,7 +16,7 @@
<main class="dots-background">
<div class="container max-w-5xl mx-auto py-10 px-4 sm:px-8">
<Typewriter mode="scramble" scrambleDuration={750}>
<h1 class="text-5xl sm:text-6xl font-bold text-center tracking-tight mt-14 sm:mt-20">
<h1 class="text-5xl sm:text-6xl font-bold text-center mt-14 sm:mt-20 font-display">
👋 Hi, I'm Youwen,
</h1>
</Typewriter>
@ -33,14 +33,15 @@
I'm interested in systems programming, web design, data science, and statistics.
</Typewriter>
</div>
<div class="flex flex-wrap gap-4 sm:gap-2 justify-center my-8">
<Button href="/about" size="lg" class="text-xl w-full sm:w-min">More About Me</Button>
<div class="flex flex-wrap gap-4 justify-center my-8">
<Button href="/about" size="lg" class="text-xl flex-grow sm:flex-grow-0">More About Me</Button
>
<Button
href="https://github.com/couscousdude"
target="_blank"
variant="outline"
size="lg"
class="text-xl w-full sm:w-min"><GithubLogo class="mr-2" />My GitHub</Button
class="text-xl flex-grow sm:flex-grow-0"><GithubLogo class="mr-2" />My GitHub</Button
>
</div>
<div class="grid grid-cols-2 gap-4">

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

@ -7,7 +7,7 @@
let doc = {
title: 'Test Post',
description: ''
description: 'An insightful and succinct blurb about the post.'
};
export let data: PageData;
@ -25,12 +25,12 @@
<main class="max-w-4xl my-8 mx-4 md:mx-auto">
<div class="w-full min-w-0 mb-4">
<div class="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
<div class="overflow-hidden text-ellipsis whitespace-nowrap">Docs</div>
<div class="overflow-hidden text-ellipsis whitespace-nowrap">The Coredump</div>
<ChevronRight class="h-4 w-4" />
<div class="font-medium text-foreground">{doc.title}</div>
</div>
<div class="space-y-2">
<h1 class={cn('scroll-m-20 text-4xl font-bold tracking-tight')}>
<h1 class={cn('scroll-m-20 text-5xl font-bold font-serif tracking-tight')}>
{doc.title}
</h1>
{#if doc.description}

4
tailwind.config.js
View file

@ -54,7 +54,9 @@ const config = {
},
fontFamily: {
sans: ['Geist Sans', 'sans-serif'],
mono: ['Geist Mono', 'monospace']
mono: ['Geist Mono', 'monospace'],
display: ['Zilla Slab', 'serif'],
serif: ['Merriweather', 'serif']
}
}
}