gatsby-plugin-image#GatsbyImage JavaScript Examples

BookSummary = ({
    book: {
        slug,
        frontmatter: {
            title: postTitle,
            bookInfo: { title, author, coverImage },
        },
    },
}) => {
    return (
        <Link to={`/${slug}`}>
            <BookContainer>
                <ImageContainer>
                    <GatsbyImage
                        image={
                            coverImage.childImageSharp.gatsbyImageData
                        }
                        alt={title}
                    />
                </ImageContainer>
                <InfoContainer>
                    <div>{postTitle} </div>
                    <BookAndAuthor>
                        {title} <span>by {author}</span>
                    </BookAndAuthor>
                </InfoContainer>
            </BookContainer>
        </Link>
    );
}

Image = ({ src, ...rest }) => {
  const data = useStaticQuery(graphql`
    query {
      images: allFile(filter: { sourceInstanceName: { eq: "assets" } }) {
        edges {
          node {
            relativePath
            extension
            publicURL
            childImageSharp {
              gatsbyImageData(layout: CONSTRAINED)
            }
          }
        }
      }
    }
  `);

  const match = useMemo(() => data.images.edges.find(({ node }) => src === node.relativePath), [
    data,
    src,
  ]);

  if (!match) return null;

  const { node: { childImageSharp, publicURL, extension } = {} } = match;

  if (extension === 'svg' || !childImageSharp) {
    return <img src={publicURL} alt={publicURL} {...rest} />;
  }

  return <GatsbyImage image={childImageSharp.gatsbyImageData} alt={publicURL} {...rest} />;
}

ProfileImage = ({ image, name }) => (
  <div className="relative inline-block leading-none">
    <GatsbyImage
      image={image.childImageSharp.gatsbyImageData}
      alt={name}
      className="rounded-full relative z-10"
    />
    <div className="absolute inset-0 rounded-full bg-lead z-0 transform translate-x-12"></div>
  </div>
)

Project = props => {
  const { name, image, url, description, status, tags, icon } = props
  return (
    <div className="border-t-4 border-line relative flex flex-wrap bg-back-light p-4 lg:p-8 bg-no-repeat text-sm mb-6">
      {image && (
        <div className="w-full pb-4 lg:w-2/5 lg:pr-8 lg:pb-0">
          <GatsbyImage image={image.childImageSharp.gatsbyImageData} alt={name} />
        </div>
      )}
      <div className="lg:flex-1">
        <h4 className="font-bold">{name}</h4>
        {url && (
          <a
            className="text-front underline break-all hover:opacity-75 transition-opacity duration-150"
            href={url}
            rel="noreferrer noopener"
            target="_blank"
          >
            {url}
          </a>
        )}
        <p className="w-full py-4 whitespace-pre-line">{description}</p>
        <ul className="pr-2">
          {status && <ProjectStatus status={status} />}
          {tags && <ProjectTags tags={tags} />}
        </ul>

        {icon && <ProjectIcon icon={icon} />}
      </div>
    </div>
  )
}

Image = ({ fileName, alt, ...restProps }) => (
  <StaticQuery
    query={graphql`
      query BaseImageQuery {
        images: allFile {
          edges {
            node {
              relativePath
              name
              childImageSharp {
                gatsbyImageData(layout: FULL_WIDTH)
              }
            }
          }
        }
      }
    `}
    render={({ images }) => {
      const image = images.edges.find((n) => n.node.relativePath.includes(fileName));

      if (!image) {
        return null;
      }

      const imageData = image.node.childImageSharp.gatsbyImageData;
      return <GatsbyImage alt={alt} image={imageData} {...restProps} />;
    }}
  />
)

Image = () => {
  const data = useStaticQuery(graphql`{
  placeholderImage: file(relativePath: {eq: "gatsby-astronaut.png"}) {
    childImageSharp {
      gatsbyImageData(width: 300, layout: CONSTRAINED)
    }
  }
}
`)

  return <GatsbyImage image={data.placeholderImage.childImageSharp.gatsbyImageData} />;
}

