breakfasting / portfolio

A JAM Stack portfolio built with GatsbyJS, React hooks and GraphQL

Portfolio

Live Site

A JAM Stack portfolio built with GatsbyJS, React Hooks and GraphQL.

Technologies

• Frontend: GatsbyJS/React/GraphQL
• Hosting: Netlify
  • React-Flip-Move
  • React-Tag-Autocomplete

Features

FLIP animated layouts

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.

Higher-Order Components

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.