add mdx and switch to yarn

gatsby/src/pages/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { graphql } from 'gatsby'
+import { graphql, Link } from 'gatsby'
 import { GatsbyImage, getImage } from 'gatsby-plugin-image'
 
 // markup
@@ -36,7 +36,7 @@ const IndexPage = ({ data }) => {
         </span>
       </h1> */}
       <section className="mt-0 m-2 max-w-full flex flex-col shadow-md bg-black text-gray-200 py-2 rounded-xl">
-        <h2 className="ml-6 text-2xl mb-2">Photography</h2>
+        <h2 className="ml-6 text-2xl mb-2"><Link to='/photogallery'>Photography</Link></h2>
         <div className="gallery gallery flex-auto flex overflow-x-scroll w-full scroll-snap-x scroll-padding-6 ">
           {images.map(image => {
             const name = image.childImageSharp.fields.imageMeta.iptc.object_name || image.base

gatsby/src/pages/photogallery.js

@@ -43,7 +43,7 @@ const GalleryPage = ({ data }) => {
             const name = getMeta(image).iptc.object_name || image.base
             return (
               <React.Fragment key={name}>
-                <Link state={{modal: true}} to={`/gallery/${image.base}`}>
+                <Link state={{modal: true}} to={`/photogallery/${image.base}`}>
                   <GatsbyImage
                     key={image.base}
                     image={getImage(image)}
@@ -96,4 +96,4 @@ query GalleryPageQuery {
   }
 }`;
 
-export default GalleryPage
+export default GalleryPage

gatsby/src/pages/resume.mdx

@@ -0,0 +1,7 @@
+---
+title: Charles Dries Resume
+---
+
+# Hello, World!
+
+<h1>{props.pageContext.frontmatter.title}</h1>

gatsby/src/styles/gallery.scss

@@ -1,30 +0,0 @@
-.gallery {
-  width: 100%;
-  // aspect-ratio: 5/3;
-  background: black;
-  display: flex;
-  overflow-x: scroll;
-  scroll-snap-type: x mandatory;
-  padding: 2em 0;
-  scroll-padding: 3em;
-  // &::before {
-  //   content: ".";
-  //   background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 04, 1) 100%);
-  //   display: block;
-  //   width: 120px;
-  //   position: absolute;
-  //   top: 0;
-  //   left: 0;
-  //   height: 100%;
-  // }
-
-  .gatsby-image-wrapper {
-    aspect-ratio: 3/2;
-    width: 400px;
-    flex-shrink: 0;
-    // height: 280px;
-    // width: 350px;
-    scroll-snap-align: start;
-    margin-left: 2em;
-  }
-}

gatsby/src/styles/global.css

@@ -21,15 +21,25 @@
     scroll-snap-align: start;
   }
   .scroll-padding-6 {
-    scroll-padding: theme('spacing.6')
+    scroll-padding: theme('spacing.6');
   }
 }
 
-.gallery-img:first-child {
-  margin-left: theme('spacing.6')
-}
 body {
   @apply bg-gray-100;
   /* @apply bg-black; */
   @apply text-white;
 }
+
+h1 {
+  @apply text-2xl;
+}
+h2 {
+  @apply text-xl;
+}
+h3 {
+  @apply text-lg;
+}
+a {
+  @apply text-blue-600;
+}

gatsby/src/styles/index.scss

@@ -1,3 +0,0 @@
-* {
-  box-sizing: border-box;
-}