feat: add program cards

components/ProjectCard.vue

@@ -20,7 +20,8 @@ const imgUrl = `url(/assets/images/projects/${project.img ?? ""})`;
 <template>
   <a :href="project.href" class="no-underline project-anchor">
     <div class="card flex items-center justify-between">
-      <div class="card-text h-full bg-white p-4 pt-2">
+      <div class="card-text h-full px-4 py-2">
+        <div class="h-full flex flex-col justify-between">
           <div>
             <h3 class="m-0">{{ project.name }}</h3>
             <div class="flex gap-1 items-center flex-nowrap">
@@ -30,14 +31,25 @@ const imgUrl = `url(/assets/images/projects/${project.img ?? ""})`;
                 v-for="(lang, index) in project.langs"
                 :key="index"
               />
-            <span class="text-xs text-gray-500 whitespace-nowrap"
+              <span
+                class="text-xs text-gray-500 dark:text-gray-300 whitespace-nowrap"
                 >· {{ project.license ?? "no license" }}</span
               >
             </div>
           </div>
-        <p class="desc-text text-gray-600 dark:text-gray-200">
+          <div class="flex flex-col justify-between grow">
-          <slot />
+            <p
+              class="desc-text text-gray-600 dark:text-gray-200 mt-3 mb-0 text-left text-sm"
+            >
+              {{ project.description }}
             </p>
+            <p
+              class="desc-text text-gray-600 dark:text-gray-200 text-left text-sm m-0 whitespace-nowrap"
+            >
+              {{ project.longDescription }}
+            </p>
+          </div>
+        </div>
       </div>
       <div class="card-img h-full p-4 flex" />
     </div>
@@ -62,7 +74,7 @@ const imgUrl = `url(/assets/images/projects/${project.img ?? ""})`;
 
 html.dark .card {
   border: 0.2rem solid rgb(126, 93, 98);
-  background: rgb(110, 90, 92);
+  background: #444;
   box-shadow: 0 0.1rem 0.5rem 0 black;
 }
 
