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>

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>

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>

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>

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>

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>

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>

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>

components/ProjectCard.vue

@@ -1,45 +1,88 @@
 <script setup lang="ts">
-const props = defineProps<{
+import type { Project } from "@/data/projects";
-  name: string;
+const { project, reverse = false } = defineProps<{
-  href: string;
+  project: Project;
-  img: string;
+  reverse?: boolean;
 }>();
+/*
+name
+description
+language
+license?
+date?
+
+image
+*/
+
+const imgUrl = `url(/assets/images/projects/${project.img ?? ""})`;
 </script>
 
 <template>
-  <a :href="href" class="no-underline">
+  <a :href="project.href" class="no-underline project-anchor">
-    <div class="card flex flex-col items-center justify-around">
+    <div class="card flex items-center justify-between">
-      <img class="m-0" :src="img" />
+      <div class="card-text h-full bg-white p-4 pt-2">
-      <h3 class="m-0">{{ props.name }}</h3>
+        <div>
-      <p class="desc-text text-gray-600 dark:text-gray-200"><slot /></p>
+          <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 {
+.project-anchor {
-  width: 6rem;
+  display: inline-block;
+  width: 100%;
 }
 
 .card {
-  padding: 1rem;
   border: 0.2rem solid pink;
-  background: rgb(255, 237, 241);
+  background: white;
-  border-radius: 0.5rem;
+  border-radius: 1.5rem 0 1.5rem 0;
-  width: 12rem;
   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 {

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>
 

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",
   },
 ];
 

pages/about.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts">
-useTitle("About");
-</script>
-
-<template>
-  <div>about</div>
-</template>