diff --git a/assets/images/langs/android.svg b/assets/images/langs/android.svg
new file mode 100644
index 0000000..8d6168c
--- /dev/null
+++ b/assets/images/langs/android.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-147 -70 294 345">
+<g fill="#a4c639">
+<use stroke-width="14.4" xlink:href="#b" stroke="#FFF"/>
+<use xlink:href="#a" transform="scale(-1,1)"/>
+<g id="a" stroke="#FFF" stroke-width="7.2">
+<rect rx="6.5" transform="rotate(29)" height="86" width="13" y="-86" x="14"/>
+<rect id="c" rx="24" height="133" width="48" y="41" x="-143"/>
+<use y="97" x="85" xlink:href="#c"/>
+</g>
+<g id="b">
+<ellipse cy="41" rx="91" ry="84"/>
+<rect rx="22" height="182" width="182" y="20" x="-91"/>
+</g>
+</g>
+<g stroke="#FFF" stroke-width="7.2" fill="#FFF">
+<path d="m-95 44.5h190"/><circle cx="-42" r="4"/><circle cx="42" r="4"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/assets/images/langs/flutter.svg b/assets/images/langs/flutter.svg
new file mode 100644
index 0000000..efe7070
--- /dev/null
+++ b/assets/images/langs/flutter.svg
@@ -0,0 +1 @@
+<svg id="logo_vector" data-name="logo vector" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 371.43"><defs><style>.cls-1{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{isolation:isolate;opacity:0.2;}.cls-4{fill:#54c5f8;}.cls-5{fill:#01579b;}.cls-6{fill:url(#linear-gradient);}.cls-7{fill:#29b6f6;}.cls-8{fill:url(#radial-gradient);}</style><clipPath id="clip-path"><path class="cls-1" d="M300,171.43l-100,100,100,100H185.72l-42.86-42.86h0L85.71,271.42l100-100ZM185.72,0,0,185.72l57.15,57.15L300,0Z"/></clipPath><linearGradient id="linear-gradient" x1="6254.1" y1="5576.56" x2="6424.34" y2="5406.31" gradientTransform="translate(-1404 -1054.53) scale(0.25)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1a237e" stop-opacity="0.4"/><stop offset="1" stop-color="#1a237e" stop-opacity="0"/></linearGradient><radialGradient id="radial-gradient" cx="5649.77" cy="4319.41" r="1817.72" gradientTransform="translate(-1404 -1054.53) scale(0.25)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity="0.1"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs><g class="cls-2"><image class="cls-3" width="125" height="97" transform="translate(67.54 154.53) scale(2.14)" xlink:href="data:image/png;base64,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"/><polygon class="cls-4" points="300 171.43 300 171.43 300 171.43 185.72 171.43 85.73 271.44 142.85 328.57 300 171.43"/></g><g class="cls-2"><polygon class="cls-4" points="57.15 242.87 0 185.72 185.72 0 300 0 57.15 242.87"/></g><g class="cls-2"><polygon class="cls-5" points="142.85 328.57 185.72 371.44 300 371.44 300 371.44 200.01 271.44 142.85 328.57"/></g><g class="cls-2"><polygon class="cls-6" points="142.85 328.57 227.61 299.24 200.01 271.44 142.85 328.57"/></g><g class="cls-2"><rect class="cls-7" x="102.45" y="231.03" width="80.81" height="80.81" transform="translate(-150.09 180.52) rotate(-45)"/></g><path class="cls-8" d="M300,171.43l-100,100,100,100H185.72l-42.86-42.86h0L85.71,271.42l100-100ZM185.72,0,0,185.72l57.15,57.15L300,0Z"/></svg>
\ No newline at end of file
diff --git a/assets/images/langs/java.svg b/assets/images/langs/java.svg
new file mode 100644
index 0000000..fc6665f
--- /dev/null
+++ b/assets/images/langs/java.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 32 32"><path d="M11.622 24.74s-1.23.748.855.962c2.51.32 3.847.267 6.625-.267a10.02 10.02 0 0 0 1.763.855c-6.25 2.672-14.16-.16-9.244-1.55zm-.8-3.473s-1.336 1.015.748 1.23c2.725.267 4.862.32 8.55-.427a3.26 3.26 0 0 0 1.282.801c-7.534 2.244-15.976.214-10.58-1.603zm14.747 6.09s.908.748-1.015 1.336c-3.58 1.07-15.014 1.39-18.22 0-1.122-.48 1.015-1.175 1.7-1.282.695-.16 1.07-.16 1.07-.16-1.23-.855-8.175 1.763-3.526 2.51 12.77 2.084 23.296-.908 19.983-2.404zM12.2 17.633s-5.824 1.39-2.084 1.87c1.603.214 4.755.16 7.694-.053 2.404-.214 4.81-.64 4.81-.64s-.855.374-1.443.748c-5.93 1.55-17.312.855-14.052-.748 2.778-1.336 5.076-1.175 5.076-1.175zm10.42 5.824c5.984-3.1 3.206-6.09 1.282-5.717-.48.107-.695.214-.695.214s.16-.32.534-.427c3.794-1.336 6.786 4.007-1.23 6.09 0 0 .053-.053.107-.16zm-9.83 8.442c5.77.374 14.587-.214 14.8-2.94 0 0-.427 1.07-4.755 1.87-4.916.908-11.007.8-14.587.214 0 0 .748.64 4.542.855z" fill="#4e7896"/><path d="M18.996.001s3.313 3.366-3.152 8.442c-5.183 4.114-1.175 6.465 0 9.137-3.046-2.725-5.236-5.13-3.74-7.373C14.294 6.893 20.332 5.3 18.996.001zm-1.7 15.335c1.55 1.763-.427 3.366-.427 3.366s3.954-2.03 2.137-4.542c-1.656-2.404-2.94-3.58 4.007-7.587 0 0-10.953 2.725-5.717 8.763z" fill="#f58219"/></svg>
\ No newline at end of file
diff --git a/assets/images/langs/javascript.svg b/assets/images/langs/javascript.svg
new file mode 100644
index 0000000..23243bb
--- /dev/null
+++ b/assets/images/langs/javascript.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M0,0 L256,0 L256,256 L0,256 L0,0 Z" fill="#F7DF1E"></path>
+        <path d="M67.311746,213.932292 L86.902654,202.076241 C90.6821079,208.777346 94.1202286,214.447137 102.367086,214.447137 C110.272203,214.447137 115.256076,211.354819 115.256076,199.326883 L115.256076,117.528787 L139.313575,117.528787 L139.313575,199.666997 C139.313575,224.58433 124.707759,235.925943 103.3984,235.925943 C84.1532952,235.925943 72.9819429,225.958603 67.3113397,213.93026" fill="#000000"></path>
+        <path d="M152.380952,211.354413 L171.969422,200.0128 C177.125994,208.433981 183.827911,214.619835 195.684368,214.619835 C205.652521,214.619835 212.009041,209.635962 212.009041,202.762159 C212.009041,194.513676 205.479416,191.592025 194.481168,186.78207 L188.468419,184.202565 C171.111213,176.81473 159.597308,167.53534 159.597308,147.944838 C159.597308,129.901308 173.344508,116.153295 194.825752,116.153295 C210.119924,116.153295 221.117765,121.48094 229.021663,135.400432 L210.29059,147.428775 C206.166146,140.040127 201.699556,137.119289 194.826159,137.119289 C187.78047,137.119289 183.312254,141.587098 183.312254,147.428775 C183.312254,154.646349 187.78047,157.568406 198.089956,162.036622 L204.103924,164.614095 C224.553448,173.378641 236.067352,182.313448 236.067352,202.418387 C236.067352,224.071924 219.055137,235.927975 196.200432,235.927975 C173.860978,235.927975 159.425829,225.274311 152.381359,211.354413" fill="#000000"></path>
+    </g>
+</svg>
diff --git a/assets/images/langs/markdown.svg b/assets/images/langs/markdown.svg
new file mode 100644
index 0000000..171ea25
--- /dev/null
+++ b/assets/images/langs/markdown.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="208" height="128" viewBox="0 0 208 128"><rect width="198" height="118" x="5" y="5" ry="10" stroke="#000" stroke-width="10" fill="none"/><path d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39zm125 0l-30-33h20V30h20v35h20z"/></svg>
\ No newline at end of file
diff --git a/assets/images/langs/python.svg b/assets/images/langs/python.svg
new file mode 100644
index 0000000..9a09699
--- /dev/null
+++ b/assets/images/langs/python.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="110px" height="110px" viewBox="0.21 -0.077 110 110" enable-background="new 0.21 -0.077 110 110" xml:space="preserve"><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="63.8159" y1="56.6829" x2="118.4934" y2="1.8225" gradientTransform="matrix(1 0 0 -1 -53.2974 66.4321)"> <stop offset="0" style="stop-color:#387EB8"/> <stop offset="1" style="stop-color:#366994"/></linearGradient><path fill="url(#SVGID_1_)" d="M55.023-0.077c-25.971,0-26.25,10.081-26.25,12.156c0,3.148,0,12.594,0,12.594h26.75v3.781 c0,0-27.852,0-37.375,0c-7.949,0-17.938,4.833-17.938,26.25c0,19.673,7.792,27.281,15.656,27.281c2.335,0,9.344,0,9.344,0 s0-9.765,0-13.125c0-5.491,2.721-15.656,15.406-15.656c15.91,0,19.971,0,26.531,0c3.902,0,14.906-1.696,14.906-14.406 c0-13.452,0-17.89,0-24.219C82.054,11.426,81.515-0.077,55.023-0.077z M40.273,8.392c2.662,0,4.813,2.15,4.813,4.813 c0,2.661-2.151,4.813-4.813,4.813s-4.813-2.151-4.813-4.813C35.46,10.542,37.611,8.392,40.273,8.392z"/><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="97.0444" y1="21.6321" x2="155.6665" y2="-34.5308" gradientTransform="matrix(1 0 0 -1 -53.2974 66.4321)"> <stop offset="0" style="stop-color:#FFE052"/> <stop offset="1" style="stop-color:#FFC331"/></linearGradient><path fill="url(#SVGID_2_)" d="M55.397,109.923c25.959,0,26.282-10.271,26.282-12.156c0-3.148,0-12.594,0-12.594H54.897v-3.781 c0,0,28.032,0,37.375,0c8.009,0,17.938-4.954,17.938-26.25c0-23.322-10.538-27.281-15.656-27.281c-2.336,0-9.344,0-9.344,0 s0,10.216,0,13.125c0,5.491-2.631,15.656-15.406,15.656c-15.91,0-19.476,0-26.532,0c-3.892,0-14.906,1.896-14.906,14.406 c0,14.475,0,18.265,0,24.219C28.366,100.497,31.562,109.923,55.397,109.923z M70.148,101.454c-2.662,0-4.813-2.151-4.813-4.813 s2.15-4.813,4.813-4.813c2.661,0,4.813,2.151,4.813,4.813S72.809,101.454,70.148,101.454z"/></svg>
\ No newline at end of file
diff --git a/assets/images/langs/react.svg b/assets/images/langs/react.svg
new file mode 100644
index 0000000..e07b101
--- /dev/null
+++ b/assets/images/langs/react.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-11.5 -10.23174 23 20.46348">
+  <title>React Logo</title>
+  <circle cx="0" cy="0" r="2.05" fill="#61dafb"/>
+  <g stroke="#61dafb" stroke-width="1" fill="none">
+    <ellipse rx="11" ry="4.2"/>
+    <ellipse rx="11" ry="4.2" transform="rotate(60)"/>
+    <ellipse rx="11" ry="4.2" transform="rotate(120)"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/assets/images/langs/typescript.svg b/assets/images/langs/typescript.svg
new file mode 100644
index 0000000..cacdb6f
--- /dev/null
+++ b/assets/images/langs/typescript.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512" height="512" fill="none" version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+<title>TypeScript logo</title>
+ <rect width="512" height="512" rx="50" fill="#3178c6"/>
+ <path d="m317 407v50c8.1 4.2 18 7.3 29 9.4s23 3.1 35 3.1c12 0 23-1.1 34-3.4 11-2.3 20-6.1 28-11 8.1-5.3 15-12 19-21s7.1-19 7.1-32c0-9.1-1.4-17-4.1-24s-6.6-13-12-18c-5.1-5.3-11-10-18-14s-15-8.2-24-12c-6.6-2.7-12-5.3-18-7.9-5.2-2.6-9.7-5.2-13-7.8-3.7-2.7-6.5-5.5-8.5-8.4-2-3-3-6.3-3-10 0-3.4 0.89-6.5 2.7-9.3s4.3-5.1 7.5-7.1c3.2-2 7.2-3.5 12-4.6 4.7-1.1 9.9-1.6 16-1.6 4.2 0 8.6 0.31 13 0.94 4.6 0.63 9.3 1.6 14 2.9 4.7 1.3 9.3 2.9 14 4.9 4.4 2 8.5 4.3 12 6.9v-47c-7.6-2.9-16-5.1-25-6.5s-19-2.1-31-2.1c-12 0-23 1.3-34 3.8s-20 6.5-28 12c-8.1 5.4-14 12-19 21-4.7 8.4-7 18-7 30 0 15 4.3 28 13 38 8.6 11 22 19 39 27 6.9 2.8 13 5.6 19 8.3s11 5.5 15 8.4c4.3 2.9 7.7 6.1 10 9.5 2.5 3.4 3.8 7.4 3.8 12 0 3.2-0.78 6.2-2.3 9s-3.9 5.2-7.1 7.2-7.1 3.6-12 4.8c-4.7 1.1-10 1.7-17 1.7-11 0-22-1.9-32-5.7-11-3.8-21-9.5-30-17zm-84-123h64v-41h-179v41h64v183h51z" clip-rule="evenodd" fill="#fff" fill-rule="evenodd" style="fill:#fff"/>
+</svg>
\ No newline at end of file
diff --git a/assets/images/langs/vue.svg b/assets/images/langs/vue.svg
new file mode 100644
index 0000000..271db25
--- /dev/null
+++ b/assets/images/langs/vue.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"/></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"/></g></g></svg>
\ No newline at end of file
diff --git a/assets/images/projects/jeopardy.webp b/assets/images/projects/jeopardy.webp
new file mode 100644
index 0000000..2c9c43a
Binary files /dev/null and b/assets/images/projects/jeopardy.webp differ
diff --git a/assets/images/projects/primoprod.webp b/assets/images/projects/primoprod.webp
new file mode 100644
index 0000000..7337ae2
Binary files /dev/null and b/assets/images/projects/primoprod.webp differ
diff --git a/components/ProjectCard.vue b/components/ProjectCard.vue
index 25e7fd0..755d92f 100644
--- a/components/ProjectCard.vue
+++ b/components/ProjectCard.vue
@@ -1,45 +1,88 @@
 <script setup lang="ts">
