jermspeaks · jermspeaks · Feb 13, 2024 · Feb 13, 2024 · Feb 13, 2024
diff --git a/src/components/ProjectListItem.astro b/src/components/ProjectListItem.astro
@@ -1,6 +1,7 @@
 ---
 import type { CollectionEntry } from "astro:content";
 import FormattedDate from "./FormattedDate.astro";
+import { Image } from "astro:assets";
 
 export interface Props {
   project: CollectionEntry<"project">;
@@ -12,7 +13,12 @@ const { project } = Astro.props;
 <li
   class="bg-yellow-50 dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl flex-grow-0 flex-[48%]"
 >
-  <img class="w-full" src={project.data.image} alt={project.data.imageAlt} />
+  {project.data.coverImage && (
+    <Image src={project.data.coverImage} alt={project.data.imageAlt} />
+  )}
+  {project.data.image && (
+    <img class="w-full" src={project.data.image} alt={project.data.imageAlt} />
+  )}
   <div class="font-bold text-xl mb-2 dark:text-gray-200">
     <a
       class="hover:underline hover:text-purple-500 visited:text-amber-600 dark:visited:text-purple-300"

diff --git a/src/content/config.ts b/src/content/config.ts
@@ -12,7 +12,7 @@ const writing = defineCollection({
       description: z.string(),
       draft: z.boolean().optional(),
       coverImage: image().optional(),
-      coverImageAlt: z.string().default('Cover image for blog post'),
+      coverImageAlt: z.string().default("Cover image for blog post"),
       heroImage: z.string().optional(),
       heroImageAlt: z.string().optional(),
       minutesRead: z.string().optional(),
@@ -63,17 +63,19 @@ const log = defineCollection({
 });
 
 const project = defineCollection({
-  schema: z.object({
-    // Transform string to Date object
-    createdDate: z
-      .string()
-      .or(z.date())
-      .transform((val) => new Date(val)),
-    description: z.string(),
-    title: z.string(),
-    image: z.string().optional(),
-    imageAlt: z.string().optional(),
-  }),
+  schema: ({ image }) =>
+    z.object({
+      // Transform string to Date object
+      createdDate: z
+        .string()
+        .or(z.date())
+        .transform((val) => new Date(val)),
+      coverImage: image().optional(),
+      description: z.string(),
+      image: z.string().optional(),
+      imageAlt: z.string().optional(),
+      title: z.string(),
+    }),
 });
 
 const series = defineCollection({

diff --git a/src/content/project/2014-08-06-flitr.md b/src/content/project/2014-08-06-flitr.md
@@ -6,11 +6,8 @@ description: Flight is a social networking playground
   where users post their profiles and show their pictures.
   It is the penultimate project with DevBootcamp
 # project_link: https://github.com/simongondeck/flight-social-network
-image: /images/flitr.jpg
+coverImage: ../../images/flitr.jpg
 imageAlt: Screenshot of Flitr app
-# url: /projects/flitr
-# project_link: https://flitr.herokuapp.com/
-# url: https://flitr.herokuapp.com/
 createdDate: "2014-08-06"
 ---
 
@@ -20,7 +17,7 @@ Flight is a social networking playground where users post their profiles and sho
 
 Defunct - Website is down
 
-![Flitr Website](/images/flitr.jpg)
+![Flitr Website](../../images/flitr.jpg)
 
 ## Features
 

diff --git a/src/content/project/2014-08-10-remembrance.md b/src/content/project/2014-08-10-remembrance.md
@@ -9,13 +9,13 @@ description: Remembrance is the final project of Dev Bootcamp Chicago students
   You can invite friends and family to come together here and share memories,
   whether they be stories or pictures.
 project_link: https://remembrance-dbc.herokuapp.com/
-image: /images/remembrance.png
+coverImage: ../../images/remembrance.png
 imageAlt: Screenshot of Remembrance app
 url: https://remembrance-dbc.herokuapp.com/
 createdDate: "2014-08-10"
 ---
 
-![Remembrance Homepage](/images/remembrance.png)
+![Remembrance Homepage](../../images/remembrance.png)
 
 ## Project Description
 

diff --git a/src/content/project/2014-10-05-Groundwater-Hack.md b/src/content/project/2014-10-05-Groundwater-Hack.md
@@ -8,8 +8,8 @@ description: Underwater groundwater device that allows you to determine
   Project from Science Hack Day 2014
 createdDate: "2014-10-05"
 project_link: https://github.com/groundwaterhack/groundwaterhack.github.io
-# image: /images/flitr.jpg
-# imageAlt: Screenshot of Flitr app
+coverImage: ../../images/groundwater-goal.png
+imageAlt: Groundwater prototype
 # url: /projects/ng-pacman
 ---
 
@@ -30,27 +30,27 @@ The following is from the presentation given at Science Hack Day.
 
 ### Math!
 
-![Groundwater spacing](/images/groundwater-spaced.png)
+![Groundwater spacing](../../images/groundwater-spaced.png)
 
 Space electrodes evenly
 
-![Groundwater outer distance](/images/groundwater-outer.png)
+![Groundwater outer distance](../../images/groundwater-outer.png)
 
 Inject current in OUTER pair
 
-![Groundwater inner distance](/images/groundwater-inner.png)
+![Groundwater inner distance](../../images/groundwater-inner.png)
 
 Measure voltage across INNER pair
 
-![Groundwater depth](/images/groundwater-depth.png)
+![Groundwater depth](../../images/groundwater-depth.png)
 
 Depth:
 
 ```latex
 z = a / 2
 ```
 
-![Groundwater resistivity](/images/groundwater-resistivity.png)
+![Groundwater resistivity](../../images/groundwater-resistivity.png)
 
 Resistivity:
 
@@ -61,13 +61,13 @@ Resistivity:
 ρ low = WATER!  
 ρ high = DRY!
 
-![Groundwater distance to depth](/images/groundwater-distance.png)
+![Groundwater distance to depth](../../images/groundwater-distance.png)
 
 As distance `a` increases, the depth of signal increases
 
 ## Recap
 
-![Groundwater prototype](/images/groundwater-goal.png)
+![Groundwater prototype](../../images/groundwater-goal.png)
 
 - Low-cost groundwater detection is necessary to measure groundwater usage on a wide scale!
 - The Arduino was chosen to use for data logging purposes

diff --git a/src/content/project/2014-10-15-word-images.md b/src/content/project/2014-10-15-word-images.md
@@ -5,13 +5,15 @@ description: Given a word, display images of that word and related words.
   Part of my code challenge for Reverb.
 # project_link: https://github.com/jermspeaks/word-images
 createdDate: "2014-10-15"
+coverImage: ../../images/word-image.png
+imageAlt: Word to image app screenshot
 ---
 
 When you search for a word, it displays the images for that word and related words. The application is supposed to show related images, so that will be on the next revision.
 
 [Github Project Page](https://github.com/jermspeaks/word-images)
 
-![Word to image app screenshot](/images/word-image.png)
+![Word to image app screenshot](../../images/word-image.png)
 
 ### Technologies:
 

diff --git a/src/content/project/2015-03-07-philips-hackathon.md b/src/content/project/2015-03-07-philips-hackathon.md
@@ -7,16 +7,16 @@ description: Healthcare application to help geriatrics.
   Project from 2015 Philips Hackathon in SF.
 # project_link: https://github.com/jermspeaks/coral-reef-game
 createdDate: "2015-03-07"
-# image: /images/flitr.jpg
-# imageAlt: Screenshot of Flitr app
+coverImage: ../../images/philips-hackathon.png
+imageAlt: Philips Hackathon Dashboard
 url: /coral-reef-game
 ---
 
 As part of the Philips HealthSuite Digital Platform Hackathon, I created a dashboard for my team for an app for geriatrics.
 The goal was to combine the patient dashboard with his physician and primary care taker.
 If you'd like to learn more, please check out the slides below.
 
-![Philips Hackathon Dashboard](/images/philips-hackathon.png)
+![Philips Hackathon Dashboard](../../images/philips-hackathon.png)
 
 ## Slides
 

diff --git a/src/content/project/2015-05-02-pac-man.md b/src/content/project/2015-05-02-pac-man.md
@@ -5,7 +5,7 @@ name: Pac Man Neurohack Game
 description: Uses your brain waves to control Pacman.
   Entry to Neurogaming Hackathon 2015.
 project_link: https://github.com/jermspeaks/NGHack-Pacman
-image: https://i.imgur.com/DRaLWqM.png
+coverImage: ../../images/pacman-first-screen.png
 imageAlt: Pacman screenshot
 # url: /projects/ng-pacman
 createdDate: "2015-05-02"
@@ -15,7 +15,7 @@ Neurogaming Hackathon 2015 - Pacman Project
 
 Credits to [platzhersh](https://github.com/platzhersh) for [Pacman-Canvas](https://github.com/platzhersh/pacman-canvas).
 
-![Pacman screenshot](https://i.imgur.com/DRaLWqM.png)
+![Pacman screenshot](../../images/pacman-first-screen.png)
 
 ### Technologies
 

diff --git a/src/content/project/2015-06-21-families-usa.md b/src/content/project/2015-06-21-families-usa.md
@@ -6,11 +6,13 @@ description: An interactive map for Families USA.
   Implemented the map using angular and d3
 project_link: https://familiesusa.org/medicaid-expansion-waivers-states
 createdDate: "2015-06-21"
+coverImage: ../../images/families-medicare.png
+imageAlt: "Screenshot of medicare interactive map"
 ---
 
 I implemented an Angular app to make an interactive map using d3 and a wrapper on top called datamaps.
 
 [Page](https://familiesusa.org/medicaid-expansion-waivers-states) |
 [Github Project Page](https://github.com/caxy4/familes-usa-medicaid)
 
-![Screenshot of medicare interactive map](/images/families-medicare.png)
+![Screenshot of medicare interactive map](../../images/families-medicare.png)
diff --git a/src/content/project/2015-11-06-yeoman-react-redux.md b/src/content/project/2015-11-06-yeoman-react-redux.md
@@ -4,6 +4,8 @@ permalink: /projects/yeoman-react-redux
 description: Code generator for React & Redux Projects
 # project_link: https://github.com/jermspeaks/generator-react-redux
 createdDate: "2015-06-21"
+coverImage: "../../images/yo-react-redux.png"
+imageAlt: "Screenshot of terminal with yeoman generator"
 ---
 
 Yeoman is a code generator in Javascript. This open-source library is for generating React Components, Redux actions and reducers.

diff --git a/src/content/project/2015-11-29-coral-reef.md b/src/content/project/2015-11-29-coral-reef.md
@@ -4,9 +4,10 @@ permalink: /projects/coral-reef
 name: Coral Reef Game
 description: Board game to teach children about coral reefs.
   Project from Science Hack Day 2015
-# project_link: https://github.com/jermspeaks/coral-reef-game
 createdDate: "2015-11-29"
 url: /coral-reef-game
+coverImage: ../../images/lego-coral.png
+imageAlt: "Lego coral reef"
 ---
 
 A Science Hack Day SF 2015 hack.
@@ -23,7 +24,7 @@ They are also habitat to species that make up our interconnected food chain.
 This cooperative board game is to help kids understand what impacts coral reefs and they can do about it.
 
 > "This much is certain: We have the power to damage the sea, but no sure way to heal the harm."
-
+>
 > -- Dr. Sylvia Earle, "Sea Change: A Message of the Oceans"
 
 ### Game Details

diff --git a/src/content/project/2016-04-02-medicare-mojo.md b/src/content/project/2016-04-02-medicare-mojo.md
@@ -7,17 +7,24 @@ description:
   Project part of IBM Watson's 2016 Hackathon challenge.
 project_link: https://www.medicaremojo.com/
 createdDate: "2016-04-02"
-# image: /images/flitr.jpg
-# url: /coral-reef-game
+coverImage: ../../images/mm-ibm-hack.png
+imageAlt: "medicaremojo app screenshots"
 ---
 
 I wrote a backend for an application that utilizes IBM Watson to pick out topics from an article extractor. I ingested a medicare document to see if it could find the keywords.
 
 [Github Project Page](https://github.com/medicaremojo/ibmhack)
 
-![medicaremojo app screenshots](/images/mm-ibm-hack.png)
+![medicaremojo app screenshots](../../images/mm-ibm-hack.png)
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/N-x-24C38Kk" frameborder="0" allowfullscreen></iframe>
+<iframe
+  class="aspect-video w-full"
+  src="https://www.youtube.com/embed/N-x-24C38Kk"
+  title="YouTube video player"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+  allowfullscreen
+></iframe>
 
 ## What we're up to
 

diff --git a/src/content/project/2016-06-04-zika-vr.md b/src/content/project/2016-06-04-zika-vr.md
@@ -9,7 +9,7 @@ description: As part of National Day of Civic Hacking 2016,
   potential breeding grounds of Zika infected mosquitos,
   and effective Zika prevention techniques.
 project_link: https://jermspeaks.github.io/webvr-demo/?polyfill=1
-image: /images/webvr-demo.png
+coverImage: ../../images/webvr-demo.png
 imageAlt: VR Demo
 url: /projects/zika
 createdDate: "2016-06-04"
@@ -24,9 +24,9 @@ virtual reality prototype to enable the public to better learn about the Zika
 virus--the nature of the pathogen, its health consequences, potential breeding
 grounds of Zika infected mosquitos, and effective Zika prevention techniques.
 
-![group photo of team at Nation Day of Civic Hacking](/images/group-photo.png)
+![group photo of team at Nation Day of Civic Hacking](../../images/group-photo.png)
 
-![demo of vr project at National Day of Civic Hacking](/images/vr-demo.png)
+![demo of vr project at National Day of Civic Hacking](../../images/vr-demo.png)
 
 As has been profiled in the press during the past year, Zika is a mosquito
 borne virus that is implicated in very serious birth defects found in a
@@ -40,7 +40,7 @@ The World Health Organization has estimated that by the end of 2016, at least 4
 million people will become infected with Zika. The below map highlights current
 global areas of Zika infection.
 
-![reported active transmission of Zika Virus around the world](/images/zika-world-map.png)
+![reported active transmission of Zika Virus around the world](../../images/zika-world-map.png)
 
 There are currently no Zika cases in the US that were acquired domestically. US
 infections have so-far been found only among those who have traveled to Zika
@@ -50,7 +50,7 @@ Florida has 229. And since Zika can be spread by mosquitos biting an already
 infected person, as well as through sexual contact with
 an infected partner, the public health concern is real.
 
-![US states and territories reporting Zika Virus Disease](/images/zika-us-map.png)
+![US states and territories reporting Zika Virus Disease](../../images/zika-us-map.png)
 
 And since Zika already exists in Mexico, it is a given that the Aedes mosquito
 will eventually reach the US. Below is the CDC's estimate of the likely domestic
@@ -126,7 +126,7 @@ cases of Zika in the state of Rio de Janeiro.)
   mosquito breeding areas and mosquito protective measures
 - Pop-up text-based content associated with given objects
 
-![Green area overlay of 360 image of backyard](/images/overlay.png)
+![Green area overlay of 360 image of backyard](../../images/overlay.png)
 
 ### What We Are Looking For
 

diff --git a/src/content/project/2016-11-12-Smart-Composter.md b/src/content/project/2016-11-12-Smart-Composter.md
@@ -4,9 +4,8 @@ permalink: /projects/compost
 name: Smart Composter
 description: Smart composter using IoT Sensors and the Grow-IoT library.
   Project from Science Hack Day 2016
-# project_link: https://jermspeaks.github.io/webvr-demo/?polyfill=1
-# image: /images/webvr-demo.png
-# url: /projects/zika
+coverImage: ../../images/grow-polymer-elements.png
+imageAlt: "Grow Elements in Polymer"
 createdDate: "2016-11-12"
 ---
 
@@ -28,11 +27,11 @@ I also helped Jake integrate d3 charts with his Polymer app.
 
 [Github Page](https://github.com/CommonGarden/grow-elements)
 
-![Grow Elements](/images/grow-polymer-elements.png)
+![Grow Elements](../../images/grow-polymer-elements.png)
 
 ## Documentation
 
-![Compost poster for science hack day](/images/compost-poster.png)
+![Compost poster for science hack day](../../images/compost-poster.png)
 
 ![pH Schematics](https://github.com/jermspeaks/compost/blob/master/schematics/pH_I2C_schem.png?raw=true)
 

diff --git a/src/content/project/2017-10-15-Garbage-In-Garbage-Out.md b/src/content/project/2017-10-15-Garbage-In-Garbage-Out.md
@@ -6,7 +6,7 @@ description:
   Data exploration of inflows and outflows of city trash to other cities. Data from the US Commodities Survey from 2012.
   Project from Science Hack Day 2017
 project_link: https://jermspeaks.github.io/garbage-in-garbage-out/
-image: /images/gigo.png
+coverImage: "../../images/gigo.png"
 imageAlt: Data visualization for garbage data
 url: /garbage-in-garbage-out
 createdDate: "2017-10-15"

diff --git a/src/content/project/2018-10-28-slouching-sloth.md b/src/content/project/2018-10-28-slouching-sloth.md
@@ -4,7 +4,7 @@ permalink: /projects/no-slouching-sloths
 name: No Slouching Sloths
 description: A PSA developed as a project from Science Hack Day 2018
 project_link: https://jermspeaks.github.io/projects/no-slouching-sloths
-image: /images/sloths-first-draft.jpg
+coverImage: ../../images/sloths-first-draft.jpg
 imageAlt: Poster for the slouching sloth
 url: /no-slouching-sloths
 createdDate: "2017-10-15"