EventCard = ({
  description,
  speaker,
  speakerImage,
  schedule,
  type,
  title,
}) => {
  return (
    <div className="event-card">
      <p className="event-card__event-type">{type}</p>
      <p className="event-card__event-title">{title}</p>
      <p className="event-card__event-time">{schedule}</p>
      <div className="event-card__description">{description}</div>
      <div className="event-card__speaker">
        <GatsbyImage image={speakerImage} className="event-card__speaker-image" alt="speakers" />
        <h3 className="event-card__speaker-name">{speaker}</h3>
      </div>
    </div>
  );
}

Portrait = ({
  name,
  image,
}) => (
  image
    ? (
      <GatsbyImage
        alt={name}
        className="people__list-image"
        image={image.childImageSharp.gatsbyImageData}
      />
    )
    : (
      <div className="people__list-image">
        <Placeholder />
      </div>
    )
)

Research = ({
  markdown,
}) => (
  <section
    className="research"
    id="research"
  >
    <h2>
      <FontAwesomeIcon icon={faSearch} />
      Research
    </h2>
    <ul className="research__list">
      {
        markdown.map((research) => (
          <li key={research.node.frontmatter.title}>
            {
              research.node.frontmatter.title
              && <h3>{research.node.frontmatter.title}</h3>
            }
            <div>
              {
                research.node.frontmatter.image
                && (
                  <GatsbyImage
                    alt={research.node.frontmatter.title}
                    className="research__list-image"
                    image={research.node.frontmatter.image.childImageSharp.gatsbyImageData}
                  />
                )
              }
              <div dangerouslySetInnerHTML={{ __html: research.node.html }} />
            </div>
          </li>
        ))
      }
    </ul>
  </section>
)

About = ({
  html,
  image,
  title,
}) => (
  <section className="about">
    <h2>{title}</h2>
    <div className="about__inner">
      <GatsbyImage
        alt={title}
        className="about__portrait"
        image={image}
      />
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </div>
  </section>
)

FeedTemplate = (contentfulPage) => {
  const headerImage = getImage(contentfulPage.headerImage)
  return (
    <>
      <Seo title={contentfulPage.title} />
      <Layout>
        <SimpleBanner title={contentfulPage.title}>
          <GatsbyImage
            className="banner__image"
            image={headerImage}
            alt={`${contentfulPage.title} feed`}
          />
        </SimpleBanner>
        <div className="section">
          <div className="feed">{getTemplate(contentfulPage)}</div>
        </div>
      </Layout>
    </>
  )
}

DefaultTemplate = contentfulPage => {
  const headerImage = getImage(contentfulPage.headerImage)
  return (
    <>
      <Seo title={contentfulPage.title} />
      <Layout>
        <SimpleBanner title={contentfulPage.title}>
          <GatsbyImage className="banner__image" image={headerImage} />
        </SimpleBanner>
        <div className="section">
          <div className="container container__tight">
            <RichText richText={contentfulPage.mainContent} />
          </div>
        </div>
      </Layout>
    </>
  )
}

options = {
    renderMark: {
        [MARKS.UNDERLINE]: (text) => <span className="underline">{text}</span>,
        [MARKS.ITALIC]: (text) => <em>{text}</em>,
        [MARKS.BOLD]: (text) => <strong>{text}</strong>,
        [MARKS.CODE]: (text) => <code>{text}</code>
    },
    renderNode: {
        [BLOCKS.EMBEDDED_ASSET]: (node) => {
            const {gatsbyImageData, description} = node.data.target;

            return (
                <div className="contentimg">
                    <GatsbyImage image={getImage(gatsbyImageData)} alt={description ? description : null} />
                    {description && (
                        <div className="contentdescription">{description}</div>
                    )}
                </div>
            )
        },
        [INLINES.HYPERLINK]: (node, children ) => {
            if(node.data.uri.includes("player.vimeo.com/video")) {
                return <iframe title="Vimeo content" loading="lazy" src={node.data.uri} frameBorder="0" allowFullScreen></iframe>
            } else if (node.data.uri.includes("youtube.com/embed")) {
                <iframe title="YouTube content" loading="lazy" frameborder="0" src={node.data.uri} allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
            } else if (node.data.uri.includes("giphy.com/embed")) {
                return <iframe title="Giphy content" loading="lazy" src={node.data.uri} frameborder="0" allowFullScreen></iframe>
            }
            else {
                return <a href={node.data.uri}>{children}</a>
            }
        }
    }
}

