youwen5/site
1
0
Fork 0
mirror of https://github.com/youwen5/site.git synced 2024-11-25 01:43:49 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Compare commits

base: youwen5:2644a44884c4b53948a7ad08a9c12ad893281493
Branches Tags
youwen5:main
youwen5:add-aboutme
youwen5:loading-bar
youwen5:add-site-generator
youwen5:refactor-navbar
youwen5:add-loading-bar
youwen5:sticky-toc
..
compare: youwen5:acadbe216af880f791ac94791e35fb0567664b93
Branches Tags
youwen5:main
youwen5:add-aboutme
youwen5:loading-bar
youwen5:add-site-generator
youwen5:refactor-navbar
youwen5:add-loading-bar
youwen5:sticky-toc

No commits in common. "2644a44884c4b53948a7ad08a9c12ad893281493" and "acadbe216af880f791ac94791e35fb0567664b93" have entirely different histories.
2644a44884 ... acadbe216a

4 changed files with 101 additions and 176 deletions
Show stats Expand all files Collapse all files

10
src/lib/app.css
View file

@ -109,11 +109,11 @@
var(--dot-color); var(--dot-color);
} }
.link { .link {
@apply hover:text-violet-700 dark:hover:text-violet-600 underline decoration-violet-800 dark:decoration-violet-500 decoration-solid decoration-2 underline-offset-auto; @apply relative inline-block hover:text-violet-700 dark:hover:text-violet-600;
} }
/* .link::after { */ .link::after {
/* content: ''; */ content: '';
/* @apply absolute w-full left-0 h-0.5 bottom-0.5 bg-violet-800 dark:bg-violet-500; */ @apply absolute w-full left-0 h-0.5 bottom-0.5 bg-violet-800 dark:bg-violet-500;
/* } */ }
} }

263
src/routes/+page.svelte
View file

