improve gallery image page layout

gatsby/gatsby-node.js

@@ -38,20 +38,11 @@ function transformMetaToNodeData(exifData, iptcData, vibrantData) {
     }
   }
 
-  // console.log('asdf', JSON.stringify(vibrantData.Vibrant.getTitleTextColor()));
-
   const vibrant = R.map((swatch) => ({
     rgb: swatch.getRgb(),
     titleTextColor: swatch.getTitleTextColor(),
     bodyTextColor: swatch.getBodyTextColor(),
   })
-  // ({
-  //   // rgb: swatch.getRgb(),
-  //   // hsl: swatch.getHsl(),
-  //   // hex: swatch.getHex(),
-  //   // // titleTextColor: swatch.getTitleTextColor(),
-  //   // // bodyTextColor: swatch.getBodyTextColor(),
-  // })
   , vibrantData);
 
   return {

gatsby/src/components/GalleryImage.js

@@ -27,7 +27,7 @@ const GalleryImage = ({ data }) => {
   const meta = getMeta(image);
   const vibrant = getVibrant(image, true);
 
-  const orientationClasses = ar > 1 ? 'flex-col' : 'landscape:flex-row-reverse portrait:flex-col';
+  const orientationClasses = ar > 1 ? 'flex-col mx-auto' : 'portrait:mx-auto landscape:mx-4 landscape:flex-row-reverse portrait:flex-col';
   console.log(ar, orientationClasses);
   const shutterSpeed = React.useMemo(() => getShutterFractionFromExposureTime(meta.exif.ExposureTime || 0), [meta]);
   return (<>
@@ -40,7 +40,7 @@ const GalleryImage = ({ data }) => {
     </Helmet>
     <Link className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before absolute" to="/photogallery">gallery</Link>
     <div className="min-h-screen pt-4 flex flex-col justify-center">
-      <div className={classnames('flex mx-auto landscpae:mx-1', orientationClasses)}>
+      <div className={classnames('flex', orientationClasses)}>
         <div className="flex-grow-0">
           <GatsbyImage
             alt={name}

gatsby/src/pages/index.js

@@ -74,7 +74,6 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
                   <HeroA href="https://devpost.com/chuckdries" isClient={isClient}>Devpost</HeroA>/
                   <HeroA href="/CharlesDriesResumeCurrent.pdf" isClient={isClient}>Resume [pdf]</HeroA>/
                   <HeroA href="https://medium.com/@chuckdries" isClient={isClient}>Medium (blog)</HeroA>
-                  {/* <a href="https://pgp.mit.edu/pks/lookup?op=get&search=0x2BD9D0871DB5A518">Public Key</a> */}
                 </li>
               </ul>
             </div>
@@ -109,10 +108,7 @@ export const query = graphql`
         childImageSharp {
           gatsbyImageData(
             layout: FULL_WIDTH
-            # placeholder: BLURRED
-            # placeholder: TRACED_SVG
             placeholder: NONE
-            # blurredOptions: {width: 50}
             breakpoints: [750, 1080, 1366, 1920, 2560]
           )
           fields {