From 769a18fdb7c15d01a68f0dbbc6ff629acbc9695c Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuckd@axosoft.com>
Date: Tue, 15 Jun 2021 06:04:10 -0700
Subject: [PATCH] hero image on landing page

---
 gatsby/src/pages/index.js    | 133 +++++++++++------------------------
 gatsby/src/styles/global.css |   8 +++
 2 files changed, 50 insertions(+), 91 deletions(-)

diff --git a/gatsby/src/pages/index.js b/gatsby/src/pages/index.js
index e574225..0c0ad40 100644
--- a/gatsby/src/pages/index.js
+++ b/gatsby/src/pages/index.js
@@ -1,100 +1,51 @@
 import * as React from 'react';
-import { graphql, Link } from 'gatsby';
-import { GatsbyImage, getImage } from 'gatsby-plugin-image';
-
-// markup
-const IndexPage = ({ data }) => {
-  const images = React.useMemo(() => data.allFile.edges.map(edge => edge.node), [data]);
-  console.log('images', images);
+import { Link } from 'gatsby';
+import { StaticImage } from 'gatsby-plugin-image';
 
+const IndexPage = () => {
   return (
-    <main className="font-serif text-white">
-      <section style={{ height: '50vh' }} className="m-2 py-6 intro flex flex-col justify-center flex-auto bg-black rounded-xl">
-        <div className="mx-auto px-4 md:px-2 w-full md:w-8 ">
-          <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>
-          <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>
-            <li>
-              <a className="mr-1 hover:text-pink-400 underline" href="http://github.com/chuckdries">Github</a>/
-              <a className="mx-1 hover:text-pink-400 underline" href="https://www.linkedin.com/in/chuckdries/">LinkedIn</a>/
-              <a className="mx-1 hover:text-pink-400 underline" href="https://devpost.com/chuckdries">Devpost</a>/
-              <a className="mx-1 hover:text-pink-400 underline" href="CharlesDriesResumeCurrent.pdf">Resume [pdf]</a>/
-              <a className="mx-1 hover:text-pink-400 underline" href="https://medium.com/@chuckdries">Medium (blog)</a>
-              {/* <a href="https://pgp.mit.edu/pks/lookup?op=get&search=0x2BD9D0871DB5A518">Public Key</a> */}
-            </li>
-          </ul>
+    <main className="font-serif text-white sm:block lg:grid">
+      <StaticImage
+        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">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>
+                <li>
+                  <a className="mr-1 hover:text-pink-400 underline" href="http://github.com/chuckdries">Github</a>/
+                  <a className="mx-1 hover:text-pink-400 underline" href="https://www.linkedin.com/in/chuckdries/">LinkedIn</a>/
+                  <a className="mx-1 hover:text-pink-400 underline" href="https://devpost.com/chuckdries">Devpost</a>/
+                  <a className="mx-1 hover:text-pink-400 underline" href="CharlesDriesResumeCurrent.pdf">Resume [pdf]</a>/
+                  <a className="mx-1 hover:text-pink-400 underline" href="https://medium.com/@chuckdries">Medium (blog)</a>
+                  {/* <a href="https://pgp.mit.edu/pks/lookup?op=get&search=0x2BD9D0871DB5A518">Public Key</a> */}
+                </li>
+              </ul>
+            </div>
+          </section>
+          <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'>
+            Photography</Link>
         </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">
-        <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;
-            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>
+      </div>
     </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;
diff --git a/gatsby/src/styles/global.css b/gatsby/src/styles/global.css
index f0f4c36..3b57012 100644
--- a/gatsby/src/styles/global.css
+++ b/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;
+}