chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add resume, back button; add meta and colors to galleryimage

Browse Source
This commit is contained in:
Chuck Dries 2021-06-16 22:47:53 -07:00
parent 932535840f
commit e54ff94064
9 changed files with 89 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
CharlesDriesResumeCurrent.pdf
View File

Binary file not shown.

62
gatsby/src/components/GalleryImage.js
View File

@ -1,6 +1,14 @@
import React from 'react'; import React from 'react';
import { graphql } from 'gatsby'; import { graphql, Link } from 'gatsby';
import { getAspectRatio, getMeta, getName, hasName } from '../utils'; import {
getAspectRatio,
getMeta,
getName,
getShutterFractionFromExposureTime,
getVibrant,
getVibrantToHelmetSafeBodyStyle,
hasName,
} from '../utils';
import { GatsbyImage, getImage } from 'gatsby-plugin-image'; import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
import classnames from 'classnames'; import classnames from 'classnames';
@ -8,24 +16,28 @@ import classnames from 'classnames';
const GalleryImage = ({ data }) => { const GalleryImage = ({ data }) => {
const image = data.allFile.edges[0].node; const image = data.allFile.edges[0].node;
const ar = getAspectRatio(image); const ar = getAspectRatio(image);
console.log(ar); // console.log(ar);
// const imageStyle = {}
// if (ar > 1) {
// imageStyle.width = '90vw'
// } else {
// imageStyle.height = '90vh'
// }
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 name = getName(image);
const meta = getMeta(image);
const vibrant = getVibrant(image, true);
const shutterSpeed = React.useMemo(() => getShutterFractionFromExposureTime(meta.exif.ExposureTime || 0), [meta]);
return (<> return (<>
<Helmet> <Helmet>
<title>{name} - Gallery | Chuck Dries</title> <title>{name} - Gallery | Chuck Dries</title>
<body className="bg-black text-white" /> <body
className="text-vibrant-light bg-vibrant-dark"
style={getVibrantToHelmetSafeBodyStyle(vibrant)}
/>
</Helmet> </Helmet>
<Link className="underline text-vibrant-light arrow-left-before" to="/photogallery">back</Link>
<div className="min-h-screen flex flex-col justify-center"> <div className="min-h-screen flex flex-col justify-center">
{/* TODO: change layout by amount of empty space on side of page, not aspect ratio? */}
<div className={classnames('flex mx-auto', ar > 1 ? 'flex-col' : 'flex-row-reverse')} style={{ margin: '0 5vw' }}> <div className={classnames('flex mx-auto', ar > 1 ? 'flex-col' : 'flex-row-reverse')} style={{ margin: '0 5vw' }}>
<div className="flex-grow-0"> <div className="flex-grow-0">
<GatsbyImage <GatsbyImage
@ -37,15 +49,18 @@ const GalleryImage = ({ data }) => {
objectFit="contain" objectFit="contain"
style={{ style={{
maxWidth: `calc(max(90vh, 500px) * ${ar})`, maxWidth: `calc(max(90vh, 500px) * ${ar})`,
// height: '90vh',
maxHeight: '90vh', maxHeight: '90vh',
minHeight: '500px', minHeight: '500px',
}} /> }} />
</div> </div>
<div className={classnames('flex-shrink-0 mr-4', ar <= 1 && 'pt-4 flex-auto text-right')}> <div className={classnames('flex-shrink-0 mr-2 flex flex-row', ar <= 1 && 'pt-4 flex-col flex-auto text-right')}>
{hasName(image) && <h1 className="text-2xl mt-2">{name}</h1>} <div className="flex-auto mr-1">
<p>{getMeta(image).iptc.caption}</p> {hasName(image) && <h1 className="text-2xl mt-2 font-serif">{name}</h1>}
<p>some other meta</p> <p className="mr-1">{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>}
</div> </div>
</div> </div>
</div> </div>
@ -65,8 +80,8 @@ export const query = graphql`
gatsbyImageData( gatsbyImageData(
layout: CONSTRAINED layout: CONSTRAINED
# placeholder: BLURRED # placeholder: BLURRED
# placeholder: DOMINANT_COLOR placeholder: DOMINANT_COLOR
placeholder: TRACED_SVG # placeholder: TRACED_SVG
height: 2048 height: 2048
) )
fields { fields {
@ -80,9 +95,16 @@ export const query = graphql`
exif { exif {
FNumber FNumber
ExposureTime ExposureTime
ShutterSpeedValue
ISO ISO
} }
vibrant {
DarkMuted
DarkVibrant
LightMuted
LightVibrant
Muted
Vibrant
}
} }
} }
} }

2
gatsby/src/components/MasonryGallery.js
View File

