feat: add portfolio page

'

@@ -0,0 +1,33 @@
+<script>
+  import * as Card from '$lib/components/ui/card'
+</script>
+
+<svelte:head>
+  <title>Portfolio | Youwen Wu</title>
+  <meta name="description" content="My personal website and blog." />
+  <meta name="author" content="Youwen Wu" />
+</svelte:head>
+
+<main class="container mx-auto max-w-5xl my-20">
+  <h1 class="font-serif text-5xl font-medium tracking-tight">Portfolio</h1>
+  <p class="text-xl mt-4">
+    Here's some of the stuff I've worked on which I think is notable or interesting enough to write
+    about.
+  </p>
+  <Card.Root class="p-6">
+    <Card.Header>
+      <Card.Title class="text-4xl font-serif tracking-normal font-medium">Jankboard</Card.Title>
+    </Card.Header>
+    <Card.Content class="grid grid-cols-3">
+      <div class="col-span-2">
+        <p>
+          Jankboard is a fully custom control dashboard for Team 1280's robot competing in the 2024
+          season of the FIRST Robotics Competition.
+        </p>
+      </div>
+      <div class="flex justify-end col-span-1">
+        <img src="/assets/portfolio/images/team-1280-logo.png" alt="team 1280 logo" />
+      </div>
+    </Card.Content>
+  </Card.Root>
+</main>

src/routes/about/computing/+page.svelte

