- implement screenshots

- implement OG tags

src/components/landing/Screenshots.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import { useStaticQuery, graphql } from 'gatsby';
+import GatsbyImage from 'gatsby-image';
+import styles from './Screenshots.module.css';
+
+const Screenshots = () => {
+  const screenshots = useStaticQuery(graphql`
+    query {
+      screen1: file(relativePath: { eq: "screenshots/screen-1.png" }) {
+        childImageSharp {
+          fluid(maxWidth: 800) {
+            ...GatsbyImageSharpFluid
+          }
+          fixed(width: 360) {
+            ...GatsbyImageSharpFixed
+          }
+        }
+      }
+      screen2: file(relativePath: { eq: "screenshots/screen-2.png" }) {
+        childImageSharp {
+          fluid(maxWidth: 800) {
+            ...GatsbyImageSharpFluid
+          }
+          fixed(width: 360) {
+            ...GatsbyImageSharpFixed
+          }
+        }
+      }
+      screen3: file(relativePath: { eq: "screenshots/screen-3.png" }) {
+        childImageSharp {
+          fluid(maxWidth: 800) {
+            ...GatsbyImageSharpFluid
+          }
+          fixed(width: 360) {
+            ...GatsbyImageSharpFixed
+          }
+        }
+      }
+      screen4: file(relativePath: { eq: "screenshots/screen-4.png" }) {
+        childImageSharp {
+          fluid(maxWidth: 800) {
+            ...GatsbyImageSharpFluid
+          }
+          fixed(width: 360) {
+            ...GatsbyImageSharpFixed
+          }
+        }
+      }
+      screen5: file(relativePath: { eq: "screenshots/screen-5.png" }) {
+        childImageSharp {
+          fluid(maxWidth: 800) {
+            ...GatsbyImageSharpFluid
+          }
+          fixed(width: 360) {
+            ...GatsbyImageSharpFixed
+          }
+        }
+      }
+      screen6: file(relativePath: { eq: "screenshots/screen-6.png" }) {
+        childImageSharp {
+          fluid(maxWidth: 800) {
+            ...GatsbyImageSharpFluid
+          }
+          fixed(width: 360) {
+            ...GatsbyImageSharpFixed
+          }
+        }
+      }
+    }
+  `);
+
+  return (
+    <div className="mt-24 mb-4">
+      <h4 className="text-xl uppercase font-bold mb-8">Screenshots</h4>
+
+      <div className="flex w-full overflow-x-scroll">
+        {Object.keys(screenshots).map((x) => (
+          <a
+            target="_blank"
+            rel="noreferrer"
+            className={styles.screenshot}
+            key={screenshots[x].childImageSharp.fluid.src}
+            href={screenshots[x].childImageSharp.fluid.src}
+          >
+            <GatsbyImage fixed={screenshots[x].childImageSharp.fixed} />
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Screenshots;

src/components/landing/Screenshots.module.css

@@ -0,0 +1,13 @@
+.screenshot {
+  @apply shadow-xl rounded border-2 border-primary-100 ml-10;
+  @apply transition-opacity duration-200 ease-in-out;
+}
+
+.screenshot:hover {
+  @apply opacity-50;
+  @apply transition-opacity duration-200 ease-in-out;
+}
+
+.screenshot:first-child {
+  @apply ml-0;
+}

src/components/shared/Wrapper.js

@@ -1,5 +1,6 @@
 import React, { memo, useEffect } from 'react';
 import { Slide, toast } from 'react-toastify';
+import { Helmet } from 'react-helmet';
 import ModalRegistrar from '../../modals/ModalRegistrar';
 
 const Wrapper = ({ children }) => {
@@ -16,6 +17,22 @@ const Wrapper = ({ children }) => {
 
   return (
     <>
+      <Helmet>
+        <title>Reactive Resume</title>
+        <meta
+          name="description"
+          content="A free and open source resume builder that’s built to make the mundane tasks of creating, updating and sharing your resume as easy as 1, 2, 3."
+        />
+        <link rel="canonical" href="https://rxresu.me" />
+        <meta property="og:url" content="https://rxresu.me" />
+        <meta property="og:type" content="website" />
+        <meta
+          property="og:description"
+          content="A free and open source resume builder that’s built to make the mundane tasks of creating, updating and sharing your resume as easy as 1, 2, 3."
+        />
+        <meta property="og:image" content="http://rxresu.me/images/share.png" />
+      </Helmet>
+
       {children}
 
       <ModalRegistrar />