Add favicon, and icons for image metadata
This commit is contained in:
Chuck Dries
@@ -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',
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
37
src/html.js
Normal file
37
src/html.js
Normal file
@@ -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,
|
||||
};
|
||||
1
src/images/glasses-outline.svg
Normal file
1
src/images/glasses-outline.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 400 B |
@@ -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"
|
||||
>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user