text: import React, { useContext } from "react"
  import { PageLayout, PageTitle } from "../components"
  import { Container, Image } from "react-bootstrap"
  import { Link, graphql } from "gatsby"
  import { ThemeContext, SEO } from "../utils"
  
  export default ({ data }) => {
    const MediaLink = ({ title, author, link }) => (
      <li key={title} style={{ color: "gray" }}>
        <a rel="noopener noreferrer" href={link}>
          {title}
        </a>
        &nbsp;-<i>{author}</i>
      </li>
    )
  
    const {
      author,
      occupation,
      readingList,
      showsList,
      designations,
      unemployed,
    } = data.site.siteMetadata
    const { toString } = useContext(ThemeContext)
  
    const bookLinks = readingList.map(book => MediaLink(book))
    const showLinks = showsList.map(show => MediaLink(show))
  
    return (
      <PageLayout>
        <SEO title="About Me" />
        <PageTitle title="About Me" />
        <Container>
          <Image
            rounded
            width="140"
            height="140"
            src={`../../icons/luke-${toString()}.png`}
            alt={author}
          />
          <article className="w-75 m-auto pt-2 text-justify">
            <p className="text-center">
              {designations.map((attr, i) => (
                <span key={attr}>
                  &nbsp;<b>{attr}</b>&nbsp;
                  {i < designations.length - 1 && <>||</>}
                </span>
              ))}
            </p>
            <p className="i-5 mt-4 pt-2">
              Hello there! My name is <b>{`${author}`}</b>. I am a&nbsp;
              <a
                href="https://www.dictionary.com/e/fictional-characters/padawan/"
                target="_blank"
                rel="noopener noreferrer"
              >
                padawan
              </a>
              &nbsp;
              <b>{occupation}</b> discovering the ways of the code. I have a background in digital marketing and sales. After making great positive changes in my personal life (it's a long story), I decided to do the same for my professional life. This led me to Code Fellows where I completed their program for Full Stack Software Development in JavaScript. Since then I have been building projects and trying to learn as much as I can about code! 
            </p>
            <p className="i-5">
              In my spare time, I enjoy jumping from sci-fi into fantasy through Magic: the Gathering. I am an avid player and am always up for a game. I also enjoy tossing the occasional weight around...just enough to earn a solid couch session. Oh, and sometimes I take photos. You can find my work on Instagram at <a href="https://www.instagram.com/dknshots/?hl=en">@dknshots</a>. 
            </p>
            <p className="i-5">
              Check out my <Link to="/projects">projects</Link> to see what I've been up to!{/*
               Or check out my <Link to="/blog">blog</Link> to see
              what's recently caught my eye! */}
            </p>
          </article>
          <article className="w-75 m-auto">
            {unemployed && (
              <>
                <hr />
                <p className="unemployed">
                  <small>
                    I am <b>currently looking for new opportunities</b>! If you
                    like what you <Link to="/resume">see</Link>, let's get
                    in&nbsp;
                    <a
                      href="mailto:danguyenuw@gmail.com"
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      touch
                    </a>
                    !
                  </small>
                </p>
              </>
            )}
            <hr />
            <h5 className="watch-list-title pt-4">
              Here are a couple of books from my reading list:
            </h5>
            <ul style={{ fontSize: "0.9rem", listStyle: "none" }}>{bookLinks}</ul>
            <h5 className="watch-list-title pt-4">
              Here are a couple of shows from my watch list:
            </h5>
            <ul style={{ fontSize: "0.9rem", listStyle: "none" }}>{showLinks}</ul>
            <h5 className="watch-list-title pt-4">
              Here are a couple of movies from my watch list:
            </h5>
            <p>
              <i>...waaaay too many to list.</i>
            </p>
          </article>
        </Container>
      </PageLayout>
    )
  }
  
  export const query = graphql`
    query {
      site {
        siteMetadata {
          unemployed
          occupation
          author
          designations
          readingList {
            title
            author
            link
          }
          showsList {
            title
            author
            link
          }
        }
      }
    }
  `
  