feat: add about me page and update some styles

src/lib/app.css

@@ -109,6 +109,11 @@
       var(--dot-color);
   }
   .link {
-    @apply text-blue-500 dark:text-blue-600 hover:text-blue-600 dark:hover:text-blue-500 hover:underline visited:text-purple-500 dark:visited:text-purple-600;
+    @apply relative inline-block hover:text-violet-700 dark:hover:text-violet-600;
+  }
+
+  .link::after {
+    content: '';
+    @apply absolute w-full left-0 h-0.5 bottom-0.5 bg-violet-800 dark:bg-violet-500;
   }
 }

src/lib/components/Socials.svelte

@@ -19,7 +19,7 @@
     class="hover:scale-110 transition-transform"
     variant="ghost"
     size="icon"
-    href="https://github.com/couscousdude"
+    href="https://github.com/youwen5"
   >
     <GithubLogo />
   </Button>
@@ -27,7 +27,7 @@
     class="hover:scale-110 transition-transform"
     variant="ghost"
     size="icon"
-    href="https://www.instagram.com/uncle_uwon/"><InstagramLogo /></Button
+    href="https://www.instagram.com/youwenw5/"><InstagramLogo /></Button
   >
   <Button
     class="hover:scale-110 transition-transform"

src/routes/+page.svelte

@@ -1,5 +1,4 @@
 <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 { ArrowRight, GithubLogo } from 'svelte-radix'
@@ -31,18 +30,17 @@
       </Typewriter>
       <br />
       <Typewriter>
-        <p>Building efficient <b>free and open source</b> software.</p>
+        <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">More About Me</Button
+      <Button href="/about" size="lg" class="text-xl flex-grow sm:flex-grow-0">About Me</Button>
-      >
       <Button
         href="https://github.com/couscousdude"
         target="_blank"
         variant="outline"
         size="lg"
-        class="text-xl flex-grow sm:flex-grow-0"><GithubLogo class="mr-2" />My GitHub</Button
+        class="text-xl flex-grow sm:flex-grow-0"><GithubLogo class="mr-2" />GitHub</Button
       >
     </div>
     <div class="grid grid-cols-2 gap-4">
@@ -102,15 +100,12 @@
       </Card.Root>
       <Card.Root class="col-span-2">
         <Card.Header>
-          <Card.Title>Contact Me</Card.Title>
+          <Card.Title>What's new?</Card.Title>
         </Card.Header>
         <Card.Content>
-          <h3>Find me on:</h3>
+          This section will contain a feed of new projects, blog posts, and other stuff that I've
-          <Socials />
+          deemed "ready to display". For now, it has this text, because I'm too lazy to actually
-          <p class="mt-4">
+          implement this feature right now.
-            I read message requests everywhere but do not accept Discord friend requests if I don't
-            know you. The best way to reach me and receive a response is probably by email.
-          </p>
         </Card.Content>
       </Card.Root>
     </div>

src/routes/about/+page.svelte

@@ -1,9 +1,133 @@
-<script>
+<script lang="ts">
-  import UnderConstruction from '$lib/components/UnderConstruction.svelte'
+  import * as Card from '$lib/components/ui/card'
+  import Socials from '$lib/components/Socials.svelte'
 </script>
 
 <svelte:head>
   <title>About | Youwen Wu</title>
 </svelte:head>
 
