I am building a Gatsby JS blog.
Below is my planning when it comes to what get rendered into the index page.
How do I import the bio.js into layout.js?
layout.js file:
import React from "react"
import PropTypes from "prop-types"
import { StaticQuery, graphql } from "gatsby"
import Header from "./header"
import Footer from "./footer"
import bio from "../pages/bio"
import "./layout.css"
const Layout = ({ children }) => (
<StaticQuery
query={graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
}
}
}
`}
render={data => (
<>
<Header siteTitle={data.site.siteMetadata.title} />
<div
style={{
margin: `0 auto`,
maxWidth: 960,
padding: `0px 1.0875rem 1.45rem`,
paddingTop: 0,
}}
>
<main>{children}</main>
</div>
<bio/>
<Footer />
</>
)}
/>
)
Layout.propTypes = {
children: PropTypes.node.isRequired,
}
export default Layout
bio.js file:
import React from "react"
import Layout from "../components/layout"
import SEO from "../components/seo"
import profile_pic from "../images/profile_pic.png"
import 'bootstrap/dist/css/bootstrap.css'
const bio = ({data}) => (
<Layout>
<SEO title="slowpacedcoding" keywords={[`slowpacedcoding`, `web development`, `Matt Zhou`]} />
<h3 style={{
fontFamily: `'Montserrat', sans-serif`,
fontWeight: 400,
marginTop:`1rem`,
color: `#f47c48`,
}}>Bio</h3>
<img src={profile_pic} alt="profile_pic" style={{
width:`100px`,
}}></img>
<p style={{
fontFamily: `'Montserrat', sans-serif`,
}}>
Former student of Singapore Polytechnic, dropped out at the end of year two, had been
learning Web-Development since 2016. My goal is to become a web developer in an English speaking country.
</p>
<h5 style={{
fontFamily: `'Montserrat', sans-serif`,
}}>Find me at :</h5>
<div>
<a href="https://www.linkedin.com/in/xiang-zhou-03547755/" rel='noopener noreferrer' target="_blank" style={{backgroundColor: `#fff5e8`,color:`black`,textDecoration:`none`,}}>LinkedIn</a>
<a href="https://github.com/zhouxiang19910319" rel='noopener noreferrer' target="_blank" style={{backgroundColor: `#fff5e8`,color:`black`,textDecoration:`none`,}}>github</a>
<a href="https://medium.freecodecamp.org/the-most-difficult-things-about-learning-to-code-by-yourself-b24ac8c3c23a "
rel='noopener noreferrer' target="_blank" style={{backgroundColor: `#fff5e8`,color:`black`,textDecoration:`none`,}}>medium</a>
<a href="https://twitter.com/zh0ux1ang" rel='noopener noreferrer' target="_blank" style={{backgroundColor: `#fff5e8`,color:`black`,textDecoration:`none`,}}>twitter</a>
<a href="https://www.freecodecamp.org/zhouxiang19910319" rel='noopener noreferrer' target="_blank" style={{backgroundColor: `#fff5e8`,color:`black`,textDecoration:`none`,}} >freeCodeCamp</a>
</div>
</Layout>
)
export default bio