{"version":3,"sources":["webpack:///./src/constants/latest-apps.js","webpack:///./src/components/HomeAndAbout/LatestApps.js","webpack:///./src/components/HomeAndAbout/AboutKate.js","webpack:///./src/pages/index.js","webpack:///./src/components/Btn.js","webpack:///./src/components/Title.js"],"names":["latestReactApps","slug","title","details","LatestAppsWrapper","styled","section","LatestApps","Title","subtitle","className","map","item","index","key","to","txt","txt_idx","trim","AboutKateWrapper","AboutKate","fluid","useStaticQuery","aboutKate","childImageSharp","alt","Btn","color","colorful","text","data","Layout","FullSeo","image","defaultBg","src","Banner","showTyping","id","zoomInAnimation","keyframes","zoomIn","bgColor","data-sal","data-sal-delay","data-sal-easing","data-sal-duration","props","titleColor"],"mappings":"oMAiBeA,EAjBS,CACtB,CACEC,KAAM,yBACNC,MAAO,yBACPC,QAAS,CAAC,8EAEZ,CACED,MAAO,iBACPD,KAAM,mBACNE,QAAS,CAAC,iCAAkC,qFAE9C,CACED,MAAO,kBACPD,KAAM,kBACNE,QAAS,CAAC,mCCoBRC,EAAoBC,IAAOC,QAAV,oFAAGD,CAAH,stBAgDRE,EA3EI,WACjB,OACE,kBAACH,EAAD,KACE,kBAACI,EAAA,EAAD,CAAON,MAAM,SAASO,SAAS,SAC/B,yBAAKC,UAAU,QACZV,EAAgBW,KAAI,SAACC,EAAMC,GAC1B,OACE,6BAASC,IAAKD,EAAOH,UAAU,OAC7B,kBAAC,OAAD,CAAMK,GAAE,IAAMH,EAAKX,KAAX,IAAoBa,IAAKD,GAC/B,uBAAGH,UAAU,cAAcE,EAAKV,OAE/BU,EAAKT,QAAQQ,KAAI,SAACK,EAAKC,GACtB,OACE,uBAAGP,UAAU,cAAcI,IAAKG,GAC7BD,EAAIE,mB,iCCiCrBC,EAAmBd,IAAOC,QAAV,8EAAGD,CAAH,wgCA8EPe,EAnHG,WAChB,IAEuBC,EAEnBC,yBAhBO,cAaTC,UACEC,gBAAmBH,MAIvB,OACE,kBAACF,EAAD,KACE,yBAAKT,UAAU,gBACb,6BAASA,UAAU,aACjB,yBAAKA,UAAU,iBACb,kBAAC,IAAD,CAAKW,MAAOA,EAAOI,IAAI,qCAG3B,6BAASf,UAAU,cACjB,uBAAGA,UAAU,WAAb,uBACA,4LAKA,+SAQA,kBAACgB,EAAA,EAAD,CAAKX,GAAG,cAAcY,OAAK,EAACC,UAAQ,EAACC,KAAK,mBCCrCxB,uBArCG,SAAC,GAAyB,IAAvByB,EAAsB,EAAtBA,KAAMpB,EAAgB,EAAhBA,UACzB,OACE,kBAACqB,EAAA,EAAD,KACE,6BAASrB,UAAWA,GAClB,kBAACsB,EAAA,EAAD,CACE9B,MAAO,mCACP+B,MAAOH,EAAKI,UAAUV,gBAAgBH,MAAMc,MAG9C,kBAACC,EAAA,EAAD,CACET,MAAK,0BACLzB,MAAO,uCACPmC,YAAY,IAGd,yBAAKC,GAAG,wBACN,kBAAC,EAAD,OAGF,yBAAKA,GAAG,yBACN,kBAAC,EAAD,YAiBV,wDAAejC,CAAf,2G,oCChDA,6DAIMkC,EAAkBC,YAAH,QAAeC,UAerBpC,iBAZH,SAAC,GAA2C,IAA1CU,EAAyC,EAAzCA,GAAIc,EAAqC,EAArCA,KAAaa,GAAwB,EAA/Bf,MAA+B,EAAxBe,SAAShC,EAAe,EAAfA,UACtC,OACE,kBAAC,OAAD,CAAMK,GAAIA,EACRL,UAAcA,EAAL,gCACagC,GAAW,QADxB,WAGTC,WAAS,UACTC,iBAAe,QACff,MAIN,0DAAexB,CAAf,qkCAuCiBkC,I,kCC1DjB,qCAiBelC,iBAdD,SAAC,GAAmC,IAAjCH,EAAgC,EAAhCA,MAAOO,EAAyB,EAAzBA,SAAUC,EAAe,EAAfA,UAChC,OACE,yBAAKA,UAAWA,EACdiC,WAAS,UACTE,kBAAgB,OAChBC,oBAAkB,OAClB,uBAAGpC,UAAU,WACX,0BAAMA,UAAU,SAASR,GACzB,0BAAMQ,UAAU,YAAYD,QAMpC,wDAAeJ,CAAf,sRAQa,SAAA0C,GAAK,OAAIA,EAAMC,YAAc","file":"component---src-pages-index-js-59bfd76a99dfe3b3c3d4.js","sourcesContent":["const latestReactApps = [\n  {\n    slug: 'color-scheme-generator',\n    title: \"Color Scheme Generator\",\n    details: [\"Generate the perfect palette by toggling and saving your favorite colors.\"],\n  },\n  {\n    title: \"Tints & Shades\",\n    slug: 'tints-and-shades',\n    details: [\"Monochromatic Colors Generator\", \"Get 20 hues and 20 shades by entering a valid CSS color name, RGB, or hex value.\"],\n  },\n  {\n    title: \"Download Images\",\n    slug: 'download-images',\n    details: [\"Built using the unsplash api.\"],\n  },\n]\nexport default latestReactApps\n","import React from 'react'\nimport styled from 'styled-components'\nimport { Link } from 'gatsby'\nimport Title from '../Title'\n\nimport latestReactApps from '../../constants/latest-apps'\n\nconst LatestApps = () => {\n  return (\n    <LatestAppsWrapper>\n      <Title title=\"Latest\" subtitle=\"Apps\" />\n      <div className=\"grid\">\n        {latestReactApps.map((item, index) => {\n          return (\n            <article key={index} className=\"app\">\n              <Link to={`/${item.slug}/`} key={index}>\n                <p className=\"app_title \">{item.title}</p>\n\n                {item.details.map((txt, txt_idx) => {\n                  return (\n                    <p className=\"app_details\" key={txt_idx}>\n                      {txt.trim()}\n                    </p>\n                  )\n                })}\n              </Link>\n            </article>\n          )\n        })}\n      </div>\n    </LatestAppsWrapper>\n  )\n}\n\nconst LatestAppsWrapper = styled.section`\n  & {\n    padding: 2rem;\n\n    div.grid {\n      align-items: flex-start;\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n      grid-column-gap: 2rem;\n      grid-auto-rows: 1fr;\n      margin: auto auto;\n\n      article.app {\n        margin: 0 auto;\n        text-align: center;\n        width: 100%;\n        padding: 1rem;\n\n        .app_icon {\n          display: inline-block;\n          font-size: 2rem;\n          color: var(--clr-secondary-color);\n          margin-bottom: 1.5rem;\n          line-height: 0;\n        }\n        .app_title {\n          border-bottom: 1px solid black;\n          font-family: var(--displayFF);\n          font-size: 1rem;\n          font-weight: var(--displayFFWeight);\n          outline: transparent;\n          margin: auto auto 1.25rem;\n          text-align: center;\n          text-transform: capitalize;\n          width: fit-content;\n        }\n        .app_details {\n          font-family: var(--mainFF);\n          font-weight: 300;\n          font-size: 0.95rem;\n          text-align: center;\n          text-transform: none;\n          margin-bottom: unset;\n        }\n      }\n    }\n  }\n`\nexport default LatestApps\n","import React from 'react'\nimport { graphql, useStaticQuery } from 'gatsby'\nimport Img from 'gatsby-image'\nimport Btn from '../Btn'\nimport styled from 'styled-components'\n\nconst getKate = graphql`\n  query AboutKate {\n    aboutKate: file(relativePath: { eq: \"kate-mills.jpg\" }) {\n      childImageSharp {\n        fluid(maxWidth: 634, maxHeight: 547, cropFocus: ATTENTION) {\n          ...GatsbyImageSharpFluid_withWebp\n        }\n      }\n    }\n  }\n`\nconst AboutKate = () => {\n  const {\n    aboutKate: {\n      childImageSharp: { fluid },\n    },\n  } = useStaticQuery(getKate)\n\n  return (\n    <AboutKateWrapper>\n      <div className=\"about-center\">\n        <article className=\"about-img\">\n          <div className=\"img-container\">\n            <Img fluid={fluid} alt=\"Kate Mills Front-End Developer\" />\n          </div>\n        </article>\n        <article className=\"about-info\">\n          <p className=\"heading\">Front-End Developer</p>\n          <p>\n            I'm Kate, a Front-End Developer passionate about innovation and\n            solving problems. I thrive in challenging environments where I can\n            learn new things and grow.\n          </p>\n          <p>\n            With over six years of experience, I specialize in creating\n            responsive web applications using React.js, Gatsby, GraphQL, Styled\n            Components, and CMS. I strive to adhere to best practices and enjoy\n            pushing the boundaries of what's possible with web development and\n            React.js.\n          </p>\n\n          <Btn to=\"/lets-chat/\" color colorful text=\"Let's Chat\" />\n        </article>\n      </div>\n    </AboutKateWrapper>\n  )\n}\n\nconst AboutKateWrapper = styled.section`\n  & {\n    max-width: 80vw;\n    margin: auto auto;\n    padding: 1rem 0.5rem;\n  }\n  .about-center {\n    max-width: 95%;\n    margin: 0 auto;\n  }\n  .about-img {\n    margin: 1rem 0;\n    box-shadow: var(--lightShadow);\n  }\n  .about-info {\n    margin-top: 0;\n  }\n  .about-img {\n    position: relative;\n  }\n  .about-img img {\n    width: 100%;\n    display: block;\n    box-shadow: var(--lightShadow);\n    object-position: center 25% !important;\n    max-height: 547px;\n  }\n  .img-container {\n    max-height: 547px;\n  }\n  .about-info .heading {\n    font-size: 2rem;\n    font-style: italic;\n    text-transform: capitalize;\n  }\n  .img-container::before {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border: 3px solid var(--clr-secondary-color);\n    box-sizing: border-box;\n    top: -16px;\n    left: -16px;\n  }\n  .underline {\n    text-decoration: underline;\n    color: var(--clr-primary-color);\n    letter-spacing: -0.01rem;\n  }\n\n  @media (min-width: 768px) {\n    .about-img,\n    .about-info {\n      margin: 3rem auto 1rem;\n    }\n    .about-img,\n    .about-img img,\n    .img-container {\n      max-width: 500px;\n    }\n  }\n  @media (min-width: 1200px) {\n    .about-center {\n      display: grid;\n      align-items: flex-start;\n      grid-template-columns: 1fr 1fr;\n    }\n    .about-img,\n    .about-img img,\n    .img-container {\n      max-width: 634px;\n    }\n    .about-img {\n      margin: 3rem;\n    }\n  }\n`\nexport default AboutKate\n","import React from 'react'\nimport { graphql } from 'gatsby'\nimport styled from 'styled-components'\n\nimport Layout from '../components/Layout'\nimport FullSeo from '../components/FullSeo'\nimport Banner from '../components/Hero/Banner'\nimport LatestApps from '../components/HomeAndAbout/LatestApps'\n\nimport AboutKate from '../components/HomeAndAbout/AboutKate'\n\nconst IndexPage = ({ data, className }) => {\n  return (\n    <Layout>\n      <article className={className}>\n        <FullSeo\n          title={'Kate Mills - Front-End Developer'}\n          image={data.defaultBg.childImageSharp.fluid.src}\n        />\n\n        <Banner\n          color={`var(--clr-primary-dark)`}\n          title={'Kate Mills - San Francisco, Bay Area'}\n          showTyping={true}\n        ></Banner>\n\n        <div id=\"kate-mills-container\">\n          <AboutKate />\n        </div>\n\n        <div id=\"latest-apps-container\">\n          <LatestApps />\n        </div>\n      </article>\n    </Layout>\n  )\n}\nexport const query = graphql`\n  query {\n    defaultBg: file(relativePath: { eq: \"kate-mills.jpg\" }) {\n      childImageSharp {\n        fluid(quality: 100, maxWidth: 4160) {\n          ...GatsbyImageSharpFluid_withWebp\n        }\n      }\n    }\n  }\n`\nexport default styled(IndexPage)`\n  #latest-apps-container{\n    background: #d4d4d4;\n    margin-top: 1.5rem;\n    padding: 2rem;\n  }\n  @media (min-width: 768px) { }\n`\n","import React from 'react'\nimport styled, { keyframes } from 'styled-components';\nimport {Link} from 'gatsby'\nimport { zoomIn } from 'react-animations';\nconst zoomInAnimation = keyframes`${zoomIn}`;\n\n\nconst Btn = ({to, text, color, bgColor, className}) => {\n  return (\n    <Link to={to}\n      className={`${className}\n      btn--animation btn--${bgColor || 'dark'}\n      `}\n      data-sal=\"zoom-in\"\n      data-sal-delay=\"2000\"\n    >{text}</Link>\n  )\n}\n\nexport default styled(Btn)`\n  &:link,\n  &:visited{\n    font-family: var(--mainFF);\n    font-size: 1.09rem;\n    letter-spacing: var(--altSpacing);\n    text-transform: capitalize;\n    text-decoration: none;\n    padding: 1.5rem 3.5rem;\n    display: inline-block;\n    border-radius: 10rem;\n    transition: all .3s;\n    position: relative;\n  }\n  &:hover{\n    transform: translateY(-2px);\n    box-shadow: 0 10px 20px rgba(0, 0, 0, .2);\n  }\n  &:active {\n    transform: translateY(.1rem);\n    box-shadow: 0 .5rem .1rem rgba(0, 0, 0, .2);\n  }\n  &::after{\n    content: \"\";\n    display: inline-block;\n    height: 100%;\n    width: 100%;\n    border-radius: 10rem;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    transition: all .4s;\n  }\n  &:hover::after{\n    transform: scaleX(1.4) scaleY(1.6);\n    opacity: 0;\n  }\n  &.btn--animation{\n    animation: ${zoomInAnimation};\n    animation-duration: 800ms;\n  }\n  &.btn--light {\n    background-color: var(--clr-primary-dark);\n    color: var(--clr-primary-txt) !important;\n  }\n  &.btn--dark {\n    background-color: var(--clr-secondary-color);\n    color: var(--clr-secondary-txt);\n  }\n  &.btn--dark:hover{\n    color: var(--clr-secondary-txt);\n\n  }\n  &.btn--dark::after{\n    background-color: var(--clr-secondary-dark);\n  }\n  &.btn--light::after{\n    background-color: var(--clr-primary-light);\n    color: var(--clr-primary-light-txt);\n  }\n\n  @media(min-width: 768px){ margin: 1rem; }\n`\n","import React from 'react'\nimport styled from 'styled-components'\n\nconst Title = ({ title, subtitle, className}) => {\n  return (\n    <div className={className}\n      data-sal=\"zoom-in\"\n      data-sal-easing=\"ease\"\n      data-sal-duration=\"500\">\n      <p className=\"heading\">\n        <span className=\"title\">{title}</span>\n        <span className=\"subtitle\">{subtitle}</span>\n      </p>\n    </div>\n  )\n}\n\nexport default styled(Title)`\n    font-size: 2rem;\n    letter-spacing: var(--altSpacing);\n    margin: 0 auto;\n    margin-bottom: 1.25rem;\n    text-align: center;\n\n  .title, .subtitle {\n    color: ${props => props.titleColor || 'var(--clr-primary-dark)'};\n    text-transform: capitalize;\n    text-shadow: 0 0 rgba(0,0,0,0.2);\n  }\n\n  span {\n    display: inline-block;\n    margin: 0 0.35rem;\n  }\n  @media(max-width: 500px){\n    font-size: 2rem;\n  }\n`\n"],"sourceRoot":""}