Skip to content

README.md

Latest commit

 

History

History
45 lines (35 loc) · 1.55 KB

README.md

File metadata and controls

45 lines (35 loc) · 1.55 KB

Portfolio

Live Site

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

Screenshot

Technologies

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.

Screenshot

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.

Layout