import React from "react"
import { GatsbyImage, getImage } from "gatsby-plugin-image";
import { useStaticQuery, graphql } from "gatsby"

import Base from "../../components/Base"
import SEO from "../../components/Seo";

import "./styles.scss";

const AboutPage = () => (
  <Base>
    <div style={{ color: '#eeeeee'}}>
      <h4>Who are you ?</h4>
      <p>nc</p>
      <p>
        <a href="https://twitter.com/ncggro" target="_">Twitter </a> 
        <a href="https://github.com/NCanggoro" target="_">GitHub </a>
	    <a href="https://gitlab.com/cloudcorezip" target="_">GitLab </a>
	<a href="https://git.nochill.in/nochill" target="_">Gitea </a>
        <a href="mailto:ncanggoro@tutanota.com" target="_">Email </a>
      </p>
      <h4 className="faq-title">Why so many <a href="https://en.wikipedia.org/wiki/Comparison_of_source-code-hosting_facilities" target="_">forge</a> ?</h4>
      <p>Consumer do be consuming</p>
      <h4 className="faq-title">What do you do ?</h4>
      <p>Professional Typer</p>
      <h4 className="faq-title">What are your hobbies ?</h4>
      <p>Yes</p>
      <h4 className="faq-title">Don't care didn't ask</h4>
      <div style={{ maxWidth: `500px`}}>
        <Image />
      </div>
    </div>
  </Base>
)

export const Head = () => {
  return (
    <SEO title="About" 
      children="" 
      description=""
    />
  )
}

const Image = () => {
    const data = useStaticQuery(graphql`
    query {
        allImageSharp: file(relativePath: {eq: "12561.png"}) {
          childImageSharp {
            gatsbyImageData(
              width: 300
              placeholder:BLURRED
            )
          }
        }
      }
    `)

  
    return <GatsbyImage 
        image={data.allImageSharp.childImageSharp.gatsbyImageData}
        alt="deez nuts"
    />
}  

export default AboutPage
