{"version":3,"sources":["webpack:///./src/pages/concentrations.js"],"names":["Intro","styled","div","IntroDetails","Involvement","Title","h3","Divider","hr","Wave","Home","contributions","react","Fragment","express","linux","Concentrations","data","title","to","className","fluid","file","childImageSharp","alt","xmlns","viewBox","fill","fill-opacity","d","color","expandedContent","styles","skillLogo","src","REACT","NODE","TERMINAL","query"],"mappings":"2FAAA,mQAiBMA,GAjBN,UAiBcC,IAAOC,IAAV,wEAAGD,CAAH,+FAQLE,EAAeF,IAAOC,IAAV,+EAAGD,CAAH,mJAgBZG,EAAcH,IAAOC,IAAV,8EAAGD,CAAH,yGAUXI,EAAQJ,IAAOK,GAAV,wEAAGL,CAAH,wBAILM,EAAUN,IAAOO,GAAV,0EAAGP,CAAH,4GAUPQ,EAAOR,IAAOC,IAAV,uEAAGD,CAAH,uFASJS,EAAOT,IAAOC,IAAV,uEAAGD,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,oGAyEOW,UAnEQ,SAAC,GAAY,IAAXC,EAAU,EAAVA,KAGvB,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,kDACA,2FACA,4VAIF,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-concentrations-js-707533782ad673573303.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`\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 Concentrations = ({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>Concentration Logs</h3>\n                <p>Monitoring & tracking critical levels of chemicals and water</p>\n                <p>As a freelance developer, I worked closely with both the IT and food safety departments to transition a critical\n                monitoring system from pen and paper to a modern, digital, and quantifiable system. As the sole developer,\n                I managed both the front and back end of the application using a React, Node JS, and PostgreSQL.</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 Concentrations\n\nexport const query = graphql`\n    query ConcentrationsQuery {\n        file(relativePath: { eq: \"concentrations.png\" }) {\n            childImageSharp {\n                fluid(maxWidth: 700) {\n                    ...GatsbyImageSharpFluid\n                }\n            }\n        }\n    }\n`"],"sourceRoot":""}