From db326334fbb3cd1a640c0546153d41def74eee17 Mon Sep 17 00:00:00 2001
From: Mark Thompson <markthompsonr@gmail.com>
Date: Wed, 8 May 2024 16:05:09 +0100
Subject: [PATCH] Add different colour option for project card subtitles

---
 app/projects/page.tsx      | 1 +
 components/projectCard.tsx | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/projects/page.tsx b/app/projects/page.tsx
index 2a8a99a..6783b8a 100644
--- a/app/projects/page.tsx
+++ b/app/projects/page.tsx
@@ -44,6 +44,7 @@ const ProjectsPage = () => {
               subtitle="Matplotlib | Development"
               backgroundImage={twenty3FontTextSizeThumb}
               internalLink={"/matplotlib-font-text-sizing"}
+              subtitleColour="white"
             />
           </div>
           <br />
diff --git a/components/projectCard.tsx b/components/projectCard.tsx
index ab663d5..ed55d83 100644
--- a/components/projectCard.tsx
+++ b/components/projectCard.tsx
@@ -5,6 +5,7 @@ interface ProjectCardProps {
   subtitle: string;
   backgroundImage: any;
   internalLink: string;
+  subtitleColour?: string;
 }
 
 const ProjectCard: React.FC<ProjectCardProps> = ({
@@ -12,6 +13,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
   subtitle,
   backgroundImage,
   internalLink,
+  subtitleColour = "black",
 }) => {
   return (
     <a href={internalLink} className="no-underline">
@@ -25,7 +27,9 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
               {title}
             </p>
           </div>
-          <div className="flex flex-col items-center justify-end text-center text-black w-full h-full absolute bottom-0 md:pb-4 md:!opacity-0 md:text-normal md:group-hover:!opacity-100 transition-opacity duration-150">
+          <div
+            className={`flex flex-col items-center justify-end text-center text-${subtitleColour} w-full h-full absolute bottom-0 md:pb-4 md:!opacity-0 md:text-normal md:group-hover:!opacity-100 transition-opacity duration-150`}
+          >
             <p className="text-sm mb-2 md:mb-4 md:text-lg">{subtitle}</p>
           </div>
         </div>