text: import React from "react";
  import PropTypes from "prop-types";
  import PortfolioItem from "@components/PortfolioItem";
  import ScrollToPrevious from "@components/ScrollToPrevious";
  import portfolioItems from "./portfolio-items";
  import "./style.scss";
  
  import { Accordion } from "react-accessible-accordion";
  
  const PortfolioPage = (props, context) => {
    const {
      theme: {
        colorPrimary,
        colorAlternate,
        textAlternate,
        bgPrimary,
        colorHighlight
      }
    } = context;
  
    return (
      <div className="portfolio-page" style={{ backgroundColor: bgPrimary }}>
        <div className="content-grid">
          <h1>
            <span
              style={{ color: colorPrimary, backgroundColor: colorHighlight }}
            >
              Projects
            </span>
          </h1>
          <br />
          <div className="portfolio-wrapper">
            <style jsx="true">
              {`
                .portfolio-item {
                  background-color: ${colorPrimary};
                  color: ${textAlternate};
                  width: 15em;
                  font-family: "Roboto Mono", monospace;
                }
                .portfolio-item a {
                  color: ${textAlternate};
                }
                .portfolio-item__links a:hover {
                  border-bottom: 2px solid ${colorAlternate};
                  background-color: ${colorHighlight};
                  color: #fff;
                }
  
                .portfolio-item__desc {
                  text-align: justify;
                  font-size: 0.9rem;
                }
              `}
            </style>
            {portfolioItems.map((item, i) => (
              <Accordion allowZeroExpanded preExpanded={["0"]}>
                <PortfolioItem key={item.id} render={item.render} />
              </Accordion>
            ))}
          </div>
        </div>
        <ScrollToPrevious pageSelector=".about-page" />
      </div>
    );
  };
  
  PortfolioPage.contextTypes = {
    theme: PropTypes.any
  };
  
  export default PortfolioPage;
  