Add favicon, and icons for image metadata

gatsby-config.js

@@ -9,7 +9,7 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-manifest',
       options: {
-        icon: 'src/images/icon.png',
+        icon: 'src/images/glasses-outline.svg',
       },
     },
     'gatsby-plugin-mdx',

package.json

@@ -14,7 +14,7 @@
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "lint-fix": "eslint --fix --ext .jsx,.js src",
-    "deploy": "yarn build && rsync -rzP --delete public/ chuckdries@droplet.chuckdries.com:www/personal-website-staging"
+    "deploy": "yarn build && rsync -rzP --delete public/ chuckdries@droplet.chuckdries.com:www/personal-website"
   },
   "dependencies": {
     "@mdx-js/mdx": "^1.6.22",

src/components/GalleryImage.js

@@ -23,7 +23,7 @@ const GalleryImage = ({ data }) => {
   const meta = getMeta(image);
   const vibrant = getVibrant(image, true);
 
-  const orientationClasses = ar > 1 ? 'flex-col mx-auto' : 'portrait:mx-auto landscape:mx-4 landscape:flex-row-reverse portrait:flex-col';
+  const orientationClasses = ar > 1 ? 'flex-col mx-auto' : 'portrait:mx-auto landscape:mx-5 landscape:flex-row-reverse portrait:flex-col';
   console.log(ar, orientationClasses);
   const shutterSpeed = React.useMemo(() => getShutterFractionFromExposureTime(meta.exif.ExposureTime || 0), [meta]);
   return (<>
@@ -35,7 +35,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="min-h-screen pt-5 flex flex-col justify-center">
       <div className={classnames('flex', orientationClasses)}>
         <div className="flex-grow-0">
           <GatsbyImage
@@ -51,14 +51,22 @@ const GalleryImage = ({ data }) => {
               // minHeight: '500px',
             }} />
         </div>
-        <div className={classnames('flex-shrink-0 mx-2 flex flex-row', ar <= 1 && 'pt-4 flex-col flex-auto text-right')}>
-          <div className="flex-auto mr-1">
-            {hasName(image) && <h1 className="text-2xl mt-2 font-serif">{name}</h1>}
-            <p className="mr-1">{meta.iptc.caption}</p>
+        <div className={classnames('flex-shrink-0 mx-2 flex flex-row', ar <= 1 && 'pt-5 flex-col flex-auto text-right')}>
+          <div className="flex-auto mr-2">
+            {hasName(image) && <h1 className="text-2xl mt-3 font-serif">{name}</h1>}
+            <p className="mr-2">{meta.iptc.caption}</p>
           </div>
-          {shutterSpeed && <p className="mr-1">Shutter speed: {shutterSpeed}</p>}
-          {meta.exif.FNumber && <p className="mr-1">Aperture: f/{meta.exif.FNumber}</p>}
-          {meta.exif.ISO && <p className="mr-1">ISO: {meta.exif.ISO}</p>}
+          {shutterSpeed && <div className="ml-2 text-lg">
+            <span className="mr-1">{shutterSpeed}</span>
+            <span className="relative" style={{top: '2px'}}><ion-icon name="stopwatch-outline"></ion-icon></span>
+          </div>}
+          {meta.exif.FNumber && <div className="ml-2 text-lg">
+            <span className="mr-1">f/{meta.exif.FNumber}</span>
+            <span className="relative" style={{top: '2px'}}>
+              <ion-icon name="aperture-outline"></ion-icon>
+            </span>
+          </div>}
+          {meta.exif.ISO && <div className="align-baseline ml-2 text-lg"><span className="mr-1">{meta.exif.ISO}</span><span className="text-xs" style={{marginRight: '-3px'}}>ISO</span></div>}
         </div>
       </div>
     </div>

src/components/IndexComponents.js

@@ -9,7 +9,7 @@ export const HeroA = ({
   ...linkProps
 }) => (
   <a
-    className={classnames('mx-1 underline', isClient && 'text-muted-light hover:text-vibrant-light', className)}
+    className={classnames('mx-2 underline', isClient && 'text-muted-light hover:text-vibrant-light', className)}
     href={href}
     {...linkProps}
   >{children}</a>

src/html.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function HTML(props) {
+  return (
+    <html {...props.htmlAttributes}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta content="ie=edge" httpEquiv="x-ua-compatible" />
+        <meta
+          content="width=device-width, initial-scale=1, shrink-to-fit=no"
+          name="viewport"
+        />
+        {props.headComponents}
+      </head>
+      <body {...props.bodyAttributes}>
+        {props.preBodyComponents}
+        <div
+          dangerouslySetInnerHTML={{ __html: props.body }}
+          id="___gatsby"
+          key={'body'}
+        />
+        {props.postBodyComponents}
+        <script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js" type="module"></script>
+      </body>
+    </html>
+  );
+}
+
+HTML.propTypes = {
+  htmlAttributes: PropTypes.object,
+  headComponents: PropTypes.array,
+  bodyAttributes: PropTypes.object,
+  preBodyComponents: PropTypes.array,
+  body: PropTypes.string,
+  postBodyComponents: PropTypes.array,
+};

src/images/glasses-outline.svg

@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Glasses</title><path d='M224 232a32 32 0 0164 0M448 200h16M64 200H48M64 200c0 96 16 128 80 128s80-32 80-128c0 0-16-16-80-16s-80 16-80 16zM448 200c0 96-16 128-80 128s-80-32-80-128c0 0 16-16 80-16s80 16 80 16z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/></svg>

src/pages/index.js

@@ -62,14 +62,14 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
         // 67vw = 1/1.49253731 = 1/aspect ratio of my camera lol
         : <div className="md:h-screen sm:h-two-thirds-vw" style={{gridArea: '1/1' }}></div> }
       <div className="relative grid place-items-center" style={{gridArea: '1/1'}}>
-        <div className="m-2 flex flex-col items-end">
-          <section className={classnames('rounded-xl py-5', isClient && ' bg-vibrant-dark-75')}>
-            <div className="mx-auto px-5">
+        <div className="m-3 flex flex-col items-end">
+          <section className={classnames('rounded-xl py-6', isClient && ' bg-vibrant-dark-75')}>
+            <div className="mx-auto px-6">
               <h1 className={classnames('font-black text-6xl', isClient && 'text-vibrant-light')}>Chuck Dries</h1>
               <h2 className={classnames('italic text-2xl', isClient && 'text-vibrant')}>Full stack software engineer &amp; hobbyist photographer</h2>
               <ul className={classnames(isClient && 'text-muted-light')}>
                 <li>Software Developer, <span className="italic">Axosoft</span></li>
-                <li><HeroA className="ml-0" href="mailto:chuck@chuckdries.com" isClient={isClient}>chuck@chuckdries.com</HeroA>/<span className="ml-1">602.618.0414</span></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>
                   <HeroA className="ml-0" href="http://github.com/chuckdries" isClient={isClient}>Github</HeroA>/
                   <HeroA href="https://www.linkedin.com/in/chuckdries/" isClient={isClient}>LinkedIn</HeroA>/
@@ -82,7 +82,7 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
           </section>
           <Link
             className={classnames(
-              'hover:underline inline-block p-2 px-4 my-2 text-lg rounded-md border-2 arrow-right-after font-bold font-serif',
+              'hover:underline inline-block p-3 px-5 my-3 text-lg rounded-md border-2 arrow-right-after font-bold font-serif',
               isClient && 'text-muted-dark bg-muted-light border-muted-light')} 
             to="/photogallery"
           >

src/pages/photogallery.js

@@ -21,7 +21,7 @@ const GalleryPage = ({ data }) => {
     </Helmet>
     <div className="bg-black min-h-screen 2xl:container">
       <Link className="hover:underline hover:text-blue-200 text-blue-300 arrow-left-before" to="/">home</Link>
-      <h1 className="text-5xl mt-2 ml-4 font-serif font-black z-10 relative">Photo Gallery</h1>
+      <h1 className="text-5xl mt-3 ml-5 font-serif font-black z-10 relative">Photo Gallery</h1>
       <div className="mx-auto">
         <MasonryGallery
           images={images}

tailwind.config.js

@@ -15,14 +15,15 @@ module.exports = {
     },
     spacing: {
       '0': '0px',
-      '1': '8px',
-      '2': '12px',
-      '3': '16px',
-      '4': '24px',
-      '5': '32px',
-      '6': '48px',
-      '7': '80px',
-      '8': '800px',
+      '1': '4px',
+      '2': '8px',
+      '3': '12px',
+      '4': '16px',
+      '5': '24px',
+      '6': '32px',
+      '7': '48px',
+      '8': '80px',
+      '9': '800px',
     },
     fontFamily: {
       ...defaultTheme.fontFamily,