mirror of
https://github.com/youwen5/site.git
synced 2024-11-24 09:23:50 -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);
|
||||
}
|
||||
.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 { */
|
||||
|
|
|
|||
|
|
@ -1,8 +1,35 @@
|
|||
<script lang="ts">
|
||||
import Button from '$lib/components/ui/button/button.svelte'
|
||||
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'
|
||||
|
||||
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>
|
||||
|
||||
<svelte:head>
|
||||
|
|
@ -11,101 +38,128 @@
|
|||
<meta name="author" content="Youwen Wu" />
|
||||
</svelte:head>
|
||||
|
||||
<main class="dots-background">
|
||||
<div class="container max-w-5xl mx-auto py-14 px-4 sm:px-8 justify-center">
|
||||
<Typewriter mode="scramble" scrambleDuration={750}>
|
||||
<h1 class="text-5xl tracking-tight sm:text-6xl font-bold text-center mt-14 sm: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">
|
||||
<h2>a student.</h2>
|
||||
<h2>a programmer.</h2>
|
||||
<h2>a math enthusiast.</h2>
|
||||
<h2>a musician.</h2>
|
||||
<h2>a hacker.</h2>
|
||||
</Typewriter>
|
||||
<br />
|
||||
<Typewriter>
|
||||
<p>Building <b>free and open source</b> software.</p>
|
||||
</Typewriter>
|
||||
</div>
|
||||
<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">About Me</Button>
|
||||
<Button
|
||||
href="https://github.com/youwen5"
|
||||
target="_blank"
|
||||
variant="outline"
|
||||
size="lg"
|
||||
class="text-xl flex-grow sm:flex-grow-0"><GithubLogo class="mr-2" />GitHub</Button
|
||||
>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<Card.Root class="col-span-2 sm:col-span-1">
|
||||
<Card.Header>
|
||||
<Card.Title>What I'm up to</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<ul class="list-disc ml-4">
|
||||
<li>
|
||||
I'm currently reading through <a
|
||||
class="link"
|
||||
href="https://www.math.brown.edu/streil/papers/LADW/LADW.html"
|
||||
>Linear Algebra Done Wrong</a
|
||||
>, by Sergei Treil. I'm syncing my notes and problem set solutions to a
|
||||
<a class="link" href="https://github.com/youwen5/linear-algebra-done-wrong"
|
||||
>public git repository here.</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
I'm working on a dotfile manager for people who want a dotfile manager, but don't want
|
||||
to manage dotfiles for their dotfile manager (in other words, with minimal
|
||||
configuration).
|
||||
</li>
|
||||
<li>I'm still trying to understand Haskell.</li>
|
||||
</ul>
|
||||
</Card.Content>
|
||||
<Card.Footer>
|
||||
<span class="flex gap-2">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="icon"
|
||||
href="https://github.com/youwen5?tab=repositories"><GithubLogo /></Button
|
||||
>
|
||||
<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
|
||||
>
|
||||
<main class="max-w-3xl mx-auto py-14 mt-14 sm:mt-18 px-4">
|
||||
<Typewriter mode="scramble" scrambleDuration={750}>
|
||||
<h1 class="text-4xl tracking-tight sm:text-6xl font-bold">👋 Hi. I'm Youwen.</h1>
|
||||
</Typewriter>
|
||||
<div class="mt-10">
|
||||
<Card.Root class="p-4">
|
||||
<span class="inline-flex gap-6 align-center font-mono">
|
||||
<p class="text-2xl md:text-3xl">sh-5.2$</p>
|
||||
<Typewriter cursor mode="cascade" interval={200}>
|
||||
<h2 class="text-2xl md:text-3xl">uname -a</h2>
|
||||
</Typewriter>
|
||||
</span></Card.Root
|
||||
>
|
||||
<br />
|
||||
<p class="sm:text-2xl text-xl leading-relaxed mt-2">
|
||||
I'm a first-year studying math at the <a class="link" target="_blank" href="https://ucsb.edu"
|
||||
>University of California, Santa Barbara</a
|
||||
>. Before that, I built robots with
|
||||
<a class="link" href="https://github.com/Team-1280">Team 1280</a>. In my spare time, I hack on
|
||||
<a
|
||||
href="https://raw.githubusercontent.com/youwen5/youwen5/main/profile-3d-contrib/profile-night-view.svg"
|
||||
class="link">free software and open source</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-4 my-8">
|
||||
<Button href="/about" size="lg" class="text-xl flex-grow sm:flex-grow-0">About</Button>
|
||||
<Button
|
||||
href="/about#contact"
|
||||
variant="outline"
|
||||
size="lg"
|
||||
class="text-xl flex-grow sm:flex-grow-0">Contact</Button
|
||||
>
|
||||
<Button
|
||||
href="https://github.com/youwen5"
|
||||
target="_blank"
|
||||
variant="outline"
|
||||
size="lg"
|
||||
class="px-2"><GithubLogo /></Button
|
||||
>
|
||||
</div>
|
||||
<Card.Root class="p-4">
|
||||
<span class="inline-flex gap-6 align-center font-mono">
|
||||
<p class="text-lg sm:text-xl overflow-x-auto">sh-5.2$</p>
|
||||
<p class="text-lg sm:text-xl overflow-x-auto">ls -l /home/youwen</p>
|
||||
</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, it has this text, because I'm too lazy to actually
|
||||
implement this feature right now.
|
||||
</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>
|
||||
</Card.Content>
|
||||
<Card.Footer>
|
||||
<Button variant="outline" href="https://blog.youwen.dev"
|
||||
>Go to my blog<ArrowRight class="ml-2" /></Button
|
||||
{: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
|
||||
>
|
||||
</Card.Footer>
|
||||
</Card.Root>
|
||||
<Card.Root class="col-span-2">
|
||||
<Card.Header>
|
||||
<Card.Title>What's new?</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
This section will contain a feed of new projects, blog posts, and other stuff that I've
|
||||
deemed "ready to display". For now, it has this text, because I'm too lazy to actually
|
||||
implement this feature right now.
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
</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>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<title>About | Youwen Wu</title>
|
||||
</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">
|
||||
<Card.Root class="sm:px-6 px-0">
|
||||
<Card.Header class="inline-flex items-center">
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<meta name="author" content="Youwen Wu" />
|
||||
</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">
|
||||
<h1 class="font-serif text-5xl font-medium tracking-tight">
|
||||
Portfolio
|
||||
|
|
|
|||
Loading…
Reference in a new issue