WIP experimental typography hero

src/pages/index.js

@@ -107,15 +107,20 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
           }} />
         // 67vw = 1/1.49253731 = 1/aspect ratio of my camera lol
         : <div className="landscape:h-screen portrait:h-two-thirds-vw w-full" style={{gridArea: '1/1' }}></div> }
-      <div className={classnames('relative grid', ar <= 1 ? 'place-items-end landscape:place-items-center' : 'place-items-end')} style={{gridArea: '1/1'}}>
+      {/* <div className={classnames('relative grid', ar <= 1 ? 'place-items-end landscape:place-items-center' : 'place-items-end')} style={{gridArea: '1/1'}}> */}
-        <div className="">
+      <div
-          <div className="flex mx-6 justify-end">
+        className={classnames('flex flex-col items-end justify-center', ar > 1 || !isClient ? 'portrait:items-center' : 'landscape:justify-center')}
+        style={{gridArea: '1/1'}}
+      >
+        <div
+          className={classnames('flex flex-col items-end', ar > 1 || !isClient ? 'portrait:flex-col-reverse' : 'landscape:flex-col-reverse')}
+        >
+          {/* <div className="flex mx-6 justify-end">
             <div className="flex my-2 items-center flex-col">
               <Link
                 className={classnames(
                   'hover:underline inline-block px-1 my-1 mr-2 text-md rounded-md border-2',
-                  isClient && 'text-muted-dark bg-muted-light hover:border-muted border-muted-dark')} 
+                  isClient && 'text-muted-dark bg-muted-light blurred-or-opaque-bg-2 hover:bg-muted border-muted-dark')} 
-                // style={{top: '5px'}}
                 id="image-link"
                 title="view image details"
                 to={`/photogallery/${image.base}/`}
@@ -125,7 +130,7 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
               <button
                 className={classnames(
                   'hover:underline inline-block px-1 my-1 mr-2 text-md rounded-md border-2',
-                  isClient && 'text-muted-dark bg-muted-light hover:border-muted border-muted-dark')}
+                  isClient && 'text-muted-dark bg-muted-light hover:bg-muted border-muted-dark')}
                 id="shuffle-button"
                 onClick={() => {
                   shuffleImage(image);
@@ -139,30 +144,31 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
             <Link
               className={classnames(
                 'hover:underline p-3 px-5 py-4 my-3 text-md sm:text-lg rounded-md border-2 arrow-right-after font-bold font-serif',
-                isClient && 'text-muted-dark bg-muted-light hover:border-muted border-muted-dark')} 
+                isClient && 'text-muted-dark bg-muted-light bg-opacity-70 border-muted-dark hover:bg-muted')} 
               id="photogallery-link"
               to="/photogallery/"
             >
             Photography Gallery
             </Link>
-          </div>
+          </div> */}
           <section
             className={classnames(
               ar > 1 && 'landscape:shadow-lg',
               'md:px-6 px-4 md:py-5 py-3 rounded-l-md mb-4', isClient &&
-              'bg-vibrant-dark bg-opacity-60 backdrop-filter backdrop-blur-xl'
+              'bg-vibrant-dark blurred-or-opaque-bg-1'
             )}
           >
             <div
-              className={classnames('mx-auto filter drop-shadow items-end', ar > 1 || !isClient ? 'landscape:flex' : 'portrait:flex')}
+              // className="mx-auto filter drop-shadow"
+              className={classnames('mx-auto filter drop-shadow items-end', ar > 1 || !isClient ? 'portrait:flex' : 'portrait:flex')}
             >
               <div className="mr-5 flex-auto">
-                <h1 className={classnames('font-black text-4xl sm:text-5xl md:text-6xl', isClient && 'text-vibrant-light')}>Chuck Dries</h1>
+                <h1 className={classnames('font-black', isClient && 'text-vibrant-light')} style={{fontSize: '120px'}}>Chuck Dries</h1>
-                <h2 className={classnames('text-xl md:text-2xl', isClient && 'text-vibrant')}>Full Stack Software Engineer &amp; Hobbyist Photographer</h2>
+                {/* <h2 className={classnames('text-xl md:text-2xl', isClient && 'text-vibrant')}>Full Stack Software Engineer &amp; Hobbyist Photographer</h2> */}
               </div>
               {/* {<div className="border-t-2 border-muted-light mt-2 mr-2 mb-1" style={{width: 30}}></div>} */}
 
-              <ul className={'md:mr-4', classnames(isClient && 'text-muted-light')}>
+              {/* <ul className={' md:mr-4', classnames(isClient && 'text-muted-light')}>
                 <li>Software Engineer, Axosoft</li>
                 <li><HeroA className="ml-0" href="mailto:chuck@chuckdries.com" isClient={isClient}>chuck@chuckdries.com</HeroA>/<span className="ml-2">602.618.0414</span></li>
                 <li>
@@ -172,12 +178,12 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
                   <HeroA href="/CharlesDriesResumeCurrent.pdf" isClient={isClient}>Resume [pdf]</HeroA>/
                   <HeroA href="https://medium.com/@chuckdries" isClient={isClient}>Medium (blog)</HeroA>
                 </li>
-              </ul>
+              </ul> */}
+            
             </div>
           </section>
         </div>
       </div>
-
     </main>
   </>);
 };
@@ -199,7 +205,7 @@ export const query = graphql`
           gatsbyImageData(
             layout: FULL_WIDTH
             placeholder: NONE
-            breakpoints: [750, 1080, 1366, 1920, 2560]
+            breakpoints: [750, 1080, 1366, 1920, 2560, 3840]
           )
         }
         fields {

src/styles/global.css

@@ -32,6 +32,20 @@
   .scroll-padding-6 {
     scroll-padding: theme('spacing.6');
   }
+  .blurred-or-opaque-bg-1 {
+    @apply bg-opacity-80;
+  }
+  .blurred-or-opaque-bg-2 {
+    @apply bg-opacity-100;
+  }
+  @supports (backdrop-filter: blur(24px)) {
+    .blurred-or-opaque-bg-1 {
+      @apply bg-opacity-50 backdrop-filter backdrop-blur-lg;
+    }
+    .blurred-or-opaque-bg-2 {
+      @apply bg-opacity-70 backdrop-filter backdrop-blur;
+    }
+  }
   @variants responsive {
     .h-two-thirds-vw {
       height: 67vw;