m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-12-23 01:29:41 +01:00
Code Releases Activity

Merge pull request #30 from kremalicious/feature/page-transitions

Browse Source 
prototype page transitions
This commit is contained in:
Matthias Kretschmann 2018-09-14 21:38:14 +02:00 committed by GitHub
commit 7c088ad766
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 191 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
gatsby-browser.js
View File

@ -1,8 +1,10 @@
require('./src/styles/global.scss') import wrapPageElementWithTransition from './src/helpers/wrapPageElement'
import './src/styles/global.scss'
exports.onClientEntry = () => {
// IntersectionObserver polyfill for gatsby-image (Safari, IE) // IntersectionObserver polyfill for gatsby-image (Safari, IE)
if (typeof window.IntersectionObserver === 'undefined') { if (typeof window !== 'undefined' && !window.IntersectionObserver) {
require('intersection-observer') import('intersection-observer')
}
} }
// Page Transitions & Layout
export const wrapPageElement = wrapPageElementWithTransition

4
gatsby-ssr.js Normal file
View File

@ -0,0 +1,4 @@
import wrapPageElementWithTransition from './src/helpers/wrapPageElement'
// Page Transitions & Layout
export const wrapPageElement = wrapPageElementWithTransition

10
package.json
View File

@ -21,7 +21,7 @@
}, },
"dependencies": { "dependencies": {
"file-saver": "^1.3.8", "file-saver": "^1.3.8",
"gatsby": "^2.0.0-rc.21", "gatsby": "^2.0.0-rc.24",
"gatsby-image": "^2.0.0-rc.2", "gatsby-image": "^2.0.0-rc.2",
"gatsby-plugin-manifest": "^2.0.2-rc.1", "gatsby-plugin-manifest": "^2.0.2-rc.1",
"gatsby-plugin-matomo": "^0.5.0", "gatsby-plugin-matomo": "^0.5.0",
@ -29,7 +29,7 @@
"gatsby-plugin-react-helmet": "^3.0.0-rc.1", "gatsby-plugin-react-helmet": "^3.0.0-rc.1",
"gatsby-plugin-sass": "^2.0.0-rc.2", "gatsby-plugin-sass": "^2.0.0-rc.2",
"gatsby-plugin-sharp": "^2.0.0-rc.7", "gatsby-plugin-sharp": "^2.0.0-rc.7",
"gatsby-plugin-sitemap": "^2.0.0-rc.1", "gatsby-plugin-sitemap": "^2.0.0-rc.2",
"gatsby-source-filesystem": "^2.0.1-rc.6", "gatsby-source-filesystem": "^2.0.1-rc.6",
"gatsby-transformer-json": "^2.1.1-rc.6", "gatsby-transformer-json": "^2.1.1-rc.6",
"gatsby-transformer-sharp": "^2.1.1-rc.3", "gatsby-transformer-sharp": "^2.1.1-rc.3",
@ -39,11 +39,11 @@
"intersection-observer": "^0.5.0", "intersection-observer": "^0.5.0",
"js-yaml": "^3.12.0", "js-yaml": "^3.12.0",
"node-sass": "^4.9.3", "node-sass": "^4.9.3",
"react": "^16.5.0", "react": "^16.5.1",
"react-dom": "^16.5.0", "react-dom": "^16.5.1",
"react-helmet": "^5.2.0", "react-helmet": "^5.2.0",
"react-markdown": "^3.6.0", "react-markdown": "^3.6.0",
"react-transition-group": "^2.4.0", "react-pose": "^3.3.0",
"vcf": "^2.0.1" "vcf": "^2.0.1"
}, },
"devDependencies": { "devDependencies": {

47
src/components/Layout.jsx
View File

@ -1,28 +1,41 @@
import React, { Fragment } from 'react' import React, { PureComponent, Fragment } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import posed, { PoseGroup } from 'react-pose'
import { fadeIn } from './atoms/Transitions'
import Head from './molecules/Head' import Head from './molecules/Head'
import Header from './organisms/Header' import Header from './organisms/Header'
import Footer from './organisms/Footer' import Footer from './organisms/Footer'
import styles from './Layout.module.scss' import styles from './Layout.module.scss'
const Layout = ({ children, location }) => { const timeout = 250
const isHomepage = location.pathname === '/'
return ( export default class Layout extends PureComponent {
<Fragment> static propTypes = {
<Head />
<Header isHomepage={isHomepage} />
<main className={styles.screen}>{children}</main>
<Footer />
</Fragment>
)
}
Layout.propTypes = {
children: PropTypes.any.isRequired, children: PropTypes.any.isRequired,
location: PropTypes.object.isRequired location: PropTypes.object.isRequired
} }
export default Layout render() {
const { children, location } = this.props
const isHomepage = location.pathname === '/'
const RoutesContainer = posed.div(fadeIn)
return (
<Fragment>
<Head />
<PoseGroup animateOnMount={true}>
<RoutesContainer
key={location.pathname}
delay={timeout}
delayChildren={timeout}
>
<Header isHomepage={isHomepage} />
<main className={styles.screen}>{children}</main>
</RoutesContainer>
</PoseGroup>
<Footer />
</Fragment>
)
}
}

21
src/components/atoms/Animations.jsx
View File

@ -1,21 +0,0 @@
import React from 'react'
import CSSTransition from 'react-transition-group/CSSTransition'
import './Animations.scss'
const Animation = props => <CSSTransition appear={true} in={true} {...props} />
export const FadeIn = props => (
<Animation
classNames="fadein"
timeout={{ enter: 200, exit: 200, appear: 200 }}
{...props}
/>
)
export const MoveIn = props => (
<Animation
classNames="movein"
timeout={{ enter: 300, exit: 200, appear: 300 }}
{...props}
/>
)

43
src/components/atoms/Animations.scss
View File

@ -1,43 +0,0 @@
.fadein-appear,
.fadein-enter {
opacity: .01;
&.fadein-appear-active,
&.fadein-enter-active {
opacity: 1;
transition: 200ms ease-in;
}
}
.fadein-exit {
opacity: 1;
transition: 200ms ease-in;
&.fadein-exit-active {
opacity: .01;
}
}
.movein-appear,
.movein-enter {
opacity: .01;
transform: translate3d(0, 3rem, 0);
&.movein-appear-active,
&.movein-enter-active {
opacity: 1;
transform: translate3d(0, 0, 0);
transition: 300ms ease-out;
}
}
.movein-exit {
opacity: 1;
transform: translate3d(0, 0, 0);
transition: 100ms ease-out;
&.movein-exit-active {
opacity: .01;
transform: translate3d(0, 3rem, 0);
}
}

9
src/components/atoms/LogoUnit.jsx
View File

@ -1,6 +1,9 @@
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby' import { StaticQuery, graphql } from 'gatsby'
import posed, { PoseGroup } from 'react-pose'
import { moveInBottom } from '../atoms/Transitions'
import Logo from '../svg/Logo' import Logo from '../svg/Logo'
import styles from './LogoUnit.module.scss' import styles from './LogoUnit.module.scss'
@ -13,6 +16,8 @@ const query = graphql`
} }
` `
const Animation = posed.div(moveInBottom)
class LogoUnit extends PureComponent { class LogoUnit extends PureComponent {
state = { minimal: false } state = { minimal: false }
@ -43,6 +48,8 @@ class LogoUnit extends PureComponent {
const { minimal } = this.state const { minimal } = this.state
return ( return (
<PoseGroup animateOnMount={true}>
<Animation>
<div className={minimal ? styles.minimal : styles.logounit}> <div className={minimal ? styles.minimal : styles.logounit}>
<Logo className={styles.logounit__logo} /> <Logo className={styles.logounit__logo} />
<h1 className={styles.logounit__title}> <h1 className={styles.logounit__title}>
@ -53,6 +60,8 @@ class LogoUnit extends PureComponent {
<span>{' }'}</span> <span>{' }'}</span>
</p> </p>
</div> </div>
</Animation>
</PoseGroup>
) )
}} }}
/> />

2
src/components/atoms/LogoUnit.module.scss
View File

@ -25,13 +25,11 @@
margin-right: $spacer / 4; margin-right: $spacer / 4;
color: $brand-main; color: $brand-main;
line-height: $line-height; line-height: $line-height;
transition: color .2s ease-out;
} }
.logounit__description { .logounit__description {
font-size: $font-size-h4; font-size: $font-size-h4;
color: $brand-grey; color: $brand-grey;
transition: color .2s ease-out;
:global(.dark) & { :global(.dark) & {
color: $brand-grey-light; color: $brand-grey-light;

30
src/components/atoms/Transitions.js Normal file
View File

@ -0,0 +1,30 @@
export const fadeIn = {
enter: {
opacity: 1
},
exit: {
opacity: 0
}
}
export const moveInTop = {
enter: {
y: 0,
transition: { type: 'spring' }
},
exit: {
y: '-2rem',
transition: { type: 'spring' }
}
}
export const moveInBottom = {
enter: {
y: 0,
transition: { type: 'spring' }
},
exit: {
y: '2rem',
transition: { type: 'spring' }
}
}

21
src/components/molecules/Availability.jsx
View File

@ -1,7 +1,8 @@
import React, { Fragment, PureComponent } from 'react' import React, { PureComponent } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby' import { StaticQuery, graphql } from 'gatsby'
import { MoveIn } from '../atoms/Animations' import posed, { PoseGroup } from 'react-pose'
import { fadeIn } from '../atoms/Transitions'
import styles from './Availability.module.scss' import styles from './Availability.module.scss'
const query = graphql` const query = graphql`
@ -16,6 +17,8 @@ const query = graphql`
} }
` `
const Animation = posed.aside(fadeIn)
export default class Availability extends PureComponent { export default class Availability extends PureComponent {
static propTypes = { hide: PropTypes.bool } static propTypes = { hide: PropTypes.bool }
@ -28,10 +31,9 @@ export default class Availability extends PureComponent {
const { status, available, unavailable } = availability const { status, available, unavailable } = availability
return ( return (
<Fragment> !this.props.hide && (
{!this.props.hide && ( <PoseGroup animateOnMount={true}>
<MoveIn> <Animation
<aside
className={ className={
status status
? `${styles.availability} ${styles.available}` ? `${styles.availability} ${styles.available}`
@ -43,10 +45,9 @@ export default class Availability extends PureComponent {
__html: status ? available : unavailable __html: status ? available : unavailable
}} }}
/> />
</aside> </Animation>
</MoveIn> </PoseGroup>
)} )
</Fragment>
) )
}} }}
/> />

