{"version":3,"sources":["webpack:///./src/pages/po.js"],"names":["Intro","styled","div","IntroDetails","Involvement","Title","h3","Divider","hr","Wave","Home","contributions","react","Fragment","express","linux","PO","data","title","to","className","fluid","file","childImageSharp","alt","xmlns","viewBox","fill","fill-opacity","d","color","expandedContent","styles","skillLogo","src","REACT","NODE","TERMINAL","query"],"mappings":"6FAAA,mQAiBMA,GAjBN,UAiBcC,IAAOC,IAAV,4DAAGD,CAAH,+FAQLE,EAAeF,IAAOC,IAAV,mEAAGD,CAAH,mJAgBZG,EAAcH,IAAOC,IAAV,kEAAGD,CAAH,yGAUXI,EAAQJ,IAAOK,GAAV,4DAAGL,CAAH,wBAILM,EAAUN,IAAOO,GAAV,8DAAGP,CAAH,4GAUPQ,EAAOR,IAAOC,IAAV,2DAAGD,CAAH,uFAUJS,EAAOT,IAAOC,IAAV,2DAAGD,CAAH,+WAyBJU,EAAgB,CACpBC,MACE,kBAAC,IAAMC,SAAP,KACE,kBAACR,EAAD,cACA,oLAEA,gLAEA,4BACE,sDACA,0EACA,mEAEF,kBAACE,EAAD,OAIJO,QACE,kBAAC,IAAMD,SAAP,KACE,kBAACR,EAAD,uBACA,4GACA,4BACE,gDACA,8CACA,yEAINU,MACE,kBAAC,IAAMF,SAAP,KACE,kBAACR,EAAD,eACA,gMAEA,4BACE,mEACA,+DACA,oGA0EOW,UApEJ,SAAC,GAAY,IAAXC,EAAU,EAAVA,KAGX,OACE,kBAAC,IAAD,KACE,kBAAC,IAAD,CAAKC,MAAM,uBACX,kBAACR,EAAD,KACE,kBAAC,OAAD,CAAMS,GAAG,KAAT,SAEF,kBAACnB,EAAD,KACE,kBAACG,EAAD,KACE,yBAAKiB,UAAU,mBACb,yBAAKA,UAAU,wBACb,yBAAKA,UAAU,UACb,yDACA,gFACA,iYAKF,yBAAKA,UAAU,UACb,kBAAC,IAAD,CACEC,MAAOJ,EAAKK,KAAKC,gBAAgBF,MACjCG,IAAI,wCAShB,kBAACf,EAAD,KACE,yBAAKgB,MAAM,6BAA6BC,QAAQ,gBAAe,0BAAMC,KAAK,UAAUC,eAAa,IAAIC,EAAE,4QAGzG,kBAACzB,EAAD,KACE,yDACA,yBAAKgB,UAAU,aACb,yBAAKA,UAAU,QACb,yBAAKA,UAAU,UACb,kBAAC,IAAD,CAAMU,MAAM,MAAMC,gBAAiBpB,EAAcC,OAC/C,yBAAKQ,UAAWY,IAAOC,UAAWC,IAAKC,IAAOX,IAAI,iBAGtD,yBAAKJ,UAAU,UACb,kBAAC,IAAD,CAAMW,gBAAiBpB,EAAcG,QAASgB,MAAM,UAClD,yBAAKV,UAAWY,IAAOC,UAAWC,IAAKE,IAAMZ,IAAI,oBAGrD,yBAAKJ,UAAU,UACb,kBAAC,IAAD,CAAMW,gBAAiBpB,EAAcI,MAAOe,MAAM,QAChD,yBAAKV,UAAWY,IAAOC,UAAWC,IAAKG,IAAUb,IAAI,uBAQ/D,kBAAC,IAAD,QASC,IAAMc,EAAK","file":"component---src-pages-po-js-9355e022af08d5d68c4b.js","sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\";\nimport { graphql, Link } from \"gatsby\"\n\nimport Layout from \"../components/layout\"\nimport SEO from \"../components/seo\"\nimport Img from \"gatsby-image\"\nimport Card from \"../components/Card\"\nimport { Skills } from \"../components/Skills\"\nimport styles from \"../components/styles/HomeSkills.module.scss\"\nimport REACT from \"../images/React.svg\"\nimport TERMINAL from \"../images/Terminal.svg\"\nimport NODE from \"../images/nodejs.svg\";\nimport HomeInfo from \"../components/HomeInfo\"\nimport LARAVEL from \"../images/Laravel.svg\";\n\n\nconst Intro = styled.div`\n  background-color: #004e92;\n  padding: 5vh 0 0 0;\n  color: #fff;\n  position: relative;\n  min-height: 50vh;\n`\n\nconst IntroDetails = styled.div`\n margin: 3rem 0 0 0;\n align-items: center;\n h2 {\n  \n }\n @media only screen and (min-width: 1024px) {\n  //transform: translate3d(0, 20%, 0);\n }\n  @media only screen and (min-width: 960px) {\n  margin: 0 0 0 0;\n  //transform: translate3d(0, 20%, 0);\n }\n`\n\n\nconst Involvement = styled.div`\n  margin: 5vh 0 0 0;\n  h2 {\n    text-align: center;\n  }\n    @media only screen and (min-width: 960px) {\n    margin: -5vh 0 0 0;\n }\n`\n\nconst Title = styled.h3`\n  text-align: center;\n`\n\nconst Divider = styled.hr`\nmargin: 1rem auto 1rem auto;\ndisplay: block;\nheight: 2px;\nbackground: hsl(0, 0%, 86%);\nwidth: 100%;\nmax-width: 100%\n`\n\n\nconst Wave = styled.div`\nmargin: -1rem 0 0 0;\n    @media only screen and (min-width: 960px) {\n    margin: 0 0 0 0;\n }\nsvg {\n\n}\n`\n\nconst Home = styled.div`\nposition: absolute;\ntop: 2rem;\nleft: 1rem;\nz-index: 30;\na {\nfont-size: 1.5rem;\nfont-weight: 700;\nfont-family: \"Open Sans\", sans-serif;\n\ntext-decoration: none;\npadding: .5rem 1rem;\nborder: 5px solid #fff;\nbackground-color: #fff;\ncolor: #000;\ntransition: background-color 400ms, color 400ms, border 400ms;\nborder-radius: 5px;\n&:hover {\nbackground-color: #008DD5;\nborder: 5px solid #008DD5;\ncolor: #fff;\n}\n}\n`\n\nconst contributions = {\n  react: (\n    <React.Fragment>\n      <Title>React</Title>\n      <p>I was responsible for the creation of the entire front end. I chose React because of its modularity and\n        because of how easy it is to expand later on.</p>\n      <p>For the UI, I took advantage of Material UI library which enabled me to roll out a working build\n        quickly without sacrificing the user experience.</p>\n      <ul>\n        <li>Created all components</li>\n        <li>Implemented all business & front end logic</li>\n        <li>Made sure it was mobile responsive</li>\n      </ul>\n      <Divider/>\n\n    </React.Fragment>\n  ),\n  express: (\n    <React.Fragment>\n      <Title>Node + Express</Title>\n      <p>I chose Express because of how easy and minimal it is to setup a working API.</p>\n      <ul>\n        <li>Implemented CORS</li>\n        <li>Created an API</li>\n        <li>Made migrations & seeds by hand, no ORM</li>\n      </ul>\n    </React.Fragment>\n  ),\n  linux: (\n    <React.Fragment>\n      <Title>Ubuntu</Title>\n      <p>Ubuntu was the OS I chose for the Hyper-V instance hosting various internal applications because of its easy access\n        to update to date packages without much work.</p>\n      <ul>\n        <li>Installed operating system from ISO</li>\n        <li>Setup Apache to serve front end</li>\n        <li>Used Apache reverse proxy to send API requests to Node JS server.</li>\n      </ul>\n    </React.Fragment>\n  ),\n}\n\nconst PO = ({data}) => {\n\n\n  return (\n    <Layout>\n      <SEO title=\"Concentration Logs\" />\n      <Home>\n        <Link to=\"/\">Home</Link>\n      </Home>\n      <Intro>\n        <IntroDetails>\n          <div className=\"container fluid\">\n            <div className=\"grid vertical-center\">\n              <div className=\"column\">\n                <h3>Purchase & Goods Tracking</h3>\n                <p>Keeping staff up to date on requisitions & orders</p>\n                <p>I was contracted to address a need for a more seamless tracking system for company orders ranging from\n                  desk supplies to seeds and farm equipment. As the Purchasing department became overwhelmed by requests for\n                  order updates, this application allowed users to view and take charge of their orders alleviating a large burden\n                  for the purchasing department.</p>\n              </div>\n              <div className=\"column\">\n                <Img\n                  fluid={data.file.childImageSharp.fluid}\n                  alt=\"Laptop with picture of the app\"\n                />\n              </div>\n            </div>\n          </div>\n        </IntroDetails>\n\n      </Intro>\n\n      <Wave>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1440 320\"><path fill=\"#004e92\" fill-opacity=\"1\" d=\"M0,128L48,154.7C96,181,192,235,288,224C384,213,480,139,576,101.3C672,64,768,64,864,80C960,96,1056,128,1152,165.3C1248,203,1344,245,1392,266.7L1440,288L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z\"></path></svg>\n      </Wave>\n\n      <Involvement>\n        <h2>Tech Stack & Contribution</h2>\n        <div className=\"container\">\n          <div className=\"grid\">\n            <div className=\"column\">\n              <Card color=\"sky\" expandedContent={contributions.react}>\n                <img className={styles.skillLogo} src={REACT} alt=\"React Logo\"/>\n              </Card>\n            </div>\n            <div className=\"column\">\n              <Card expandedContent={contributions.express} color=\"purple\">\n                <img className={styles.skillLogo} src={NODE} alt=\"Terminal icon\"/>\n              </Card>\n            </div>\n            <div className=\"column\">\n              <Card expandedContent={contributions.linux} color=\"blue\">\n                <img className={styles.skillLogo} src={TERMINAL} alt=\"Terminal icon\"/>\n              </Card>\n            </div>\n          </div>\n        </div>\n\n      </Involvement>\n\n      <HomeInfo/>\n\n\n    </Layout>\n  )\n}\n\nexport default PO\n\nexport const query = graphql`\n    query POQuery {\n        file(relativePath: { eq: \"ps-2.jpg\" }) {\n            childImageSharp {\n                fluid(maxWidth: 700) {\n                    ...GatsbyImageSharpFluid\n                }\n            }\n        }\n    }\n`"],"sourceRoot":""}