Add option for black text for project title

Author: andydevs

gatsby-node.js

@@ -1,3 +1,6 @@
+const axios = require('axios')
+const sharp = require('sharp')
+
 exports.createSchemaCustomization = ({ actions }) => {
     const { createTypes } = actions
     const typeDefs = `
@@ -11,4 +14,4 @@ exports.createSchemaCustomization = ({ actions }) => {
         }
     `
     createTypes(typeDefs)
-}
+}

package.json

@@ -23,6 +23,7 @@
     "@tsparticles/engine": "^3.4.0",
     "@tsparticles/react": "^3.0.0",
     "@tsparticles/slim": "^3.4.0",
+    "axios": "^1.8.4",
     "babel-plugin-styled-components": "^2.1.4",
     "date-fns": "^3.6.0",
     "gatsby": "^5.12.3",
@@ -44,6 +45,7 @@
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-remark": "^2.1.0",
+    "sharp": "^0.34.1",
     "styled-components": "^6.0.7",
     "tsparticles-slim": "^2.12.0"
   },

src/components/panel.js

@@ -49,6 +49,8 @@ const ImageTitle = styled.h3`
     margin: 16pt;
     font-weight: 500;
     font-size: 28pt;
+
+    color: ${props => props.black ? `var(--black)` : `var(--white)`}
 `
 
 const TitleHeader = styled.div`
@@ -70,11 +72,11 @@ Panel.Title = ({ title }) => (
     </TitleHeader>
 )
 
-Panel.ImageTitle = ({ title, imageData }) => (
+Panel.ImageTitle = ({ title, black=false, imageData }) => (
     <ImageTitleHeader>
         <ImageTitleContainer>
             <GatsbyImage image={imageData} />
-            <ImageTitle>{title}</ImageTitle>
+            <ImageTitle black={black}>{title}</ImageTitle>
         </ImageTitleContainer>
     </ImageTitleHeader>
 )

src/sections/projects.js

@@ -19,6 +19,7 @@ export default function Projects() {
                     screenshot {
                         gatsbyImageData(layout: CONSTRAINED)
                     }
+                    screenshotBlackTitle
                     description {
                         description
                     }
@@ -41,41 +42,44 @@ export default function Projects() {
             </h1>
             <Grid>
                 {projects.allContentfulProject.nodes.map(
-                    ({ id, title, screenshot, description, github, link }) => (
-                        <Panel
-                            key={id}
-                            large={screenshot !== undefined && screenshot !== null}
-                            data-sal="slide-up"
-                            data-sal-duration="500"
-                            data-sal-easing="ease"
-                        >
-                            {(screenshot && (
-                                <Panel.ImageTitle
-                                    title={title}
-                                    imageData={getImage(screenshot)}
-                                />
-                            )) || <Panel.Title title={title} />}
-                            <Panel.Body>
-                                <p>{description.description}</p>
-                            </Panel.Body>
-                            <Panel.Footer>
-                                <IconLink.Group>
-                                    {link && (
-                                        <IconLink
-                                            icon={faExternalLinkAlt}
-                                            href={link}
-                                        />
-                                    )}
-                                    {github && (
-                                        <IconLink
-                                            icon={faGithub}
-                                            href={github}
-                                        />
-                                    )}
-                                </IconLink.Group>
-                            </Panel.Footer>
-                        </Panel>
-                    )
+                    ({ id, title, screenshot, screenshotBlackTitle, description, github, link }) => {
+                        return (
+                            <Panel
+                                key={id}
+                                large={screenshot !== undefined && screenshot !== null}
+                                data-sal="slide-up"
+                                data-sal-duration="500"
+                                data-sal-easing="ease"
+                            >
+                                {(screenshot && (
+                                    <Panel.ImageTitle
+                                        title={title}
+                                        imageData={getImage(screenshot)}
+                                        black={screenshotBlackTitle}
+                                    />
+                                )) || <Panel.Title title={title} />}
+                                <Panel.Body>
+                                    <p>{description.description}</p>
+                                </Panel.Body>
+                                <Panel.Footer>
+                                    <IconLink.Group>
+                                        {link && (
+                                            <IconLink
+                                                icon={faExternalLinkAlt}
+                                                href={link}
+                                            />
+                                        )}
+                                        {github && (
+                                            <IconLink
+                                                icon={faGithub}
+                                                href={github}
+                                            />
+                                        )}
+                                    </IconLink.Group>
+                                </Panel.Footer>
+                            </Panel>
+                        )
+                    }
                 )}
             </Grid>
         </Section>