FeaturedProduct = ({ feature }) => {
  const { gatsbyPath, headerImage, title, introduction } = feature
  const image = getImage(headerImage)

  return (
    <FeaturedProductStyles>
      <Link to={gatsbyPath}>
        <GatsbyImage
          className="features__item--img"
          image={image}
          alt="Product Image"
        />
        {title && introduction && (
          <div className="features__item--content">
            {title && <h4>{title}</h4>}
            {introduction && <p>{introduction}</p>}
            <Button text="Read More" as="span" arrow={true} />
          </div>
        )}
      </Link>
    </FeaturedProductStyles>
  )
}

WebsiteImg = styled(GatsbyImage)`
  border: 2px solid
    ${props => (props.theme.dark ? props.theme.primaryColor : 'none')};
  box-shadow: 0 3px 4px hsla(0, 0%, 0%, 0.4);
  height: 100%;
  background-size: cover;
  border-radius: 5px;
  max-width: 485px;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
  &:hover {
  }

  @media ${props => props.theme.media.tablet} {
    max-width: 100%;
    border-radius: 0;
  }
`

Avatar = styled(GatsbyImage)`
  border-radius: 50%;
  border: 3px solid ${props => props.theme.primaryColor};
  box-shadow: 4px 4px 23px -10px ${props => props.theme.primaryColor};
  cursor: pointer;
  height: 200px;
  width: 200px;

  @media ${props => props.theme.media.tablet} {
    justify-self: center;
    width: 150px;
    height: 150px;
  }

  @media ${props => props.theme.media.mobile} {
    width: 100px;
    height: 100px;
  }
`

AboutMe = () => {
  const data = useStaticQuery(graphql`
    {
      photo: file(relativePath: { eq: "about-me/selfie-boy.png" }) {
        childImageSharp {
          gatsbyImageData(width: 512, layout: CONSTRAINED)
        }
      }
      markdownRemark(frontmatter: { id: { eq: "about-me" } }) {
        html
      }
    }
  `);

  return (
    <section id="about-me">
      <Heading icon={MdPerson} title="About Me" />

      <div className="grid lg:grid-cols-6 gap-12 items-center">
        <div className="hidden md:block lg:col-span-2 w-1/3 lg:w-3/4 mx-auto wow fadeInLeft">
          <GatsbyImage
            image={data.photo.childImageSharp.gatsbyImageData}
            alt="Smiling Cartoon Boy with Phone and Backpack"
          />
        </div>
        <div
          className="text-justify lg:col-span-4 wow fadeIn"
          dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }}
        />
      </div>
    </section>
  );
}

export function BackgroundImage({ image, options, pos }) {
  const isTop = pos === "top"
  return (
    <GatsbyImage
      image={image}
      className={`absolute left-0 right-0 ${
        isTop ? "top-0" : "bottom-0"
      } h-half-vh lg:h-inherit h-half-vh md:h-screen`}
      style={imageStyle(options)}
      imgStyle={{
        objectPosition: isTop ? "center top" : "center bottom",
      }}
    />
  )
}

Devoxx4Kids = () => {
  const data = useStaticQuery(graphql`
    {
      placeholderImage: file(
        relativePath: { eq: "devoxx4kids/devoxx4kids.png" }
      ) {
        childImageSharp {
          gatsbyImageData(width: 300, layout: CONSTRAINED)
        }
      }
    }
  `);

  return (
    <GatsbyImage
      image={data.placeholderImage.childImageSharp.gatsbyImageData}
    />
  );
}

