text: import React, { useContext } from "react"
  import { graphql } from "gatsby"
  import ThemeContext from "../utils/theme"
  import { PageLayout } from "../components"
  import { SEO } from "../utils"
  import { Container, Image } from "react-bootstrap"
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
  
  export default ({ data }) => {
    const { unemployed, firstName, lastName, occupation } = data.site.siteMetadata
    const { dark } = useContext(ThemeContext)
    return (
      <PageLayout>
        <SEO title="Home" />
        <Container className="text-center pt-4 mt-4" fluid>
        {/*<Image
          width="150"
          height="150"
          fluid
          src={dark ? `../../icons/leia.png` : `../../icons/r2-d2.png`}
          //src=`../../icons/darth-vader.png`
          alt={dark ? "Darth Vader" : "R2-D2"}
          //alt="Darth Vader"
        />*/}
          {unemployed && (
            <p className="mt-2">
              <b> Hey! I am looking for new opportunities :)</b>
            </p>
          )}
          <Container className="py-0 my-0">
            <h1
              style={{
                fontSize: "5rem",
                color: "black",
              }}
            >
              <span className="first-name">{firstName}</span>&nbsp;
              <span className="last-name">{lastName}</span>
            </h1>
            <p>
              <i>
                {occupation} by day,&nbsp;
                `Rebel scum by night`
              </i>
            </p>
          </Container>
          <hr className="my-3 w-25" />
          <div className="d-md-inline-flex icons-container">
            <a
              href="https://www.github.com/anaswaratrajan"
              target="_blank"
              rel="noopener noreferrer"
            >
              <FontAwesomeIcon
                icon={["fab", "github"]}
                className="icons github"
                title="Github"
              />
            </a>
            <a
              href="https://linkedin.com/in/anaswaratrajan"
              target="_blank"
              rel="noopener noreferrer"
            >
              <FontAwesomeIcon
                icon={["fab", "linkedin"]}
                className="icons linkedin"
                title="LinkedIn"
              />
            </a>
            <a
              href="https://www.twitter.com/anasr7070"
              target="_blank"
              rel="noopener noreferrer"
            >
              <FontAwesomeIcon
                icon={["fab", "twitter"]}
                className="icons fcc"
                title="FreeCodeCamp"
              />
            </a>
            {/*<a
              href="https://www.hackerrank.com/"
              target="_blank"
              rel="noopener noreferrer"
            >
              <FontAwesomeIcon
                icon={["fab", "hackerrank"]}
                className="icons hr"
                title="Hackerrank"
              />
            </a>*/}
  
            <a
              href="mailto:anaswaratrajan@gmail.com"
              target="_blank"
              rel="noopener noreferrer"
            >
              <FontAwesomeIcon
                icon={["fas", "envelope"]}
                className="icons mail"
                title="e-mail"
              />
            </a>
            {/*<a
              class="custom-link"
              href="https://www.twitter.com/anasr7070"
              target="_blank"
            >
              <img
                class="custom-icon icons file"
                src="../../icons/codingame.png"
              />
            </a>*/}
  
            <a href="../../resume.pdf" target="_blank" download>
              <FontAwesomeIcon
                icon={["fas", "file-alt"]}
                className="icons file"
                title="Resume"
              />
            </a>
  
          </div>
        </Container>
      </PageLayout>
    )
  }
  
  export const query = graphql`
    query {
      site {
        siteMetadata {
          unemployed
          firstName
          lastName
          occupation
        }
      }
    }
  `
  