{"version":3,"file":"component---src-pages-work-narrative-planner-js-03ff03ac99436f2ae751.js","mappings":"qJAkEA,IA9DiB,SAAC,GAAe,IAAdA,EAAa,EAAbA,QACjB,OACE,2BACE,uBAAKC,MAAM,0CACT,sBACEC,UAAU,uBACVC,MAAO,CAACC,SAAU,WAAYC,IAAK,SAEjCL,EAAQM,OAId,uBAAKJ,UAAU,mDACb,sBAAIA,UAAU,iBAAd,eACA,qBAAGA,UAAU,4CAA6CF,EAAQO,aAElE,sBAAIL,UAAU,uBAAd,iBACA,qBAAGA,UAAU,4CAA6CF,EAAQQ,WAElE,sBAAIN,UAAU,uBAAd,gBACA,qBAAGA,UAAU,4CAA6CF,EAAQS,UAElE,uBAAKP,UAAU,0CACb,uBAAKA,UAAU,8CAEXF,EAAQU,OAAOC,KAAI,SAAAC,GACjB,OACE,uBAAKV,UAAU,QACb,uBAAKW,IAAG,qBAAuBD,UAQ3C,uBAAKV,UAAU,SACb,uBAAKA,UAAU,aACb,sBAAIA,UAAU,gBAAd,aACA,uBAAKA,UAAU,aACb,qBAAGY,KAAOd,EAAQe,KAAOf,EAAQe,OAGrC,uBAAKb,UAAU,QACb,sBAAIA,UAAU,gBAAd,cAEEF,EAAQgB,KAAKL,KAAI,SAAAM,GACf,OACE,uBAAKf,UAAU,mDACXe,Y,4FCjCtB,UAXkB,SAAC,GAAkB,IAAhBC,EAAe,EAAfA,SAEnB,OACE,gBAAC,IAAD,CAAQA,SAAUA,GAChB,gBAAC,IAAD,CAAKC,MAAM,yDACX,gBAAC,IAAD,CAAUnB,QAASoB,EAAAA,O,qDCdlB,IAAMA,EAAmB,CAC9Bd,KAAM,oBACNe,QAAS,uCACTT,MAAO,wBACPU,SAAU,oBACVP,IAAK,mCACLQ,UAAU,EACVhB,YAAa,sJACbC,UAAW,8iBACXC,SAAU,uMACVO,KAAM,CAAC,UAAW,WAAY,UAAW,gBAAiB,WAC1DQ,SAAU,CAAC,SAAU,cAAe,WACpCd,OAAQ,CAAC,yBAA0B,yBAA0B","sources":["webpack://gatsby-starter-blog/./src/components/workPage.js","webpack://gatsby-starter-blog/./src/pages/work/narrative-planner.js","webpack://gatsby-starter-blog/./src/portfolio/narrativePlanner.js"],"sourcesContent":["import * as React from \"react\"\nimport { Link } from \"gatsby\"\n\n\nconst WorkPage = ({project}) => {\n  return (\n    <div>\n      <div class=\"py-24 subHeader text-white text-center\">\n        <h1\n          className=\"text-4xl header-bold\"\n          style={{position: \"relative\", top: \"32px\"}}\n        >\n          { project.name }\n        </h1>\n      </div>\n\n      <div className=\"text-center py-28 max-w-5xl m-auto px-4 md:px-0\">\n        <h2 className=\"text-5xl pb-8\">The Project</h2>\n        <p className=\"text-xl pb-8 border-b-2 border-secondary\">{ project.description }</p>\n\n        <h2 className=\"text-5xl pb-8 pt-28\">The Challenge</h2>\n        <p className=\"text-xl pb-8 border-b-2 border-secondary\">{ project.challenge }</p>\n\n        <h2 className=\"text-5xl pb-8 pt-28\">The Solution</h2>\n        <p className=\"text-xl pb-8 border-b-2 border-secondary\">{ project.solution }</p>\n\n        <div className=\"pt-28 pb-8 border-b-2 border-secondary\">\n          <div className=\"grid grid-cols-1 sm:grid-cols-3 text-white\">\n            {\n              project.images.map(image => {\n                return (\n                  <div className=\"px-2\">\n                    <img src={`/images/portfolio/${image}`} />\n                  </div>\n                )\n              })\n            }\n          </div>\n        </div>\n\n        <div className=\"pt-28\">\n          <div className=\"flex pb-4\">\n            <h3 className=\"text-xl pt-1\">Live Url:</h3>\n            <div className=\"pl-2 pt-2\">\n              <a href={ project.url }>{project.url}</a>\n            </div>\n          </div>\n          <div className=\"flex\">\n            <h3 className=\"text-xl pt-1\">Tech Used:</h3>\n            {\n              project.tech.map(item => {\n                return (\n                  <div className=\"mx-4 px-4 text-white py-2 rounded-xl bg-primary\">\n                    { item }\n                  </div>\n                )\n              })\n            }\n          </div>\n        </div>\n      </div>\n\n    </div>\n  )\n}\n\nexport default WorkPage\n","import * as React from \"react\"\nimport { Link, graphql } from \"gatsby\"\n\nimport Layout from \"../../components/layout\"\nimport WorkPage from \"../../components/workPage\"\nimport Seo from \"../../components/seo\"\n\nimport { narrativePlanner } from '../../portfolio/narrativePlanner'\n\nconst BlogIndex = ({ location }) => {\n\n  return (\n    <Layout location={location}>\n      <Seo title=\"Total Web Connections | Our Work | Narrative Planner\" />\n      <WorkPage project={narrativePlanner} />\n\n    </Layout>\n  )\n}\n\nexport default BlogIndex\n","export const narrativePlanner = {\n  name: \"Narrative Planner\",\n  excerpt: \"Collaborative Storybuilding Platform\",\n  image: \"narrative-planner.jpg\",\n  localUrl: \"narrative-planner\",\n  url: \"https://www.narrativeplanner.com\",\n  featured: true,\n  description: \"Narrative Planner is a collaborative story telling tool. It allows multiple users to connect in realtime, and build out complex, branching stories.\",\n  challenge: \"There was a lot of challenges in this project due to the complexity, but one of the most difficult was working in a realtime enviroment. Having multiple users connected to a single session means there is a lot of opportunities for race conditions and other weird states of data. We spend a lot of time testing, and made sure that the application worked well when multiple people were working in the same view. There was also a lot of work done to make sure that the application was usable on mobile devices and behaved the same as when working on desktop.\",\n  solution: \"The end solution was built entirely using Clojure on both the back and front-ends. Working with Clojure was extermely enjoyable, and makes working with the codebase very easy for future additions.\",\n  tech: [\"Clojure\", \"Pedestal\", \"Reagent\", \"Clojurescript\", \"MongoDB\"],\n  services: [\"Design\", \"Development\", \"Dev Ops\"],\n  images: [\"simpleLeadTracker.webp\", \"simpleLeadTracker.webp\", \"simpleLeadTracker.webp\"]\n}\n"],"names":["project","class","className","style","position","top","name","description","challenge","solution","images","map","image","src","href","url","tech","item","location","title","narrativePlanner","excerpt","localUrl","featured","services"],"sourceRoot":""}