Move gatsby data to top level

src/components/resume/ResumeLayout.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import { MDXProvider } from '@mdx-js/react';
+
+import '../../styles/resume.css';
+
+const MyH1 = props => <h1 style={{ color: 'tomato' }} {...props} />;
+// const MyParagraph = props => (
+//   <p style={{ fontSize: '18px', lineHeight: 1.6 }} {...props} />
+// );
+
+const components = {
+  h1: MyH1,
+  // p: MyParagraph,
+};
+
+
+const ResumeLayout = ({ pageContext, children }) => {
+  console.log('pc', pageContext);
+  return (
+    <MDXProvider components={components}>
+      <div className={classnames('font-serif container mx-auto resume')}>{children}</div>
+    </MDXProvider>
+  );
+};
+
+// TODO: can I use custom components for just this layout/page?
+
+export default ResumeLayout;