{"version":3,"sources":["webpack://krebe.dev/./src/components/Cta/styles.module.css","webpack://krebe.dev/./src/components/Cta/index.js","webpack://krebe.dev/./src/components/ProjectCards/index.js","webpack://krebe.dev/./src/components/ProjectCards/styles.module.css","webpack://krebe.dev/./src/pages/portfolio/index.js","webpack://krebe.dev/./src/pages-styles/portfolio.module.css"],"names":["ctaLink","className","href","styles","Link","to","projectList","projects","map","frontmatter","id","slug","key","style","backgroundColor","bgColor","color","txtColor","title","tags","tag","G","image","getImage","featuredImage","alt","data","ALL_PROJECTS","useState","allMdx","nodes","setProjects","filter","setFilter","isFiltering","setIsFiltering","isSingle","length","reduce","acc","curr","Set","useEffect","filtered","indexOf","cs","timerId","setTimeout","clearTimeout","Layout","Helmet","site","siteMetadata","rel","author","socialProfiles","github","onClick","toUpperCase","Cta"],"mappings":"mKAIWA,EAAU,gCCqBrB,EArBY,WACV,OACE,2BAASC,UDLI,6BCMX,uBAAKA,UDLW,kCCMd,sBAAIA,UDLY,oCCKhB,eACA,mJAEmD,2BACjD,qBAAGC,KAAK,2BAA2BD,UAAWE,GAA9C,oBAEK,IALP,uBAMuB,IACrB,gBAAC,EAAAC,KAAD,CAAMC,GAAG,WAAWJ,UAAWE,GAA/B,sB,6IC6BV,EAxCqB,SAAC,GAAkB,IAChCG,EAD+B,EAAfC,SACOC,KAAI,gBAAGC,EAAH,EAAGA,YAAaC,EAAhB,EAAgBA,GAAIC,EAApB,EAAoBA,KAApB,OAC/B,sBACEC,IAAKF,EACLT,UCPmB,oCDQnBY,MAAO,CACLC,gBAAiBL,EAAYM,UAG/B,gBAAC,EAAAX,KAAD,CAAMC,GAAE,IAAMM,GACZ,sBACEV,UCbe,oCDcfY,MAAO,CACLG,MAAOP,EAAYQ,WAGpBR,EAAYS,OAEf,sBAAIjB,UClBS,iCDmBVQ,EAAYU,KAAKX,KAAI,SAACY,GAAD,OACpB,sBAAInB,UCnBC,4BDmBsBW,IAAKF,EAAKU,GAClCA,OAIP,uBAAKnB,UC1Bc,uCD2BjB,gBAAC,EAAAoB,EAAD,CACEC,OAAOC,OAASd,EAAYe,eAC5BC,IAAKhB,EAAYS,cAO3B,OACE,sBAAIjB,UAAS,mDAA0CK,I,UEqD3D,EAtFiB,SAAC,GAAc,IAAZoB,EAAW,EAAXA,KACZC,EAAe,eAErB,GAAgCC,cAASF,EAAKG,OAAOC,OAA9CvB,EAAP,KAAiBwB,EAAjB,KACA,GAA4BH,cAASD,GAA9BK,EAAP,KAAeC,EAAf,KACA,GAAsCL,eAAS,GAAxCM,EAAP,KAAoBC,EAApB,KACMC,EAA+B,IAApB7B,EAAS8B,OAEpBlB,EAAOO,EAAKG,OAAOC,MACtBtB,KAAI,qBAAGC,YAAeU,QACtBmB,QAAO,SAACC,EAAKC,GAAN,cAAmB,IAAIC,IAAQ,CAACd,GAAb,eAA+BY,IAA/B,OAAuCC,SAkBpE,OAhBAE,gBAAU,WACR,IAAMC,EAAWjB,EAAKG,OAAOC,MAAME,QACjC,qBAAGvB,YAA8BU,KAAKyB,QAAQZ,IAAW,KAE3DD,GAAY,SAACc,GAAD,OACVb,IAAWL,EAAeD,EAAKG,OAAOC,MAAQa,KAEhDR,GAAe,GAEf,IAAMW,EAAUC,YAAW,WACzBZ,GAAe,KACd,KAEH,OAAO,kBAAMa,aAAaF,MACzB,CAACd,EAAQN,EAAKG,OAAOC,QAGtB,gBAACmB,EAAA,EAAD,KACE,gBAACC,EAAA,EAAD,CAAQhC,MAAK,cAAgBQ,EAAKyB,KAAKC,aAAalC,QACpD,+BACE,uBAAKjB,UAAS,aACZ,0DACA,iGAEK,IACH,qBACEoD,IAAI,sBACJnD,KAAMwB,EAAKyB,KAAKC,aAAaE,OAAOC,eAAeC,OACnDvD,UC/CU,uCD4CZ,UAHF,KAYA,sBAAIA,UCpDI,iCDqDLkB,EAAKX,KAAI,SAACY,GAAD,OACR,sBAAIR,IAAKQ,EAAKnB,UCrDX,gCDsDD,0BACEA,UAAcE,oCACZ6B,IAAWZ,GCtDR,sCDwDLqC,QAAS,kBAAMxB,EAAUb,KAExBA,SAKPc,GACA,yBACGF,IAAWL,EAAX,WACcA,EAAa+B,cAD3B,2EAEcnD,EAAS8B,OAFvB,YAGKD,EAAW,GAAK,KAHrB,gBAImBJ,EAAO0B,eAG/B,uBAAKzD,UCvEU,wCDwEb,gBAAC,EAAD,CAAcM,SAAUA,IACvB2B,GACC,uBAAKjC,UCzEI,sCD0EP,qBAAGA,UCzEO,yCDyEV,0BAC0B+B,EAD1B,MACqC,SAO/C,gBAAC2B,EAAA,EAAD","file":"component---src-pages-portfolio-index-js-a945c4dae0bb9382b4b5.js","sourcesContent":["// extracted by mini-css-extract-plugin\nexport var cta = \"styles-module--cta--1072z\";\nexport var ctaInner = \"styles-module--ctaInner--156E_\";\nexport var ctaHeading = \"styles-module--ctaHeading--8Zsd6\";\nexport var ctaLink = \"styles-module--ctaLink--2tNVm\";","import React from 'react'\nimport { Link } from 'gatsby'\nimport * as styles from './styles.module.css'\n\nconst Cta = () => {\n  return (\n    <section className={`${styles.cta}`}>\n      <div className={styles.ctaInner}>\n        <h2 className={styles.ctaHeading}>Let's talk!</h2>\n        <p>\n          Are you looking to collaborate on an interesting project or just want\n          to chat? I'll be super excited to hear from you! <br />\n          <a href='mailto:solomon@krebe.dev' className={styles.ctaLink}>\n            Send me an email\n          </a>{' '}\n          or reach out via the{' '}\n          <Link to='/contact' className={styles.ctaLink}>\n            Contact Page.\n          </Link>\n        </p>\n      </div>\n    </section>\n  )\n}\n\nexport default Cta\n","import React from 'react'\nimport { Link } from 'gatsby'\nimport { GatsbyImage, getImage } from 'gatsby-plugin-image'\nimport * as styles from './styles.module.css'\n\nconst ProjectCards = ({ projects }) => {\n  const projectList = projects.map(({ frontmatter, id, slug }) => (\n    <li\n      key={id}\n      className={styles.projectCard}\n      style={{\n        backgroundColor: frontmatter.bgColor,\n      }}\n    >\n      <Link to={`/${slug}`}>\n        <h2\n          className={styles.projectName}\n          style={{\n            color: frontmatter.txtColor,\n          }}\n        >\n          {frontmatter.title}\n        </h2>\n        <ul className={styles.tagList}>\n          {frontmatter.tags.map((tag) => (\n            <li className={styles.tag} key={id + tag}>\n              {tag}\n            </li>\n          ))}\n        </ul>\n        <div className={styles.projectScreen}>\n          <GatsbyImage\n            image={getImage(frontmatter.featuredImage)}\n            alt={frontmatter.title}\n          />\n        </div>\n      </Link>\n    </li>\n  ))\n\n  return (\n    <ul className={`flex-centered ${styles.projectList}`}>{projectList}</ul>\n  )\n}\n\nexport default ProjectCards\n","// extracted by mini-css-extract-plugin\nexport var projectList = \"styles-module--projectList--3pYUj\";\nexport var projectCard = \"styles-module--projectCard--2lYeO\";\nexport var projectName = \"styles-module--projectName--1GxgL\";\nexport var projectScreen = \"styles-module--projectScreen--3peCy\";\nexport var tagList = \"styles-module--tagList--1rCL3\";\nexport var tag = \"styles-module--tag--2gdAv\";","import React, { useEffect, useState } from 'react'\nimport { graphql } from 'gatsby'\nimport { Helmet } from 'react-helmet'\nimport Layout from './../../components/Layout'\nimport ProjectCards from './../../components/ProjectCards'\nimport Cta from './../../components/Cta'\nimport * as styles from '../../pages-styles/portfolio.module.css'\n\nconst Projects = ({ data }) => {\n  const ALL_PROJECTS = 'All Projects'\n\n  const [projects, setProjects] = useState(data.allMdx.nodes)\n  const [filter, setFilter] = useState(ALL_PROJECTS)\n  const [isFiltering, setIsFiltering] = useState(false)\n  const isSingle = projects.length === 1\n\n  const tags = data.allMdx.nodes\n    .map(({ frontmatter: { tags } }) => tags)\n    .reduce((acc, curr) => [...new Set([...[ALL_PROJECTS], ...acc, ...curr])])\n\n  useEffect(() => {\n    const filtered = data.allMdx.nodes.filter(\n      ({ frontmatter }) => frontmatter.tags.indexOf(filter) > -1\n    )\n    setProjects((cs) =>\n      filter === ALL_PROJECTS ? data.allMdx.nodes : filtered\n    )\n    setIsFiltering(true)\n\n    const timerId = setTimeout(() => {\n      setIsFiltering(false)\n    }, 1000)\n\n    return () => clearTimeout(timerId)\n  }, [filter, data.allMdx.nodes])\n\n  return (\n    <Layout>\n      <Helmet title={`Projects | ${data.site.siteMetadata.title}`} />\n      <section>\n        <div className={`container`}>\n          <h1>Software Developer Portfolio</h1>\n          <p>\n            A collection of my featured projects. You can find more of my work\n            on{' '}\n            <a\n              rel='noopenner noreferre'\n              href={data.site.siteMetadata.author.socialProfiles.github}\n              className={styles.githubLink}\n            >\n              Github\n            </a>\n            .\n          </p>\n          <ul className={styles.tags}>\n            {tags.map((tag) => (\n              <li key={tag} className={`${styles.tag}`}>\n                <button\n                  className={`${styles.tagBtn} ${\n                    filter === tag && styles.activeBtn\n                  }`}\n                  onClick={() => setFilter(tag)}\n                >\n                  {tag}\n                </button>\n              </li>\n            ))}\n          </ul>\n          {!isFiltering && (\n            <p>\n              {filter === ALL_PROJECTS\n                ? `Showing ${ALL_PROJECTS.toUpperCase()}: Apply the above filters to list them by tool or technology.`\n                : `Showing ${projects.length} Project${\n                    isSingle ? '' : 's'\n                  } filtered by ${filter.toUpperCase()}`}\n            </p>\n          )}\n          <div className={styles.projectList}>\n            <ProjectCards projects={projects} />\n            {isFiltering && (\n              <div className={styles.filtering}>\n                <p className={styles.filterStatus}>\n                  Filtering projects by: {filter}...{' '}\n                </p>\n              </div>\n            )}\n          </div>\n        </div>\n      </section>\n      <Cta />\n    </Layout>\n  )\n}\n\nexport default Projects\n\nexport const query = graphql`\n  query ProjectsPageQuery {\n    site {\n      siteMetadata {\n        title\n        author {\n          socialProfiles {\n            github\n          }\n        }\n      }\n    }\n    allMdx(\n      filter: { frontmatter: { type: { eq: \"project\" } } }\n      sort: { fields: frontmatter___date, order: DESC }\n    ) {\n      nodes {\n        id\n        slug\n        frontmatter {\n          title\n          tags\n          bgColor\n          txtColor\n          featuredImage {\n            childImageSharp {\n              gatsbyImageData(width: 675)\n            }\n          }\n        }\n      }\n    }\n  }\n`\n","// extracted by mini-css-extract-plugin\nexport var githubLink = \"portfolio-module--githubLink--3S7vc\";\nexport var tags = \"portfolio-module--tags--3h1QD\";\nexport var tag = \"portfolio-module--tag--2nJfJ\";\nexport var tagBtn = \"portfolio-module--tagBtn--Wcc_m\";\nexport var activeBtn = \"portfolio-module--activeBtn--1j0Lt\";\nexport var projectList = \"portfolio-module--projectList--1j5mH\";\nexport var filtering = \"portfolio-module--filtering--3fHsZ\";\nexport var filterStatus = \"portfolio-module--filterStatus--YkleE\";"],"sourceRoot":""}