mirror of
https://github.com/youwen5/site.git
synced 2024-11-24 17:33:51 -08:00
overhaul landing page
This commit is contained in:
parent
60edf69e9f
commit
248d3fb554
GPG key ID:
865658ED1FE61EC3
4 changed files with 152 additions and 98 deletions
|
|
@ -109,7 +109,7 @@
|
||||||
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-4;
|
@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 { */
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,35 @@
|
||||||
<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'
|
||||||
|
|
||||||
|
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 +38,128 @@
|
||||||
<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 mt-14 sm:mt-18 px-4">
|
||||||
<div class="container max-w-5xl mx-auto py-14 px-4 sm:px-8 justify-center">
|
<Typewriter mode="scramble" scrambleDuration={750}>
|
||||||
<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={200}>
|
||||||
<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 studying math 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-6 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, it has this text, because I'm too lazy to actually
|
||||||
Check out my blog where I write about code, math, games, and other hacks I do. It's <a
|
implement this feature right now.
|
||||||
href="https://blog.youwen.dev">built with Haskell.</a
|
</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>
|
</p>
|
||||||
</Card.Content>
|
{:else if homelabStatus === 'unknown'}
|
||||||
<Card.Footer>
|
<p class="mt-4 text-xl font-medium text-yellow-500 dark:text-yellow-600">
|
||||||
<Button variant="outline" href="https://blog.youwen.dev"
|
System status unknown.
|
||||||
>Go to my blog<ArrowRight class="ml-2" /></Button
|
</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
|
||||||
>
|
>
|
||||||
</Card.Footer>
|
</span>
|
||||||
</Card.Root>
|
</Card.Footer>
|
||||||
<Card.Root class="col-span-2">
|
</Card.Root>
|
||||||
<Card.Header>
|
<Card.Root class="col-span-2 sm:col-span-1">
|
||||||
<Card.Title>What's new?</Card.Title>
|
<Card.Header>
|
||||||
</Card.Header>
|
<Card.Title>Miscellany</Card.Title>
|
||||||
<Card.Content>
|
</Card.Header>
|
||||||
This section will contain a feed of new projects, blog posts, and other stuff that I've
|
<Card.Content>
|
||||||
deemed "ready to display". For now, it has this text, because I'm too lazy to actually
|
<ul class="list-disc list-inside">
|
||||||
implement this feature right now.
|
<li>
|
||||||
</Card.Content>
|
Use NixOS and want to try Zen Browser? I got a <a
|
||||||
</Card.Root>
|
class="link"
|
||||||
</div>
|
href="https://github.com/youwen5/zen-browser-flake">flake for that</a
|
||||||
|
>.
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</Card.Content>
|
||||||
|
</Card.Root>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue