hero image on landing page

gatsby/src/pages/index.js

@@ -1,18 +1,31 @@
 import * as React from 'react';
-import { graphql, Link } from 'gatsby';
+import { Link } from 'gatsby';
-import { GatsbyImage, getImage } from 'gatsby-plugin-image';
+import { StaticImage } from 'gatsby-plugin-image';
-
-// markup
-const IndexPage = ({ data }) => {
-  const images = React.useMemo(() => data.allFile.edges.map(edge => edge.node), [data]);
-  console.log('images', images);
 
+const IndexPage = () => {
   return (
-    <main className="font-serif text-white">
+    <main className="font-serif text-white sm:block lg:grid">
-      <section style={{ height: '50vh' }} className="m-2 py-6 intro flex flex-col justify-center flex-auto bg-black rounded-xl">
+      <StaticImage
-        <div className="mx-auto px-4 md:px-2 w-full md:w-8 ">
+        style={{
+          gridArea: '1/1',
+          maxHeight: '90vh',
+          // height: '100vh',
+        }}
+        layout='fullWidth'
+        alt=''
+        src='../../data/gallery/_DSC4949.jpg'
+      />
+      <div className='relative' style={{gridArea: '1/1'}}>
+        <div
+          className="lg:inline-block sm:relative lg:absolute m-2 flex flex-col items-end"
+          style={{
+            right: 0,
+          }}
+        >
+          <section className='bg-black rounded-xl py-6'>
+            <div className="mx-auto px-6">
               <h1 className="italic font-normal text-5xl text-pink-500">Chuck Dries</h1>
-          <h2 className="italic text-blue-300 text-2xl">Software Engineer in web &amp; VR</h2>
+              <h2 className="italic text-blue-300 text-2xl">Full stack software engineer &amp; hobbyist photographer</h2>
               <ul>
                 <li>Software Developer, <span className="text-gray-300 italic">Axosoft</span></li>
                 <li><a className="hover:text-pink-400 underline" href="mailto:chuck@chuckdries.com">chuck@chuckdries.com</a> / <span>602.618.0414</span></li>
@@ -27,74 +40,12 @@ const IndexPage = ({ data }) => {
               </ul>
             </div>
           </section>
-      <section className="mt-0 m-2 max-w-full flex flex-col shadow-md bg-black text-gray-200 py-2 rounded-xl">
+          <Link className='text-black hover:underline font-sans inline-block p-3 my-2 rounded-md bg-gray-300 border-2 arrow-after font-bold border-gray-400' to='/photogallery'>
-        <h2 className="ml-6 text-2xl mb-2"><Link to='/photogallery'>Photography</Link></h2>
+            Photography</Link>
-        <div className="gallery gallery flex-auto flex overflow-x-scroll w-full scroll-snap-x scroll-padding-6 ">
+        </div>
-          {images.map(image => {
-            const name = image.childImageSharp.fields.imageMeta.iptc.object_name || image.base;
-            console.log('name', name);
-            // const file = data.allFile
-            // console.log(fileName)
-            // return <></>
-            return (
-              // <div style={{ maxHeight: '500px' }} className="flex-shrink-0 mr-4 scroll-snap-start bg-red-300">
-              // .
-              <GatsbyImage
-                className="gallery-img h-full flex-shrink-0 scroll-snap-start mr-4"
-                style={{
-                  // maxHeight: "800px"
-                  // width: '400px',
-                  // height: '100%'
-                }}
-                key={image.base}
-                image={getImage(image)}
-                alt={name} />
-              // </div>
-            );
-          })}
       </div>
-      </section>
     </main>
   );
 };
 
-export const query = graphql`
-query HomePageGallery {
-  allFile(filter: {
-    sourceInstanceName: { eq: "gallery" }}
-    sort: {order: DESC, fields: childrenImageSharp___fields___imageMeta___dateTaken}
-  ) {
-    edges {
-      node {
-      	relativePath,
-        base,
-        childImageSharp{
-          gatsbyImageData(
-            layout: CONSTRAINED,
-            placeholder: DOMINANT_COLOR,
-            # width: 400
-            # height: 900
-            height: 600
-          )
-          fields {
-            imageMeta {
-              dateTaken
-              iptc {
-                caption
-                object_name
-              }
-              exif {
-                FNumber
-                ExposureTime
-                ShutterSpeedValue
-                ISO
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}`;
-
 export default IndexPage;

gatsby/src/styles/global.css

@@ -43,3 +43,11 @@ h3 {
 a {
   @apply text-blue-600;
 }
+
+.arrow-after:after {
+  content: "\279C";
+  margin-left: 3px;
+  transform: translate(0px);
+  display: inline-block;
+  transition: all .2s;
+}