@ -49,7 +49,7 @@ const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
// console.log('ars', rowAspectRatioSum); // console.log('ars', rowAspectRatioSum);
if (i === 0) { if (i === 0) {
// console.log(rowIndex, rowAspectRatioSum); // console.log(rowIndex, rowAspectRatioSum);
console.log(getName(image), width); // console.log(getName(image), width);
} }
return ( return (
<Link <Link

0
gatsby/src/pages/resume.mdx → gatsby/src/pages/asdf-resume.mdx
View File

10
gatsby/src/pages/index.js
View File

@ -30,12 +30,12 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
/> />
</Helmet> </Helmet>
<main <main
className="font-serif sm:block lg:grid" className="font-serif sm:block md:grid hero"
> >
<GatsbyImage <GatsbyImage
alt="" alt=""
className={classnames( className={classnames(
'lg:h-screen hero-img sm:h-auto', 'md:h-screen hero-img sm:h-auto',
// isClient ? 'sm:h-auto' : 'sm:h-2' // isClient ? 'sm:h-auto' : 'sm:h-2'
)} )}
image={getImage(image)} image={getImage(image)}
@ -61,7 +61,7 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
<HeroA className="ml-0" href="http://github.com/chuckdries" isClient={isClient}>Github</HeroA>/ <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>/ <HeroA href="https://www.linkedin.com/in/chuckdries/" isClient={isClient}>LinkedIn</HeroA>/
<HeroA href="https://devpost.com/chuckdries" isClient={isClient}>Devpost</HeroA>/ <HeroA href="https://devpost.com/chuckdries" isClient={isClient}>Devpost</HeroA>/
<HeroA href="CharlesDriesResumeCurrent.pdf" isClient={isClient}>Resume [pdf]</HeroA>/ <HeroA href="/public/CharlesDriesResumeCurrent.pdf" isClient={isClient}>Resume [pdf]</HeroA>/
<HeroA href="https://medium.com/@chuckdries" isClient={isClient}>Medium (blog)</HeroA> <HeroA href="https://medium.com/@chuckdries" isClient={isClient}>Medium (blog)</HeroA>
{/* <a href="https://pgp.mit.edu/pks/lookup?op=get&search=0x2BD9D0871DB5A518">Public Key</a> */} {/* <a href="https://pgp.mit.edu/pks/lookup?op=get&search=0x2BD9D0871DB5A518">Public Key</a> */}
</li> </li>
@ -70,11 +70,11 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
</section> </section>
<Link <Link
className={classnames( className={classnames(
'hover:underline font-sans inline-block p-3 my-2 rounded-md border-2 arrow-after font-bold', 'hover:underline inline-block p-4 px-5 my-2 rounded-md border-2 arrow-right-after font-bold font-serif',
isClient && 'text-muted-dark bg-muted-light border-muted-light')} isClient && 'text-muted-dark bg-muted-light border-muted-light')}
to="/photogallery" to="/photogallery"
> >
Photography</Link> Photo Gallery</Link>
</div> </div>
</div> </div>
<div id="asdf" style={{ display: 'block'}}></div> <div id="asdf" style={{ display: 'block'}}></div>

10
gatsby/src/pages/photogallery.js
View File

@ -1,6 +1,7 @@
import * as React from 'react'; import * as React from 'react';
import { graphql } from 'gatsby'; import { graphql } from 'gatsby';
// import { GatsbyImage, getImage } from 'gatsby-plugin-image'; // import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import { Link } from 'gatsby';
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
// import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry'; // import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry';
@ -15,12 +16,13 @@ const GalleryPage = ({ data }) => {
return (<> return (<>
<Helmet> <Helmet>
<title>Gallery | Chuck Dries</title> <title>Photo Gallery | Chuck Dries</title>
<body className="bg-black text-white" /> <body className="bg-black text-white" />
</Helmet> </Helmet>
<div className="bg-black min-h-screen"> <div className="bg-black min-h-screen 2xl:container">
<h1 className="text-2xl">Gallery</h1> <Link className="text-blue-300 arrow-left-before" to="/">back</Link>
<div className="mx-auto 2xl:container"> <h1 className="text-5xl mt-2 ml-4 font-serif font-black z-10 relative">Photo Gallery</h1>
<div className="mx-auto">
<MasonryGallery <MasonryGallery
images={images} images={images}
itemsPerRow={{ itemsPerRow={{

14
gatsby/src/styles/global.css
View File

@ -8,7 +8,9 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
transition: color .2s, background .2s; }
.hero * {
transition: color .2s, background-color .2s;
} }
@layer utilities { @layer utilities {
.scroll-snap-none { .scroll-snap-none {
@ -47,10 +49,18 @@ a {
@apply text-blue-600; @apply text-blue-600;
} }
.arrow-after:after { .arrow-right-after:after {
content: "\279C"; content: "\279C";
margin-left: 3px; margin-left: 3px;
transform: translate(0px); transform: translate(0px);
display: inline-block; display: inline-block;
transition: all .2s; transition: all .2s;
} }
.arrow-left-before:before {
content: "\21AB";
margin-left: 3px;
transform: translate(0px);
display: inline-block;
transition: all .2s;
}

23
gatsby/src/utils.js
View File

@ -20,6 +20,7 @@ export const getAspectRatio = (image) => image.childImageSharp.fluid.aspectRatio
export const getRgba = (palette, alpha) => `rgba(${palette[0]}, ${palette[1]}, ${palette[2]}, ${alpha || 1})`; 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) => { export const getVibrantToHelmetSafeBodyStyle = (vibrant) => {
const style = { const style = {
'--muted': vibrant.Muted, '--muted': vibrant.Muted,
@ -34,3 +35,25 @@ export const getVibrantToHelmetSafeBodyStyle = (vibrant) => {
} }
return Object.keys(style).map(key => `${(key)}: ${style[key]}`).join(';'); 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}`;
};

BIN
gatsby/static/CharlesDriesResumeCurrent.pdf Normal file
View File

Binary file not shown.