{"version":3,"sources":["img/commission/details.png","img/commission/faq.png","img/commission/pricing.png","img/commission/status.png","img/logo/Logo.png","img/gallery_headers/acrylic.png","img/gallery_headers/commissions.png","img/gallery_headers/pen_ink.jpg","img/gallery_headers/public_art.png","img/gallery_headers/watercolor.png","img/gallery_headers/digital.png","img/beloved/beloved_header.png","img/about/BioImage1.jpg","img/about/BioImage2.jpg","img/about/ShowsImage3.jpg","ui/HeaderStyles.js","components/common/Header.js","ui/HomePageStyles.js","components/HomePage.js","ui/GalleryPageStyles.js","ui/UnknownStyles.js","components/UnknownPage.js","components/GalleryPage.js","ui/BelovedStyles.js","components/BelovedPage.js","ui/CommonStyles.js","components/BioPage.js","ui/FaqPageStyles.js","components/FaqPage.js","ui/FooterStyles.js","components/common/Footer.js","components/ContactPage.js","components/CommissionPage.js","components/App.js","index.js"],"names":["module","exports","Logo","styled","div","NavBar","nav","$","JQuery","Header","useEffect","hover","this","find","stop","delay","fadeIn","fadeOut","className","to","src","logo","alt","href","target","rel","Portfolio","HomePage","style","backgroundImage","acrylic_header","watercolor_header","pen_ink_header","public_art_header","commissions_header","digital_header","Gallery","LoadingWheel","Unknown","h1","UnknownImage","UnknownPage","key","GalleryPage","state","unloadedImages","loadedImages","bottomImages","loadMoreImages","event","loadMore","forEach","img","getBoundingClientRect","bottom","window","innerHeight","slice","length","image","shift","undefined","push","createImageHTML","setState","addEventListener","passive","media","props","match","params","fillGallery","then","images","removeEventListener","size","color","loading","Promise","resolve","reject","request","XMLHttpRequest","scope","onreadystatechange","readyState","status","_images","JSON","parse","responseText","unknownPage","endsWith","startsWith","i","imgToLoad","onerror","setTimeout","getImages","open","send","htmlImage","ref","divElement","unshift","onLoad","masonryPage","screen","width","Masonry","itemSelector","percentPosition","columnWidth","transitionDuration","layout","React","Component","Beloved","BelovedPage","beloved_header","role","aria-label","About","BioPage","bioImage1","bioImage2","FaqText","FaqPage","id","showsImage3","Socials","Footer","integrity","crossOrigin","ContactPage","CommissionPage","small","detailsImg","large","hideDownload","hideZoom","faqImg","pricingImg","statusImg","GlobalStyle","createGlobalStyle","App","path","exact","component","render","document","getElementById"],"mappings":"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","file":"static/js/main.cf5dd0d4.chunk.js","sourcesContent":["module.exports = __webpack_public_path__ + \"static/media/details.a72b375c.png\";","module.exports = __webpack_public_path__ + \"static/media/faq.f3e627d2.png\";","module.exports = __webpack_public_path__ + \"static/media/pricing.f9608b1e.png\";","module.exports = __webpack_public_path__ + \"static/media/status.0a4e8978.png\";","module.exports = __webpack_public_path__ + \"static/media/Logo.d9d6698e.png\";","module.exports = __webpack_public_path__ + \"static/media/acrylic.1a0129a3.png\";","module.exports = __webpack_public_path__ + \"static/media/commissions.a90dfda3.png\";","module.exports = __webpack_public_path__ + \"static/media/pen_ink.d66963d6.jpg\";","module.exports = __webpack_public_path__ + \"static/media/public_art.45f14e71.png\";","module.exports = __webpack_public_path__ + \"static/media/watercolor.bcca760e.png\";","module.exports = __webpack_public_path__ + \"static/media/digital.88811bf5.png\";","module.exports = __webpack_public_path__ + \"static/media/beloved_header.b72f8cf2.png\";","module.exports = __webpack_public_path__ + \"static/media/BioImage1.24044671.jpg\";","module.exports = __webpack_public_path__ + \"static/media/BioImage2.c5abbac8.jpg\";","module.exports = __webpack_public_path__ + \"static/media/ShowsImage3.79c9a9e0.jpg\";","import styled from \"styled-components\";\r\n\r\nexport const Logo = styled.div`\r\n  .logo-img {\r\n    width: 100%;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .logo-header {\r\n    font-size: 1rem;\r\n    text-transform: uppercase;\r\n    text-align: center;\r\n    color: #a1a1a1;\r\n  }\r\n\r\n  .logo-separator {\r\n    border-color: #a1a1a1;\r\n    margin: 0;\r\n  }\r\n\r\n  text-align: center;\r\n  border-bottom: none;\r\n`;\r\n\r\nexport const NavBar = styled.nav`\r\n  .navbar-nav > li > .nav-link {\r\n    color: black;\r\n    font-weight: 600;\r\n  }\r\n\r\n  .navbar-nav > li > .nav-link:hover {\r\n    color: #AA99DC;\r\n  }\r\n\r\n  .dropdown-menu > li > a:hover,\r\n  .dropdown-menu > li > a:focus {\r\n    background-color: white;\r\n  }\r\n\r\n  .dropdown-menu > li > .dropdown-link {\r\n    color: black;\r\n    font-weight: 600;\r\n  }\r\n\r\n  .dropdown-menu > li > .dropdown-link:hover {\r\n    color: #AA99DC;\r\n  }\r\n\r\n  .dropdown-menu {\r\n    right: auto;\r\n    left: 50%;\r\n    -webkit-transform: translate(-50%, 0);\r\n    -o-transform: translate(-50%, 0);\r\n    transform: translate(-50%, 0);\r\n    text-align: center;\r\n    border: 0;\r\n    box-shadow: none;\r\n  }\r\n\r\n  .navbar-nav > li > link {\r\n    padding-bottom: 5px;\r\n  }\r\n\r\n  .navbar-nav > .open > a:focus {\r\n    background-color: white;\r\n  }\r\n\r\n  .navbar-nav {\r\n    display: inline-block;\r\n    float: none;\r\n    vertical-align: top;\r\n  }\r\n\r\n  .navbar-links {\r\n    text-align: center;\r\n  }\r\n\r\n  background: inherit;\r\n  border: none;\r\n`;\r\n","import React, { useEffect } from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { Logo, NavBar } from \"../../ui/HeaderStyles\";\r\nimport logo from \"../../img/logo/Logo.png\";\r\nimport * as JQuery from \"jquery\";\r\nconst $ = JQuery.default;\r\n\r\nfunction Header() {\r\n  useEffect(() => {\r\n    $(\"ul.nav li.dropdown\").hover(\r\n      function() {\r\n        $(this)\r\n          .find(\".dropdown-menu\")\r\n          .stop(true, true)\r\n          .delay(10)\r\n          .fadeIn(100);\r\n      },\r\n      function() {\r\n        $(this)\r\n          .find(\".dropdown-menu\")\r\n          .stop(true, true)\r\n          .delay(10)\r\n          .fadeOut(100);\r\n      }\r\n    );\r\n  }, []);\r\n\r\n  return (\r\n    <>\r\n      <Logo className=\"container\">\r\n        <div className=\"row\">\r\n          <div className=\"col-md-4 col-xs-2\" />\r\n          <div className=\"col-md-4 col-xs-8\">\r\n            <Link to=\"/\">\r\n              <img className=\"logo-img\" src={logo} alt=\"\" />\r\n            </Link>\r\n            {/* <p className=\"logo-header\">Original Artwork by Kendel Leslie</p> */}\r\n            <hr className=\"logo-separator\" />\r\n          </div>\r\n          <div className=\"col-md-4 col-xs-2\" />\r\n        </div>\r\n      </Logo>\r\n      <NavBar className=\"navbar-default\">\r\n        <div className=\"container\">\r\n          <div className=\"navbar-links row\">\r\n            <ul className=\"nav navbar-nav\">\r\n              <li>\r\n                <Link to=\"/\" className=\"nav-link\">home</Link>\r\n              </li>\r\n              {/* <li className=\"dropdown col-xs-3\">\r\n                <a\r\n                  href=\" \"\r\n                  onClick={e => e.preventDefault()}\r\n                  className=\"dropdown-toggle nav-link\"\r\n                  data-toggle=\"dropdown\"\r\n                  role=\"button\"\r\n                  aria-haspopup=\"true\"\r\n                  aria-expanded=\"false\"\r\n                >\r\n                  about\r\n                </a>\r\n                <ul className=\"dropdown-menu\">\r\n                  <li>\r\n                    <Link className=\"dropdown-link\" to=\"/faq\">\r\n                      faq\r\n                    </Link>\r\n                  </li>\r\n                  <li>\r\n                    <Link className=\"dropdown-link\" to=\"/bio\">\r\n                      bio\r\n                    </Link>\r\n                  </li>\r\n                </ul>\r\n              </li> */}\r\n              <li>\r\n                <Link to=\"/beloved\" className=\"nav-link\">beloved</Link>\r\n              </li>\r\n              <li>\r\n                <Link to=\"/bio\" className=\"nav-link\">bio</Link>\r\n              </li>\r\n              <li>\r\n                <Link to=\"/contact\" className=\"nav-link\">contact</Link>\r\n              </li>\r\n              <li>\r\n                <a href=\"https://www.etsy.com/shop/lupineravenartworks/\" className=\"nav-link\" target=\"_blank\" rel=\"noopener noreferrer\">shop</a>\r\n              </li>\r\n              <li>\r\n                <Link to=\"/commission\" className=\"nav-link\">commissions</Link>\r\n              </li>\r\n              <li>\r\n                <Link to=\"/faq\" className=\"nav-link\">faq</Link>\r\n              </li>\r\n              {/* <li className=\"dropdown col-xs-3\">\r\n                <a\r\n                  href=\" \"\r\n                  onClick={e => e.preventDefault()}\r\n                  className=\"dropdown-toggle\"\r\n                  data-toggle=\"dropdown\"\r\n                  role=\"button\"\r\n                  aria-haspopup=\"true\"\r\n                  aria-expanded=\"false\"\r\n                >\r\n                  Shop\r\n                </a>\r\n                <ul className=\"dropdown-menu\">\r\n                  <li>\r\n                    <Link className=\"dropdown-link\" to=\"/commission\">\r\n                      Commission\r\n                    </Link>\r\n                  </li>\r\n                  <li>\r\n                    <a\r\n                      className=\"dropdown-link\"\r\n                      href=\"https://www.etsy.com/shop/artbykendel/\"\r\n                      target=\"_blank\"\r\n                      rel=\"noopener noreferrer\"\r\n                    >\r\n                      Shop\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a\r\n                      className=\"dropdown-link\"\r\n                      href=\"https://www.etsy.com/shop/ArtByKendel?ref=shop_sugg\"\r\n                      target=\"_blank\"\r\n                      rel=\"noopener noreferrer\"\r\n                    >\r\n                      Etsy\r\n                    </a>\r\n                  </li> \r\n                </ul>\r\n              </li> */}\r\n            </ul>\r\n          </div>\r\n        </div>\r\n      </NavBar>\r\n    </>\r\n  );\r\n}\r\n\r\nexport default Header;\r\n","import styled from \"styled-components\";\r\n\r\nexport const Portfolio = styled.div`\r\n  .gallery-link {\r\n    cursor: pointer;\r\n    transition: opacity 0.3s;\r\n    -webkit-transition: opacity 0.3s;\r\n    -moz-transition: opacity 0.3s;\r\n    background: inherit;\r\n  }\r\n\r\n  .gallery-link:hover {\r\n    opacity: 0.7;\r\n  }\r\n\r\n  .gallery-link-label {\r\n    text-align: center;\r\n    font-weight: 500;\r\n    color: #444444;\r\n    font-size: 1.5em;\r\n  }\r\n\r\n  /* centered columns styles */\r\n  .row-centered {\r\n    text-align: center;\r\n  }\r\n\r\n  .col-centered {\r\n    display: inline-block;\r\n    float: none;\r\n    /* reset the text-align */\r\n    text-align: left;\r\n    /* inline-block space fix */\r\n    margin-right: -4px;\r\n    text-align: center;\r\n  }\r\n\r\n  .image {\r\n    // border: 2px solid #000000;\r\n    // height: 0;\r\n    padding-bottom: 75%;\r\n    width: 97%;\r\n    margin: 1.66%;\r\n    background-size: cover;\r\n    border-radius: 15px;\r\n    background-position: center center;\r\n    aspect-ratio: 1/1;\r\n  }\r\n\r\n  .rect-img-container {\r\n    position: relative;\r\n  }\r\n  \r\n  .rect-img-container::after {\r\n    content: \"\";\r\n    display: block;\r\n    padding-bottom: 100%;\r\n  }\r\n  \r\n  .rect-img {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n  }\r\n`;\r\n","import React from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { Portfolio } from \"../ui/HomePageStyles\";\r\n\r\n//gallery headers\r\nimport acrylic_header from \"../img/gallery_headers/acrylic.png\";\r\nimport commissions_header from \"../img/gallery_headers/commissions.png\";\r\n// import gouache_header from \"../img/gallery_headers/gouache.jpg\";\r\nimport pen_ink_header from \"../img/gallery_headers/pen_ink.jpg\";\r\nimport public_art_header from \"../img/gallery_headers/public_art.png\";\r\nimport watercolor_header from \"../img/gallery_headers/watercolor.png\";\r\n//import sketchbook_header from \"../img/gallery_headers/sketchbook.jpg\";\r\nimport digital_header from \"../img/gallery_headers/digital.png\";\r\n\r\nfunction HomePage() {\r\n  return (\r\n    <Portfolio className=\"container\">\r\n      <div className=\"row row-centered\">\r\n        <div className=\"col-md-4 col-sm-6 col-xs-12 col-centered\">\r\n          <div className=\"thumbnail gallery-link\">\r\n            <Link to=\"gallery/acrylic\">\r\n              <div\r\n                className=\"image\"\r\n                style={{ backgroundImage: \"url(\" + acrylic_header + \")\" }}\r\n              />\r\n            </Link>\r\n            <p className=\"gallery-link-label\">acrylic</p>\r\n          </div>\r\n        </div>\r\n        <div className=\"col-md-4 col-sm-6 col-xs-12 col-centered\">\r\n          <div className=\"thumbnail gallery-link\">\r\n            <Link to=\"gallery/watercolor\">\r\n              <div\r\n                className=\"image\"\r\n                style={{ backgroundImage: \"url(\" + watercolor_header + \")\" }}\r\n              />\r\n            </Link>\r\n            <p className=\"gallery-link-label\">watercolor</p>\r\n          </div>\r\n        </div>\r\n        <div className=\"col-md-4 col-sm-6 col-xs-12 col-centered\">\r\n          <div className=\"thumbnail gallery-link\">\r\n            <Link to=\"gallery/pen_ink\">\r\n              <div\r\n                className=\"image\"\r\n                style={{ backgroundImage: \"url(\" + pen_ink_header + \")\" }}\r\n              />\r\n            </Link>\r\n            <p className=\"gallery-link-label\">pen + ink</p>\r\n          </div>\r\n        </div>\r\n        <div className=\"col-md-4 col-sm-6 col-xs-12 col-centered\">\r\n          <div className=\"thumbnail gallery-link\">\r\n            <Link to=\"gallery/public_art\">\r\n              <div\r\n                className=\"image\"\r\n                style={{ backgroundImage: \"url(\" + public_art_header + \")\" }}\r\n              />\r\n            </Link>\r\n            <p className=\"gallery-link-label\">public art</p>\r\n          </div>\r\n        </div>\r\n        {/* <div className=\"col-md-4 col-sm-6 col-xs-12 col-centered\">\r\n          <div className=\"thumbnail gallery-link\">\r\n            <Link to=\"gallery/gouache\">\r\n              <div\r\n                className=\"image\"\r\n                style={{ backgroundImage: \"url(\" + gouache_header + \")\" }}\r\n              />\r\n            </Link>\r\n            <p className=\"gallery-link-label\">gouache</p>\r\n          </div>\r\n        </div> */}\r\n        <div className=\"col-md-4 col-sm-6 col-xs-12 col-centered\">\r\n          <div className=\"thumbnail gallery-link\">\r\n            <Link to=\"gallery/commissions\">\r\n              <div\r\n                className=\"image\"\r\n                style={{ backgroundImage: \"url(\" + commissions_header + \")\" }}\r\n              />\r\n            </Link>\r\n            <p className=\"gallery-link-label\">commissions</p>\r\n          </div>\r\n        </div>\r\n        <div className=\"col-md-4 col-sm-6 col-xs-12 col-centered\">\r\n          <div className=\"thumbnail gallery-link\">\r\n            <Link to=\"gallery/digital\">\r\n              <div\r\n                className=\"image\"\r\n                style={{ backgroundImage: \"url(\" + digital_header + \")\" }}\r\n              />\r\n            </Link>\r\n            <p className=\"gallery-link-label\">digital</p>\r\n          </div>\r\n        </div>\r\n        {/* <div className=\"col-md-4 col-sm-6 col-xs-12 col-centered\">\r\n          <div className=\"thumbnail gallery-link\">\r\n            <Link to=\"gallery/sketchbook\">\r\n              <div\r\n                className=\"image\"\r\n                style={{ backgroundImage: \"url(\" + sketchbook_header + \")\" }}\r\n              />\r\n            </Link>\r\n            <p className=\"gallery-link-label\">Sketchbook</p>\r\n          </div>\r\n        </div> */}\r\n      </div>\r\n    </Portfolio>\r\n  );\r\n}\r\n\r\nexport default HomePage;\r\n","import styled from \"styled-components\";\r\n\r\nexport const Gallery = styled.div`\r\n  margin: 0 10%;\r\n\r\n  &:after {\r\n    content: \"\";\r\n    display: block;\r\n    clear: both;\r\n  }\r\n\r\n  .grid-sizer,\r\n  .grid-item {\r\n    width: 33.333%;\r\n  }\r\n\r\n  @media (max-width: 992px) {\r\n    .grid-sizer,\r\n    .grid-item {\r\n      width: 100%;\r\n    }\r\n  }\r\n\r\n  @media (min-width: 993px) and (max-width: 1199px) {\r\n    .grid-sizer,\r\n    .grid-item {\r\n      width: 50%;\r\n    }\r\n  }\r\n  @media (min-width: 1200px) {\r\n    .grid-sizer,\r\n    .grid-item {\r\n      width: 33.333%;\r\n    }\r\n  }\r\n\r\n  .grid-item {\r\n    float: left;\r\n    padding: 5px;\r\n\r\n    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */\r\n    -moz-animation: fadein 1s; /* Firefox < 16 */\r\n    -ms-animation: fadein 1s; /* Internet Explorer */\r\n    -o-animation: fadein 1s; /* Opera < 12.1 */\r\n    animation: fadein 1s;\r\n  }\r\n\r\n  .grid-item img {\r\n    display: block;\r\n    max-width: 100%;\r\n  }\r\n\r\n  @keyframes fadein {\r\n    from {\r\n      opacity: 0;\r\n    }\r\n    to {\r\n      opacity: 1;\r\n    }\r\n  }\r\n\r\n  /* Firefox < 16 */\r\n  @-moz-keyframes fadein {\r\n    from {\r\n      opacity: 0;\r\n    }\r\n    to {\r\n      opacity: 1;\r\n    }\r\n  }\r\n\r\n  /* Safari, Chrome and Opera > 12.1 */\r\n  @-webkit-keyframes fadein {\r\n    from {\r\n      opacity: 0;\r\n    }\r\n    to {\r\n      opacity: 1;\r\n    }\r\n  }\r\n\r\n  /* Internet Explorer */\r\n  @-ms-keyframes fadein {\r\n    from {\r\n      opacity: 0;\r\n    }\r\n    to {\r\n      opacity: 1;\r\n    }\r\n  }\r\n\r\n  /* Opera < 12.1 */\r\n  @-o-keyframes fadein {\r\n    from {\r\n      opacity: 0;\r\n    }\r\n    to {\r\n      opacity: 1;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const LoadingWheel = styled.div`\r\n  margin: 60px auto;\r\n  width: 30px;\r\n`;\r\n","import styled from \"styled-components\";\r\n\r\nexport const Unknown = styled.h1`\r\n  text-align: center;\r\n`;\r\n\r\nexport const UnknownImage = styled.div`\r\n  text-align: center;\r\n`;\r\n","import React from \"react\";\r\nimport { Unknown, UnknownImage } from \"../ui/UnknownStyles\";\r\n\r\nfunction UnknownPage() {\r\n  return (\r\n    <div key=\"404\">\r\n      <Unknown>\r\n        Oops! We can't find that page, but here is some bonus Art!\r\n      </Unknown>\r\n      <UnknownImage>\r\n        <img\r\n          src=\"https://kendel-leslie-art.s3-us-west-1.amazonaws.com/bonus_art/bonus.jpg\"\r\n          alt=\"damn, couldn't load that either\"\r\n        />\r\n      </UnknownImage>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default UnknownPage;\r\n","import React from \"react\";\r\nimport { Gallery, LoadingWheel } from \"../ui/GalleryPageStyles\";\r\nimport Masonry from \"masonry-layout\";\r\nimport Unknown from \"./UnknownPage\";\r\nimport { SphereSpinner } from \"react-spinners-kit\";\r\n\r\nclass GalleryPage extends React.Component {\r\n  state = {\r\n    unloadedImages: [],\r\n    loadedImages: []\r\n  };\r\n  bottomImages = [];\r\n\r\n  componentDidMount() {\r\n    this.bottomImages = [];\r\n    window.addEventListener(\"scroll\", this.loadMoreImages, { passive: true });\r\n\r\n    let media = this.props.match?.params.media;\r\n    if(this.props.media) {\r\n      media = this.props.media;\r\n    }\r\n\r\n    this.fillGallery(media).then(images => {\r\n      this.setState({\r\n        loadedImages: images.loadedImages,\r\n        unloadedImages: images.unloadedImages\r\n      });\r\n    });\r\n  }\r\n\r\n  componentWillUnmount() {\r\n    window.removeEventListener(\"scroll\", this.loadMoreImages);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <Gallery className=\"grid\">\r\n          <div className=\"grid-sizer\" />\r\n          <div>{this.state.loadedImages}</div>\r\n        </Gallery>\r\n        <LoadingWheel>\r\n          <SphereSpinner\r\n            size={30}\r\n            color=\"#000000\"\r\n            loading={\r\n              this.state.unloadedImages.length !== 0 ||\r\n              this.state.loadedImages.length === 0\r\n            }\r\n          />\r\n        </LoadingWheel>\r\n      </>\r\n    );\r\n  }\r\n\r\n  //fill the gallery\r\n  fillGallery(media) {\r\n    var promise = new Promise((resolve, reject) => {\r\n      var request = new XMLHttpRequest();\r\n      var scope = this;\r\n      request.onreadystatechange = function() {\r\n        if (this.readyState === 4 && this.status === 200) {\r\n          var _images = JSON.parse(this.responseText);\r\n          var unloadedImages = [];\r\n          var loadedImages = [];\r\n          this.bottomImages = [];\r\n\r\n          var unknownPage = true;\r\n\r\n          _images.forEach(function(image) {\r\n            //make sure its an image file and not a folder, and its the proper media type\r\n            if (image === media + \"/\") unknownPage = false;\r\n            if (\r\n              image !== undefined &&\r\n              (image.endsWith(\".jpg\") || image.endsWith(\".png\")) &&\r\n              image.startsWith(media + \"/\")\r\n            ) {\r\n              unloadedImages.push(\r\n                \"https://kendel-leslie-art.s3-us-west-1.amazonaws.com/\" + image\r\n              );\r\n            }\r\n          });\r\n\r\n          for (var i = 0; i < 3; i++) {\r\n            var imgToLoad = unloadedImages.shift();\r\n            if (imgToLoad === undefined) break;\r\n            loadedImages.push(scope.createImageHTML(imgToLoad));\r\n          }\r\n\r\n          if (unknownPage) loadedImages.push(Unknown());\r\n\r\n          resolve({ loadedImages, unloadedImages });\r\n        }\r\n      };\r\n\r\n      request.onerror = (event) => {\r\n        setTimeout(this.getImages(request), 500);\r\n      }\r\n\r\n      this.getImages(request);\r\n    });\r\n    return promise;\r\n  }\r\n\r\n  getImages(request) {\r\n    request.open(\r\n      \"GET\",\r\n      \"https://m7m49cashl.execute-api.us-west-1.amazonaws.com/default/GetArtImage\",\r\n      true\r\n    );\r\n    request.send();\r\n  }\r\n\r\n  loadMoreImages = event => {\r\n    var loadMore = false;\r\n    this.bottomImages.forEach(\r\n      img =>\r\n        (loadMore =\r\n          loadMore || img.getBoundingClientRect().bottom < window.innerHeight)\r\n    );\r\n\r\n    if (loadMore) {\r\n      //make copies to use before updating them in state\r\n      var unloadedImages = this.state.unloadedImages.slice(0);\r\n      var loadedImages = this.state.loadedImages.slice(0);\r\n\r\n      if (unloadedImages.length > 0) {\r\n        var image = unloadedImages.shift();\r\n        if (image !== undefined) {\r\n          loadedImages.push(this.createImageHTML(image));\r\n        }\r\n        this.setState({\r\n          loadedImages: loadedImages,\r\n          unloadedImages: unloadedImages\r\n        });\r\n      }\r\n    }\r\n  };\r\n\r\n  createImageHTML(image) {\r\n    if (image === undefined) return;\r\n\r\n    var htmlImage = (\r\n      <div\r\n        key={image}\r\n        className=\"grid-item\"\r\n        ref={divElement => this.bottomImages.unshift(divElement)}\r\n      >\r\n        <img\r\n          src={image}\r\n          alt=\"\"\r\n          onLoad={() => {\r\n            this.masonryPage();\r\n            this.loadMoreImages();\r\n          }}\r\n        />\r\n      </div>\r\n    );\r\n\r\n    this.bottomImages = this.bottomImages.slice(0, 2);\r\n    return htmlImage;\r\n  }\r\n\r\n  masonryPage() {\r\n    //don't do masonry if the images are just stacked normally\r\n    // eslint-disable-next-line no-restricted-globals\r\n    if (screen.width <= 991) return;\r\n\r\n    // re-layout the grid\r\n    new Masonry(\".grid\", {\r\n      itemSelector: \".grid-item\",\r\n      percentPosition: true,\r\n      columnWidth: \".grid-sizer\",\r\n      transitionDuration: 0\r\n    }).layout();\r\n  }\r\n}\r\n\r\nexport default GalleryPage;\r\n","import styled from \"styled-components\";\r\n\r\nexport const Beloved = styled.div`\r\n  text-align: center;\r\n  margin-top: 20px;\r\n  margin-bottom: 40px;\r\n\r\n  .description {\r\n    font-size: 20px;\r\n    margin-left: 8%;\r\n    margin-bottom: -10px;\r\n  }\r\n\r\n`;","import React from 'react'\r\nimport GalleryPage from './GalleryPage'\r\nimport beloved_header from \"../img/beloved/beloved_header.png\";\r\nimport { Beloved } from '../ui/BelovedStyles';\r\n\r\nconst BelovedPage = () => (\r\n  <>\r\n    <Beloved className=\"container\">\r\n      <div className=\"row\">\r\n\r\n        <div className=\"col-xs-1\"/>\r\n        <div className=\"col-xs-10\">\r\n          <div className=\"thumbnail\">\r\n            <img src={beloved_header} alt=\"Beloved\" />\r\n          </div>\r\n        </div>\r\n        <div className=\"col-xs-1\"/>\r\n\r\n        <div className=\"col-xs-1\"/>\r\n        <div className=\"col-xs-10 description\">\r\n          For me, it's always been animals. From taking care of my own, birdwatching, animal keeping, the list goes on - \r\n          it's no surprise they are my muse. I've always been drawn to the ones that tend to have a bad rep, ever since I was little. \r\n          When I was around 10 years old I got my first pet rat, realized how wonderful they are, and that was the beginning.\r\n          <br/>\r\n          <br/>\r\n          I've wanted to create a group of paintings that can change people's minds about animals they might be hesitant to like, \r\n          might be afraid of. They are all so beautiful and important in their own ways.\r\n          <br/>\r\n          <br/>\r\n          This is for the ones that are misunderstood. I hope you can notice their beauty, too. <span role=\"img\" aria-label=\"heart\">❤️</span>\r\n          <br/>\r\n          <br/>\r\n          For more information or to purchase, email lupineravenartworks@gmail.com\r\n          <br/>\r\n          <br/>\r\n          @ The Hub (Riverside location) in Reno, Nevada\r\n          <br/>\r\n          This collection was on display from November 1st - 30th 2023\r\n        </div>\r\n        <div className=\"col-xs-1\"/>\r\n\r\n      </div>\r\n    </Beloved>\r\n\r\n    <div className=\"row\">\r\n      <div className=\"col-sm-1 col-xs-0\"/>\r\n      <div className=\"col-sm-10 col-xs-12\">\r\n        <div className=\"thumbnail\">\r\n          <GalleryPage media='beloved' />\r\n        </div>\r\n      </div>\r\n      <div className=\"col-sm-1 col-xs-0\"/>\r\n    </div>\r\n    \r\n  </>\r\n  )\r\n\r\nexport default BelovedPage;","import styled from \"styled-components\";\r\n\r\nexport const About = styled.div`\r\n  h1 {\r\n    font-size: 2em;\r\n    text-align: center;\r\n    background-color: #83C5BE;\r\n    margin-top: 10px;\r\n    margin-bottom: 20px;\r\n  }\r\n  \r\n  .image {\r\n    height: 0;\r\n    padding-bottom: 75%;\r\n    width: 97%;\r\n    margin: 1.66%;\r\n    background-size: cover;\r\n    border-radius: 15px;\r\n    background-position: center center;\r\n  }\r\n\r\n  .bio-text {\r\n    font-weight: 500;\r\n  }\r\n\r\n  .image-bio {\r\n    height: 100%;\r\n    width: 100%;\r\n    // margin-top: 50px;\r\n    margin: 1.66%;\r\n    background-size: cover;\r\n    background-position: center center;\r\n    border-radius: 15px;\r\n  }\r\n\r\n  .image-commission {\r\n    height: 100%;\r\n    width: 100%;\r\n    // margin-top: 50px;\r\n    margin: 1.66%;\r\n    background-size: cover;\r\n    background-position: center center;\r\n    border-radius: 15px;\r\n  }\r\n\r\n  .image-shows {\r\n    width: 80%;\r\n    margin: 5px auto;\r\n    text-align: center;\r\n    display: block;\r\n  }\r\n\r\n  padding-top: 30px;\r\n`;\r\n","import React from \"react\";\r\nimport { About } from \"../ui/CommonStyles\";\r\nimport bioImage1 from \"../img/about/BioImage1.jpg\";\r\nimport bioImage2 from \"../img/about/BioImage2.jpg\";\r\n\r\nfunction BioPage() {\r\n  return (\r\n    <About className=\"container\">\r\n      <div className=\"row\">\r\n        <div className=\"col-md-4 col-sm-5 col-xs-12\">\r\n          {/* TODO: add scroll through image viewer */}\r\n          <div className=\"thumbnail\">\r\n            {/* <div\r\n                className=\"image pic1\"\r\n                style={{ backgroundImage: \"url(\" + bioImage1 + \")\" }}\r\n              /> */}\r\n            <img src={bioImage1} alt=\"kendel at show\" className=\"image-bio\" />\r\n          </div>\r\n        </div>\r\n        <div className=\"col-md-4 col-sm-7 col-xs-12\">\r\n          <h1>about me</h1>\r\n          <p className=\"bio-text\">\r\n            Hey there! My name is Kendel and I am the artist behind Lupine Raven\r\n            Artworks (previously Art by Kendel).\r\n          </p>\r\n          <p className=\"bio-text\">\r\n            I started making art in high school around 2011 and pretty much just\r\n            never stopped. I'm self taught and absolutely love painting animals,\r\n            plants, landscapes, and really anything nature-y. My favorite\r\n            mediums are watercolor, digital (Procreate on my iPad), and acrylic,\r\n            but I work in many other mediums as well and am always learning and\r\n            experimenting with new ideas.\r\n          </p>\r\n          <p className=\"bio-text\">\r\n            I have a huge heart for animals big and small, especially for the\r\n            ones that are misunderstood. I have a house full of critters of my\r\n            own at home who I love to pieces. I am a volunteer animal keeper\r\n            with a local wildlife sanctuary and a wolf-dog rescue. I'm a bird\r\n            nerd, bird watcher, I love traveling, hiking, exploring, and just\r\n            being in nature. Adventures with my husband and our dogs are my\r\n            absolute favorite thing\r\n            <span role=\"img\" aria-label=\"heart\">\r\n              ❤️\r\n            </span>\r\n          </p>\r\n          <p className=\"bio-text\">\r\n            Thank you for being here and supporting my work! I love connecting\r\n            with you guys and geeking out over animals and how wonderful they\r\n            are! It makes me so happy to know my art has resonated with you.\r\n          </p>\r\n          {/* <p className=\"bio-text\">\r\n            Hey there! My name is Kendel and I'm a mixed media artist living in Reno, Nevada. \r\n            I create artwork inspired by things I find beautiful and interesting in nature. \r\n            I am passionate about shining light on creatures that are misunderstood like rats, mice, snakes, ravens, crows, pigeons, etc. \r\n            I have pet rats of my own that show up in my work often! My favorite mediums to work with are watercolor, ink, acrylic and digital. \r\n          </p>\r\n          <p className=\"bio-text\">\r\n            In my free time you'll find me gardening, traveling, playing video games, taking care of my plants and animals, \r\n            and exploring the Reno/Tahoe area with my partner and our dog, Kai.\r\n          </p> */}\r\n        </div>\r\n        <div className=\"col-md-4 col-sm-5 col-xs-12\">\r\n          <div className=\"thumbnail\">\r\n            {/* <div\r\n              className=\"image pic1\"\r\n              style={{ backgroundImage: \"url(\" + bioImage2 + \")\" }}\r\n            /> */}\r\n            <img\r\n              src={bioImage2}\r\n              alt=\"kendel and jupiter\"\r\n              className=\"image-bio\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </About>\r\n  );\r\n}\r\n\r\nexport default BioPage;\r\n","import styled from \"styled-components\";\r\n\r\nexport const FaqText = styled.div`\r\n  .faq-header {\r\n    font-size: 1.5em;\r\n    font-weight: 600;\r\n    margin-top: 15px;\r\n  }\r\n  \r\n  .email {\r\n      text-decoration: underline;\r\n  }\r\n\r\n  p {\r\n    margin-bottom: 3px;\r\n  }\r\n`;\r\n","import React from \"react\";\r\nimport { About } from \"../ui/CommonStyles\";\r\nimport { FaqText } from \"../ui/FaqPageStyles\";\r\n//import { ImageUpcoming, ImagePast } from \"../ui/ShowsPageStyles\";\r\n// import showsImage1 from \"../img/about/ShowsImage1.jpg\";\r\n// import showsImage2 from \"../img/about/ShowsImage2.jpg\";\r\nimport showsImage3 from \"../img/about/ShowsImage3.jpg\";\r\n\r\nfunction FaqPage() {\r\n  return (\r\n    <About className=\"container\">\r\n      <div className=\"row\">\r\n        <div className=\"col-md-6 col-sm-6 col-xs-12\">\r\n          <h1>faq</h1>\r\n          <FaqText id=\"faq-text\">\r\n            <p>\r\n              If you don't see your question here, feel free to ask me in an\r\n              email!\r\n            </p>\r\n            <p className=\"email\">lupineravenartworks@gmail.com</p>\r\n            <p className=\"faq-header\">Do you take commissions?</p>\r\n            <p>Check my Instagram for updates on commissions. If you have any further questions feel free to reach out to the email above!</p>\r\n            <p className=\"faq-header\">Did you go to school for art?</p>\r\n            <p>\r\n              I did not! I have taken a few college level art classes, however I\r\n              didn't go to school for art. Other than those, I am self taught!\r\n            </p>\r\n            <p className=\"faq-header\">Can I get your work tattooed?</p>\r\n            <p>\r\n              As long as it is my original artwork and not a commission I did\r\n              for someone else, I'm fine with that! Tag me or send me a picture,\r\n              I'd love to see the final tattoo.\r\n            </p>\r\n            <p className=\"faq-header\">\r\n              What if I want a print of a piece or an original that's not in\r\n              your shop?\r\n            </p>\r\n            <p>\r\n              I don't list all of my pieces on my shop, so if you see something\r\n              I post on social media or in person and you're interested in\r\n              purchasing it, feel free to contact me and I'd be happy to get you\r\n              pricing and more info! Same goes for prints. I make all of my\r\n              prints at home so I can print one off pieces if you are\r\n              interested.\r\n            </p>\r\n            <p className=\"faq-header\">Where are you located?</p>\r\n            <p>\r\n              I live in Reno, Nevada! I participate in a lot of events and shows\r\n              in the Reno/Tahoe area. I keep my Instagram up\r\n              to date with events I'll be attending!\r\n            </p>\r\n          </FaqText>\r\n        </div>\r\n        <div className=\"col-md-6 col-sm-6 col-xs-12\">\r\n          {/* {/* <img src={showsImage1} alt=\"\" className=\"image-shows\" /> */}\r\n          {/* <img src={showsImage2} alt=\"\" className=\"image-shows\" />  */}\r\n          <img src={showsImage3} alt=\"\" className=\"image-shows\" />\r\n        </div>\r\n      </div>\r\n    </About>\r\n  );\r\n}\r\n\r\nexport default FaqPage;\r\n","import styled from \"styled-components\";\r\n\r\nexport const Socials = styled.div`\r\n  text-align: center;\r\n  margin-top: 20px;\r\n  margin-bottom: 40px;\r\n`;\r\n","import React from \"react\";\r\nimport { Socials } from \"../../ui/FooterStyles\";\r\nimport { NavBar } from \"../../ui/HeaderStyles\";\r\n\r\nfunction Footer() {\r\n  return (\r\n    <>\r\n      <link\r\n        rel=\"stylesheet\"\r\n        href=\"https://use.fontawesome.com/releases/v5.7.0/css/all.css\"\r\n        integrity=\"sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ\"\r\n        crossOrigin=\"anonymous\"\r\n      />\r\n      <NavBar className=\"navbar-default\">\r\n        <div className=\"container\">\r\n          <Socials>\r\n            <ul className=\"nav navbar-nav\">\r\n              <li>\r\n                <a\r\n                  href=\"https://www.instagram.com/lupineravenartworks/\"\r\n                  target=\"_blank\"\r\n                  rel=\"noopener noreferrer\"\r\n                >\r\n                  <i className=\"fab fa-instagram fa-2x\" />\r\n                </a>\r\n              </li>\r\n              {/* <li>\r\n                <a\r\n                  href=\"https://www.facebook.com/KendelsArt/\"\r\n                  target=\"_blank\"\r\n                  rel=\"noopener noreferrer\"\r\n                >\r\n                  <i className=\"fab fa-facebook-f fa-2x\" />\r\n                </a>\r\n              </li> */}\r\n            </ul>\r\n          </Socials>\r\n        </div>\r\n      </NavBar>\r\n    </>\r\n  );\r\n}\r\n\r\nexport default Footer;\r\n","import React from \"react\";\r\nimport { About } from \"../ui/CommonStyles\";\r\n// import { Form } from \"../ui/ContactStyles\";\r\n\r\nfunction ContactPage() {\r\n  // const [errors, setErrors] = useState({});\r\n\r\n  // const [message, setMessage] = useState({\r\n  //   firstName: \"\",\r\n  //   lastName: \"\",\r\n  //   email: \"\",\r\n  //   subject: \"\",\r\n  //   message: \"\"\r\n  // });\r\n\r\n  // let thankYou;\r\n\r\n  // function handleChange({ target }) {\r\n  //   const updatedMessage = {\r\n  //     ...message,\r\n  //     [target.name]: target.value\r\n  //   };\r\n  //   setMessage(updatedMessage);\r\n  // }\r\n\r\n  // function validate() {\r\n  //   const _errors = {};\r\n\r\n  //   if (!message.firstName) _errors.firstName = \"First Name required\";\r\n  //   if (!message.lastName) _errors.lastName = \"Last Name required\";\r\n  //   if (!message.email) _errors.email = \"Email required\";\r\n  //   if (!message.subject) _errors.subject = \"Subject required\";\r\n  //   if (!message.message) _errors.message = \"Message required\";\r\n\r\n  //   setErrors(_errors);\r\n\r\n  //   return Object.keys(_errors).length === 0;\r\n  // }\r\n\r\n  // function handleSubmit() {\r\n  //   if (!validate()) return;\r\n\r\n  //   let data_js = {\r\n  //     access_token: \"hj754xrf07574dsdy25inblq\",\r\n  //     subject: message.subject,\r\n  //     text:\r\n  //       message.firstName +\r\n  //       \" \" +\r\n  //       message.lastName +\r\n  //       \"\\n\" +\r\n  //       message.email +\r\n  //       \"\\n\\n\" +\r\n  //       message.message\r\n  //   };\r\n\r\n  //   let request = new XMLHttpRequest();\r\n\r\n  //   function toParams(data_js) {\r\n  //     let form_data = [];\r\n  //     for (let key in data_js) {\r\n  //       form_data.push(\r\n  //         encodeURIComponent(key) + \"=\" + encodeURIComponent(data_js[key])\r\n  //       );\r\n  //     }\r\n\r\n  //     return form_data.join(\"&\");\r\n  //   }\r\n\r\n  //   let params = toParams(data_js);\r\n\r\n  //   request.open(\"POST\", \"https://postmail.invotes.com/send\", true);\r\n  //   request.setRequestHeader(\r\n  //     \"Content-type\",\r\n  //     \"application/x-www-form-urlencoded\"\r\n  //   );\r\n\r\n  //   request.send(params);\r\n\r\n  //   setMessage({\r\n  //     firstName: \"\",\r\n  //     lastName: \"\",\r\n  //     email: \"\",\r\n  //     subject: \"\",\r\n  //     message: \"\"\r\n  //   });\r\n\r\n  //   thankYou.className = \"submission-text alert-success\";\r\n  // }\r\n\r\n  return (\r\n    <About className=\"container\">\r\n      <div className=\"row\">\r\n        <div className=\"col-md-4 col-sm-3 col-xs-0\"/>\r\n        <div className=\"col-md-4 col-sm-6 col-xs-12 text-center\">\r\n          <h1>contact</h1>\r\n          <p>You can reach me at the email below or on Instagram</p>\r\n          <p>LupineRavenArtworks@gmail.com</p>\r\n          <p><a href=\"https://www.instagram.com/lupineravenartworks/\" target=\"_blank\" rel=\"noopener noreferrer\">@lupineravenartworks</a></p>\r\n        </div>\r\n      </div>\r\n    </About>\r\n    // <Form className=\"container\">\r\n    //   <h1>Contact</h1>\r\n\r\n    //   <fieldset>\r\n    //     <div className=\"row\">\r\n    //       <div className=\"col-xs-2\"></div>\r\n    //       <div className=\"col-xs-8\">\r\n    //         <div className=\"row\">\r\n    //           <div className=\"title\">\r\n    //             Name <span className=\"required\">*</span>\r\n    //           </div>\r\n    //           <input\r\n    //             className=\"field col-xs-6 first-name\"\r\n    //             type=\"text\"\r\n    //             spellCheck=\"false\"\r\n    //             placeholder=\"First Name\"\r\n    //             name=\"firstName\"\r\n    //             onChange={handleChange}\r\n    //             value={message.firstName}\r\n    //           />\r\n\r\n    //           <input\r\n    //             className=\"field col-xs-6 last-name\"\r\n    //             type=\"text\"\r\n    //             spellCheck=\"false\"\r\n    //             placeholder=\"Last Name\"\r\n    //             name=\"lastName\"\r\n    //             onChange={handleChange}\r\n    //             value={message.lastName}\r\n    //           />\r\n    //         </div>\r\n    //         <div className=\"row\">\r\n    //           {errors.firstName && (\r\n    //             <div className=\"first-name alert alert-danger col-xs-6\">\r\n    //               {errors.firstName}\r\n    //             </div>\r\n    //           )}\r\n    //           {errors.lastName && (\r\n    //             <div className=\"last-name alert alert-danger col-xs-6\">\r\n    //               {errors.lastName}\r\n    //             </div>\r\n    //           )}\r\n    //         </div>\r\n    //       </div>\r\n    //       <div className=\"col-xs-2\"></div>\r\n    //     </div>\r\n    //   </fieldset>\r\n\r\n    //   <div className=\"row\">\r\n    //     <div className=\"col-xs-2\"></div>\r\n    //     <div className=\"col-xs-8\">\r\n    //       <div className=\"row\">\r\n    //         <div className=\"title\">\r\n    //           Email Address <span className=\"required\">*</span>\r\n    //         </div>\r\n    //         <input\r\n    //           type=\"email\"\r\n    //           className=\"field\"\r\n    //           placeholder=\"Email\"\r\n    //           name=\"email\"\r\n    //           onChange={handleChange}\r\n    //           value={message.email}\r\n    //         ></input>\r\n    //         {errors.email && (\r\n    //           <div className=\"alert alert-danger\">{errors.email}</div>\r\n    //         )}\r\n    //       </div>\r\n    //     </div>\r\n    //     <div className=\"col-xs-2\"></div>\r\n    //   </div>\r\n\r\n    //   <div className=\"row\">\r\n    //     <div className=\"col-xs-2\"></div>\r\n    //     <div className=\"col-xs-8\">\r\n    //       <div className=\"row\">\r\n    //         <div className=\"title\">\r\n    //           Subject <span className=\"required\">*</span>\r\n    //         </div>\r\n    //         <input\r\n    //           type=\"text\"\r\n    //           className=\"field\"\r\n    //           placeholder=\"Subject\"\r\n    //           name=\"subject\"\r\n    //           onChange={handleChange}\r\n    //           value={message.subject}\r\n    //         ></input>\r\n    //         {errors.subject && (\r\n    //           <div className=\"alert alert-danger\">{errors.subject}</div>\r\n    //         )}\r\n    //       </div>\r\n    //     </div>\r\n    //     <div className=\"col-xs-2\"></div>\r\n    //   </div>\r\n\r\n    //   <div className=\"row\">\r\n    //     <div className=\"col-xs-2\"></div>\r\n    //     <div className=\"col-xs-8\">\r\n    //       <div className=\"row\">\r\n    //         <div className=\"title\">\r\n    //           Message <span className=\"required\">*</span>\r\n    //         </div>\r\n    //         <textarea\r\n    //           type=\"text\"\r\n    //           className=\"field\"\r\n    //           placeholder=\"Message\"\r\n    //           name=\"message\"\r\n    //           onChange={handleChange}\r\n    //           value={message.message}\r\n    //         ></textarea>\r\n    //         {errors.message && (\r\n    //           <div className=\"alert alert-danger\">{errors.message}</div>\r\n    //         )}\r\n    //       </div>\r\n    //     </div>\r\n    //     <div className=\"col-xs-2\"></div>\r\n    //   </div>\r\n\r\n    //   <div className=\"row\">\r\n    //     <div className=\"col-xs-2\"></div>\r\n    //     <div className=\"col-xs-8\">\r\n    //       <div className=\"row\">\r\n    //         <button\r\n    //           type=\"submit\"\r\n    //           className=\"btn submit-btn\"\r\n    //           onClick={handleSubmit}\r\n    //         >\r\n    //           Submit\r\n    //         </button>\r\n    //       </div>\r\n    //     </div>\r\n    //     <div className=\"col-xs-2\"></div>\r\n    //   </div>\r\n    //   <div className=\"row\">\r\n    //     <div className=\"col-xs-2\"></div>\r\n    //     <div className=\"col-xs-8\">\r\n    //       <div className=\"row\">\r\n    //         <div\r\n    //           className=\"submission-text alert-success hidden\"\r\n    //           ref={thanks => (thankYou = thanks)}\r\n    //         >\r\n    //           Thank You!\r\n    //         </div>\r\n    //       </div>\r\n    //     </div>\r\n    //     <div className=\"col-xs-2\"></div>\r\n    //   </div>\r\n    // </Form>\r\n  );\r\n}\r\n\r\nexport default ContactPage;\r\n","import React from \"react\";\r\nimport { About } from \"../ui/CommonStyles\";\r\nimport detailsImg from \"../img/commission/details.png\";\r\nimport faqImg from \"../img/commission/faq.png\";\r\nimport pricingImg from \"../img/commission/pricing.png\";\r\nimport statusImg from \"../img/commission/status.png\";\r\nimport ModalImage from \"react-modal-image\";\r\n\r\nfunction CommissionPage() {\r\n  return (\r\n    <About className=\"container\">\r\n      <div className=\"row\">\r\n        <div className=\"col-md-4 col-sm-5 col-xs-12\">\r\n          <div className=\"thumbnail\">\r\n          <ModalImage\r\n              className=\"image-commission\"\r\n              small={detailsImg}\r\n              large={detailsImg}\r\n              hideDownload={true}\r\n              hideZoom={true}\r\n              alt=\"details\"\r\n            />\r\n          </div>\r\n          <div className=\"thumbnail\">\r\n          <ModalImage\r\n              className=\"image-commission\"\r\n              small={faqImg}\r\n              large={faqImg}\r\n              hideDownload={true}\r\n              hideZoom={true}\r\n              alt=\"faq\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div className=\"col-md-4 col-sm-5 col-xs-12\">\r\n          <div className=\"thumbnail\">\r\n          <ModalImage\r\n              className=\"image-commission\"\r\n              small={pricingImg}\r\n              large={pricingImg}\r\n              hideDownload={true}\r\n              hideZoom={true}\r\n              alt=\"pricing\"\r\n            />\r\n          </div>\r\n          <div className=\"thumbnail\">\r\n            <ModalImage\r\n              className=\"image-commission\"\r\n              small={statusImg}\r\n              large={statusImg}\r\n              hideDownload={true}\r\n              hideZoom={true}\r\n              alt=\"commissions\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div className=\"col-md-4 col-sm-7 col-xs-12\">\r\n          <h1>commissions</h1>\r\n          <p className=\"bio-text\">\r\n            For commission requests please fill out this form: \r\n          </p>\r\n          <p className=\"bio-text\">\r\n          <a\r\n            href=\"https://forms.gle/bXzftnRXXjyh2YVB6\"\r\n            target=\"_blank\"\r\n            rel=\"noopener noreferrer\"\r\n          >\r\n            Commission Form\r\n          </a>  \r\n          </p>\r\n          <p className=\"bio-text\">\r\n            For questions or business inquiries please email me at:\r\n          </p>\r\n          <p className=\"bio-text\">\r\n            lupineravenartworks@gmail.com\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </About>\r\n  );\r\n}\r\n\r\nexport default CommissionPage;\r\n","import React from \"react\";\r\nimport Header from \"./common/Header\";\r\nimport { Route, Switch } from \"react-router-dom\";\r\nimport HomePage from \"./HomePage\";\r\nimport GalleryPage from \"./GalleryPage\";\r\nimport BelovedPage from \"./BelovedPage\";\r\nimport BioPage from \"./BioPage\";\r\nimport FaqPage from \"./FaqPage\";\r\nimport Footer from \"./common/Footer\";\r\nimport UnknownPage from \"./UnknownPage\";\r\nimport ContactPage from \"./ContactPage\";\r\nimport CommissionPage from \"./CommissionPage\";\r\nimport { createGlobalStyle } from \"styled-components\";\r\n\r\nconst GlobalStyle = createGlobalStyle`\r\n@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;400&display=swap');\r\n\r\nbody {\r\n  font-family: \"Raleway\";\r\n  background: #F2EDE4;\r\n}\r\n\r\nhtml { \r\n  overflow-y: scroll; \r\n}\r\n\r\n.thumbnail{\r\n\tborder: 0;\r\n  background: inherit;\r\n}\r\n`;\r\n\r\nfunction App() {\r\n  return (\r\n    <>\r\n      <GlobalStyle />\r\n      <Header />\r\n      <Switch>\r\n        <Route path=\"/\" exact component={HomePage} />\r\n        <Route path=\"/gallery/:media\" exact component={GalleryPage} />\r\n        <Route path=\"/beloved\" component={BelovedPage} />\r\n        <Route path=\"/bio\" component={BioPage} />\r\n        <Route path=\"/faq\" component={FaqPage} />\r\n        <Route path=\"/contact\" component={ContactPage} />\r\n        <Route path=\"/commission\" component={CommissionPage} />\r\n        <Route path=\"/\" component={UnknownPage} />\r\n      </Switch>\r\n      <Footer />\r\n    </>\r\n  );\r\n}\r\n\r\nexport default App;\r\n","import \"bootstrap/dist/css/bootstrap.min.css\";\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport App from \"./components/App\";\nimport { BrowserRouter } from \"react-router-dom\";\n\nrender(\n  <BrowserRouter>\n    <App />\n  </BrowserRouter>,\n  document.getElementById(\"root\")\n);\n"],"sourceRoot":""}