feat: update project placeholder and warning fixes

gatsby-config.js

@@ -119,7 +119,7 @@ module.exports = {
         background_color: `#ffffff`,
         theme_color: `#663399`,
         display: `minimal-ui`,
-        icon: `src/content/images/website-icon.png`,
+        icon: `src/content/images/website-icon.jpeg`,
       },
     },
     `gatsby-plugin-image`,

src/components/blog/BlogItem.js

@@ -1,9 +1,7 @@
 import React from "react"
 import { Link } from "gatsby"
-import { FaClock, FaUser } from "react-icons/fa"
 import { BsDot } from "react-icons/bs"
 // import Img from "gatsby-image"
-import HorizontalLine from "../horizontalLine"
 import "../../styles/css/screens/blog/blog-item.css"
 
 function BlogItem({ node, postClass }) {

src/components/core/ExpandableText.jsx

@@ -11,12 +11,23 @@ export default function ExpandableText(props) {
       ? text.slice(0, charLimit).trim() + "..."
       : text
 
+  const toggleExpand = () => {
+    setIsExpanded(current => !current)
+  }
+
   return (
     <p className={`expandable-text-container ${className}`}>
       {displayText}
       {shouldTruncate && (
         <span
-          onClick={() => setIsExpanded(!isExpanded)}
+          onClick={toggleExpand}
+          onKeyPress={e => {
+            if (e.key === "Enter" || e.key === " ") {
+              toggleExpand()
+            }
+          }}
+          role="button"
+          tabIndex={0}
           className="expandable-text"
         >
           {isExpanded ? "read less" : "read more"}

src/components/core/Tooltip.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react"
 import "../../styles/css/components/core/tooltip.css"
 
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 const Tooltip = ({ children, text, position = "top" }) => {
   const [isVisible, setIsVisible] = useState(false)
 
@@ -9,6 +10,7 @@ const Tooltip = ({ children, text, position = "top" }) => {
       className="tooltip-container"
       onMouseEnter={() => setIsVisible(true)}
       onMouseLeave={() => setIsVisible(false)}
+      role="tooltip"
     >
       {children}
       {isVisible && <div className={`tooltip tooltip-${position}`}>{text}</div>}

src/components/home/ProjectsSection.js

@@ -2,15 +2,8 @@ import React, { useState } from "react"
 import { GatsbyImage } from "gatsby-plugin-image"
 import { StaticQuery, graphql } from "gatsby"
 import * as Styles from "../../styles/css/screens/home/projects-section.module.css"
-import {
-  FaBook,
-  FaBookOpen,
-  FaExternalLinkAlt,
-  FaGithub,
-  FaGlobe,
-  FaLink,
-  FaRegFileAlt,
-} from "react-icons/fa"
+import { FaBookOpen, FaGithub, FaLink } from "react-icons/fa"
+import ExpandableText from "../core/ExpandableText"
 
 function ProjectsSection({ data }) {
   const [showAll, setShowAll] = useState(false)
@@ -45,9 +38,12 @@ function ProjectsSection({ data }) {
                   {node.frontmatter.title}
                 </h3>
                 <div className={Styles.descriptionContainer}>
-                  <p className={Styles.cardDescription}>
+                  <ExpandableText
+                    className={Styles.cardDescription}
+                    charLimit={300}
+                  >
                     {node.frontmatter.description}
-                  </p>
+                  </ExpandableText>
                 </div>
                 <div className={Styles.additionalInfo}>
                   <div className={Styles.stacksContainer}>
@@ -138,7 +134,7 @@ const indexQuery = graphql`
             site
             thumbnail {
               childImageSharp {
-                gatsbyImageData
+                gatsbyImageData(height: 220, width: 330)
               }
             }
           }

src/content/projects/campus-modeler/index.md

@@ -9,5 +9,5 @@ end: "2021-08-01"
 repo: https://github.com/
 docs: https://github.com/
 site: https://github.com/
-thumbnail: ./temp.jpeg
+thumbnail: ../../images/project-placeholder.webp
 ---

src/content/projects/capae/index.md

@@ -9,5 +9,5 @@ end: "2023-011-29"
 repo: https://github.com/
 docs: https://github.com/
 site: https://github.com/
-thumbnail: ./temp.jpeg
+thumbnail: ../../images/project-placeholder.webp
 ---

src/content/projects/live-scoreboard/index.md

@@ -9,5 +9,5 @@ end: "2021-08-01"
 repo: https://github.com/
 docs: https://github.com/
 site: https://github.com/
-thumbnail: ./temp.jpeg
+thumbnail: ../../images/project-placeholder.webp
 ---

src/content/projects/voice-chess/index.md

@@ -9,5 +9,5 @@ end: "2023-05-06"
 repo: https://github.com/
 docs: https://github.com/
 site: https://github.com/
-thumbnail: ./temp.jpeg
+thumbnail: ../../images/project-placeholder.webp
 ---

yarn.lock

@@ -3159,9 +3159,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001317, caniuse-lite@^1.0.30001517:
-  version "1.0.30001520"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001520.tgz"
-  integrity sha512-tahF5O9EiiTzwTUqAeFjIZbn4Dnqxzz7ktrgGlMYNLH43Ul26IgTMH/zvL3DG0lZxBYnlT04axvInszUsZULdA==
+  version "1.0.30001684"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001684.tgz"
+  integrity sha512-G1LRwLIQjBQoyq0ZJGqGIJUXzJ8irpbjHLpVRXDvBEScFJ9b17sgK6vlx0GAJFE21okD7zXl08rRRUfq6HdoEQ==
 
 ccount@^1.0.0:
   version "1.1.0"