Do not unnecessarily load picture of duck on every pageload
This commit is contained in:
parent
e54ff94064
commit
3763065690
10
gatsby/src/breakpoints.js
Normal file
10
gatsby/src/breakpoints.js
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import preval from 'babel-plugin-preval/macro';
|
||||||
|
const themeBreakpoints = preval`
|
||||||
|
const R = require('ramda')
|
||||||
|
const resolveConfig = require('tailwindcss/resolveConfig');
|
||||||
|
const tailwindConfig = require('../tailwind.config.js');
|
||||||
|
const {theme} = resolveConfig(tailwindConfig);
|
||||||
|
module.exports = R.map(size => parseInt(size, 10), theme.screens);
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default themeBreakpoints;
|
@ -5,14 +5,7 @@ import * as R from 'ramda';
|
|||||||
import { getAspectRatio, getName } from '../utils';
|
import { getAspectRatio, getName } from '../utils';
|
||||||
import useBreakpoint from 'use-breakpoint';
|
import useBreakpoint from 'use-breakpoint';
|
||||||
|
|
||||||
import preval from 'babel-plugin-preval/macro';
|
import themeBreakpoints from '../breakpoints';
|
||||||
const themeBreakpoints = preval`
|
|
||||||
const R = require('ramda')
|
|
||||||
const resolveConfig = require('tailwindcss/resolveConfig');
|
|
||||||
const tailwindConfig = require('../../tailwind.config.js');
|
|
||||||
const {theme} = resolveConfig(tailwindConfig);
|
|
||||||
module.exports = R.map(size => parseInt(size, 10), theme.screens);
|
|
||||||
`;
|
|
||||||
|
|
||||||
const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
|
const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
|
||||||
const breakpoints = React.useMemo(() =>
|
const breakpoints = React.useMemo(() =>
|
||||||
|
@ -3,10 +3,15 @@ import { Link, graphql } from 'gatsby';
|
|||||||
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
|
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
|
||||||
import { getVibrantToHelmetSafeBodyStyle, getVibrant } from '../utils';
|
import { getVibrantToHelmetSafeBodyStyle, getVibrant } from '../utils';
|
||||||
import { Helmet } from 'react-helmet';
|
import { Helmet } from 'react-helmet';
|
||||||
import { HeroA } from '../components/IndexComponents';
|
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
|
import useBreakpoint from 'use-breakpoint';
|
||||||
|
|
||||||
|
import { HeroA } from '../components/IndexComponents';
|
||||||
|
|
||||||
|
import themeBreakpoints from '../breakpoints';
|
||||||
|
|
||||||
const IndexPage = ({ data: { allFile: { edges } } }) => {
|
const IndexPage = ({ data: { allFile: { edges } } }) => {
|
||||||
|
const { breakpoint } = useBreakpoint(themeBreakpoints, 'md');
|
||||||
const [isClient, setIsClient] = React.useState(false);
|
const [isClient, setIsClient] = React.useState(false);
|
||||||
const images = React.useMemo(() => edges.map((edge) => edge.node), [edges]);
|
const images = React.useMemo(() => edges.map((edge) => edge.node), [edges]);
|
||||||
const image = React.useMemo(() => {
|
const image = React.useMemo(() => {
|
||||||
@ -32,22 +37,19 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
|
|||||||
<main
|
<main
|
||||||
className="font-serif sm:block md:grid hero"
|
className="font-serif sm:block md:grid hero"
|
||||||
>
|
>
|
||||||
|
{isClient ?
|
||||||
<GatsbyImage
|
<GatsbyImage
|
||||||
alt=""
|
alt=""
|
||||||
className={classnames(
|
className={classnames(
|
||||||
'md: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)}
|
image={getImage(image)}
|
||||||
key={image.base}
|
|
||||||
loading="eager"
|
loading="eager"
|
||||||
style={{
|
style={{
|
||||||
gridArea: '1/1',
|
gridArea: '1/1',
|
||||||
// hide for SSR pass so it doesn't flash in then get replaced when we pick a new random one
|
|
||||||
// TODO: replace image with empty div for SSR so we don't always load duck image
|
|
||||||
// TODO: hardcode height on mobile for empty div
|
|
||||||
visibility: isClient ? 'visible' : 'hidden',
|
|
||||||
}} />
|
}} />
|
||||||
|
// 67vw = 1/1.49253731 = 1/aspect ratio of my camera lol
|
||||||
|
: <div className="md:h-screen sm:h-auto" style={{gridArea: '1/1', height: breakpoint === 'sm' ? '67vw' : '100vh'}}></div> }
|
||||||
<div className="relative grid place-items-center" style={{gridArea: '1/1'}}>
|
<div className="relative grid place-items-center" style={{gridArea: '1/1'}}>
|
||||||
<div className="m-2 flex flex-col items-end">
|
<div className="m-2 flex flex-col items-end">
|
||||||
<section className={classnames('rounded-xl py-6', isClient && ' bg-vibrant-dark-75')}>
|
<section className={classnames('rounded-xl py-6', isClient && ' bg-vibrant-dark-75')}>
|
||||||
@ -61,7 +63,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="/public/CharlesDriesResumeCurrent.pdf" isClient={isClient}>Resume [pdf]</HeroA>/
|
<HeroA href="/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>
|
||||||
|
@ -9,9 +9,9 @@
|
|||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.hero * {
|
/* .hero * {
|
||||||
transition: color .2s, background-color .2s;
|
transition: color .2s, background-color .2s;
|
||||||
}
|
} */
|
||||||
@layer utilities {
|
@layer utilities {
|
||||||
.scroll-snap-none {
|
.scroll-snap-none {
|
||||||
scroll-snap-type: none;
|
scroll-snap-type: none;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user