update project cards to include a feature list

src/data/projects.ts

@@ -4,7 +4,13 @@ const blubify: Project = {
   name: 'Blubify',
   thumbnail: 'blubify.png',
   thumbnailAlt: 'Thumbnail image showing a screenshot of the blubify web interface',
-  description: `Blubify is a self-hostable solution designed for music streaming and management within your private network. This is a passion project that is actively developed and maintained.`,
+  description: `Blubify is a self-hostable service designed for music streaming and management within your private network.`,
+  featureList: [
+    'Downloading audio from the YouTube API.',
+    'Node.js backend with Express.',
+    'Communicates with a MariaDB database using Kysely.',
+    'Music streaming using a chunked HTTP response.',
+  ],
   links: [
     {
       from: 'github',
@@ -21,6 +27,10 @@ const upscaleCli: Project = {
   thumbnailAlt: 'Thumbnail image showing a screenshot of the upscale-cli tool',
   description:
     'Upscale-CLI is a commandline interface tool designed for running and batching tasks using Real-ESRGAN, and allows for downloading and managing the models.',
+  featureList: [
+    'Downloads the REAL-ESRGAN models and extracts them automatically.',
+    'Allows for batching an entire folder of images to upscale in order.',
+  ],
   links: [
     {
       from: 'github',
@@ -36,7 +46,11 @@ const portfolio: Project = {
   thumbnail: 'portfolio.png',
   thumbnailAlt: 'Thumbnail image showing a screenshot of this portfolio website',
   description:
-    'Besides being used as a portfolio, it is a playground for experimenting with different simulations and animations for the banner. Automated deployment using GitHub Actions to GitHub Pages.',
+    'Besides being used as a portfolio, it is a playground for experimenting with different simulations and animations for the banner.',
+  featureList: [
+    'Automated deployment using GitHub Actions to GitHub Pages.',
+    'Includes animations and simulations of math and systems that I find interesting.',
+  ],
   links: [
     {
       from: 'github',

src/modules/project_card/components/ProjectCard.tsx

@@ -86,6 +86,11 @@ function ProjectCard(props: ProjectCardProps) {
 
         <section className="project-card-details">
           <p className="project-card-description">{props.project.description}</p>
+          <ul className="project-card-features">
+            {props.project.featureList.map((feature, index) => {
+              return <li key={index}>{feature}</li>
+            })}
+          </ul>
           <div className="project-card-badges">
             <div className="project-card-links">
               {!props.disabled &&

src/modules/project_card/styles/project_card.css

@@ -132,6 +132,25 @@
   }
 }
 
+.project-card-features {
+  width: 100%;
+
+  & li {
+    color: var(--text);
+    display: list-item;
+    margin-left: 1.5em;
+
+    &::before {
+      content: "-";
+      color: var(--text);
+      font-weight: bold;
+      display: inline-block;
+      width: 1em;
+      margin-left: -1em;
+    }
+  }
+}
+
 @media screen and (min-width: 950px) {
   .project-card {
     aspect-ratio: 3/2;
@@ -181,6 +200,14 @@
       height: 70px;
     }
   }
+
+  .project-card-features {
+    width: 100%;
+
+    & li {
+      font-size: 1.7rem;
+    }
+  }
 }
 
 @media screen and (max-width: 949px) {

src/modules/project_card/types/project.ts

@@ -13,6 +13,7 @@ type Project = {
   thumbnail: string
   thumbnailAlt: string
   description: string
+  featureList: string[]
   links: ProjectLink[]
   technologies: ProjectTechnology[]
 }