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: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
..
compare: 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

3 commits
acadbe216a ... 2644a44884

Author SHA1 Message Date
Youwen Wu
2644a44884
feat: update main page
Some checks are pending
Check Spelling / Check Spelling (push) Waiting to run
Details
Check Spelling / Report (Push) (push) Blocked by required conditions
Details
Check Spelling / Report (PR) (push) Blocked by required conditions
Details
Check Spelling / Update PR (push) Waiting to run
Details
2024-08-28 05:04:23 -07:00
Youwen Wu
248d3fb554
overhaul landing page 2024-08-28 03:31:57 -07:00
Youwen Wu
60edf69e9f
style: better underline for links 2024-08-28 02:23:03 -07:00
4 changed files with 178 additions and 103 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 relative inline-block hover:text-violet-700 dark:hover:text-violet-600; @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;
} }
.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; */
} /* } */
} }

267
src/routes/+page.svelte
View file

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