@@ -73,10 +85,15 @@ html.dark .card {
 
 .card-text {
   width: 25%;
+  background: white;
   border-radius: 1.5rem 0 0 0;
   transition: width 0.2s ease;
 }
 
+html.dark .card-text {
+  background: #444;
+}
+
 .card-img {
   width: 75%;
   background: v-bind(imgUrl);
@@ -88,10 +105,14 @@ html.dark .card {
   transition: width 0.2s ease;
 }
 
+html.dark .card-img {
+  background-color: rgb(180, 136, 143);
+}
+
 .desc-text {
-  font-size: 0.8rem;
+  width: 139%;
-  margin: 0;
+  /* 140% is too close */
-  text-align: center;
+  transition: width 0.2s ease;
 }
 
 a.unclickable {
@@ -106,15 +127,24 @@ a.unclickable {
   .card-img {
     width: 70%;
   }
+
+  .desc-text {
+    width: 135%;
+  }
 }
 
 @media screen and (max-width: 540px) {
   .card-text {
-    width: 37.5%;
+    width: 45%;
   }
 
   .card-img {
-    width: 62.5%;
+    width: 55%;
+  }
+
+  .desc-text {
+    width: 120%;
+    font-size: 0.72rem;
   }
 }
 </style>

components/index/about.vue

@@ -11,9 +11,7 @@ import { projects } from "@/data/projects";
         v-for="(proj, index) in projects"
         :project="proj"
         :key="index"
-      >
+      />
-        {{ proj.description }}
-      </ProjectCard>
     </div>
 
     <h1 id="about" class="text-center mb-4 mt-8">About</h1>

data/projects.ts

@@ -13,6 +13,7 @@ export interface Project {
   href: string;
   img?: string;
   description?: string;
+  longDescription?: string;
   langs: Language[];
   license?: "AGPL-3.0" | "GPL-3.0" | "MIT" | "LGPL-3.0";
 }
@@ -21,15 +22,21 @@ export const projects: Project[] = [
   {
     name: "Mandown",
     href: "https://github.com/potatoeggy/mandown",
-    description: "I couldn't find one so I made one",
+    description:
+      "A comic downloader and converter to CBZ / EPUB / PDF for my Kobo.",
+    longDescription: "Available via CLI and a Qt GUI!",
     langs: ["python"],
     license: "LGPL-3.0",
+    img: "mandown.webp",
   },
   {
     name: "Noveldown",
     href: "https://github.com/potatoeggy/noveldown",
     langs: ["python"],
     license: "LGPL-3.0",
+    description:
+      "A webnovel downloader and converter to EPUB for my Kobo, with lots of metadata!",
+    longDescription: "Heavily borrows Mandown's design.",
   },
   {
     name: "Jeopardy",
@@ -37,6 +44,8 @@ export const projects: Project[] = [
     img: "jeopardy.webp",
     langs: ["typescript", "vue"],
     license: "AGPL-3.0",
+    description: "Kahoot-inspired Jeopardy! game, including Final Jeopardy!",
+    longDescription: "Created for Bayview's Computer Club.",
   },
   {
     name: "Primoprod",
@@ -44,59 +53,72 @@ export const projects: Project[] = [
     img: "primoprod.webp",
     langs: ["typescript", "vue"],
     license: "AGPL-3.0",
+    description:
+      "A game simulator to increase productivity with quests and gambling.",
+    longDescription: "My first project with a JS framework!",
   },
   {
     name: "Eifueo",
     href: "https://github.com/potatoeggy/eifueo",
     langs: ["markdown"],
     license: "GPL-3.0",
+    img: "eifueo.webp",
+    description: "A collection of rewritten notes to remember things better.",
+    longDescription: "THIS IS NOT A TEXTBOOK.",
   },
   {
     name: "Napbot",
     href: "https://github.com/potatoeggy/napbot",
     langs: ["python"],
     license: "AGPL-3.0",
+    description:
+      "A Discord bot initially to track sleep hours as friendly competition but is now a local music bot with synchronised lyrics!",
+    img: "napbot.webp",
   },
   {
     name: "Resketch",
     href: "https://github.com/anyuan-chen/resketch",
     langs: ["typescript", "react"],
+    img: "resketch.webp",
+    description:
+      'A "reverse-Pictionary" where you compete to have an AI recognise your drawings.',
+    longDescription: "Written for YRHacks 2022.",
   },
   {
     name: "Perdiem",
     href: "https://github.com/anyuan-chen/perdiem",
     langs: ["javascript", "react"],
     license: "AGPL-3.0",
+    img: "perdiem.webp",
+    description:
+      "A pretty budget tracking app where I learned too much about server-side rendering.",
+    longDescription: "Written for StormHacks 2022.",
   },
   {
     name: "RecipeReady",
     href: "https://github.com/christopherlam888/recipe-ready-frontend",
     langs: ["python", "android", "flutter"],
-  },
+    img: "recipeready.webp",
-  {
+    description:
-    name: "Flashnote",
+      "Android app to automagically plan meals and prepare a shopping list so you don't have to.",
-    href: "https://github.com/potatoeggy/flashnote",
+    longDescription: "Written for Hack the North 2021.",
-    langs: ["java", "android"],
-    license: "GPL-3.0",
-  },
-  {
-    name: "Rooster",
-    href: "https://github.com/potatoeggy/rooster",
-    langs: ["python"],
-    license: "GPL-3.0",
   },
   {
     name: "AutoFicFare",
     href: "https://github.com/potatoeggy/autoficfare",
     langs: ["python"],
     license: "GPL-3.0",
+    description:
+      "Automatically update fanfiction in a Calibre database to instantly update them on your Kobo.",
   },
   {
-    name: "public",
+    name: "Website",
     href: "https://github.com/potatoeggy/public",
-    description: "This website!",
+    description:
+      "This website! It's gone through three iterations before this one, and this one's the first to use a framework.",
     langs: ["typescript", "vue"],
     license: "AGPL-3.0",
+    img: "public.webp",
   },
 ];