overhaul landing page

src/lib/app.css

@@ -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 { */

src/routes/+page.svelte

@@ -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">
+<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}>
-      <h1 class="text-5xl tracking-tight sm:text-6xl font-bold text-center mt-14 sm:mt-20">
+    <h1 class="text-4xl tracking-tight sm:text-6xl font-bold">👋 Hi. I'm Youwen.</h1>
-        👋 Hi. I'm Youwen.
-      </h1>
   </Typewriter>
-    <div class="text-2xl md:text-3xl font-medium mt-10 text-center">
+  <div class="mt-10">
-      <Typewriter cursor mode="loop">
+    <Card.Root class="p-4">
-        <h2>a student.</h2>
+      <span class="inline-flex gap-6 align-center font-mono">
-        <h2>a programmer.</h2>
+        <p class="text-2xl md:text-3xl">sh-5.2$</p>
-        <h2>a math enthusiast.</h2>
+        <Typewriter cursor mode="cascade" interval={200}>
-        <h2>a musician.</h2>
+          <h2 class="text-2xl md:text-3xl">uname -a</h2>
-        <h2>a hacker.</h2>
         </Typewriter>
+      </span></Card.Root
+    >
     <br />
-      <Typewriter>
+    <p class="sm:text-2xl text-xl leading-relaxed mt-2">
-        <p>Building <b>free and open source</b> software.</p>
+      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
+      >. 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 justify-center my-8">
+  <div class="flex flex-wrap gap-4 my-8">
-      <Button href="/about" size="lg" class="text-xl flex-grow sm:flex-grow-0">About Me</Button>
+    <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="text-xl flex-grow sm:flex-grow-0"><GithubLogo class="mr-2" />GitHub</Button
+      class="px-2"><GithubLogo /></Button
     >
   </div>
-    <div class="grid grid-cols-2 gap-4">
+  <Card.Root class="p-4">
-      <Card.Root class="col-span-2 sm:col-span-1">
+    <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 I'm up to</Card.Title>
+        <Card.Title>What's new?</Card.Title>
       </Card.Header>
       <Card.Content>
-          <ul class="list-disc ml-4">
+        This section will probably contain a feed of new projects, blog posts, and other stuff that
-            <li>
+        I've deemed "ready to display". For now, it has this text, because I'm too lazy to actually
-              I'm currently reading through <a
+        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://www.math.brown.edu/streil/papers/LADW/LADW.html"
+          href="https://code.youwen.dev">code.youwen.dev</a
-                >Linear Algebra Done Wrong</a
+        >.
-              >, by Sergei Treil. I'm syncing my notes and problem set solutions to a
+        {#if homelabStatus === 'operational'}
-              <a class="link" href="https://github.com/youwen5/linear-algebra-done-wrong"
+          <p class="mt-4 text-xl font-medium text-green-500 dark:text-green-600">
-                >public git repository here.</a
+            All systems normal.
-              >
+          </p>
-            </li>
+        {:else if homelabStatus === 'unknown'}
-            <li>
+          <p class="mt-4 text-xl font-medium text-yellow-500 dark:text-yellow-600">
-              I'm working on a dotfile manager for people who want a dotfile manager, but don't want
+            System status unknown.
-              to manage dotfiles for their dotfile manager (in other words, with minimal
+          </p>
-              configuration).
+        {:else if homelabStatus === 'failed'}
-            </li>
+          <p class="mt-4 text-xl font-medium text-red-500 dark:text-red-600">Failures detected.</p>
-            <li>I'm still trying to understand Haskell.</li>
+        {:else}
-          </ul>
+          <p class="mt-4 text-xl font-medium">Probing for status...</p>
+        {/if}
       </Card.Content>
       <Card.Footer>
         <span class="flex gap-2">
-            <Button
+          <Button variant="outline" href="https://missioncontrol.youwen.dev/goto/Cg25ehqSR?orgId=1"
-              variant="secondary"
+            >Latest metrics<ArrowRight class="ml-2" /></Button
-              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.Title>Miscellany</Card.Title>
       </Card.Header>
       <Card.Content>
-          <p>
+        <ul class="list-disc list-inside">
-            Check out my blog where I write about code, math, games, and other hacks I do. It's <a
+          <li>
-              href="https://blog.youwen.dev">built with Haskell.</a
+            Use NixOS and want to try Zen Browser? I got a <a
-            >
+              class="link"
-          </p>
+              href="https://github.com/youwen5/zen-browser-flake">flake for that</a
-        </Card.Content>
+            >.
-        <Card.Footer>
+          </li>
-          <Button variant="outline" href="https://blog.youwen.dev"
+        </ul>
-            >Go to my blog<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>
-  </div>
 </main>

src/routes/about/+page.svelte

@@ -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">

src/routes/portfolio/+page.svelte

@@ -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