feat: add mega projects page

src/lib/components/ProjectsListing/ProjectItem.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let primaryLink: string
+  export let title: string
+</script>
+
+<li class="border-2 border-muted rounded-lg p-2 bg-background hover:bg-secondary">
+  <a class="link font-semibold text-lg tracking-tight" href={primaryLink}>
+    {title}
+  </a>
+  <p class="text-lg leading-relaxed">
+    <slot />
+  </p>
+</li>

src/lib/components/ProjectsListing/ProjectsListing.svelte

@@ -0,0 +1,3 @@
+<ul class="space-y-4">
+  <slot />
+</ul>

src/routes/about/+page.svelte

@@ -8,7 +8,7 @@
 </svelte:head>
 
 <main class="dots-background">
-  <div class="max-w-3xl mx-auto pb-14 md:py-14 px-0 sm:px-8 justify-center">
+  <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">
         <Card.Title class="text-4xl">about.</Card.Title>

src/routes/portfolio/+page.svelte

@@ -12,7 +12,7 @@
   <meta name="author" content="Youwen Wu" />
 </svelte:head>
 
-<div class="md:dots-background py-20">
+<div class="md:dots-background 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
@@ -24,6 +24,12 @@
     </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" />
+    <p class="mt-4 text-lg leading-relaxed">
+      Below are some selected projects I am particularly proud of. You can also view <a
+        href="/projects"
+        class="link">all of my projects</a
+      > here.
+    </p>
     <Card.Root class="p-0 md:p-6 mt-8">
       <Card.Header>
         <span class="inline-flex items-center gap-2">

src/routes/projects/+page.svelte

@@ -0,0 +1,82 @@
+<script>
+  import ProjectsListing from '$lib/components/ProjectsListing/ProjectsListing.svelte'
+  import ProjectItem from '$lib/components/ProjectsListing/ProjectItem.svelte'
+</script>
+
+<svelte:head>
+  <title>Projects | Youwen Wu</title>
+</svelte:head>
+
+<div class="dots-background py-12">
+  <main class="max-w-3xl px-4 mx-auto">
+    <p class="text-xl leading-relaxed border-2 border-accent bg-background p-2 rounded-lg">
+      Below is a list of most of the projects I've worked on, in no particular order. My most
+      notable projects are also displayed in greater detail <a class="link" href="/portfolio"
+        >on my portfolio.</a
+      >
+    </p>
+    <hr class="border-0 h-3 w-12 mx-auto rounded-lg bg-zinc-600 dark:bg-zinc-300 my-6" />
+    <ProjectsListing>
+      <ProjectItem
+        title="Jankboard"
+        primaryLink="https://github.com/youwen5/jankboard/releases/tag/app-v0.2.0"
+      >
+        TypeScript, Svelte, Rust - a driver dashboard for Team 1280's 2024 competition robot. <a
+          class="link"
+          href="https://github.com/youwen5/jankboard">Source on GitHub.</a
+        > Licensed under GPL.
+      </ProjectItem>
+      <ProjectItem title="Dartgun" primaryLink="https://github.com/youwen5/dartgun">
+        Rust - a minimal dotfile manager. Licensed under GPL.
+      </ProjectItem>
+      <ProjectItem title="This site" primaryLink="https://youwen.dev">
+        TypeScript, Svelte - This website. <a href="https://github.com/youwen5/site" class="link"
+          >Source on GitHub.</a
+        > Licensed under MIT.
+      </ProjectItem>
+      <ProjectItem title="Blog" primaryLink="https://blog.youwen.dev">
+        Haskell, HTML/CSS/JS - My blog, Gradient Ascent. Titled after the incremental
+        function-optimizing technique of the same name. Built with Hakyll, a Haskell SSG library. <a
+          href="https://github.com/youwen5/blog"
+          class="link">Source on GitHub</a
+        >. Licensed under BSD 3-Clause, MIT, and CC-BY-NC-SA 4.0.
+      </ProjectItem>
+      <ProjectItem title="tally-rs" primaryLink="https://github.com/youwen5/tally-rs">
+        Rust - a collection of ranked choice voting algorithms. Licensed under LGPL.
+      </ProjectItem>
+      <ProjectItem
+        title="AP Exam Template"
+        primaryLink="https://www.overleaf.com/read/kqyyygvfntng#f382d8"
+      >
+        LaTeX - a template that aims to simulate the look of an AP Exam. <a
+          href="https://github.com/youwen5/ap-latex-template"
+          class="link">Source on GitHub.</a
+        > Licensed under GPL.
+      </ProjectItem>
+      <ProjectItem title="eexiv" primaryLink="https://www.eexiv.org">
+        NextJS, React - A website for Team 1280 members and alumni to host research and technical
+        papers, as well as archive past ones. <a
+          href="https://github.com/youwen5/eexiv"
+          class="link">Source on GitHub.</a
+        > Licensed under GPL.
+      </ProjectItem>
+      <ProjectItem title="Crescendo" primaryLink="https://github.com/team-1280">
+        Java - Team 1280's 2024 season robot code. Closed source for now, so it currently just links
+        to Team 1280's GitHub organization.
+      </ProjectItem>
+      <ProjectItem title="zhishidian" primaryLink="https://github.com/youwen5/zhishidian">
+        React - A Twitter-esque site I made way back in 2020 to help friends and family connect. Now
+        defunct due to AWS services being turned off. Licensed under MIT.
+      </ProjectItem>
+      <ProjectItem title="presenter" primaryLink="https://econ.youwen.dev">
+        Svelte, Python - A fancy AP Microeconomics presentation, generated by <a
+          href="https://www.manim.community/"
+          class="link">Manim</a
+        >
+        and hosted in a website.
+        <a href="https://github.com/youwen5/presenter" class="link">Source on GitHub</a>. Licensed
+        under MIT.
+      </ProjectItem>
+    </ProjectsListing>
+  </main>
+</div>

src/routes/projects/+page.ts

@@ -0,0 +1 @@
+export const prerender = true