1 || !isClient ? 'landscape:h-screen portrait:h-two-thirds-vw' : 'h-screen portrait:w-full landscape:w-1/2',
+ "relative grid",
+ ar <= 1
+ ? "place-items-end landscape:place-items-center"
+ : "place-items-end"
)}
- image={getImage(image)}
- loading="eager"
- style={{
- gridArea: '1/1',
- }} />
- // 67vw = 1/1.49253731 = 1/aspect ratio of my camera lol
- : }
-
-
-
- Photo Gallery | Chuck Dries
-
-
-
-
-
-
-
- );
+
+
+ );
};
export const query = graphql`
-{
- allFile(
- filter: { sourceInstanceName: {eq: "gallery"} }
- sort: {order: DESC, fields: fields___imageMeta___dateTaken}
- ) {
- edges {
- node {
- relativePath
- base
- childImageSharp {
- fluid {
- aspectRatio
+ {
+ allFile(
+ filter: { sourceInstanceName: { eq: "gallery" } }
+ sort: { order: DESC, fields: fields___imageMeta___dateTaken }
+ ) {
+ edges {
+ node {
+ relativePath
+ base
+ childImageSharp {
+ fluid {
+ aspectRatio
+ }
+ gatsbyImageData(
+ layout: FULL_WIDTH
+ placeholder: NONE
+ breakpoints: [750, 1080, 1366, 1920, 2560]
+ )
}
- gatsbyImageData(
- layout: FULL_WIDTH
- placeholder: NONE
- breakpoints: [750, 1080, 1366, 1920, 2560]
- )
- }
- fields {
- imageMeta {
- vibrant {
- ...VibrantColors
+ fields {
+ imageMeta {
+ vibrant {
+ ...VibrantColors
+ }
}
}
}
}
}
}
-}
`;
export default IndexPage;
diff --git a/src/pages/photogallery.js b/src/pages/photogallery.js
index 3d5bb9c..759038c 100644
--- a/src/pages/photogallery.js
+++ b/src/pages/photogallery.js
@@ -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 (<>
-
+ style={{ gridArea: "1/1" }}
+ >
+ 1 && 'landscape:shadow-lg',
- 'md:px-6 px-4 md:py-5 py-3 rounded-l-md mb-4', isClient &&
- 'bg-vibrant-dark bg-opacity-60 backdrop-filter backdrop-blur-xl'
- )}
- >
-
-
+
-
+
- 1 && "landscape:shadow-lg",
+ "md:px-6 px-4 md:py-5 py-3 rounded-l-md mb-4",
+ isClient &&
+ "bg-vibrant-dark bg-opacity-60 backdrop-filter backdrop-blur-xl"
+ )}
>
- Photography Gallery
-
-
+
+
+
- 1 || !isClient ? 'landscape:flex' : 'portrait:flex')}
- >
-
-
-
+
+ Chuck Dries
-Full Stack Software Engineer & Hobbyist Photographer
+ 1 || !isClient ? "landscape:flex" : "portrait:flex"
+ )}
+ >
+
- {/* {} */}
-
-
+
+ {/* {} */}
+
+ + Chuck Dries +
++ Full Stack Software Engineer & Hobbyist Photographer +
+-
+
- Software Engineer, Axosoft +
-
+
+ chuck@chuckdries.com + + /602.618.0414 +
+ -
+
+ Github + + / ++ LinkedIn + + / ++ Devpost + + / ++ Resume [pdf] + + / ++ Medium (blog) + +
+
-
-
- Software Engineer, Axosoft -
chuck@chuckdries.com /602.618.0414
- -
-
Github / -LinkedIn / -Devpost / -Resume [pdf] / -Medium (blog) -
-
-
Photo Gallery
-
-
+ Photo Gallery | Chuck Dries
+
+
+
+
- );
+
+ );
};
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;
diff --git a/src/styles/global.css b/src/styles/global.css
index f6a90bc..7309d09 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,6 +1,6 @@
/* @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@0;1&display=swap'); */
/* black, bold, regular */
-@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap");
@tailwind base;
@tailwind components;
@@ -30,7 +30,7 @@
scroll-snap-align: start;
}
.scroll-padding-6 {
- scroll-padding: theme('spacing.6');
+ scroll-padding: theme("spacing.6");
}
@variants responsive {
.h-two-thirds-vw {
@@ -63,7 +63,7 @@ a {
margin-left: 3px;
transform: translate(0px);
display: inline-block;
- transition: all .2s;
+ transition: all 0.2s;
}
.arrow-left-before:before {
diff --git a/src/styles/resume.css b/src/styles/resume.css
index 94711bd..b54eff5 100644
--- a/src/styles/resume.css
+++ b/src/styles/resume.css
@@ -3,4 +3,3 @@
@apply text-3xl font-bold;
}
}
-
diff --git a/src/utils.js b/src/utils.js
index 5dcbd08..ac2d33e 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -2,31 +2,36 @@
export const getMeta = (image) => image.fields.imageMeta;
-export const getName = (image) => getMeta(image)?.iptc.object_name || image.base;
+export const getName = (image) =>
+ getMeta(image)?.iptc.object_name || image.base;
// some pleasing default colors for SSR and initial hydration
export const getVibrant = (image) => getMeta(image)?.vibrant;
export const hasName = (image) => Boolean(getMeta(image)?.iptc.object_name);
-export const getAspectRatio = (image) => image.childImageSharp.fluid.aspectRatio;
+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) => {
const style = {
- '--muted': vibrant.Muted,
- '--dark-muted': vibrant.DarkMuted,
- '--light-muted': vibrant.LightMuted,
- '--vibrant': vibrant.Vibrant,
- '--dark-vibrant': vibrant.DarkVibrant,
- '--light-vibrant': vibrant.LightVibrant,
+ "--muted": vibrant.Muted,
+ "--dark-muted": vibrant.DarkMuted,
+ "--light-muted": vibrant.LightMuted,
+ "--vibrant": vibrant.Vibrant,
+ "--dark-vibrant": vibrant.DarkVibrant,
+ "--light-vibrant": vibrant.LightVibrant,
};
- if (typeof window === 'undefined') {
+ if (typeof window === "undefined") {
return style;
}
- return Object.keys(style).map(key => `${(key)}: ${style[key]}`).join(';');
+ return Object.keys(style)
+ .map((key) => `${key}: ${style[key]}`)
+ .join(";");
};
const gcd = (a, b) => {
@@ -40,12 +45,12 @@ const gcd = (a, b) => {
export const getShutterFractionFromExposureTime = (exposureTime) => {
let fraction = exposureTime;
const len = fraction.toString().length - 2;
-
+
let denominator = Math.pow(10, len);
let numerator = fraction * denominator;
-
+
const divisor = gcd(numerator, denominator);
-
+
numerator /= divisor;
denominator /= divisor;
return `${numerator}/${denominator}`;
diff --git a/static/editme.html b/static/editme.html
index 0611faf..b9d6713 100644
--- a/static/editme.html
+++ b/static/editme.html
@@ -6,7 +6,8 @@
+
- + Photo Gallery +
+
+
contenteditable can be applied to visible style tags
- This paragraph is editable, as is the style tag below. Edit it to see the layout change in real time. + This paragraph is editable, as is the style tag below. Edit it to see the + layout change in real time.
-
+
-
-
+
+
-
-
+
diff --git a/static/learn.html b/static/learn.html
index 028cd7a..4b308b9 100644
--- a/static/learn.html
+++ b/static/learn.html
@@ -1,19 +1,16 @@
-
-
-
-
-
- Document
-
-
-
-
- a tags are for links
- p tags are for paragraphs
- h1 through h6 are for headers
- 
- divs are just boxes
-
-
-
-
\ No newline at end of file
+
+
+
+
+ Document
+
+
+
+
+ a tags are for links
+ p tags are for paragraphs
+ h1 through h6 are for headers
+
+ divs are just boxes
+
+
diff --git a/static/roboticchuck.html b/static/roboticchuck.html
index 53ae0ef..1e2c063 100644
--- a/static/roboticchuck.html
+++ b/static/roboticchuck.html
@@ -1,77 +1,101 @@
-
-
-
-
-
+
+
+
+
Robotic Chuck
-
+ body {
+ margin: auto;
+ max-width: 800px;
+ line-height: 1.5;
+ }
-
+ code,
+ #output {
+ padding: 5px;
+ background: #eee;
+ border: 1px solid #ccc;
+ border-radius: 3px;
+ display: inline-block;
+ }
+
+ p {
+ max-width: 800px;
+ }
+
+ input,
+ textarea {
+ width: 100%;
+ padding: 5px;
+ /*max-width: 800px;*/
+ }
+
+ #genbutton {
+ color: white;
+ background: #01c106;
+ padding: 1em;
+ border: 1px solid #1e7931;
+ font-size: 1em;
+ border-radius: 3px;
+ }
+
+
+
+
- Title of box:
+ Title of box:
+
Description text:
-
+
Enter the links to generate according to this format:
[
{
@@ -87,20 +111,37 @@
"url": "yet-another-url"
}
]
- This format is known as JSON, it's an internet standard that's supposed to be easy for humans and computers to read.
- Note how commas are used to separate multiple items but are never used after the last item in a set. This is important,
- it will not work if you include a trailing comma where there should not be one.
-
-
+
+ This format is known as JSON, it's an internet standard that's supposed to
+ be easy for humans and computers to read. Note how commas are used to
+ separate multiple items but are never used after the last item in a set.
+ This is important, it will not work if you include a trailing comma where
+ there should not be one.
+
+
+
+ Generate Code
+
Paste the following code into a safeembed
- Don't forget: For each page you embed on, add the following bit of code just before the </h4> at the end of the line on the line that corresponds to the current page.
+
+ Don't forget: For each page you embed on, add the following bit
+ of code just before the </h4> at the end of the line on
+ the line that corresponds to the current page.
+
<span class="here">(You are here)</span>
-
- The code generated will look roughly like this:
-
- Gryphon overrides certain styles by default, so make sure to test on your article.
-
-
-
\ No newline at end of file
+ The code generated will look roughly like this:
+
+
+ Gryphon overrides certain styles by default, so make sure to test on your
+ article.
+
+
+
diff --git a/tailwind.config.js b/tailwind.config.js
index 5b8e451..76a56f9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,34 +1,34 @@
-const defaultTheme = require('tailwindcss/defaultTheme');
+const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
- purge: ['./src/**/*.{js,jsx,ts,tsx}'],
+ purge: ["./src/**/*.{js,jsx,ts,tsx}"],
// darkMode: 'media', // or 'media' or 'class'
theme: {
screens: {
- 'sm': '640px',
- 'md': '768px',
- 'lg': '1024px',
- 'xl': '1280px',
- '2xl': '1536px',
- 'portrait': {'raw': '(orientation: portrait)'},
- 'landscape': {'raw': '(orientation: landscape)'},
+ sm: "640px",
+ md: "768px",
+ lg: "1024px",
+ xl: "1280px",
+ "2xl": "1536px",
+ portrait: { raw: "(orientation: portrait)" },
+ landscape: { raw: "(orientation: landscape)" },
},
spacing: {
- '0': '0px',
- '1': '4px',
- '2': '8px',
- '3': '12px',
- '4': '16px',
- '5': '24px',
- '6': '32px',
- '7': '48px',
- '8': '80px',
- '9': '800px',
+ 0: "0px",
+ 1: "4px",
+ 2: "8px",
+ 3: "12px",
+ 4: "16px",
+ 5: "24px",
+ 6: "32px",
+ 7: "48px",
+ 8: "80px",
+ 9: "800px",
},
fontFamily: {
...defaultTheme.fontFamily,
// serif: ['Didot', 'Didot LT', 'STD', 'Hoefler Text' , 'Garamond', 'Times New Roman', 'serif']
- serif: ['Playfair Display', 'serif'],
+ serif: ["Playfair Display", "serif"],
},
extend: {
colors: {
@@ -40,7 +40,7 @@ module.exports = {
if (opacityVariable !== undefined) {
return `rgba(var(--vibrant), var(${opacityVariable}, 1))`;
}
- return 'rgb(var(--vibrant))';
+ return "rgb(var(--vibrant))";
},
light: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
@@ -49,7 +49,7 @@ module.exports = {
if (opacityVariable !== undefined) {
return `rgba(var(--light-vibrant), var(${opacityVariable}, 1))`;
}
- return 'rgb(var(--light-vibrant))';
+ return "rgb(var(--light-vibrant))";
},
dark: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
@@ -58,7 +58,7 @@ module.exports = {
if (opacityVariable !== undefined) {
return `rgba(var(--dark-vibrant), var(${opacityVariable}, 1))`;
}
- return 'rgb(var(--dark-vibrant))';
+ return "rgb(var(--dark-vibrant))";
},
},
muted: {
@@ -69,7 +69,7 @@ module.exports = {
if (opacityVariable !== undefined) {
return `rgba(var(--muted), var(${opacityVariable}, 1))`;
}
- return 'rgb(var(--muted))';
+ return "rgb(var(--muted))";
},
light: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
@@ -78,7 +78,7 @@ module.exports = {
if (opacityVariable !== undefined) {
return `rgba(var(--light-muted), var(${opacityVariable}, 1))`;
}
- return 'rgb(var(--light-muted))';
+ return "rgb(var(--light-muted))";
},
dark: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
@@ -87,7 +87,7 @@ module.exports = {
if (opacityVariable !== undefined) {
return `rgba(var(--dark-muted), var(${opacityVariable}, 1))`;
}
- return 'rgb(var(--dark-muted))';
+ return "rgb(var(--dark-muted))";
},
},
},