Add different colour option for project card subtitles

mrkthmpsn · May 8, 2024 · db32633 · db32633
1 parent be73964
commit db32633
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git 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
@@ -5,13 +5,15 @@ interface ProjectCardProps {
   subtitle: string;
   backgroundImage: any;
   internalLink: string;
+  subtitleColour?: string;
 }
 
 const ProjectCard: React.FC<ProjectCardProps> = ({
   title,
   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>