From e8e753a05411040796ab0f4ec917a05aedb26048 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuckd@axosoft.com>
Date: Fri, 18 Jun 2021 20:20:49 -0700
Subject: [PATCH] Add favicon, and icons for image metadata
---
gatsby-config.js | 2 +-
package.json | 2 +-
src/components/GalleryImage.js | 26 ++++++++++++++--------
src/components/IndexComponents.js | 2 +-
src/html.js | 37 +++++++++++++++++++++++++++++++
src/images/glasses-outline.svg | 1 +
src/pages/index.js | 10 ++++-----
src/pages/photogallery.js | 2 +-
tailwind.config.js | 17 +++++++-------
9 files changed, 73 insertions(+), 26 deletions(-)
create mode 100644 src/html.js
create mode 100644 src/images/glasses-outline.svg
diff --git a/gatsby-config.js b/gatsby-config.js
index 283b0e9..f96b193 100644
--- a/gatsby-config.js
+++ b/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',
diff --git a/package.json b/package.json
index 7c3ebf3..f28c799 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/GalleryImage.js b/src/components/GalleryImage.js
index c4eac7d..9a7dd2f 100644
--- a/src/components/GalleryImage.js
+++ b/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>
diff --git a/src/components/IndexComponents.js b/src/components/IndexComponents.js
index 4f88ad6..5de5f03 100644
--- a/src/components/IndexComponents.js
+++ b/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>
diff --git a/src/html.js b/src/html.js
new file mode 100644
index 0000000..71b820d
--- /dev/null
+++ b/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,
+};
diff --git a/src/images/glasses-outline.svg b/src/images/glasses-outline.svg
new file mode 100644
index 0000000..9de6f3c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index 4feed0b..cc6b68c 100644
--- a/src/pages/index.js
+++ b/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 & 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"
>
diff --git a/src/pages/photogallery.js b/src/pages/photogallery.js
index c5c793d..89e2bac 100644
--- a/src/pages/photogallery.js
+++ b/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}
diff --git a/tailwind.config.js b/tailwind.config.js
index 656503f..31daaaf 100644
--- a/tailwind.config.js
+++ b/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,