feat: add cv

src/routes/+page.svelte

@@ -1,36 +1,11 @@
 <script lang="ts">
+  import Socials from '$lib/components/Socials.svelte'
   import Button from '$lib/components/ui/button/button.svelte'
   import * as Card from '$lib/components/ui/card'
-  import { onMount } from 'svelte'
   import { ArrowRight, Backpack, GithubLogo } from 'svelte-radix'
   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>
 
 <svelte:head>
@@ -54,7 +29,7 @@
     >
     <br />
     <p class="sm:text-2xl text-xl leading-relaxed mt-2">
-      I'm a first-year math student at the <a class="link" target="_blank" href="https://ucsb.edu"
+      I'm a first-year student 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
@@ -66,11 +41,8 @@
   </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="/portfolio" variant="outline" size="lg" class="text-xl flex-grow sm:flex-grow-0"
+      >Portfolio</Button
     >
     <Button
       href="https://github.com/youwen5"
@@ -86,7 +58,7 @@
       <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>
+  <h2 class="text-2xl font-medium mt-8 mb-4">Links of possible interest:</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
@@ -102,18 +74,41 @@
     </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
+      Linux® distribution.
+    </li>
+    <li>
+      <a class="link" href="https://garden.youwen.dev/">alexandria</a>, a public-facing
+      <a class="link" href="https://en.wikipedia.org/wiki/Zettelkasten">Zettelkasten</a>
+      I've been maintaining.
     </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.Title>Contact me</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, because I'm too lazy to actually implement this
-        feature right now, try this instead:
+        I'm reachable at any of the platforms below, but a good place to start if I don't know you
+        is via email, which I always respond to.
+        <Socials />
+        <p class="mt-2">Fellow Linux geeks can download my PGP key from</p>
+        <a
+          href="https://keys.openpgp.org/vks/v1/by-fingerprint/8F5E6C1AF90976CA7102917A865658ED1FE61EC3"
+          class="link">OpenPGP</a
+        >,
+        <a href="https://pgp.mit.edu/pks/lookup?op=vindex&search=0x865658ED1FE61EC3" class="link"
+          >MIT</a
+        >,
+        <a href="https://github.com/youwen5.gpg" class="link">GitHub</a>, or my personal
+        <a href="https://code.youwen.dev/youwen5.gpg" class="link">Git forge</a>.
+      </Card.Content>
+    </Card.Root>
+    <Card.Root class="col-span-2 sm:col-span-1">
+      <Card.Header>
+        <Card.Title>Fun</Card.Title>
+      </Card.Header>
+      <Card.Content>
+        View your fortune below:
         <div class="inline-flex gap-2 w-full mt-4">
           <Card.Root class="py-2 px-4 w-fit">
             <span class="inline-flex gap-3 align-center font-mono">
@@ -136,37 +131,6 @@
         {/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>
@@ -174,13 +138,20 @@
       <Card.Content>
         <ul class="list-disc list-inside">
           <li>
-            Use NixOS and want to try Zen Browser? I got a <a
+            Use NixOS and want to try Zen Browser? I've been maintaing this <a
               class="link"
-              href="https://github.com/youwen5/zen-browser-flake">flake for that</a
+              href="https://github.com/youwen5/zen-browser-flake">flake</a
             >.
           </li>
         </ul>
       </Card.Content>
+      <Card.Footer>
+        <span class="flex gap-2">
+          <Button variant="outline" href="https://missioncontrol.youwen.dev/goto/Cg25ehqSR?orgId=1"
+            >Homelab resource metrics<ArrowRight class="ml-2" /></Button
+          >
+        </span>
+      </Card.Footer>
     </Card.Root>
   </div>
 </main>

src/routes/portfolio/+page.svelte

@@ -22,10 +22,13 @@
       Here's some of the stuff I've worked on which I think is notable or interesting enough to
       write about.
     </p>
+    <p class="text-xl mt-4">
+      You can also view my <a href="/cv.pdf" class="link">CV directly</a>.
+    </p>
+
     <p class="leading-loose text-lg mt-4">
       Quick links: <a class="link mx-1" href="#projects">Projects.</a>
       <a class="link mx-1" href="#research">Research.</a>
-      <a class="link mx-1" href="#certifications">Certifications.</a>
     </p>
     <h2 id="projects" class="text-4xl font-serif font-medium mt-8">Projects</h2>
     <hr class="w-32 mt-1 h-1 bg-muted-foreground rounded-lg" />