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

Merge branch 'backdrop-blur' into experimental-typography-focus-hero

Browse Source
This commit is contained in:
Chuck Dries
2021-07-16 16:16:49 -07:00
parent adb88233ce d8655904fa
commit 9db0296b04
35 changed files with 931 additions and 775 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/pages/404.js
View File

@@ -1,11 +1,11 @@
import * as React from 'react';
import { Link } from 'gatsby';
import * as React from "react";
import { Link } from "gatsby";
// styles
const pageStyles = {
color: '#232129',
padding: '96px',
fontFamily: '-apple-system, Roboto, sans-serif, serif',
color: "#232129",
padding: "96px",
fontFamily: "-apple-system, Roboto, sans-serif, serif",
};
const headingStyles = {
marginTop: 0,
@@ -17,10 +17,10 @@ const paragraphStyles = {
marginBottom: 48,
};
const codeStyles = {
color: '#8A6534',
color: "#8A6534",
padding: 4,
backgroundColor: '#FFF4DB',
fontSize: '1.25rem',
backgroundColor: "#FFF4DB",
fontSize: "1.25rem",
borderRadius: 4,
};
@@ -31,13 +31,13 @@ const NotFoundPage = () => {
<title>Not found</title>
<h1 style={headingStyles}>Page not found</h1>
<p style={paragraphStyles}>
Sorry{' '}
Sorry{" "}
<span aria-label="Pensive emoji" role="img">
😔
</span>{' '}
</span>{" "}
we couldn’t find what you were looking for.
<br />
{process.env.NODE_ENV === 'development' ? (
{process.env.NODE_ENV === "development" ? (
<>
<br />
Try creating a page in <code style={codeStyles}>src/pages/</code>.

4
src/pages/asdf-resume.mdx
View File

@@ -2,8 +2,8 @@
title: Charles Dries Resume
---
import ResumeLayout from '../components/resume/ResumeLayout'
export default ResumeLayout
import ResumeLayout from "../components/resume/ResumeLayout";
export default ResumeLayout;
# Hello, World!

4
src/pages/index.js
View File

@@ -175,7 +175,7 @@ const IndexPage = ({
title="view image details"
to={`/photogallery/${image.base}/`}
>
<span className="icon-offset"><ion-icon name="image"></ion-icon></span>
Photography Gallery
</Link>
<button
className={classnames(
@@ -191,7 +191,7 @@ const IndexPage = ({
<span className="icon-offset"><ion-icon name="shuffle"></ion-icon></span>
</button>
</div>
<Link
<section
className={classnames(
'hover:underline p-3 px-5 py-4 my-3 text-md sm:text-lg rounded-md border-2 arrow-right-after font-bold font-serif',
isClient && 'text-muted-dark bg-muted-light bg-opacity-70 border-muted-dark hover:bg-muted')}

142
src/pages/photogallery.js
View File

@@ -1,87 +1,95 @@
import * as React from 'react';
import { graphql, Link } from 'gatsby';
import { navigate } from 'gatsby';
import { Helmet } from 'react-helmet';
import * as React from "react";
import { graphql, Link } from "gatsby";
import { navigate } from "gatsby";
import { Helmet } from "react-helmet";
import MasonryGallery from '../components/MasonryGallery';
import MasonryGallery from "../components/MasonryGallery";
// TODO: caption and title more images
// TODO: more images
const GalleryPage = ({ data }) => {
const images = React.useMemo(() =>
data.allFile.edges
.map(edge => edge.node, [data])
, [data]);
const images = React.useMemo(
() => data.allFile.edges.map((edge) => edge.node, [data]),
[data]
);
return (<>
<Helmet>
<title>Photo Gallery | Chuck Dries</title>
<body className="bg-black text-white" />
</Helmet>
<nav className="mt-1 ml-1 text-lg mb-4">
<button
className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before mr-1"
onClick={() => navigate(-1)}
type="button"
>back</button>
<Link
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
to="/"
>home</Link>
<Link
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
to="/photogallery/"
>gallery</Link>
</nav>
<div className="bg-black min-h-screen mx-auto 2xl:container">
<h1 className="text-5xl mt-0 ml-5 font-serif font-black z-10 relative">Photo Gallery</h1>
<div className="mx-auto">
<MasonryGallery
images={images}
itemsPerRow={{
sm: 2,
md: 2,
lg: 3,
xl: 3,
'2xl': 4,
}}
/>
return (
<>
<Helmet>
<title>Photo Gallery | Chuck Dries</title>
<body className="bg-black text-white" />
</Helmet>
<nav className="mt-1 ml-1 text-lg mb-4">
<button
className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before mr-1"
onClick={() => navigate(-1)}
type="button"
>
back
</button>
<Link
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
to="/"
>
home
</Link>
<Link
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
to="/photogallery/"
>
gallery
</Link>
</nav>
<div className="bg-black min-h-screen mx-auto 2xl:container">
<h1 className="text-5xl mt-0 ml-5 font-serif font-black z-10 relative">
Photo Gallery
</h1>
<div className="mx-auto">
<MasonryGallery
images={images}
itemsPerRow={{
sm: 2,
md: 2,
lg: 3,
xl: 3,
"2xl": 4,
}}
/>
</div>
</div>
</div>
</>);
</>
);
};
export const query = graphql`
query GalleryPageQuery {
allFile(
filter: { sourceInstanceName: { eq: "gallery" } }
sort: {order: DESC, fields: fields___imageMeta___dateTaken}
) {
edges {
node {
relativePath
base
childImageSharp{
fluid {
aspectRatio
query GalleryPageQuery {
allFile(
filter: { sourceInstanceName: { eq: "gallery" } }
sort: { order: DESC, fields: fields___imageMeta___dateTaken }
) {
edges {
node {
relativePath
base
childImageSharp {
fluid {
aspectRatio
}
gatsbyImageData(layout: CONSTRAINED, height: 550)
}
gatsbyImageData(
layout: CONSTRAINED
height: 550
)
}
fields {
imageMeta {
dateTaken
iptc {
object_name
fields {
imageMeta {
dateTaken
iptc {
object_name
}
}
}
}
}
}
}
}`;
`;
export default GalleryPage;