{"version":3,"file":"component---src-pages-portfolio-jsx-d8dba09f21435ec4ad72.js","mappings":"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","sources":["webpack://jmgq/./src/components/card.jsx","webpack://jmgq/./src/pages/portfolio.jsx"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport styled from \"styled-components\";\nimport { graphql } from \"gatsby\";\n\nconst VerticallyAlignedContainer = styled.div.attrs({\n  className: \"pure-u-1 pure-u-md-1-2\",\n})`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n`;\n\nconst Title = styled.h3`\n  margin-bottom: 0;\n`;\n\nconst Info = styled.div`\n  margin-top: 1em;\n`;\n\nconst Content = ({ className, title, children }) => (\n  <VerticallyAlignedContainer className={className}>\n    {title && <Title>{title}</Title>}\n    <Info>{children}</Info>\n  </VerticallyAlignedContainer>\n);\n\nconst StyledContent = styled(Content)`\n  box-sizing: border-box;\n\n  /* pure-u-md-* >= 768px */\n  @media (min-width: 768px) {\n    padding-left: 1em;\n  }\n`;\n\nconst Media = VerticallyAlignedContainer;\n\nconst Card = ({ className, media, title, children }) => (\n  <div className={`pure-g ${className}`}>\n    <Media>{media}</Media>\n    <StyledContent title={title}>{children}</StyledContent>\n  </div>\n);\n\nconst StyledCard = styled(Card)`\n  background: rgb(250, 250, 250);\n  margin: 2em auto;\n  padding: 1em;\n  border: 1px solid #ddd;\n  border-radius: 5px;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n`;\n\nContent.propTypes = {\n  className: PropTypes.string.isRequired,\n  title: PropTypes.string,\n  children: PropTypes.node.isRequired,\n};\n\nContent.defaultProps = {\n  title: null,\n};\n\nCard.propTypes = {\n  className: PropTypes.string.isRequired,\n  title: PropTypes.string,\n  media: PropTypes.node.isRequired,\n  children: PropTypes.node.isRequired,\n};\n\nCard.defaultProps = {\n  title: null,\n};\n\nexport default StyledCard;\n\nexport const query = graphql`\n  fragment CardImage on File {\n    childImageSharp {\n      gatsbyImageData(width: 654, layout: CONSTRAINED)\n    }\n  }\n`;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { graphql } from \"gatsby\";\nimport { GatsbyImage } from \"gatsby-plugin-image\";\nimport Layout from \"../components/layout\";\nimport { MetaDescription, Title } from \"../components/metadata\";\nimport { H2, Link } from \"../components/basic\";\nimport Card from \"../components/card\";\n\nconst title = \"Portfolio\";\n\nconst Metadata = () => (\n  <>\n    <Title>{title}</Title>\n    <MetaDescription>\n      Some interesting projects that I have worked on.\n    </MetaDescription>\n  </>\n);\n\nconst Portfolio = ({ data }) => {\n  const AStarImageLink = (\n    <Link to=\"https://github.com/jmgq/php-a-star\">\n      <GatsbyImage\n        alt=\"A Star Algorithm - Weighted Graph\"\n        title=\"A* Algorithm\"\n        image={data.aStar.childImageSharp.gatsbyImageData}\n      />\n    </Link>\n  );\n\n  const SymfonyImage = (\n    <GatsbyImage\n      alt=\"Symfony\"\n      title=\"Symfony Framework\"\n      image={data.symfony.childImageSharp.gatsbyImageData}\n    />\n  );\n\n  const GitHubImageLink = (\n    <Link to=\"https://github.com/jmgq\">\n      <GatsbyImage\n        alt=\"GitHub's Octocat\"\n        title=\"My personal GitHub account\"\n        image={data.github.childImageSharp.gatsbyImageData}\n      />\n    </Link>\n  );\n\n  const SkySportsImageLink = (\n    <Link to=\"https://sport.sky.de/\">\n      <GatsbyImage\n        alt=\"SkySports\"\n        title=\"SkySports\"\n        image={data.skySports.childImageSharp.gatsbyImageData}\n      />\n    </Link>\n  );\n\n  const NhsImage = (\n    <GatsbyImage\n      alt=\"NHS\"\n      title=\"NHS\"\n      image={data.nhs.childImageSharp.gatsbyImageData}\n    />\n  );\n\n  return (\n    <Layout title={title}>\n      <Metadata />\n      <p>\n        I specialise in backend development, so I don’t have any flashy websites\n        or designs to show, but here’s some of the work that I’m more proud of.\n      </p>\n      <H2>Open Source Software</H2>\n      <Card media={AStarImageLink} title=\"A* Algorithm in PHP\">\n        {/* eslint-disable-next-line react/jsx-one-expression-per-line, prettier/prettier */}\n        This <Link to=\"https://github.com/jmgq/php-a-star\">A* algorithm implementation</Link> has the following characteristics:\n        <ul>\n          <li>Works with any PHP version starting with PHP 5.3.</li>\n          <li>Written using object orientation.</li>\n          {/* eslint-disable-next-line react/jsx-one-expression-per-line, prettier/prettier */}\n          <li>Fully tested: <Link to=\"https://coveralls.io/github/jmgq/php-a-star\">100% code coverage</Link> using <Link to=\"https://phpunit.de/\">PHPUnit</Link>.</li>\n          {/* eslint-disable-next-line react/jsx-one-expression-per-line, prettier/prettier */}\n          <li>A <Link to=\"https://travis-ci.org/jmgq/php-a-star\">Continuous Integration server</Link> and a <Link to=\"https://scrutinizer-ci.com/g/jmgq/php-a-star/\">Code Quality Tool</Link> have been set up.</li>\n          {/* eslint-disable-next-line react/jsx-one-expression-per-line, prettier/prettier */}\n          <li>Easily installable by using <Link to=\"https://getcomposer.org/\">Composer</Link>.</li>\n          {/* eslint-disable-next-line react/jsx-one-expression-per-line, prettier/prettier */}\n          <li>Follows <Link to=\"https://semver.org/\">semantic versioning</Link>.</li>\n          {/* eslint-disable-next-line react/jsx-one-expression-per-line, prettier/prettier */}\n          <li>Uses <Link to=\"https://www.docker.com/\">Docker</Link> for local development.</li>\n          <li>Ease of use: just a few steps are required to make it work.</li>\n        </ul>\n      </Card>\n      <Card media={SymfonyImage} title=\"Symfony\">\n        {/* eslint-disable-next-line react/jsx-one-expression-per-line, prettier/prettier */}\n        <Link to=\"https://symfony.com/\">Symfony</Link> is my favourite PHP framework, and since it is open source, I have made several contributions to its source code. I like to brag about that one time where my additions to the Stopwatch component were <Link to=\"https://symfony.com/blog/new-in-symfony-3-4-stopwatch-improvements\">mentioned in the official Symfony blog</Link>.\n      </Card>\n      <Card media={GitHubImageLink} title=\"GitHub\">\n        {/* eslint-disable-next-line react/jsx-one-expression-per-line, prettier/prettier */}\n        What kind of developer would I be if I didn’t have a <Link to=\"https://github.com/jmgq\">GitHub account</Link>?\n      </Card>\n      <H2>Proprietary Software</H2>\n      <Card media={SkySportsImageLink} title=\"SkySports Germany\">\n        {/* eslint-disable-next-line react/jsx-one-expression-per-line, prettier/prettier */}\n        During my time in <Link to=\"https://www.skysports.com/\">SkySports</Link>, I worked on several different parts of their infrastructure. I spent a significant amount of time working on the <Link to=\"https://sport.sky.de/\">German version of SkySports</Link>.\n      </Card>\n      <Card media={NhsImage} title=\"NHS e-Referral Service\">\n        {/* eslint-disable-next-line react/jsx-one-expression-per-line, prettier/prettier */}\n        I have worked in several NHS projects, and the most ambitious was the <Link to=\"https://digital.nhs.uk/services/nhs-e-referral-service\">e-Referral Service</Link>: a group of secure applications that provides patients with a choice of hospitals and clinics when booking appointments, allows GPs to refer patients to a specialist whilst providing clinical assessment support, as well as other administration tasks, such as reporting, auditing, tracking, and so on.\n      </Card>\n    </Layout>\n  );\n};\n\nPortfolio.propTypes = {\n  // eslint-disable-next-line react/forbid-prop-types\n  data: PropTypes.object.isRequired,\n};\n\nexport default Portfolio;\n\nexport const query = graphql`\n  query {\n    aStar: file(relativePath: { eq: \"a-star-graph.png\" }) {\n      ...CardImage\n    }\n    symfony: file(relativePath: { eq: \"symfony.jpg\" }) {\n      ...CardImage\n    }\n    github: file(relativePath: { eq: \"github.jpg\" }) {\n      ...CardImage\n    }\n    skySports: file(relativePath: { eq: \"skysports.png\" }) {\n      ...CardImage\n    }\n    nhs: file(relativePath: { eq: \"nhs.jpg\" }) {\n      ...CardImage\n    }\n  }\n`;\n"],"names":["VerticallyAlignedContainer","styled","className","Title","Info","Content","title","children","StyledContent","Media","Card","media","StyledCard","defaultProps","Metadata","data","AStarImageLink","to","G","alt","image","aStar","childImageSharp","gatsbyImageData","SymfonyImage","symfony","GitHubImageLink","github","SkySportsImageLink","skySports","NhsImage","nhs","H2"],"sourceRoot":""}