Resume = () => {
  const data = useStaticQuery(graphql`
    {
      file(relativePath: { eq: "resume/preview.png" }) {
        childImageSharp {
          gatsbyImageData(width: 600, layout: CONSTRAINED)
        }
      }
    }
  `);

  return (
    <section id="resume">
      <Heading icon={IoIosDocument} title="Resume" />

      <div className="grid grid-cols-1 gap-6 md:grid-cols-5 md:gap-8 items-center">
        <div className="col-span-1 md:col-span-2">
          <OutboundLink
            href="https://pillai.xyz/resume-pdf"
            target="_blank"
            rel="noopener noreferrer"
            className="w-full h-64 md:h-48 lg:h-64 bg-black relative flex-center cursor-pointer rounded-lg shadow-lg"
          >
            <FaLink className="absolute" color="#FFF" size="5rem" />
            <GatsbyImage
              alt="Link to Resume PDF"
              className="absolute w-full h-64 md:h-48 lg:h-64 object-cover rounded-lg hover:opacity-50 duration-200"
              imgStyle={{ objectPosition: "top" }}
              image={data.file.childImageSharp.gatsbyImageData}
            />
            <span className="sr-only">Download Resume</span>
          </OutboundLink>
        </div>
        <div className="col-span-1 md:col-span-3">
          <h5 className="text-lg lg:text-xl font-semibold">
            To those HRs out there who need a more organized and minimal version
            of my information, you can download the trusted PDF version here:
          </h5>

          <Button
            className="mt-8"
            icon={IoIosDocument}
            title="Download Resume"
            onClick={() =>
              window.open("https://pillai.xyz/resume-pdf", "_blank")
            }
          />
        </div>
      </div>
    </section>
  );
}

AboutImageWrapper = styled(GatsbyImage)`
  display: block;
  border-radius: 50%;
  height: 300px;
  width: 300px;
`

Design = () => {
  const data = useStaticQuery(graphql`
    {
      allDribbbleShot(sort: { fields: [published], order: DESC }, limit: 10) {
        edges {
          node {
            id
            published
            title
            url
            localCover {
              publicURL
              childImageSharp {
                gatsbyImageData(width: 320, layout: CONSTRAINED)
              }
            }
          }
        }
      }
    }
  `);

  return (
    <section id="design">
      <Heading icon={FaPaintBrush} title="Design" />

      <div className={styles.container}>
        {data.allDribbbleShot.edges.map(({ node }, index) => (
          <div
            key={node.id}
            className="relative cursor-pointer bg-black md:rounded-lg wow fadeIn"
            style={{ animationDelay: `${index * 200 + 200}ms` }}
            onClick={() => window.open(node.url, "_blank")}
          >
            <div className="absolute inset-0 flex-center">
              <FaLink className="absolute" color="#FFF" size="5rem" />
            </div>
            {node.localCover.childImageSharp !== null ? (
              <GatsbyImage
                alt={node.title}
                className="absolute inset-0 md:rounded-lg hover:opacity-50 duration-200"
                image={node.localCover.childImageSharp.gatsbyImageData}
              />
            ) : (
              <img
                loading="lazy"
                className="w-full h-full absolute object-cover inset-0 md:rounded-lg hover:opacity-50 duration-200"
                src={node.localCover.publicURL}
                alt={node.title}
              />
            )}
          </div>
        ))}
      </div>

      <Button
        className="mt-12"
        icon={FaDribbble}
        title="Shots on Dribbble"
        onClick={() => window.open("https://pillai.xyz/dribbble", "_blank")}
      />
    </section>
  );
}

