{"version":3,"sources":["webpack:///./src/pages/projects.js","webpack:///./src/components/Project/categoryMenu.js","webpack:///./src/components/Project/Project.js","webpack:///./src/components/Project/Projects.js"],"names":["ProjectsPage","projects","data","allStrapiProjects","nodes","title","description","className","showPagination","ProjectCategoriesMenu","query","render","activeClassName","to","allStrapiProjectCategories","map","category","i","key","slug","categoryName","Project","project_desc","project_name","image","skills","website","github","fluid","childImageSharp","rel","target","href","Projects","showLink","useState","activePage","setActivePage","currentProjects","setCurrentProjects","useEffect","setProjectsToBeDisplayed","length","useCallback","lastProjectIndex","indexOfLastProject","indexOfFirstProject","currentProjectsData","slice","Title","project","id","Bottom","itemsCountPerPage","totalItemsCount","pageRangeDisplayed","onChange","pageNumber","itemClass","linkClass","prevPageText","nextPageText"],"mappings":"uHAAA,gFAgDeA,UAzCM,SAAC,GAIf,IAFyBC,EAE1B,EAHJC,KACEC,kBAAqBC,MAGvB,OACE,oCACE,kBAAC,IAAD,CAAKC,MAAM,WAAWC,YAAY,gCAClC,0BAAMC,UAAU,gBACd,kBAAC,IAAD,CAAOF,MAAM,aACb,kBAAC,IAAD,MACA,kBAAC,IAAD,CAAUG,gBAAc,EAACP,SAAUA,Q,2DClB3C,+CA4CeQ,IAxCe,WAC5B,OACE,kBAAC,IAAD,CACEC,MAAK,aAULC,OAAQ,SAAAT,GAAI,OACV,yBAAKK,UAAU,aACb,wBAAIA,UAAU,4BACZ,kBAAC,IAAD,CACEA,UAAU,iCACVK,gBAAgB,SAChBC,GAAG,cAEH,oCAEDX,EAAKY,2BAA2BV,MAAMW,KAAI,SAACC,EAAUC,GAAX,OACzC,kBAAC,IAAD,CACEC,IAAKD,EACLV,UAAU,iCACVK,gBAAgB,SAChBC,GAAE,aAAeG,EAASG,MAE1B,4BAAKH,EAASI,yB,qJCEfC,G,UA/BC,SAAC,GAOV,IANLC,EAMI,EANJA,aACAC,EAKI,EALJA,aACAC,EAII,EAJJA,MACAC,EAGI,EAHJA,OACAC,EAEI,EAFJA,QACAC,EACI,EADJA,OAEA,OACE,6BAASpB,UAAU,WAChBiB,GACC,kBAAC,IAAD,CAAOI,MAAOJ,EAAMK,gBAAgBD,MAAOrB,UAAU,gBAEvD,yBAAKA,UAAU,gBACb,4BAAKgB,GACL,uBAAGhB,UAAU,gBAAgBe,GAC7B,uCACA,yBAAKf,UAAU,kBAAkBkB,GACjC,yBAAKlB,UAAU,iBACb,uBAAGuB,IAAI,sBAAsBC,OAAO,SAASC,KAAMN,GAAnD,aAGA,uBAAGI,IAAI,sBAAsBC,OAAO,SAASC,KAAML,GAAnD,eCqEKM,IAxFE,SAAC,GAAmD,IAAjDhC,EAAgD,EAAhDA,SAAUI,EAAsC,EAAtCA,MAAO6B,EAA+B,EAA/BA,SAAU1B,EAAqB,EAArBA,eAAqB,EAC9B2B,mBAAS,GAAtCC,EAD2D,KAC/CC,EAD+C,OAEpBF,mBAAS,MAAhDG,EAF2D,KAE1CC,EAF0C,KAMlEC,qBAAU,WACRC,EAJsB,EAIGL,KACxB,CAACA,EAAYnC,EAASyC,SAEzB,IAAMD,EAA2BE,uBAC/B,SAAAC,GACE,IAAMC,EAAqBD,EACrBE,EAAsBD,EAVR,EAYdE,EAAsB9C,EAAS+C,MACnCF,EACAD,GAEFN,EAAmBQ,KAErB,CAAC9C,IAMH,OAAI,OAASqC,EACJ,KAIP,6BAAS/B,UAAU,oBAChBF,GAAS,kBAAC4C,EAAA,EAAD,CAAO5C,MAAOA,IACxB,yBAAKE,UAAU,aACb,yBAAKA,UAAU,OACZC,EACG8B,EAAgBvB,KAAI,SAAAmC,GAClB,OACE,yBACEhC,IAAKgC,EAAQC,GACb5C,UAAU,2CAEV,kBAAC,EAAY2C,OAInBjD,EAASc,KAAI,SAAAmC,GACX,OACE,yBACEhC,IAAKgC,EAAQC,GACb5C,UAAU,2CAEV,kBAAC,EAAY2C,QAKxBhB,GACC,kBAAC,IAAD,CAAMrB,GAAG,cACP,yBAAKN,UAAU,cACb,kBAAC6C,EAAA,EAAD,yBAEE,kBAAC,IAAD,CAAS7C,UAAU,gBAK1BC,GACC,yBAAKD,UAAU,sBACb,kBAAC,IAAD,CACE6B,WAAYA,EACZiB,kBArEY,EAsEZC,gBAAiBrD,EAASyC,OAC1Ba,mBAtEM,EAuENC,SAnDa,SAAAC,GACvBpB,EAAcoB,IAmDJC,UAAW,YACXC,UAAW,YACXC,aAAc,WACdC,aAAc","file":"component---src-pages-projects-js-8049816a33af94c52516.js","sourcesContent":["import React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Title from \"../components/Title/Title\"\nimport ProjectCategoriesMenu from \"../components/Project/categoryMenu\"\nimport Projects from \"../components/Project/Projects\"\nimport SEO from \"../components/SEO\"\n\nconst ProjectsPage = ({\n  data: {\n    allStrapiProjects: { nodes: projects },\n  },\n}) => {\n  return (\n    <>\n      <SEO title=\"Projects\" description=\"Cristian Bernal's Portfolio\" />\n      <main className=\"project-page\">\n        <Title title=\"Projects\" />\n        <ProjectCategoriesMenu />\n        <Projects showPagination projects={projects} />\n      </main>\n    </>\n  )\n}\n\nexport const query = graphql`\n  {\n    allStrapiProjects(sort: { fields: featured, order: DESC }) {\n      nodes {\n        website\n        strapiId\n        skills\n        project_name\n        project_desc\n        github\n        featured\n        id\n        image {\n          childImageSharp {\n            fluid {\n              ...GatsbyImageSharpFluid\n            }\n          }\n        }\n      }\n    }\n  }\n`\n\nexport default ProjectsPage\n","import React from \"react\"\nimport { Link, StaticQuery, graphql } from \"gatsby\"\nimport \"./category-menu.scss\"\n\nconst ProjectCategoriesMenu = () => {\n  return (\n    <StaticQuery\n      query={graphql`\n        query {\n          allStrapiProjectCategories {\n            nodes {\n              categoryName\n              slug\n            }\n          }\n        }\n      `}\n      render={data => (\n        <div className=\"container\">\n          <ul className=\"projects-categories-list\">\n            <Link\n              className=\"projects-categories-list__item\"\n              activeClassName=\"active\"\n              to=\"/projects/\"\n            >\n              <li>All</li>\n            </Link>\n            {data.allStrapiProjectCategories.nodes.map((category, i) => (\n              <Link\n                key={i}\n                className=\"projects-categories-list__item\"\n                activeClassName=\"active\"\n                to={`/projects/${category.slug}`}\n              >\n                <li>{category.categoryName}</li>\n              </Link>\n            ))}\n          </ul>\n        </div>\n      )}\n    />\n  )\n}\n\nexport default ProjectCategoriesMenu\n","import React from \"react\"\nimport Image from \"gatsby-image\"\n// import { FaGithub, FaShareSquare } from \"react-icons/fa\"\nimport \"./project.scss\"\n\nconst Project = ({\n  project_desc,\n  project_name,\n  image,\n  skills,\n  website,\n  github,\n}) => {\n  return (\n    <article className=\"project\">\n      {image && (\n        <Image fluid={image.childImageSharp.fluid} className=\"project-img\" />\n      )}\n      <div className=\"project-info\">\n        <h3>{project_name}</h3>\n        <p className=\"project-desc\">{project_desc}</p>\n        <h3>Skills:</h3>\n        <div className=\"project-skills\">{skills}</div>\n        <div className=\"project-links\">\n          <a rel=\"noopener noreferrer\" target=\"_blank\" href={website}>\n            Live demo\n          </a>\n          <a rel=\"noopener noreferrer\" target=\"_blank\" href={github}>\n            Github\n          </a>\n        </div>\n      </div>\n    </article>\n  )\n}\n\nexport default Project\n","import React, { useEffect, useState, useCallback } from \"react\"\nimport Pagination from \"react-js-pagination\"\nimport { Link } from \"gatsby\"\nimport { FaShare } from \"react-icons/fa\"\nimport Title from \"../Title/Title\"\nimport Bottom from \"../Bottom/Bottom\"\nimport Project from \"../Project/Project\"\n\nconst Projects = ({ projects, title, showLink, showPagination }) => {\n  const [activePage, setActivePage] = useState(1)\n  const [currentProjects, setCurrentProjects] = useState(null)\n  const projectsPerPage = 4\n  const pageRange = 5\n\n  useEffect(() => {\n    setProjectsToBeDisplayed(activePage * projectsPerPage)\n  }, [activePage, projects.length])\n\n  const setProjectsToBeDisplayed = useCallback(\n    lastProjectIndex => {\n      const indexOfLastProject = lastProjectIndex\n      const indexOfFirstProject = indexOfLastProject - projectsPerPage\n\n      const currentProjectsData = projects.slice(\n        indexOfFirstProject,\n        indexOfLastProject\n      )\n      setCurrentProjects(currentProjectsData)\n    },\n    [projects]\n  )\n\n  const handlePageChange = pageNumber => {\n    setActivePage(pageNumber)\n  }\n  if (null === currentProjects) {\n    return null\n  }\n\n  return (\n    <section className=\"section projects\">\n      {title && <Title title={title} />}\n      <div className=\"container\">\n        <div className=\"row\">\n          {showPagination\n            ? currentProjects.map(project => {\n                return (\n                  <div\n                    key={project.id}\n                    className=\"section-center projects-center col-lg-6\"\n                  >\n                    <Project {...project} />\n                  </div>\n                )\n              })\n            : projects.map(project => {\n                return (\n                  <div\n                    key={project.id}\n                    className=\"section-center projects-center col-lg-6\"\n                  >\n                    <Project {...project} />\n                  </div>\n                )\n              })}\n        </div>\n        {showLink && (\n          <Link to=\"/projects/\">\n            <div className=\"btn-center\">\n              <Bottom>\n                View all projects\n                <FaShare className=\"btn-icon\" />\n              </Bottom>\n            </div>\n          </Link>\n        )}\n        {showPagination && (\n          <div className=\"pagination-wrapper\">\n            <Pagination\n              activePage={activePage}\n              itemsCountPerPage={projectsPerPage}\n              totalItemsCount={projects.length}\n              pageRangeDisplayed={pageRange}\n              onChange={handlePageChange}\n              itemClass={\"page-item\"}\n              linkClass={\"page-link\"}\n              prevPageText={\"Previous\"}\n              nextPageText={\"Next\"}\n            />\n          </div>\n        )}\n      </div>\n    </section>\n  )\n}\n\nexport default Projects\n"],"sourceRoot":""}