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 { 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 (<>
<Helmet>
<title>{name} - Gallery | Chuck Dries</title>
<body className="bg-black text-white" />
<body
className="text-vibrant-light bg-vibrant-dark"
style={getVibrantToHelmetSafeBodyStyle(vibrant)}
/>
</Helmet>
<Link className="underline text-vibrant-light arrow-left-before" to="/photogallery">back</Link>
<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="flex-grow-0">
<GatsbyImage
@ -37,15 +49,18 @@ const GalleryImage = ({ data }) => {
objectFit="contain"
style={{
maxWidth: `calc(max(90vh, 500px) * ${ar})`,
// height: '90vh',
maxHeight: '90vh',
minHeight: '500px',
}} />
</div>
<div className={classnames('flex-shrink-0 mr-4', ar <= 1 && 'pt-4 flex-auto text-right')}>
{hasName(image) && <h1 className="text-2xl mt-2">{name}</h1>}
<p>{getMeta(image).iptc.caption}</p>
<p>some other meta</p>
<div className={classnames('flex-shrink-0 mr-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>
{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>
@ -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
}
}
}
}

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

@ -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 (
<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>
<main
className="font-serif sm:block lg:grid"
className="font-serif sm:block md:grid hero"
>
<GatsbyImage
alt=""
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'
)}
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 href="https://www.linkedin.com/in/chuckdries/" isClient={isClient}>LinkedIn</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>
{/* <a href="https://pgp.mit.edu/pks/lookup?op=get&search=0x2BD9D0871DB5A518">Public Key</a> */}
</li>
@ -70,11 +70,11 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
</section>
<Link
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')}
to="/photogallery"
>
Photography</Link>
Photo Gallery</Link>
</div>
</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 { 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 (<>
<Helmet>
<title>Gallery | Chuck Dries</title>
<title>Photo Gallery | Chuck Dries</title>
<body className="bg-black text-white" />
</Helmet>
<div className="bg-black min-h-screen">
<h1 className="text-2xl">Gallery</h1>
<div className="mx-auto 2xl:container">
<div className="bg-black min-h-screen 2xl:container">
<Link className="text-blue-300 arrow-left-before" to="/">back</Link>
<h1 className="text-5xl mt-2 ml-4 font-serif font-black z-10 relative">Photo Gallery</h1>
<div className="mx-auto">
<MasonryGallery
images={images}
itemsPerRow={{

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

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

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

Binary file not shown.