Education = () => {
  const { dark } = useContext(ThemeContext);
  const data = useStaticQuery(graphql`
    {
      allEducationJson {
        edges {
          node {
            id
            title
            subtitle
            period
            icon {
              childImageSharp {
                gatsbyImageData(width: 32, height: 32, layout: FIXED)
              }
            }
          }
        }
      }
    }
  `);

  return (
    <section id="education">
      <Heading icon={MdSchool} title="Education" />

      <div className="flex">
        <div className="w-1 bg-gray-500 rounded-full md:ml-6 opacity-25" />
        <div className="-ml-2">
          {data.allEducationJson.edges.map(({ node }, index) => {
            return (
              <div
                key={node.id}
                className="py-4 flex wow fadeInDown"
                style={{
                  animationDuration: `${index * 200 + 500}ms`,
                }}
              >
                <Tooltip title={`(${node.period})`} placement="left">
                  <div
                    className={`relative mt-3 w-3 h-3 rounded-full shadow-lg opacity-75 z-2 ${
                      dark ? "bg-white" : "bg-primary-500"
                    } duration-200`}
                  />
                </Tooltip>
                <div className="ml-8">
                  <GatsbyImage
                    className="w-8 h-8"
                    alt={node.title}
                    image={node.icon.childImageSharp.gatsbyImageData}
                  />
                  <h6 className="mt-3 font-semibold">{node.title}</h6>
                  <h6 className="text-sm">{node.subtitle}</h6>
                  <h6 className="mt-2 text-xs">({node.period})</h6>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Article = ({ data }) => {
  const article = data.strapiArticle;
  const seo = {
    metaTitle: article.title,
    metaDescription: article.description,
    shareImage: article.image,
    article: true,
  };

  return (
    <Layout seo={seo}>
      <div>
        <div style={{ display: "grid" }}>
          <GatsbyImage
            style={{
              gridArea: "1/1",
            }}
            alt={`Picture for ${article.title} article`}
            image={article.image.localFile.childImageSharp.gatsbyImageData}
            layout="fullWidth"
          />
          <div
            style={{
              // By using the same grid area for both, they are stacked on top of each other
              gridArea: "1/1",
              position: "relative",
              // This centers the other elements inside the hero component
              placeItems: "center",
              display: "grid",
            }}
          >
            <h1 style={{ color: `white` }}>{article.title}</h1>
          </div>
        </div>
        <div className="uk-section">
          <div className="uk-container uk-container-small">
            <Markdown source={article.content} escapeHtml={false} />

            <hr className="uk-divider-small" />

            <div className="uk-grid-small uk-flex-left" data-uk-grid="true">
              <div>
                {article.author.picture && (
                  <GatsbyImage
                    image={
                      article.author.picture.localFile.childImageSharp
                        .gatsbyImageData
                    }
                    alt={`Picture of ${article.author.name}`}
                    style={{ borderRadius: "50%" }}
                  />
                )}
              </div>
              <div className="uk-width-expand">
                <p className="uk-margin-remove-bottom">
                  By {article.author.name}
                </p>
                <p className="uk-text-meta uk-margin-remove-top">
                  <Moment format="MMM Do YYYY">{article.published_at}</Moment>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
}

Card = ({ article }) => {
  return (
    <Link to={`/article/${article.node.slug}`} className="uk-link-reset">
      <div className="uk-card uk-card-muted">
        <div className="uk-card-media-top">
          <GatsbyImage
            image={article.node.image.localFile.childImageSharp.gatsbyImageData}
            alt={`Hero image`}
          />
        </div>
        <div className="uk-card-body">
          <p id="category" className="uk-text-uppercase">
            {article.node.category.name}
          </p>
          <p id="title" className="uk-text-large">
            {article.node.title}
          </p>
          <div>
            <hr className="uk-divider-small" />
            <div className="uk-grid-small uk-flex-left" data-uk-grid="true">
              <div>
                {article.node.author.picture && (
                  <GatsbyImage
                    image={
                      article.node.author.picture.localFile.childImageSharp
                        .gatsbyImageData
                    }
                    alt={`Picture of ${article.node.author.name}`}
                    style={{ borderRadius: "50%" }}
                  />
                )}
              </div>
              <div className="uk-width-expand">
                <p className="uk-margin-remove-bottom">
                  {article.node.author.name}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Link>
  );
}

SpeakerCard = ({
  image,
  speakerName,
  subTitle,
  description,
  git,
  linkedin,
  website,
}) => {
  return (
    <ScrollAnimation animateIn="fadeIn">
      <div className="speakercard">
        <div className="speakercard__left">
          <GatsbyImage image={image} className="speakercard__left-image" alt="speakers" />
          <h2 className="speakercard__left-title">{speakerName}</h2>
          <h3 className="speakercard__left-subtitle">{subTitle}</h3>
        </div>
        <div className="speakercard__right">
          <h3 className="speakercard__right-title">About</h3>
          <h3 className="speakercard__right-description">{description}</h3>

          <div className="speakercard__right__link">
            <div className="card__right__link-left">
              <a target="_blank" rel="noreferrer" href={git}>
                <img
                  className="speakercard__right__link-left-github"
                  src={Github}
                  alt="github logo"
                />
              </a>
              <a target="_blank" rel="noreferrer" href={linkedin}>
                <img
                  className="speakercard__right__link-left-image"
                  src={Linkedin}
                  alt="linkedin logo"
                />
              </a>
            </div>
            <div className="card__right__link-right">
              <a target="_blank" rel="noreferrer" href={website}>
                <img
                  className="speakercard__right__link-left-image"
                  src={Website}
                  alt="website logo"
                />
              </a>
            </div>
          </div>
        </div>
      </div>
    </ScrollAnimation>
  );
}

Photography = () => {
  const data = useStaticQuery(graphql`
    {
      allInstagramContent(
        sort: { fields: [timestamp], order: DESC }
        limit: 10
      ) {
        edges {
          node {
            id
            permalink
            timestamp
            localImage {
              childImageSharp {
                gatsbyImageData(width: 320, layout: CONSTRAINED, aspectRatio: 1)
              }
            }
          }
        }
      }
    }
  `);

  const openInstagramPost = permalink => window.open(permalink, "_blank");

  return (
    <section id="photography">
      <Heading icon={AiFillInstagram} title="Photography" />

      <div className={styles.container}>
        {data.allInstagramContent.edges.map(({ node }, index) => (
          <div
            key={node.id}
            className="relative cursor-pointer bg-black md:rounded-lg wow fadeIn"
            style={{
              animationDelay: `${index * 200 + 200}ms`,
            }}
            onClick={() => openInstagramPost(node.permalink)}
          >
            <div className="absolute inset-0 flex-center">
              <FaLink className="absolute" color="#FFF" size="5rem" />
            </div>
            <GatsbyImage
              alt="Photo from Instagram (@amruthpillai)"
              className="absolute inset-0 md:rounded-lg hover:opacity-50 duration-200"
              image={node.localImage.childImageSharp.gatsbyImageData}
            />
          </div>
        ))}
      </div>

      <Button
        className="mt-12"
        icon={FaInstagram}
        title="Photos on Instagram"
        onClick={() => window.open("https://pillai.xyz/instagram", "_blank")}
      />
    </section>
  );
}

SpeakerCard = ({
  image,
  speakerName,
  subTitle,
  description,
  git,
  linkedin,
  website,
}) => {
  return (
    <ScrollAnimation animateIn="fadeIn">
      <div className="speakercard">
        <div className="speakercard__left">
          <GatsbyImage image={image} className="speakercard__left-image" alt="speakers" />
          <h2 className="speakercard__left-title">{speakerName}</h2>
          <h3 className="speakercard__left-subtitle">{subTitle}</h3>
        </div>
        <div className="speakercard__right">
          <h3 className="speakercard__right-title">About</h3>
          <h3 className="speakercard__right-description">{description}</h3>

          {/* <div className="speakercard__right__link">
            <div className="card__right__link-left">
              <a target="_blank" rel="noreferrer" href={git}>
                <img
                  className="speakercard__right__link-left-github"
                  src={Github}
                  alt="github logo"
                />
              </a>
              <a target="_blank" rel="noreferrer" href={linkedin}>
                <img
                  className="speakercard__right__link-left-image"
                  src={Linkedin}
                  alt="linkedin logo"
                />
              </a>
            </div>
            <div className="card__right__link-right">
              <a target="_blank" rel="noreferrer" href={website}>
                <img
                  className="speakercard__right__link-left-image"
                  src={Website}
                  alt="website logo"
                />
              </a>
            </div>
          </div> */}
        </div>
      </div>
    </ScrollAnimation>
  );
}

Skills = () => {
  const data = useStaticQuery(graphql`
    {
      allSkillsJson {
        edges {
          node {
            id
            name
            tech
            icon {
              childImageSharp {
                gatsbyImageData(width: 20, height: 20, layout: FIXED)
              }
            }
          }
        }
      }
    }
  `);
  return (
    <section id="skills">
      <Heading icon={GoTools} title="Skills" />

      <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
        {data.allSkillsJson.edges.map(({ node }, index) => (
          <div
            key={node.id}
            className={`${styles.skill} md:mr-5 wow fadeIn`}
            style={{
              animationDelay: `${index * 100 + 100}ms`,
            }}
          >
            <div className="flex items-center">
              <GatsbyImage
                alt={node.name}
                className="w-5 h-5 mr-5"
                image={node.icon.childImageSharp.gatsbyImageData}
              />
              <div>
                <h6 className="text-xs font-semibold leading-none">
                  {node.name}
                </h6>
                <h6
                  className="mt-2 leading-none"
                  style={{ fontSize: "0.65rem" }}
                >
                  ({node.tech})
                </h6>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}