A JAM Stack portfolio built with GatsbyJS, React Hooks and GraphQL.
- Frontend: GatsbyJS/React/GraphQL
- Hosting: Netlify
Handling the animation for elements that persist on the screen through layout changes, The Flip technique is a principle that stands for First, Last, Invert, Play. Which seamlessly transitions layout elements between their first and last state. Resulting in smooth animations.
const ConditionalLayout = ({ condition, children }) => (
condition ? <Layout>{children}</Layout> : children
);
const ModalExamplePage = ({ data }) => {
const post = data.markdownRemark;
return (
<ModalRoutingContext.Consumer>
{({ modal, closeTo }) => (
<ConditionalLayout condition={!modal}>
<div className={styles.container}>
<Img fluid={post.frontmatter.featuredImage.childImageSharp.fluid} />
</div>
</ConditionalLayout>
)}
</ModalRoutingContext.Consumer>
);
};
Utilizing Higher-Order Components (HOCs) to conditionally render the Layout component for DRY code. Which can then be reused throughout the project.