@ -1,36 +1,8 @@
<script lang="ts"> <script lang="ts">
import Button from '$lib/components/ui/button/button.svelte' import Button from '$lib/components/ui/button/button.svelte'
import * as Card from '$lib/components/ui/card' import * as Card from '$lib/components/ui/card'
import { onMount } from 'svelte' import { ArrowRight, GithubLogo } from 'svelte-radix'
import { ArrowRight, Backpack, GithubLogo } from 'svelte-radix'
import Typewriter from 'svelte-typewriter' import Typewriter from 'svelte-typewriter'
let homelabStatus: 'checking' | 'failed' | 'unknown' | 'operational' = 'checking'
let showFortune = false
onMount(async () => {
const timeoutPromise = new Promise<Response>((_, reject) =>
setTimeout(() => reject(new Error('Request timed out')), 10000)
)
try {
const response = await Promise.race([fetch('https://code.youwen.dev'), timeoutPromise])
if (response.ok) {
homelabStatus = 'operational'
} else {
homelabStatus = 'failed'
}
} catch (error: any) {
if (error.message === 'Request timed out') {
homelabStatus = 'unknown'
} else {
// Handle other fetch errors
console.error('Status: Error', error)
homelabStatus = 'unknown'
}
}
})
</script> </script>
<svelte:head> <svelte:head>
@ -39,148 +11,101 @@
<meta name="author" content="Youwen Wu" /> <meta name="author" content="Youwen Wu" />
</svelte:head> </svelte:head>
<main class="max-w-3xl mx-auto py-14 sm:mt-18 px-4"> <main class="dots-background">
<Typewriter interval={75}> <div class="container max-w-5xl mx-auto py-14 px-4 sm:px-8 justify-center">
<h1 class="text-4xl tracking-tight sm:text-6xl font-bold">👋 Hi. I'm Youwen.</h1> <Typewriter mode="scramble" scrambleDuration={750}>
</Typewriter> <h1 class="text-5xl tracking-tight sm:text-6xl font-bold text-center mt-14 sm:mt-20">
<div class="mt-10"> 👋 Hi. I'm Youwen.
<Card.Root class="p-4"> </h1>
<span class="inline-flex gap-6 align-center font-mono"> </Typewriter>
<p class="text-2xl md:text-3xl">sh-5.2$</p> <div class="text-2xl md:text-3xl font-medium mt-10 text-center">
<Typewriter cursor mode="cascade" interval={300}> <Typewriter cursor mode="loop">
<h2 class="text-2xl md:text-3xl">uname -a</h2> <h2>a student.</h2>
</Typewriter> <h2>a programmer.</h2>
</span></Card.Root <h2>a math enthusiast.</h2>
> <h2>a musician.</h2>
<br /> <h2>a hacker.</h2>
<p class="sm:text-2xl text-xl leading-relaxed mt-2"> </Typewriter>
I'm a first-year math student at the <a class="link" target="_blank" href="https://ucsb.edu" <br />
>University of California, Santa Barbara</a <Typewriter>
>. Before that, I built robots with <p>Building <b>free and open source</b> software.</p>
<a class="link" href="https://github.com/Team-1280">Team 1280</a>. In my spare time, I hack on </Typewriter>
<a </div>
href="https://raw.githubusercontent.com/youwen5/youwen5/main/profile-3d-contrib/profile-night-view.svg" <div class="flex flex-wrap gap-4 justify-center my-8">
class="link">free software and open source</a <Button href="/about" size="lg" class="text-xl flex-grow sm:flex-grow-0">About Me</Button>
>. <Button
</p> href="https://github.com/youwen5"
</div> target="_blank"
<div class="flex flex-wrap gap-4 my-8"> variant="outline"
<Button href="/about" size="lg" class="text-xl flex-grow sm:flex-grow-0">About</Button> size="lg"
<Button class="text-xl flex-grow sm:flex-grow-0"><GithubLogo class="mr-2" />GitHub</Button
href="/about#contact" >
variant="outline" </div>
size="lg" <div class="grid grid-cols-2 gap-4">
class="text-xl flex-grow sm:flex-grow-0">Contact</Button <Card.Root class="col-span-2 sm:col-span-1">
> <Card.Header>
<Button <Card.Title>What I'm up to</Card.Title>
href="https://github.com/youwen5" </Card.Header>
target="_blank" <Card.Content>
variant="outline" <ul class="list-disc ml-4">
size="lg" <li>
class="px-2"><GithubLogo /></Button I'm currently reading through <a
> class="link"
</div> href="https://www.math.brown.edu/streil/papers/LADW/LADW.html"
<Card.Root class="p-4"> >Linear Algebra Done Wrong</a
<span class="inline-flex gap-4 align-center font-mono"> >, by Sergei Treil. I'm syncing my notes and problem set solutions to a
<p class="text-lg sm:text-xl overflow-x-auto">sh-5.2$</p> <a class="link" href="https://github.com/youwen5/linear-algebra-done-wrong"
<p class="text-lg sm:text-xl overflow-x-auto">ls -l /home/youwen</p> >public git repository here.</a
</span></Card.Root
>
<h2 class="text-2xl font-medium mt-8 mb-4">Some cool links from home and around the web:</h2>
<ul class="my-2 text-lg list-disc list-inside space-y-2">
<li>
<a class="link" href="https://code.youwen.dev">code.youwen.dev</a>: my personal Git forge
instance
</li>
<li>
<a class="link" href="https://solipsism.social">my Misskey (fediverse) server</a>, where I'm
<a class="link" href="https://solipsism.social/@youwen">@youwen@solipsism.social</a>
</li>
<li>
<a class="link" href="https://blog.youwen.dev">blog.youwen.dev</a>, my static blog powered by
<a class="link" href="https://www.haskell.org/">Haskell</a>.
</li>
<li>
<a class="link" href="https://github.com/youwen5/liminalOS">liminalOS</a>, my custom advanced
Linux® distribution that's definitely not just NixOS configuration files in disguise
</li>
</ul>
<div class="grid grid-cols-2 gap-4 mt-8">
<Card.Root class="col-span-2">
<Card.Header>
<Card.Title>What's new?</Card.Title>
</Card.Header>
<Card.Content>
This section will probably contain a feed of new projects, blog posts, and other stuff that
I've deemed "ready to display". For now, because I'm too lazy to actually implement this
feature right now, try this instead:
<div class="inline-flex gap-2 w-full mt-4">
<Card.Root class="py-2 px-4 w-fit">
<span class="inline-flex gap-3 align-center font-mono">
<p class="text-md overflow-x-auto">sh-5.2$</p>
<p class="text-md overflow-x-auto">fortune</p>
</span></Card.Root
>
<Button variant="secondary" size="lg" on:click={() => (showFortune = true)}>Enter</Button>
</div>
{#if showFortune}
<Card.Root class="font-mono w-full mt-2">
<Card.Header>Your fortune:</Card.Header>
<Card.Content>
<Typewriter
>In civilizations without monads, dreams dry up, mutation takes the place of purity
and the Rustaceans take the place of Hasklars. - Simon Haskal</Typewriter
> >
</Card.Content> </li>
</Card.Root> <li>
{/if} I'm working on a dotfile manager for people who want a dotfile manager, but don't want
</Card.Content> to manage dotfiles for their dotfile manager (in other words, with minimal
</Card.Root> configuration).
<Card.Root class="col-span-2 sm:col-span-1"> </li>
<Card.Header> <li>I'm still trying to understand Haskell.</li>
<Card.Title>Homelab status</Card.Title> </ul>
</Card.Header> </Card.Content>
<Card.Content> <Card.Footer>
Status of my various services running off my homelab, like <a <span class="flex gap-2">
class="link" <Button
href="https://code.youwen.dev">code.youwen.dev</a variant="secondary"
>. size="icon"
{#if homelabStatus === 'operational'} href="https://github.com/youwen5?tab=repositories"><GithubLogo /></Button
<p class="mt-4 text-xl font-medium text-green-500 dark:text-green-600"> >
All systems normal. <Button variant="outline" href="/portfolio"
>My Portfolio<ArrowRight class="ml-2" /></Button
>
</span>
</Card.Footer>
</Card.Root>
<Card.Root class="col-span-2 sm:col-span-1">
<Card.Header>
<Card.Title>Blog</Card.Title>
</Card.Header>
<Card.Content>
<p>
Check out my blog where I write about code, math, games, and other hacks I do. It's <a
href="https://blog.youwen.dev">built with Haskell.</a
>
</p> </p>
{:else if homelabStatus === 'unknown'} </Card.Content>
<p class="mt-4 text-xl font-medium text-yellow-500 dark:text-yellow-600"> <Card.Footer>
System status unknown. <Button variant="outline" href="https://blog.youwen.dev"
</p> >Go to my blog<ArrowRight class="ml-2" /></Button
{:else if homelabStatus === 'failed'}
<p class="mt-4 text-xl font-medium text-red-500 dark:text-red-600">Failures detected.</p>
{:else}
<p class="mt-4 text-xl font-medium">Probing for status...</p>
{/if}
</Card.Content>
<Card.Footer>
<span class="flex gap-2">
<Button variant="outline" href="https://missioncontrol.youwen.dev/goto/Cg25ehqSR?orgId=1"
>Latest metrics<ArrowRight class="ml-2" /></Button
> >
</span> </Card.Footer>
</Card.Footer> </Card.Root>
</Card.Root> <Card.Root class="col-span-2">
<Card.Root class="col-span-2 sm:col-span-1"> <Card.Header>
<Card.Header> <Card.Title>What's new?</Card.Title>
<Card.Title>Miscellany</Card.Title> </Card.Header>
</Card.Header> <Card.Content>
<Card.Content> This section will contain a feed of new projects, blog posts, and other stuff that I've
<ul class="list-disc list-inside"> deemed "ready to display". For now, it has this text, because I'm too lazy to actually
<li> implement this feature right now.
Use NixOS and want to try Zen Browser? I got a <a </Card.Content>
class="link" </Card.Root>
href="https://github.com/youwen5/zen-browser-flake">flake for that</a </div>
>.
</li>
</ul>
</Card.Content>
</Card.Root>
</div> </div>
</main> </main>

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

@ -7,7 +7,7 @@
<title>About | Youwen Wu</title> <title>About | Youwen Wu</title>
</svelte:head> </svelte:head>
<main> <main class="dots-background">
<div class="max-w-3xl mx-auto pb-14 pt-6 md:py-14 px-2 sm:px-8 justify-center"> <div class="max-w-3xl mx-auto pb-14 pt-6 md:py-14 px-2 sm:px-8 justify-center">
<Card.Root class="sm:px-6 px-0"> <Card.Root class="sm:px-6 px-0">
<Card.Header class="inline-flex items-center"> <Card.Header class="inline-flex items-center">

2
src/routes/portfolio/+page.svelte
View file

@ -12,7 +12,7 @@
<meta name="author" content="Youwen Wu" /> <meta name="author" content="Youwen Wu" />
</svelte:head> </svelte:head>
<div class="py-12"> <div class="md:dots-background py-12">
<main class="px-4 mx-auto max-w-5xl bg-background rounded-lg py-4"> <main class="px-4 mx-auto max-w-5xl bg-background rounded-lg py-4">
<h1 class="font-serif text-5xl font-medium tracking-tight"> <h1 class="font-serif text-5xl font-medium tracking-tight">
Portfolio Portfolio