{"version":3,"sources":["webpack:///./src/pages/about.js"],"names":["AboutPage","className","href","id"],"mappings":"6FAAA,kEA8LeA,UAxLG,WAChB,OACE,kBAAC,IAAD,KACE,yBAAKC,UAAU,oBACb,yBAAKA,UAAU,yCACb,yBAAKA,UAAU,sBAAf,cACA,yBAAKA,UAAU,OACb,yBAAKA,UAAU,eAAf,qBACA,4BACE,4BACE,uBAAGC,KAAK,iBAAR,iBAEF,4BACE,uBAAGA,KAAK,eAAR,gCAEF,4BACE,uBAAGA,KAAK,YAAR,WACA,4BACE,4BACE,uBAAGA,KAAK,aAAR,aAEF,4BACE,uBAAGA,KAAK,WAAR,WAEF,4BACE,uBAAGA,KAAK,gBAAR,oBAMV,yBAAKD,UAAU,iBAAf,6JAIE,yBAAKA,UAAU,aAAaE,GAAG,gBAA/B,iBAJF,oIASE,wBAAIF,UAAU,OACZ,6CACA,yCACA,yCACA,qDACA,4DACA,4CAEF,yBAAKA,UAAU,aAAaE,GAAG,cAA/B,+BAGA,yBAAKF,UAAU,WAAf,2HAGE,wBAAIA,UAAU,OACZ,2EACA,mGAIA,oFACA,gHAE2B,KAE3B,oJAMJ,yBAAKA,UAAU,aAAaE,GAAG,WAA/B,WAGA,yBAAKF,UAAU,iBACb,yBAAKA,UAAU,cAAf,YADF,qLAKE,yBAAKA,UAAU,cAAf,aALF,0BAM0B,IACxB,uBAAGC,KAAK,oCAAR,gBAPF,8FAUE,yBAAKD,UAAU,cAAf,iBAVF,gCAWgC,IAC9B,uBAAGC,KAAK,iDAAR,mBAGA,yBAAKD,UAAU,cAAf,cACA,uBAAGC,KAAK,4BAA4BD,UAAU,MAA9C,gBAGA,uBACEC,KAAK,wDACLD,UAAU,MAFZ,qCAMA,yBAAKA,UAAU,aAAaE,GAAG,UAA/B,UAGA,yBAAKF,UAAU,cAAf,eA5BF,kBA6BkB,IAChB,uBAAGC,KAAK,wBAAwBD,UAAU,IAA1C,YAEK,IAhCP,sBAkCE,0BAAMA,UAAU,MAAhB,WACW,IACT,uBAAGC,KAAK,wGAAR,iBAEK,IAJP,KAKK,IACH,uBAAGA,KAAK,4FAAR,aAIF,0BAAMD,UAAU,MAAhB,WACW,IACT,uBAAGC,KAAK,kGAAR,SAEK,IAJP,KAKK,IACH,uBAAGA,KAAK,8GAAR,aAIF,0BAAMD,UAAU,MAAhB,WACW,IACT,uBAAGC,KAAK,0GAAR,oBAEK,IAJP,KAKK,IACH,uBAAGA,KAAK,4FAAR,aAIF,6BAhEF,mCAgE4C,IAC1C,uBAAGA,KAAK,yBAAyBD,UAAU,IAA3C,oBAGA,yBAAKA,UAAU,cAAf,MApEF,oBAqEmB,uBAAGC,KAAK,qBAAR,SArEnB,MAqE4D,IAC1D,uBAAGA,KAAK,oCAAR,uBAtEF,sUA6EE,yBAAKD,UAAU,cAAf,MA7EF,sBA8EqB,uBAAGC,KAAK,qBAAR,SA9ErB,MA8E8D,IAC5D,uBAAGA,KAAK,oCAAR,uBACA,yBAAKD,UAAU,cAAf,gBAhFF,gDAiFgD,IAC9C,uBAAGC,KAAK,qBAAR,SAlFF,MAkF2C,IACzC,uBAAGA,KAAK,oCAAR,uBACA,yBAAKD,UAAU,aAAaE,GAAG,eAA/B,eApFF,8BAuF8B,IAC5B,uBAAGD,KAAK,iCAAR,oBACA,yBAAKD,UAAU,cAAf,YACA,uBAAGC,KAAK,6BAAR,YACA,yBAAKD,UAAU,cAAf,SACA,uBAAGC,KAAK,8CAAR,eAGA,yBAAKD,UAAU,cAAf,YACA,uBAAGC,KAAK,uBAAR,YACA,yBAAKD,UAAU,cAAf,cACA,uBAAGC,KAAK,gCAAR,iBAEF,yBAAKD,UAAU,eAAf","file":"component---src-pages-about-js-3903b3c5562542a8a9cb.js","sourcesContent":["import React, { useEffect } from \"react\"\nimport { Link, graphql } from \"gatsby\"\nimport Img from \"gatsby-image\"\n\nimport Layout from \"../components/layout\"\n\nconst AboutPage = () => {\n  return (\n    <Layout>\n      <div className=\"bg__quad pt5 pb5\">\n        <div className=\"measure-wide center bg__light pa3 br3\">\n          <div className=\"f2 tc head mt5 mb2\">About Demo</div>\n          <div className=\"toc\">\n            <div className=\"f5 mb2 head\">Table of Contents</div>\n            <ul>\n              <li>\n                <a href=\"#what-is-this\">What is this</a>\n              </li>\n              <li>\n                <a href=\"#know-areas\">Known areas for improvement</a>\n              </li>\n              <li>\n                <a href=\"#credits\">Credits</a>\n                <ul>\n                  <li>\n                    <a href=\"#branding\">Branding</a>\n                  </li>\n                  <li>\n                    <a href=\"#design\">Design</a>\n                  </li>\n                  <li>\n                    <a href=\"#development\">Development</a>\n                  </li>\n                </ul>\n              </li>\n            </ul>\n          </div>\n          <div className=\"body measure \">\n            This was a power demo a-z. This means in a short time frame I\n            designed the logo, color pallette, imagery and illustration and\n            developed what you see here.\n            <div className=\"f3 mb2 mt4\" id=\"what-is-this\">\n              What this is?\n            </div>\n            This was an exercise to go through production with the objective of\n            increase my pace and effectiveness. To go over the workflows;\n            <ul className=\"mt2\">\n              <li>Logo creation</li>\n              <li>UI design</li>\n              <li>UX design</li>\n              <li>Illustration Creation</li>\n              <li>Imagery Curation and Editing</li>\n              <li>Development</li>\n            </ul>\n            <div className=\"f3 mb2 mt4\" id=\"know-areas\">\n              Known areas for improvement\n            </div>\n            <div className=\"measure\">\n              These are the things that didn't make in durning period I lotted\n              for the projects, or features that need some more love.\n              <ul className=\"mt2\">\n                <li>I would like to make scroll to next section</li>\n                <li>\n                  I think there is room for some animations to enhance the\n                  experience\n                </li>\n                <li>A coffee video on repeat would be a nice enhancement</li>\n                <li>\n                  Adding filter to the shop (this feature would be part of\n                  integrating with shopify{\" \"}\n                </li>\n                <li>\n                  Adding about coffee product page to give the audience more\n                  information about the coffee and enhance the experience\n                </li>\n              </ul>\n            </div>\n            <div className=\"f3 mb2 mt4\" id=\"credits\">\n              Credits\n            </div>\n            <div className=\"body measure \">\n              <div className=\"f4 mb2 mt4\">Branding</div>I use the term branding\n              here softly as this project did not require true branding. For\n              example, community position, market differentiation from a\n              business and social perspective.\n              <div className=\"f5 mb2 mt3\">Mark/Logo</div>\n              Concept and designed by{\" \"}\n              <a href=\"https://design.lucaszapico.space\">Lucas Zapico</a>, there\n              was a Pinterest search and some inspiration from my own person\n              collection of Marks.\n              <div className=\"f5 mb2 mt3\">Color Palette</div>\n              Inspiration for Color Palette{\" \"}\n              <a href=\"https://www.colorsandfonts.com/color-palettes\">\n                Color and Fonts\n              </a>\n              <div className=\"f5 mb2 mt3\">Typography</div>\n              <a href=\"https://fonts.google.com/\" className=\"db\">\n                Google Fonts\n              </a>\n              <a\n                href=\"https://fonts.google.com/specimen/IM+Fell+Double+Pica\"\n                className=\"db\"\n              >\n                IM Fell Double Pica - Script Type\n              </a>\n              <div className=\"f4 mb2 mt3\" id=\"design\">\n                Design\n              </div>\n              <div className=\"f5 mb2 mt3\">Photography</div>\n              Photos found on{\" \"}\n              <a href=\"https://unsplash.com/\" className=\"\">\n                Unsplash\n              </a>{\" \"}\n              photo credit below;\n              <span className=\"db\">\n                Photo by{\" \"}\n                <a href=\"https://unsplash.com/@nate_dumlao?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">\n                  Nathan Dumlao\n                </a>{\" \"}\n                on{\" \"}\n                <a href=\"https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">\n                  Unsplash\n                </a>\n              </span>\n              <span className=\"db\">\n                Photo by{\" \"}\n                <a href=\"https://unsplash.com/@lum3n?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">\n                  LUM3N\n                </a>{\" \"}\n                on{\" \"}\n                <a href=\"https://unsplash.com/s/photos/nectarine?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">\n                  Unsplash\n                </a>\n              </span>\n              <span className=\"db\">\n                Photo by{\" \"}\n                <a href=\"https://unsplash.com/@relentlessjpg?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">\n                  William Moreland\n                </a>{\" \"}\n                on{\" \"}\n                <a href=\"https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">\n                  Unsplash\n                </a>\n              </span>\n              <br></br>A bit of photo hacking done with{\" \"}\n              <a href=\"https://www.remove.bg/\" className=\"\">\n                RemoveBackground\n              </a>\n              <div className=\"f5 mb2 mt3\">UX</div>\n              UX was mocked in <a href=\"https://figma.com\">Figma</a> by{\" \"}\n              <a href=\"https://design.lucaszapico.space\">design.Lucas Zapico</a>\n              . Though the user experience was relatively simple. I recently did\n              a research pass on UX be practice for shopping experience and the\n              main take away and driving force is to make the search and\n              exploration of products navigable. This being said, I know it\n              could be improved, but I am happy with the results from a power\n              pass.\n              <div className=\"f5 mb2 mt3\">UI</div>\n              UI was designed in <a href=\"https://figma.com\">Figma</a> by{\" \"}\n              <a href=\"https://design.lucaszapico.space\">design.Lucas Zapico</a>\n              <div className=\"f5 mb2 mt3\">Illustration</div>\n              Pencil and paper illustration was designed in{\" \"}\n              <a href=\"https://figma.com\">Figma</a> by{\" \"}\n              <a href=\"https://design.lucaszapico.space\">design.Lucas Zapico</a>\n              <div className=\"f4 mb2 mt4\" id=\"development\">\n                Development\n              </div>\n              All development was done by{\" \"}\n              <a href=\"https://dev.lucaszapico.space\">dev.Lucas Zapico</a>\n              <div className=\"f5 mb2 mt3\">Platform</div>\n              <a href=\"https://www.gatsbyjs.com/\">Gatsbyjs</a>\n              <div className=\"f5 mb2 mt3\">Icons</div>\n              <a href=\"https://react-icons.github.io/react-icons/\">\n                React Icons\n              </a>\n              <div className=\"f5 mb2 mt3\">CSS/SCSS</div>\n              <a href=\"http://tachyons.io/\">Tachyons</a>\n              <div className=\"f5 mb2 mt3\">Animations</div>\n              <a href=\"https://www.react-spring.io/\">React Spring</a>\n            </div>\n            <div className=\"f3 head mt3\">\n              If you got this far you're a legend! Stay classy from me to you!\n            </div>\n          </div>\n        </div>\n      </div>\n    </Layout>\n  )\n}\n\nexport default AboutPage\n"],"sourceRoot":""}