-<UnderConstruction />
+<main class="dots-background">
+  <div class="container max-w-3xl mx-auto py-14 px-0 sm:px-8 justify-center">
+    <Card.Root class="sm:px-6 px-0">
+      <Card.Header class="inline-flex items-center">
+        <Card.Title class="text-4xl">about.</Card.Title>
+        <div class="w-full px-4 h-1.5 rounded-lg bg-muted-foreground" />
+      </Card.Header>
+      <Card.Content class="gap-8">
+        <div class="space-y-4">
+          <p class="text-2xl font-semibold">
+            Hi. I'm Youwen. I like to write - {'{code | essays | math}'}.
+          </p>
+          <p class="text-xl leading-relaxed">
+            I put most worthwhile things I do on my <a
+              href="https://github.com/youwen5"
+              class="link">GitHub</a
+            >. I write over at a blog called
+            <a class="link" href="https://blog.youwen.dev">Gradient Ascent</a>. You can check out my
+            <a class="link" href="/portfolio">portfolio</a>
+            right here on this site. You can skip down to my
+            <a class="link" href="#contact">contact info</a>, or keep reading.
+          </p>
+          <h2 class="text-3xl font-semibold tracking-tight">
+            coding.
+            <div class="w-24 h-1.5 rounded-lg bg-muted-foreground mt-1" />
+          </h2>
+          <p class="text-lg leading-relaxed">
+            I learned how to code when I was in 3rd grade (around 8-9 years old). Regrettably, I am
+            not a gifted genius and did not build a massive open source empire nor did I found a
+            startup before the age of 12. My projects consisted principally of crummy games or
+            terrible websites. I only really figured out the fundamentals in 2019 and started
+            working on actual projects at the tail end of 2023 (as you can tell from my GitHub
+            activity history). My biggest regret is spending the pandemic lockdown learning React
+            and web development in 2020 instead of becoming a cool kernel hacker or something.
+          </p>
+          <img
+            src="https://github.com/youwen5/youwen5/raw/main/profile-3d-contrib/profile-night-view.svg"
+            alt="github activity graph"
+            class="rounded-lg dark:block hidden"
+          />
+          <img
+            src="https://github.com/youwen5/youwen5/raw/main/profile-3d-contrib/profile-green-animate.svg"
+            alt="github activity graph"
+            class="rounded-lg dark:hidden"
+          />
+          <h2 class="text-3xl font-semibold tracking-tight">
+            hacking.
+            <div class="w-24 h-1.5 rounded-lg bg-muted-foreground mt-1" />
+          </h2>
+          <p class="text-lg leading-relaxed">
+            Most people I know in real life think that I am some kind of hacker - likely because
+            they once saw me open up a text terminal and update my packages with <code>pacman</code
+            >. I proclaim myself a hacker because I once learned how to create shoddy CRUD web
+            applications with fad web technologies and believe that places me in the same group as
+            Torvalds and the other hackers who build actual software.
+          </p>
+          <img
+            class="w-[350px] rounded-lg"
+            src="https://media.tenor.com/XUD0K8qLJYsAAAAe/how-linux-users-install-a-web-browser-linux.png"
+            alt="linux users installing a web browser"
+          />
+          <p class="text-lg leading-relaxed">
+            I do consider myself a hacker under <a
+              href="https://stallman.org/articles/on-hacking.html"
+              class="link">this definition</a
+            > of hacking, though.
+          </p>
+          <h2 class="text-3xl font-semibold tracking-tight">
+            math.
+            <div class="w-24 h-1.5 rounded-lg bg-muted-foreground mt-1" />
+          </h2>
+          <p class="text-lg leading-relaxed">
+            I learn about math I find interesting as a hobby. I also happen to be pursuing it an
+            undergraduate degree in it, soon.
+          </p>
+          <p class="text-lg leading-relaxed">
+            I tried doing math competitions in middle and early high school before I realized that
+            it wasn't for me (that's my way of saying that I couldn't hope to compete with the
+            prodigies). Still, I wholly recommend that anyone who likes math take a look at <a
+              href="https://artofproblemsolving.com/"
+              class="link">The Art of Problem Solving</a
+            > before stepping into calculus and beyond, as mathematical intuition and insight is magnitudes
+            more valuable than a shallow familiarity with formulas or integration methods.
+          </p>
+          <h2 class="text-3xl font-semibold tracking-tight">
+            other stuff.
+            <div class="w-24 h-1.5 rounded-lg bg-muted-foreground mt-1" />
+          </h2>
+          <p class="text-lg leading-relaxed">
+            Let's see. I play guitar, although I haven't had much time lately. I play video games
+            sometimes, <a href="https://steamcommunity.com/id/couscousdude/" class="link"
+              >here's my Steam profile</a
+            >.
+          </p>
+          <p class="text-lg leading-relaxed">
+            If for whatever reason you're interested in the tools I use on my computer, I have a <a
+              class="link"
+              href="/about/computing">brief page about it</a
+            >. I'm legally obligated to notify you that I run Arch Linux with a tiling window
+            manager and Neovim.
+          </p>
+          <p class="text-lg leading-relaxed">
+            This site contains a <a class="link" href="/colophon">colophon</a>, for those interested
+            in its inner workings.
+          </p>
+          <h2 class="text-3xl font-semibold tracking-tight" id="contact">
+            contact me.
+            <div class="w-24 h-1.5 rounded-lg bg-muted-foreground mt-1" />
+          </h2>
+          <p class="text-lg leading-relaxed">Find me on:</p>
+          <Socials />
+          <p class="text-lg leading-relaxed mt-4">
+            I read message requests everywhere but do not accept Discord friend requests if I don't
+            know you. The best way to reach me and receive a response is probably by email.
+          </p>
+          <p class="text-lg leading-relaxed">
+            If you notice any issues with or have any suggestions about this site or any of my
+            projects, feel free to send me an email or message about it.
+          </p>
+        </div></Card.Content
+      >
+    </Card.Root>
+  </div>
+</main>

src/routes/colophon/+page.svelte

@@ -0,0 +1,37 @@
+<main class="container mx-auto max-w-3xl my-20">
+  <div class="px-2">
+    <h1 class="text-4xl font-semibold tracking-tight">
+      colophon.
+      <div class="w-24 h-1.5 rounded-lg bg-muted-foreground mt-1" />
+    </h1>
+    <div class="space-y-4 mt-8">
+      <p class="leading-loose text-lg">
+        This site is built with the <a href="https://kit.svelte.dev/" class="link">SvelteKit</a>
+        full stack framework, itself a meta-framework of the
+        <a class="link" href="https://svelte.dev/">Svelte</a> web framework. The body font is
+        <a href="https://vercel.com/font" class="link">Vercel's Geist Sans</a>
+        and <a href="https://fonts.google.com/specimen/Merriweather" class="link">Merriweather</a> in
+        select parts.
+      </p>
+      <p class="leading-loose text-lg">
+        My <a class="link" href="https://blog.youwen.dev">blog</a> is generated by a static site
+        generator library called <a href="https://jaspervdj.be/hakyll/" class="link">Hakyll</a>,
+        which is configured with the Haskell programming language (you could consider it a Haskell
+        eDSL for configuring static sites). The web portions are raw HTML created by hand. I
+        leverage the Haskell library
+        <a class="link" href="https://pandoc.org/">Pandoc</a> to convert Markdown files into HTML
+        for each blog post. It gets perfect 100s across the board on Google's lighthouse test. The
+        serif font is
+        <a href="https://fonts.google.com/specimen/Merriweather" class="link">Merriweather</a>
+        and the sans-serif font is
+        <a href="https://fonts.google.com/specimen/Open+Sans" class="link">Open Sans</a>.
+      </p>
+      <p class="leading-loose text-lg">
+        The CSS on both sites is done with <a class="link" href="https://tailwindcss.com/"
+          >TailwindCSS</a
+        >. Tailwind is a terrible, ugly way to do CSS; however, every other method of doing CSS is
+        arguably worse.
+      </p>
+    </div>
+  </div>
+</main>