Feature/update mxh

.gitignore

@@ -65,3 +65,5 @@ public/
 # mac FS
 .DS_Store
 .vscode/
+.vercel
+.env*.local

README.md

@@ -4,10 +4,15 @@
 [![Netlify Status](https://api.netlify.com/api/v1/badges/f532a32d-4fc1-441d-aa28-cdc5e2c2e79c/deploy-status)](https://app.netlify.com/sites/gatsby-starter-mate/deploys)
 
 > Gatsby starter for [`gatsby-theme-mate`](https://github.com/EmaSuriano/gatsby-theme-mate). An accessible and fast portfolio starter for Gatsby integrated with Contentful CMS.
+## How to preview with Vercel
+
+Vercel automatically creates a deployment for pushed branches.
+1. Go to the deployments page (https://vercel.com/haim-engineering/haim-io/deployments)
+2. After the branch push, you'll find your deployment running on that list.
+3. Click on the deployment and then click one of the URLs provided under the **DOMAINS** section.
 
 The target audience are Developers 💻 and Tech Writers ✍️.
 
-**[Check the Demo ✨](https://gatsby-starter-mate.netlify.app/)**
 
 ## Why? 🤔
 

gatsby-config.js

@@ -8,6 +8,17 @@ const plugins = [
       spaceId: SPACE_ID,
     },
   },
+  {
+    resolve: `gatsby-source-filesystem`,
+    options: {
+      name: `content`,
+      path: `${__dirname}/src/content`,
+    },
+  },
+  {
+    resolve: `gatsby-transformer-remark`,
+    options: {},
+  }
 ];
 
 if (ANALYTICS_ID) {

package.json

@@ -29,7 +29,9 @@
   "dependencies": {
     "gatsby": "^4.24.8",
     "gatsby-plugin-google-analytics": "^4.24.0",
+    "gatsby-source-filesystem": "^5.9.0",
     "gatsby-theme-mate": "^2.1.1",
+    "gatsby-transformer-remark": "^6.9.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

src/content-backup/ai-user-journeys.md

@@ -0,0 +1,40 @@
+---
+slug: "ai-visual-tests"
+date: "2023-08-20"
+title: "Visual Tests Powered by AI"
+cover: "https://images.ctfassets.net/51dzuuls8jkp/3AfdhSdhGvU5npgGRVKH3S/cb928398471578dbd84e438e0826859e/0-1.jpg"
+---
+
+# Visual Tests Powered by AI: A Comparison of Haim's Solution with Conventional Visual Testing Tools
+
+## Background
+
+In today's fast-paced software development landscape, visual testing plays a crucial role in ensuring the quality and user experience of web and mobile applications. Visual testing involves verifying the visual aspects of an application, such as layout, colors, fonts, and images, to identify any visual regressions or inconsistencies.
+
+## Problem
+
+While conventional visual testing tools like Percy or Applitools have streamlined the visual testing process, there is still room for improvement in terms of accuracy, speed, and ease of use. These tools typically rely on pixel-by-pixel comparisons or image recognition algorithms, which may still produce false negatives or struggle with dynamic and interactive content.
+
+## Implementation
+
+Haim, a leading innovator in AI-powered software testing solutions, has developed a cutting-edge visual testing tool that leverages advanced Artificial Intelligence (AI) techniques to revolutionize the way visual testing is performed. By training sophisticated deep learning models on extensive datasets of visual elements and expected outcomes, Haim's solution can intelligently identify even the most subtle visual anomalies and regressions with unparalleled accuracy and speed.
+
+## Haim's AI-powered Visual Testing vs Conventional Visual Testing Tools
+
+The adoption of Haim's AI-powered visual testing tool offers several distinct advantages over conventional visual testing tools. Firstly, Haim's solution goes beyond traditional pixel comparisons and image recognition by employing advanced AI algorithms that analyze the underlying structure and semantics of the visual elements. This enables more robust detection of visual regressions, including those related to dynamic and interactive content.
+
+Additionally, Haim's tool significantly reduces false negatives, saving valuable time and effort that would otherwise be spent investigating and validating potential visual issues. The AI models employed by Haim continuously learn and improve over time, ensuring adaptive and accurate results, even as the application evolves.
+
+Moreover, Haim's tool integrates seamlessly into the development workflow, providing an intuitive and user-friendly interface that simplifies test creation, management, and reporting. The streamlined process reduces the learning curve and empowers development teams to effortlessly incorporate visual testing into their existing CI/CD pipelines.
+
+## How Haim's Solution Improves Cost-effectiveness Compared to Conventional Visual Testing Tools
+
+Implementing Haim's AI-powered visual testing tool leads to significant cost savings compared to conventional visual testing methods. By reducing false negatives and providing accurate and reliable results, Haim's solution minimizes the time and effort spent on investigating and resolving visual issues. This leads to more efficient development cycles, faster time-to-market, and reduced maintenance and support costs.
+
+Furthermore, Haim's tool optimizes resource utilization by automating the visual testing process. With faster and more accurate test execution, development teams can allocate their valuable human resources to more critical tasks, enhancing overall productivity and cost-effectiveness.
+
+## Conclusion
+
+Haim's AI-powered visual testing tool represents a breakthrough in software quality assurance. By leveraging advanced AI algorithms, Haim enhances the accuracy, reliability, and speed of visual testing. Compared to conventional visual testing tools, Haim's solution offers a more comprehensive and intelligent approach to detecting visual anomalies, including those related to dynamic and interactive content.
+
+Embracing Haim's tool empowers development teams to deliver exceptional visual quality, reduce false negatives, and save valuable time and resources. With streamlined workflows and cost-effective processes, organizations can ensure exceptional user experiences while accelerating development cycles and reducing overall maintenance costs.

src/content-backup/devops-culture.md

@@ -0,0 +1,6 @@
+---
+slug: "devops-culture"
+date: "2022-11-24"
+title: "Building devops culture in a traditional organisation"
+cover: "https://images.ctfassets.net/51dzuuls8jkp/71z946FnyXeAfYJgtMckVN/2660426dba9e0ba6b29eceb18ea2935d/growtika-f7uCQxhucw4-unsplash.jpg"
+---

src/content-backup/low-cost-ui-tests.md

@@ -0,0 +1,6 @@
+---
+slug: "low-cost-ui-tests"
+date: "2022-11-24"
+title: "Thousands of reliable UI tests in minutes and at low cost"
+cover: "https://images.ctfassets.net/51dzuuls8jkp/4lJYEYIagGzR43V1vElXHo/c6ffc9d092c500240c56dffb4f925731/alvaro-reyes-qWwpHwip31M-unsplash.jpg"
+---

src/gatsby-theme-mate/colors.json

@@ -0,0 +1,7 @@
+{
+  "text": "#ffffff",
+  "background": "#00838f",
+  "muted": "#546e7a",
+  "primary": "#e0f2f1",
+  "secondary": "#90a4ae"
+}

src/gatsby-theme-mate/components/Card.tsx

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+import { Card as CardRebass } from 'rebass/styled-components';
+
+type CardContainerProps = {
+  minWidth: string;
+};
+
+export const CardContainer = styled.div<CardContainerProps>`
+  display: grid;
+  grid-gap: 30px;
+
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(${({ minWidth }) => minWidth}, 1fr)
+  );
+  justify-items: center;
+
+  @media only screen and (max-width: 400px) {
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  }
+`;
+
+export const Card = styled(CardRebass).attrs({
+  bg: '#333333',
+  boxShadow: 0,
+})`
+  position: relative;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+  transition: all 0.25s;
+  top: 0;
+  height: 100%;
+  border-radius: 8px;
+
+  &:hover {
+    top: -10px;
+    box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
+  }
+`;

src/gatsby-theme-mate/components/Footer.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Text, Box, Flex } from 'rebass/styled-components';
+import { Fade } from 'react-awesome-reveal';
+import SocialLink from './SocialLink';
+import Link from './Link';
+import { useSiteQuery } from '../queries/useSiteQuery';
+import { CONTENTFUL_URL, GATSBY_URL, NETLIFY_URL } from '../utils/constants';
+
+const Footer = () => {
+  const { name, socialLinks } = useSiteQuery();
+
+  return (
+    <Box p={[2, 3]} backgroundColor="primary" id="footer" as="footer">
+      <FooterContainer>
+        <Fade direction="left" triggerOnce>
+          <Text fontSize={[2, 3]} color="background">
+            <span>{`${name}`}</span>
+          </Text>
+        </Fade>
+        <Flex>
+          <Fade direction="right" triggerOnce cascade damping={0.5}>
+            {socialLinks.map((sl) => (
+              <Box mx={[2, 3]} fontSize={[4, 5]} key={sl.name}>
+                <SocialLink {...sl} invert />
+              </Box>
+            ))}
+          </Fade>
+        </Flex>
+      </FooterContainer>
+    </Box>
+  );
+};
+
+const FooterContainer = styled.div`
+  max-width: 1366px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin: auto;
+
+  @media (max-width: 400px) {
+    flex-direction: column-reverse;
+
+    & > * {
+      margin-bottom: 10px;
+    }
+  }
+`;
+
+export default Footer;

src/gatsby-theme-mate/components/Header.tsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react'
+import Headroom from 'react-headroom'
+import { Button, Box, Link as RebassLink, Flex, Image } from 'rebass/styled-components'
+import styled from 'styled-components'
+import Link from './Link'
+import { useHelmetQuery } from '../queries/useHelmetQuery'
+import { SECTION } from '../utils/constants'
+import { getSectionHref } from '../utils/helpers'
+import Modal from './Modal'
+import { getIconDefinition } from '../utils/icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+const Header = () => {
+  const { profile } = useHelmetQuery()
+
+  const [showModal, setShowModal] = useState(false)
+
+  const handleClick = () => {
+    setShowModal(true)
+  }
+
+  const handleClose = () => {
+    setShowModal(false)
+  }
+
+  const actionBar = (
+    <div>
+      <Button color='#000000' className='modal-btn' onClick={handleClose} primary>
+        Close
+      </Button>
+    </div>
+  )
+
+  const navIcon = getIconDefinition('bars')
+
+  const mobileLinkClick = () => {
+    setShowModal(false)
+  }
+
+  return (
+    <StyledHeadroom>
+      <Flex
+        flexWrap="wrap"
+        justifyContent="space-between"
+        alignItems="center"
+        px={3}
+      >
+        <RebassLink href={`#${getSectionHref(SECTION.home)}`} variant="empty">
+          <Flex justifyContent="center">
+            <Image
+              src={profile.bigIcon.src}
+              height={['60px', '80px']}
+              width={['60px', '80px']}
+              alt="Portfolio Logo"
+              p={2}
+              css={{ borderRadius: '20px', cursor: 'pointer' }}
+            />
+          </Flex>
+        </RebassLink>
+        {showModal && <Modal onClose={handleClose} actionBar={actionBar}>
+          <SectionLinks className='mobile-nav-links' onLinkClick={mobileLinkClick} />
+        </Modal>}
+        <Button color='background' className='nav-btn' onClick={handleClick}>
+          {navIcon && <FontAwesomeIcon size='lg' icon={navIcon} title='Menu' />}
+          {!navIcon && 'Menu'}
+        </Button>
+        <SectionLinks className='desktop-nav-links' />
+      </Flex>
+    </StyledHeadroom>
+  )
+}
+
+const SectionLinks = ({ className, onLinkClick }: { className?: string, onLinkClick?: any }) => {
+  return (
+    <Box className={className} mr={[0, 3, 5]}>
+      {(Object.keys(SECTION) as Array<keyof typeof SECTION>)
+        .filter((id) => id !== 'home')
+        .map((id) => (
+          <Box key={id} ml={[2, 3]} color="background" fontSize={[2, 3]}>
+            <Link href={`#${id}`} tabIndex={0} onClick={() => onLinkClick?.(id)}>
+              {SECTION[id]}
+            </Link>
+          </Box>
+        ))}
+    </Box>
+  )
+}
+
+const StyledHeadroom = styled(Headroom)`
+  * {
+    transition: background-color 0.1s ease;
+  }
+
+  .headroom--pinned {
+    background-color: ${({ theme }) => theme.colors.primary};
+  }
+
+  position: absolute;
+  width: 100%;
+`
+
+export default Header

src/gatsby-theme-mate/components/Helmet.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Helmet as ReactHelmet } from 'react-helmet';
+import { withTheme } from 'styled-components';
+import { Theme } from '../types';
+import { useHelmetQuery } from '../queries/useHelmetQuery';
+
+type Props = {
+  theme: Theme;
+};
+
+const Helmet = ({ theme }: Props) => {
+  const { name, description, profile } = useHelmetQuery();
+  const title = name;
+
+  return (
+    <ReactHelmet htmlAttributes={{ lang: 'en' }}>
+      <meta charSet="utf-8" />
+      <title>{title}</title>
+      <meta name="description" content={description} />
+      <link rel="shortcut icon" href={`https:${profile.favicon32.src}`} />
+      <meta name="theme-color" content={theme.colors.background} />
+      <meta name="image" content={`https:${profile.favicon32.src}`} />
+      <meta itemProp="name" content={title} />
+      <meta itemProp="description" content={description} />
+      <meta itemProp="image" content={`https:${profile.favicon32.src}`} />
+      <meta name="og:title" content={title} />
+      <meta name="og:description" content={description} />
+      <meta name="og:image" content={`https:${profile.bigIcon.src}`} />
+      <meta name="og:site_name" content={title} />
+      <meta name="og:locale" content="en_US" />
+      <meta name="og:type" content="website" />
+      <meta name="twitter:card" content="summary" />
+      <meta name="twitter:title" content={title} />
+      <meta name="twitter:description" content={description} />
+      <meta name="twitter:image" content={`https:${profile.bigIcon.src}`} />
+      <meta name="twitter:image:src" content={`https:${profile.bigIcon.src}`} />
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href={`https:${profile.appleIcon.src}`}
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href={`https:${profile.favicon32.src}`}
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href={`https:${profile.favicon16.src}`}
+      />
+    </ReactHelmet>
+  );
+};
+export default withTheme(Helmet);

src/gatsby-theme-mate/components/Hide.tsx

@@ -0,0 +1,16 @@
+import { Queries } from '@rebass/preset';
+import styled from 'styled-components';
+
+type Props = {
+  query: keyof Queries;
+};
+
+const Hide = styled.div<Props>`
+  ${({ query, theme }) => ({
+    [theme.queries[query]]: {
+      display: 'none',
+    },
+  })}
+`;
+
+export default Hide;