diff --git a/CharlesDriesResumeCurrent.pdf b/CharlesDriesResumeCurrent.pdf index 2f0045f..67038c3 100644 Binary files a/CharlesDriesResumeCurrent.pdf and b/CharlesDriesResumeCurrent.pdf differ diff --git a/gatsby/src/components/GalleryImage.js b/gatsby/src/components/GalleryImage.js index 8ae01f8..06367d6 100644 --- a/gatsby/src/components/GalleryImage.js +++ b/gatsby/src/components/GalleryImage.js @@ -1,6 +1,14 @@ import React from 'react'; -import { graphql } from 'gatsby'; -import { getAspectRatio, getMeta, getName, hasName } from '../utils'; +import { graphql, Link } from 'gatsby'; +import { + getAspectRatio, + getMeta, + getName, + getShutterFractionFromExposureTime, + getVibrant, + getVibrantToHelmetSafeBodyStyle, + hasName, +} from '../utils'; import { GatsbyImage, getImage } from 'gatsby-plugin-image'; import { Helmet } from 'react-helmet'; import classnames from 'classnames'; @@ -8,24 +16,28 @@ import classnames from 'classnames'; const GalleryImage = ({ data }) => { const image = data.allFile.edges[0].node; const ar = getAspectRatio(image); - console.log(ar); - // const imageStyle = {} - // if (ar > 1) { - // imageStyle.width = '90vw' - // } else { - // imageStyle.height = '90vh' - // } + // console.log(ar); - console.log(`calc(90vw * ${ar})px`); + // TODO: layout by comparing aspect ratio of browser to aspect ratio of image + // TODO: metadata + + // console.log(`calc(90vw * ${ar})px`); const name = getName(image); + const meta = getMeta(image); + const vibrant = getVibrant(image, true); + + const shutterSpeed = React.useMemo(() => getShutterFractionFromExposureTime(meta.exif.ExposureTime || 0), [meta]); return (<> {name} - Gallery | Chuck Dries - + + back
- {/* TODO: change layout by amount of empty space on side of page, not aspect ratio? */}
1 ? 'flex-col' : 'flex-row-reverse')} style={{ margin: '0 5vw' }}>
{ objectFit="contain" style={{ maxWidth: `calc(max(90vh, 500px) * ${ar})`, - // height: '90vh', maxHeight: '90vh', minHeight: '500px', }} />
-
- {hasName(image) &&

{name}

} -

{getMeta(image).iptc.caption}

-

some other meta

+
+
+ {hasName(image) &&

{name}

} +

{meta.iptc.caption}

+
+ {shutterSpeed &&

Shutter speed: {shutterSpeed}

} + {meta.exif.FNumber &&

Aperture: f/{meta.exif.FNumber}

} + {meta.exif.ISO &&

ISO: {meta.exif.ISO}

}
@@ -65,8 +80,8 @@ export const query = graphql` gatsbyImageData( layout: CONSTRAINED # placeholder: BLURRED - # placeholder: DOMINANT_COLOR - placeholder: TRACED_SVG + placeholder: DOMINANT_COLOR + # placeholder: TRACED_SVG height: 2048 ) fields { @@ -80,9 +95,16 @@ export const query = graphql` exif { FNumber ExposureTime - ShutterSpeedValue ISO } + vibrant { + DarkMuted + DarkVibrant + LightMuted + LightVibrant + Muted + Vibrant + } } } } diff --git a/gatsby/src/components/MasonryGallery.js b/gatsby/src/components/MasonryGallery.js index be73c16..651dd48 100644 --- a/gatsby/src/components/MasonryGallery.js +++ b/gatsby/src/components/MasonryGallery.js @@ -49,7 +49,7 @@ const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => { // console.log('ars', rowAspectRatioSum); if (i === 0) { // console.log(rowIndex, rowAspectRatioSum); - console.log(getName(image), width); + // console.log(getName(image), width); } return ( { />
{ Github/ LinkedIn/ Devpost/ - Resume [pdf]/ + Resume [pdf]/ Medium (blog) {/* Public Key */} @@ -70,11 +70,11 @@ const IndexPage = ({ data: { allFile: { edges } } }) => { - Photography + Photo Gallery
diff --git a/gatsby/src/pages/photogallery.js b/gatsby/src/pages/photogallery.js index d63d29a..9df8194 100644 --- a/gatsby/src/pages/photogallery.js +++ b/gatsby/src/pages/photogallery.js @@ -1,6 +1,7 @@ import * as React from 'react'; import { graphql } from 'gatsby'; // import { GatsbyImage, getImage } from 'gatsby-plugin-image'; +import { Link } from 'gatsby'; import { Helmet } from 'react-helmet'; // import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry'; @@ -15,12 +16,13 @@ const GalleryPage = ({ data }) => { return (<> - Gallery | Chuck Dries + Photo Gallery | Chuck Dries -
-

Gallery

-
+
+ back +

Photo Gallery

+
image.childImageSharp.fluid.aspectRatio export const getRgba = (palette, alpha) => `rgba(${palette[0]}, ${palette[1]}, ${palette[2]}, ${alpha || 1})`; +// work around SSR bug in react-helmet export const getVibrantToHelmetSafeBodyStyle = (vibrant) => { const style = { '--muted': vibrant.Muted, @@ -34,3 +35,25 @@ export const getVibrantToHelmetSafeBodyStyle = (vibrant) => { } return Object.keys(style).map(key => `${(key)}: ${style[key]}`).join(';'); }; + +const gcd = (a, b) => { + if (b < 0.0000001) { + return a; // Since there is a limited precision we need to limit the value. + } + + return gcd(b, Math.floor(a % b)); // Discard any fractions due to limitations in precision. +}; + +export const getShutterFractionFromExposureTime = (exposureTime) => { + let fraction = exposureTime; + var len = fraction.toString().length - 2; + + var denominator = Math.pow(10, len); + var numerator = fraction * denominator; + + var divisor = gcd(numerator, denominator); + + numerator /= divisor; + denominator /= divisor; + return `${numerator}/${denominator}`; +}; diff --git a/gatsby/static/CharlesDriesResumeCurrent.pdf b/gatsby/static/CharlesDriesResumeCurrent.pdf new file mode 100644 index 0000000..67038c3 Binary files /dev/null and b/gatsby/static/CharlesDriesResumeCurrent.pdf differ