{"version":3,"file":"component---src-pages-portfolio-js-fb054c61846c67e8bca2.js","mappings":"8KAE4B,IAEtBA,EAAM,SAAAC,GAAA,SAAAD,IAAA,OAAAC,EAAAC,MAAA,KAAAC,YAAA,KAuCP,OAvCOC,EAAAA,EAAAA,GAAAJ,EAAAC,GAAAD,EAAAK,UACRC,OAAA,SAAOC,EAAOC,GACV,MAAMC,EAAcC,IAAIC,KAAKC,MAAO,SAC9BC,EAAcH,IAAIC,KAAKC,MAAO,SAE9BE,EAAcC,EAAAA,QAAOC,QAAOC,WAAA,CAAAC,YAAA,sBAAAC,YAAA,eAAdJ,CAAc,wOACdF,GAapBO,EAAQL,EAAAA,QAAOM,GAAEJ,WAAA,CAAAC,YAAA,gBAAAC,YAAA,eAATJ,CAAS,kMAejB,OACCO,EAAAA,cAACR,EAAW,KACZQ,EAAAA,cAACF,EAAK,KAAEX,GAGb,EAACT,CAAA,CAvCO,CAASuB,EAAAA,WA2CrB,K,0KC7BA,MAdA,SAAwBC,GAAqB,IAApB,cAAEC,GAAeD,EAExC,OACEF,EAAAA,cAACI,EAAS,CAACC,UAAW,kBACpBL,EAAAA,cAACM,EAAAA,KAAI,CAACC,GAAI,GAAGJ,EAAcK,KAAKC,SAC9BT,EAAAA,cAAA,OAAKK,UAAU,iBACbL,EAAAA,cAAA,OAAKU,QAAQ,OAAOC,IAAKR,EAAcS,cAAcC,qBAAqBC,UAAUC,gBAAgBC,MAAML,IAC1GM,IAAKd,EAAcS,cAAcC,qBAAqBI,QAKhE,EAIA,MAAMb,EAAYX,EAAAA,QAAOyB,IAAGvB,WAAA,CAAAC,YAAA,6BAAAC,YAAA,gBAAVJ,CAAU,mQCX+B,IAGrD0B,EAAa,SAAAC,GAAA,SAAAD,IAAA,OAAAC,EAAAxC,MAAA,KAAAC,YAAA,KA6BhB,OA7BgBC,EAAAA,EAAAA,GAAAqC,EAAAC,GAAAD,EAAApC,UACjBC,OAAA,WACE,MAAMqC,EAAiBjC,IAAIC,KAAM,yCAGhC,OACCW,EAAAA,cAACsB,EAAAA,EAAM,KACHtB,EAAAA,cAACuB,EAAAA,EAAG,CAACtC,MAAM,wDAAwDuC,YAAY,6DAE/ExB,EAAAA,cAACtB,EAAAA,EAAM,CAACO,MAAM,YAAYC,MAAOuC,EAAAA,IAEjCzB,EAAAA,cAAC0B,EAAY,KACX1B,EAAAA,cAAA,SAAG,gDAGJA,EAAAA,cAAC2B,EAAM,KACH3B,EAAAA,cAAC4B,EAAU,KACPP,EAAeQ,KAAI3B,IAAe,IAAd,KAAE4B,GAAM5B,EAC3B,OACEF,EAAAA,cAAC+B,EAAc,CAACC,IAAKF,EAAKtB,KAAKC,OAC7BT,EAAAA,cAACiC,EAAe,CAAC9B,cAAe2B,IACjB,MAQrC,EAACX,CAAA,CA7BgB,CAASnB,EAAAA,WAgC5B,QAEA,MAAM2B,EAASlC,EAAAA,QAAOyB,IAAGvB,WAAA,CAAAC,YAAA,oBAAAC,YAAA,gBAAVJ,CAAU,gEASnBmC,EAAanC,EAAAA,QAAOyC,GAAEvC,WAAA,CAAAC,YAAA,wBAAAC,YAAA,gBAATJ,CAAS,uFAOtBsC,EAAiBtC,EAAAA,QAAO0C,GAAExC,WAAA,CAAAC,YAAA,4BAAAC,YAAA,gBAATJ,CAAS,gJAkB1BiC,EAAejC,EAAAA,QAAOyB,IAAGvB,WAAA,CAAAC,YAAA,0BAAAC,YAAA,gBAAVJ,CAAU,uH,uBChF/B,IAAe,IAA0B,8D","sources":["webpack://thowardmediacouk/./src/components/banner.js","webpack://thowardmediacouk/./src/components/portfolioTeaser.js","webpack://thowardmediacouk/./src/pages/portfolio.js","webpack://thowardmediacouk/./src/images/banner-images/portfolio-banner.jpg"],"sourcesContent":["import React, { Component } from 'react';\nimport styled from 'styled-components'\nimport get from 'lodash/get'\n\nclass Banner extends Component {\n    render(title, image) {\n        const bannerTitle = get(this.props, 'title')\n        const bannerImage = get(this.props, 'image')\n\n        const HeaderImage = styled.section`\n\t\t  background-image: url(${bannerImage});\n\t\t  height: 400px;\n\t\t  width: 100%;\n\t\t  background-size: cover;\n\t\t  background-repeat: no-repeat;\n\t\t  background-position: 50% 60%;\n\t\t  margin-bottom: 40px;\n\t\t  display: flex;\n\t\t  justify-content: center;\n\t\t  align-items: center;\n\t\t  background-color: #424f52;\n\t\t`\n\n\t\tconst Title = styled.h1`\n\t\t  margin: 80px 20px 0 20px;\n    \t  text-align: center;\n\t\t  color: #fff;\n\t\t  border: 4px solid;\n\t\t  padding: 10px 20px;\n\t\t  text-transform: uppercase;\n\t\t  font-weight: 100;\n\n\t\t  @media(min-width: 765px) {\n\t\t   \tmargin: 80px 0 0 0;\n    \t  \ttext-align: left;\n\t\t  }\n\t\t`\n\n        return (\n        \t<HeaderImage>\n      \t\t\t<Title>{bannerTitle}</Title>\n    \t\t</HeaderImage>\n        );\t\n    }\n}\n \n\nexport default Banner\n\n","import React from 'react';\nimport { Link } from 'gatsby';\nimport styled from 'styled-components';\n\nfunction PortfolioTeaser({ portfolioItem }) {\n\n  return(\n    <Container className={`article-teaser`}>\n      <Link to={`${portfolioItem.path.alias}`}>\n        <div className=\"image-wrapper\">\n          <img loading=\"lazy\" src={portfolioItem.relationships.field_featured_image.localFile.childImageSharp.fixed.src} \n          alt={portfolioItem.relationships.field_featured_image.alt} />\n        </div>\n      </Link>\n    </Container>\n  );\n}\n\nexport default PortfolioTeaser;\n \nconst Container = styled.div`\n\nbackground: #fff;\ndisplay: flex;\nborder-radius: 0 0 5px 5px;\n\n a {\n   text-decoration: none;\n }\n\n .image-wrapper {\n    overflow: hidden;\n    border-bottom: 2px #272f32 solid;\n    \n    img {\n      display: block;\n      height: auto;\n      transform: scale(1);\n      transition: transform .2s; \n    }\n }\n\n &:hover {\n   img {\n        transform: scale(1.2);\n      }\n }\n`","import React from \"react\"\nimport get from 'lodash/get'\nimport { graphql } from 'gatsby'\n\nimport Layout from \"../components/layout\"\nimport Seo from \"../components/seo\"\nimport styled from 'styled-components'\nimport BgImage from '../images/banner-images/portfolio-banner.jpg'\nimport Banner from \"../components/banner\"\nimport PortfolioTeaser from '../components/portfolioTeaser'\n\n\nclass PortfolioPage extends React.Component {\n  render() {\n    const portfolioItems = get(this, 'props.data.allNodePortfolioItem.edges')  \n\n\n     return (\n      <Layout>\n          <Seo title=\"Portfolio | Latest projects completed by ThowardMedia\" description=\"Check out the latest projects completed by ThowardMedia.\" />\n\n          <Banner title=\"Portfolio\" image={BgImage} />\n\n          <IntroWrapper>\n            <p>Browse through recently completed projects.</p>\n          </IntroWrapper>\n\n           <Latest>\n               <TeaserList>\n                  {portfolioItems.map(({ node }) => {\n                    return (\n                      <TeaserListItem key={node.path.alias}>\n                        <PortfolioTeaser portfolioItem={node} />\n                      </TeaserListItem>\n                    )\n                  })}\n                </TeaserList>\n            </Latest>  \n\n        </Layout>\n    )\n  }\n}\n\nexport default PortfolioPage\n\nconst Latest = styled.div`\n  max-width: 1200px;\n  margin: 0 auto;\n\n  h2.title {\n    margin-top: 100px;\n  }\n`\n\nconst TeaserList = styled.ul`\n  margin: 0;\n  display: flex;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  margin: 0 10px;\n`\nconst TeaserListItem = styled.li`\n  list-style: none;\n  flex: 100%;\n  margin: 10px;\n\n  h2:last-child {\n    margin-bottom: 15px;\n  }\n\n  &:last-child {\n    flex-grow: 0;\n  }\n\n  @media(min-width: 575px) {\n    flex: 1 0 31.5%;\n  }\n`\n\nconst IntroWrapper = styled.div`\n  max-width: 800px;\n  margin: 0 auto;\n  color: #fff;  \n  text-align: center;\n  font-size: 20px;\n  \n  @media(max-width: 980px) {\n    padding: 0 20px;\n  }\n`\n\n\nexport const pageQuery = graphql`\n  query PortfolioItemsQuery {\n    site {\n      siteMetadata {\n        title\n      }\n    }\n    allNodeTestimonial {\n      edges {\n        node {\n          id\n          body {\n            processed\n          }\n        }\n      }\n    }\n    allNodePortfolioItem(sort: {fields: field_date_complete, order: DESC}) {\n      edges {\n        node {\n          title\n          created(formatString: \"dddd Do, MMMM YYYY\")\n          field_date_complete(formatString: \"dddd Do, MMMM YYYY\")\n          path {\n            alias\n          }\n          relationships {\n            field_featured_image {\n              localFile {\n                publicURL\n                childImageSharp {\n                  # Specify a fixed image and fragment.\n                  # The default width is 400 pixels\n                  fixed(width: 700, height: 500) {\n                    ...GatsbyImageSharpFixed\n                  }\n                }\n              }\n            } \n          }\n        }\n      }\n    }\n  }\n`","export default __webpack_public_path__ + \"static/portfolio-banner-75b4b2226fdfd974ec816d15aafe162d.jpg\";"],"names":["Banner","_Component","apply","arguments","_inheritsLoose","prototype","render","title","image","bannerTitle","get","this","props","bannerImage","HeaderImage","styled","section","withConfig","displayName","componentId","Title","h1","React","Component","_ref","portfolioItem","Container","className","Link","to","path","alias","loading","src","relationships","field_featured_image","localFile","childImageSharp","fixed","alt","div","PortfolioPage","_React$Component","portfolioItems","Layout","Seo","description","BgImage","IntroWrapper","Latest","TeaserList","map","node","TeaserListItem","key","PortfolioTeaser","ul","li"],"sourceRoot":""}