@@ -0,0 +1,84 @@
+<svelte:head>
+  <title>My Computing Setup | Youwen Wu</title>
+</svelte:head>
+
+<main class="container max-w-5xl">
+  <div class="py-12 space-y-4">
+    <h1 class="text-4xl font-medium tracking-tight">My Computing Setup</h1>
+    <p>
+      I'm generally very particular about how I use my computer and the software that runs on it. I
+      don't always configure my tools in the most "user-friendly" way, but rather the most efficient
+      way for me. In other words, I prefer function over form -- if something can be done faster in
+      a terminal, I wouldn't use the GUI version. I also generally prefer free software, as in
+      software which respects the <a
+        class="link"
+        href="https://www.gnu.org/philosophy/free-sw.en.html">four essential freedoms.</a
+      > However, I'm not a fanatic, and I run proprietary blobs in my firmware and drivers to get my
+      hardware to function properly.
+    </p>
+    <h2 class="text-3xl">First, some brief hardware details</h2>
+    <ul class="list-disc">
+      <li>Intel Core i7-13700KF</li>
+      <li>RTX 4080 (Founder's Edition)</li>
+      <li>32GB DDR5 memory at 5200 mt/s</li>
+    </ul>
+    <p>
+      The other hardware details of my computer are not particularly interesting. I do have an AIO
+      water cooler.
+    </p>
+    <h2 class="text-3xl">Software</h2>
+    <p>
+      I run <a class="link" href="https://archlinux.org/">Arch Linux</a> with the
+      <a class="link" href="https://hyprland.org/">Hyprland</a> desktop environment. My OS choice is
+      mostly pragmatic, I don't feel strong allegiances to any particular distro. I simply use Arch
+      as it lets me configure my system exactly how I want and has an up to date and large user
+      package repository. I've also been interested in looking into
+      <a class="link" href="https://nixos.org/">NixOS</a>, but I don't yet have 40 hours per week to
+      configure my operating system, unfortunately. I use Hyprland because:
+    </p>
+    <ol class="list-decimal">
+      <li>
+        Tiling window managers are infinitely superior and anyone who disagrees has never
+        experienced productivity.
+      </li>
+      <li>
+        Hyprland implements most modern Wayland features which is very important as I'm on Nvidia.
+      </li>
+    </ol>
+    <p>I also keep a Windows installation around, mainly for gaming.</p>
+    <h2 class="text-3xl">Code editing</h2>
+    <p>
+      One of the most used pieces of software on a developer's computer is their text editor, so I
+      spent a lot of time settling on one. In the past, I used <a
+        class="link"
+        href="https://code.visualstudio.com/">Visual Studio Code</a
+      >, but I've since switched to
+      <a class="link" href="https://neovim.io/">Neovim.</a> VS Code is a fine editor and I recommend
+      it to anyone new to programming, but it just doesn't make sense for me to run a full electron
+      app when I don't need any of the fancy GUI features and I can work faster in Neovim. Modern
+      code editing has mostly become editor-agnostic anyways with the advent of
+      <a class="link" href="https://microsoft.github.io/language-server-protocol/">LSP</a>, so most
+      of the important features are available in practically every editor anyways.
+    </p>
+    <p>As for my terminal, my main priorities (in order) are:</p>
+    <ol class="list-decimal">
+      <li>Performance</li>
+      <li>Font rendering quality and support (ligatures, etc)</li>
+      <li>Additional quality of life features</li>
+    </ol>
+    <p>
+      Since my editor (Neovim) runs purely in a terminal, performance is the most important since
+      any perceptible latency or lag quickly becomes extremely annoying. Otherwise, it would
+      probably shift down to the bottom of the list.
+    </p>
+    <p>
+      I've tried <a class="link" href="https://sw.kovidgoyal.net/kitty/">kitty</a> and
+      <a class="link" href="https://alacritty.org/">Alacritty</a> but ended up settling on kitty. Although
+      Alacritty (allegedly) has better performance, kitty is practically the same in day-to-day use (and
+      I heard it has better latency, too). I ended up choosing kitty mainly due to its more versatile
+      configuration as well as support for font ligatures. It also has tabs and native multiplexing,
+      which the maintainers of Alacritty refuse to support (which is fine, with tmux or zellij, but native
+      is nice to have).
+    </p>
+  </div>
+</main>

src/routes/portfolio/+page.svelte

@@ -1,5 +1,8 @@
 <script>
-  import UnderConstruction from '$lib/components/UnderConstruction.svelte'
+  import { Button } from '$lib/components/ui/button'
+  import * as Card from '$lib/components/ui/card'
+  import { Code, Image } from 'svelte-radix'
+  import Badge from '$lib/components/ui/badge/badge.svelte'
 </script>
 
 <svelte:head>
@@ -8,4 +11,72 @@
   <meta name="author" content="Youwen Wu" />
 </svelte:head>
 
-<UnderConstruction />
+<main class="container mx-auto max-w-5xl my-20 dots-background">
+  <h1 class="font-serif text-5xl font-medium tracking-tight">
+    Portfolio
+    <hr class="w-32 mt-0.5 h-1 bg-muted-foreground rounded-lg" />
+  </h1>
+  <p class="text-xl mt-4">
+    Here's some of the stuff I've worked on which I think is notable or interesting enough to write
+    about.
+  </p>
+  <h2 class="text-4xl font-serif font-medium mt-8">Projects</h2>
+  <hr class="w-32 mt-1 h-1 bg-muted-foreground rounded-lg" />
+  <Card.Root class="p-0 md:p-6 mt-8">
+    <Card.Header>
+      <Card.Title class="text-4xl font-serif tracking-normal font-medium">Jankboard</Card.Title>
+      <div class="w-24 h-1 bg-green-800 dark:bg-green-400 rounded-lg" />
+      <div class="flex flex-wrap gap-2 py-2">
+        <Badge>Robotics</Badge>
+        <Badge variant="secondary">License: GPLv3</Badge>
+        <Badge variant="outline">Web Technology</Badge>
+        <Badge variant="outline">Rust</Badge>
+      </div>
+    </Card.Header>
+    <Card.Content class="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <div class="col-span-2 flex flex-col justify-between">
+        <div class="space-y-4 text-lg">
+          <p>
+            Jankboard is a fully custom control dashboard for Team 1280's robot competing in the
+            2024 season of the FIRST Robotics Competition.
+          </p>
+          <p>
+            It displays the robot's telemetry through a network connection established via the
+            NetworkTables protocol, including speed, orientation, acceleration, heading, and other
+            vital metrics. It also features a full 3D robot visualization and looks like a Tesla UI.
+            It was used in production for the first time at the <a
+              class="link"
+              href="https://cafirst.org/frc/centralvalley/">Central Valley Regional</a
+            >, where we made it to the playoffs as 2nd pick.
+          </p>
+          <p>
+            It's built with <a class="link" href="https://tauri.app/">Tauri</a>,
+            <a class="link" href="https://svelte.dev/">Svelte</a>, and
+            <a class="link" href="https://www.rust-lang.org/">Rust</a>.
+          </p>
+        </div>
+        <div class="flex flex-wrap gap-2 mt-8">
+          <Button
+            class="inline-flex gap-2 md:basis-auto basis-full"
+            href="https://github.com/youwen5/jankboard"><Image /> Gallery</Button
+          >
+          <Button
+            class="inline-flex gap-2 md:basis-auto basis-full"
+            href="https://github.com/youwen5/jankboard"
+            variant="outline"><Code /> Source</Button
+          >
+        </div>
+      </div>
+      <div class="flex justify-center md:justify-end col-span-1">
+        <img
+          src="/assets/portfolio/images/team-1280-logo.png"
+          alt="team 1280 logo"
+          class="border-2 border-muted rounded-lg p-2 w-full h-fit"
+        />
+      </div>
+    </Card.Content>
+  </Card.Root>
+  <h2 class="text-4xl font-serif font-medium mt-8">Research</h2>
+  <hr class="w-32 mt-1 h-1 bg-muted-foreground rounded-lg" />
+  <p class="text-lg mt-8">Nothing here for now...</p>
+</main>