From 248d3fb5540e935b24095d22e3bdee519d17ad72 Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Wed, 28 Aug 2024 03:31:57 -0700
Subject: [PATCH] overhaul landing page

---
 src/lib/app.css                   |   2 +-
 src/routes/+page.svelte           | 244 ++++++++++++++++++------------
 src/routes/about/+page.svelte     |   2 +-
 src/routes/portfolio/+page.svelte |   2 +-
 4 files changed, 152 insertions(+), 98 deletions(-)

diff --git a/src/lib/app.css b/src/lib/app.css
index 4c62190..fe13c99 100644
--- a/src/lib/app.css
+++ b/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 { */
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a0430d7..dc8f80e 100644
--- a/src/routes/+page.svelte
+++ b/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">
-  <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>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index e67905d..b9ff0a4 100644
--- a/src/routes/about/+page.svelte
+++ b/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">
diff --git a/src/routes/portfolio/+page.svelte b/src/routes/portfolio/+page.svelte
index 5c19ea7..ae98d12 100644
--- a/src/routes/portfolio/+page.svelte
+++ b/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