1
src/components/molecules/Availability.module.scss
View File

@ -8,7 +8,6 @@
z-index: 2; z-index: 2;
padding: $spacer / 2; padding: $spacer / 2;
display: block; display: block;
transition: opacity .2s ease-out;
:global(.dark) & { :global(.dark) & {
color: $text-color-light--dark; color: $text-color-light--dark;

13
src/components/molecules/Networks.jsx
View File

@ -1,7 +1,8 @@
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby' import { StaticQuery, graphql } from 'gatsby'
import { FadeIn } from '../atoms/Animations' import posed, { PoseGroup } from 'react-pose'
import { moveInTop } from '../atoms/Transitions'
import Email from '../svg/Email' import Email from '../svg/Email'
import Blog from '../svg/Blog' import Blog from '../svg/Blog'
@ -43,6 +44,8 @@ const NetworkIcon = props => {
} }
} }
const Animation = posed.aside(moveInTop)
export default class Network extends PureComponent { export default class Network extends PureComponent {
static propTypes = { static propTypes = {
minimal: PropTypes.bool, minimal: PropTypes.bool,
@ -78,16 +81,16 @@ export default class Network extends PureComponent {
return ( return (
!this.props.hide && ( !this.props.hide && (
<FadeIn> <PoseGroup animateOnMount={true}>
<aside className={this.state.classes}> <Animation className={this.state.classes}>
{Object.keys(meta.social).map((key, i) => ( {Object.keys(meta.social).map((key, i) => (
<a className={styles.link} href={meta.social[key]} key={i}> <a className={styles.link} href={meta.social[key]} key={i}>
<NetworkIcon title={key} className={icons.icon} /> <NetworkIcon title={key} className={icons.icon} />
<span className={styles.title}>{key}</span> <span className={styles.title}>{key}</span>
</a> </a>
))} ))}
</aside> </Animation>
</FadeIn> </PoseGroup>
) )
) )
}} }}

11
src/components/molecules/ThemeSwitch.jsx
View File

@ -1,10 +1,15 @@
import React, { PureComponent, Fragment } from 'react' import React, { PureComponent, Fragment } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import Helmet from 'react-helmet' import Helmet from 'react-helmet'
import posed, { PoseGroup } from 'react-pose'
import { fadeIn } from '../atoms/Transitions'
import Day from '../svg/Day' import Day from '../svg/Day'
import Night from '../svg/Night' import Night from '../svg/Night'
import styles from './ThemeSwitch.module.scss' import styles from './ThemeSwitch.module.scss'
const Animation = posed.aside(fadeIn)
const ThemeToggle = ({ dark }) => ( const ThemeToggle = ({ dark }) => (
<span id="toggle" className={styles.checkboxContainer} aria-live="assertive"> <span id="toggle" className={styles.checkboxContainer} aria-live="assertive">
<Day className={dark ? null : 'active'} /> <Day className={dark ? null : 'active'} />
@ -60,7 +65,8 @@ export default class ThemeSwitch extends PureComponent {
<Helmet> <Helmet>
<body className={this.isDark() ? 'dark' : null} /> <body className={this.isDark() ? 'dark' : null} />
</Helmet> </Helmet>
<aside className={styles.themeSwitch}> <PoseGroup animateOnMount={true}>
<Animation className={styles.themeSwitch}>
<label className={styles.checkbox}> <label className={styles.checkbox}>
<span className={styles.label}>Toggle Night Mode</span> <span className={styles.label}>Toggle Night Mode</span>
<input <input
@ -73,7 +79,8 @@ export default class ThemeSwitch extends PureComponent {
/> />
<ThemeToggle dark={this.isDark()} /> <ThemeToggle dark={this.isDark()} />
</label> </label>
</aside> </Animation>
</PoseGroup>
</Fragment> </Fragment>
) )
} }

8
src/helpers/wrapPageElement.jsx Normal file
View File

@ -0,0 +1,8 @@
import React from 'react'
import Layout from '../components/Layout'
const wrapPageElement = ({ element, props }) => (
<Layout {...props}>{element}</Layout>
)
export default wrapPageElement

7
src/pages/404.jsx
View File

@ -2,7 +2,6 @@ import React, { Component } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { Link } from 'gatsby' import { Link } from 'gatsby'
import giphyAPI from 'giphy-js-sdk-core' import giphyAPI from 'giphy-js-sdk-core'
import Layout from '../components/Layout'
import Content from '../components/atoms/Content' import Content from '../components/atoms/Content'
import Button from '../components/atoms/Button' import Button from '../components/atoms/Button'
import './404.scss' import './404.scss'
@ -42,13 +41,12 @@ export default class NotFound extends Component {
render() { render() {
return ( return (
<Layout location={this.props.location}>
<Content className="content content--404"> <Content className="content content--404">
<h1>Shenanigans, page not found.</h1> <h1>Shenanigans, page not found.</h1>
<p> <p>
You might want to check the url, or{' '} You might want to check the url, or{' '}
<Link to={'/'}>go back to the homepage</Link>. Or just check out <Link to={'/'}>go back to the homepage</Link>. Or just check out some
some cat fail gifs, entirely your choice. cat fail gifs, entirely your choice.
</p> </p>
<video className="gif" src={this.state.gif} autoPlay loop /> <video className="gif" src={this.state.gif} autoPlay loop />
@ -59,7 +57,6 @@ export default class NotFound extends Component {
</Button> </Button>
</div> </div>
</Content> </Content>
</Layout>
) )
} }
} }

5
src/pages/index.jsx
View File

@ -1,16 +1,14 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { Link, graphql } from 'gatsby' import { Link, graphql } from 'gatsby'
import Layout from '../components/Layout'
import ProjectImage from '../components/atoms/ProjectImage' import ProjectImage from '../components/atoms/ProjectImage'
import FullWidth from '../components/atoms/FullWidth' import FullWidth from '../components/atoms/FullWidth'
import styles from './index.module.scss' import styles from './index.module.scss'
const Home = ({ data, location }) => { const Home = ({ data }) => {
const projects = data.allProjectsYaml.edges const projects = data.allProjectsYaml.edges
return ( return (
<Layout location={location}>
<FullWidth> <FullWidth>
<div className={styles.projects}> <div className={styles.projects}>
{projects.map(({ node }) => { {projects.map(({ node }) => {
@ -27,7 +25,6 @@ const Home = ({ data, location }) => {
})} })}
</div> </div>
</FullWidth> </FullWidth>
</Layout>
) )
} }

2
src/styles/global.scss
View File

@ -29,7 +29,7 @@ body {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
min-height: 100vh; min-height: 100vh;
background: $body-background-color; background: $body-background-color;
transition: background .6s $easing; transition: background .2s $easing;
&.dark { &.dark {
background-color: $body-background-color--dark; background-color: $body-background-color--dark;

9
src/templates/Project.jsx
View File

@ -1,9 +1,8 @@
import React from 'react' import React, { Fragment } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import Helmet from 'react-helmet' import Helmet from 'react-helmet'
import ReactMarkdown from 'react-markdown' import ReactMarkdown from 'react-markdown'
import { graphql } from 'gatsby' import { graphql } from 'gatsby'
import Layout from '../components/Layout'
import Content from '../components/atoms/Content' import Content from '../components/atoms/Content'
import FullWidth from '../components/atoms/FullWidth' import FullWidth from '../components/atoms/FullWidth'
import ProjectImage from '../components/atoms/ProjectImage' import ProjectImage from '../components/atoms/ProjectImage'
@ -31,7 +30,7 @@ const ProjectImages = ({ projectImages, title }) => (
</FullWidth> </FullWidth>
) )
const Project = ({ data, location }) => { const Project = ({ data }) => {
const project = data.projectsYaml const project = data.projectsYaml
const projectImages = data.projectImages.edges const projectImages = data.projectImages.edges
const { title, links, techstack } = project const { title, links, techstack } = project
@ -39,7 +38,7 @@ const Project = ({ data, location }) => {
const descriptionWithLineBreaks = description.split('\n').join('\n\n') const descriptionWithLineBreaks = description.split('\n').join('\n\n')
return ( return (
<Layout location={location}> <Fragment>
<Helmet title={title} /> <Helmet title={title} />
<SEO project={project} /> <SEO project={project} />
@ -57,7 +56,7 @@ const Project = ({ data, location }) => {
</article> </article>
<ProjectNav slug={project.slug} /> <ProjectNav slug={project.slug} />
</Layout> </Fragment>
) )
} }