-const props = defineProps<{
-  name: string;
-  href: string;
-  img: string;
+import type { Project } from "@/data/projects";
+const { project, reverse = false } = defineProps<{
+  project: Project;
+  reverse?: boolean;
 }>();
+/*
+name
+description
+language
+license?
+date?
+
+image
+*/
+
+const imgUrl = `url(/assets/images/projects/${project.img ?? ""})`;
 </script>
 
 <template>
-  <a :href="href" class="no-underline">
-    <div class="card flex flex-col items-center justify-around">
-      <img class="m-0" :src="img" />
-      <h3 class="m-0">{{ props.name }}</h3>
-      <p class="desc-text text-gray-600 dark:text-gray-200"><slot /></p>
+  <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>
+          <h3 class="m-0">{{ project.name }}</h3>
+          <div class="flex gap-1 items-center">
+            <img
+              class="h-5 w-5 m-0"
+              :src="`/assets/images/langs/${lang}.svg`"
+              v-for="(lang, index) in project.langs"
+              :key="index"
+            />
+            <span class="text-xs text-gray-500"
+              >· {{ project.license ?? "no license" }}</span
+            >
+          </div>
+        </div>
+        <p class="desc-text text-gray-600 dark:text-gray-200">
+          <slot />
+        </p>
+      </div>
+      <div class="card-img h-full p-4 flex" />
     </div>
   </a>
 </template>
 
 <style scoped>
-img {
-  width: 6rem;
+.project-anchor {
+  display: inline-block;
+  width: 100%;
 }
 
 .card {
-  padding: 1rem;
   border: 0.2rem solid pink;
-  background: rgb(255, 237, 241);
-  border-radius: 0.5rem;
-  width: 12rem;
+  background: white;
+  border-radius: 1.5rem 0 1.5rem 0;
   height: 12rem;
   line-height: 1.25;
   transition: all 0.2s ease;
+  box-shadow: 0 0.1rem 0.5rem 0 gray;
 }
 
 html.dark .card {
   border: 0.2rem solid rgb(126, 93, 98);
   background: rgb(110, 90, 92);
+  box-shadow: 0 0.1rem 0.5rem 0 black;
 }
 
 .card:hover,
 .card:active {
-  transform: scale(1.05);
+  transform: scale(1.03);
+}
+
+.card-text {
+  width: 25%;
+  border-radius: 1.5rem 0 0 0;
+}
+
+.card-img {
+  width: 75%;
+  background: v-bind(imgUrl);
+  background-color: rgb(255, 237, 241);
+  background-position: right 90% top 15%;
+  background-size: 100%;
+  border-radius: 0 0 1.5rem 100%;
 }
 
 .desc-text {
diff --git a/components/index/about.vue b/components/index/about.vue
index ef71c86..cfa6e1a 100644
--- a/components/index/about.vue
+++ b/components/index/about.vue
@@ -4,7 +4,19 @@ import { projects } from "@/data/projects";
 
 <template>
   <div class="prose dark:prose-invert w-full flex flex-col mt-9">
-    <h1 id="about" class="text-center mb-4">About</h1>
+    <h1 class="text-center mb-0">Fun things</h1>
+    <p class="text-center">(aka my programming projects)</p>
+    <div class="flex flex-col items-center justify-around gap-5 mt-6">
+      <ProjectCard
+        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>
 
     <!-- this could be in markdown but eh -->
     <p>
@@ -47,20 +59,6 @@ import { projects } from "@/data/projects";
       <li><strong>Storage:</strong> 300 GB hard drive</li>
       <li><strong>OS:</strong> Arch Linux</li>
     </ul>
-
-    <h1 class="text-center mb-0 mt-8">Fun things</h1>
-    <p class="text-center mb-4">(aka my programming projects)</p>
-    <div class="flex flex-col items-center justify-around gap-5">
-      <ProjectCard
-        v-for="(proj, index) in projects"
-        :name="proj.name"
-        :href="proj.href"
-        img=""
-        :key="index"
-      >
-        {{ proj.description }}
-      </ProjectCard>
-    </div>
   </div>
 </template>
 
diff --git a/data/projects.ts b/data/projects.ts
index 99f37f8..783a2a2 100644
--- a/data/projects.ts
+++ b/data/projects.ts
@@ -1,28 +1,102 @@
-export const projects = [
+export type Language =
+  | "python"
+  | "javascript"
+  | "java"
+  | "typescript"
+  | "vue"
+  | "react"
+  | "markdown"
+  | "flutter"
+  | "android";
+export interface Project {
+  name: string;
+  href: string;
+  img?: string;
+  description?: string;
+  langs: Language[];
+  license?: "AGPL-3.0" | "GPL-3.0" | "MIT" | "LGPL-3.0";
+}
+
+export const projects: Project[] = [
   {
-    name: "mandown",
+    name: "Mandown",
     href: "https://github.com/potatoeggy/mandown",
     description: "I couldn't find one so I made one",
+    langs: ["python"],
+    license: "LGPL-3.0",
+  },
+  {
+    name: "Noveldown",
+    href: "https://github.com/potatoeggy/noveldown",
+    langs: ["python"],
+    license: "LGPL-3.0",
+  },
+  {
+    name: "Jeopardy",
+    href: "https://github.com/potatoeggy/jeopardy",
+    img: "jeopardy.webp",
+    langs: ["typescript", "vue"],
+    license: "AGPL-3.0",
+  },
+  {
+    name: "Primoprod",
+    href: "https://github.com/potatoeggy/primoprod",
+    img: "primoprod.webp",
+    langs: ["typescript", "vue"],
+    license: "AGPL-3.0",
+  },
+  {
+    name: "Eifueo",
+    href: "https://github.com/potatoeggy/eifueo",
+    langs: ["markdown"],
+    license: "GPL-3.0",
+  },
+  {
+    name: "Napbot",
+    href: "https://github.com/potatoeggy/napbot",
+    langs: ["python"],
+    license: "AGPL-3.0",
+  },
+  {
+    name: "Resketch",
+    href: "https://github.com/anyuan-chen/resketch",
+    langs: ["typescript", "react"],
+  },
+  {
+    name: "Perdiem",
+    href: "https://github.com/anyuan-chen/perdiem",
+    langs: ["javascript", "react"],
+    license: "AGPL-3.0",
   },
-  { name: "noveldown", href: "https://github.com/potatoeggy/noveldown" },
-  { name: "jeopardy", href: "https://github.com/potatoeggy/jeopardy" },
-  { name: "Eifueo", href: "https://github.com/potatoeggy/eifueo" },
-  { name: "Napbot", href: "https://github.com/potatoeggy/napbot" },
-  { name: "Resketch", href: "https://github.com/anyuan-chen/resketch" },
-  { name: "Perdiem", href: "https://github.com/anyuan-chen/perdiem" },
   {
     name: "RecipeReady",
     href: "https://github.com/christopherlam888/recipe-ready-frontend",
+    langs: ["python", "android", "flutter"],
+  },
+  {
+    name: "Flashnote",
+    href: "https://github.com/potatoeggy/flashnote",
+    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",
   },
-  { name: "YTMusicDL", href: "https://github.com/potatoeggy/YTMusicDL" },
-  { name: "emufeed", href: "https://github.com/potatoeggy/emufeed" },
-  { name: "Flashnote", href: "https://github.com/potatoeggy/flashnote" },
-  { name: "Rooster", href: "https://github.com/potatoeggy/rooster" },
-  { name: "AutoFicFare", href: "https://github.com/potatoeggy/autoficfare" },
   {
     name: "public",
     href: "https://github.com/potatoeggy/public",
     description: "This website!",
+    langs: ["typescript", "vue"],
+    license: "AGPL-3.0",
   },
 ];
 
diff --git a/pages/about.vue b/pages/about.vue
deleted file mode 100644
index cd90776..0000000
--- a/pages/about.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-useTitle("About");
-</script>
-
-<template>
-  <div>about</div>
-</template>