{"version":3,"sources":["webpack:///./src/components/projectDisplay.js","webpack:///./src/pages/projects.js","webpack:///./src/components/button.js"],"names":["projectDisplay","projectTitle","description","gitHubBackend","gitHubFrontend","website","youtube","youtubeTitle","features","className","href","target","title","width","height","src","frameborder","allow","allowfullscreen","map","info","Projects","render","location","this","props","to","marginTop","React","Component","pageQuery","ButtonWrapper","styled","button","background","color","fontSize","fontWeight","radius","marginBottom","Button","children"],"mappings":"uNAgDeA,EA7CQ,SAAC,GAA4G,IAA1GC,EAAyG,EAAzGA,aAAcC,EAA2F,EAA3FA,YAAaC,EAA8E,EAA9EA,cAAeC,EAA+D,EAA/DA,eAAgBC,EAA+C,EAA/CA,QAASC,EAAsC,EAAtCA,QAASC,EAA6B,EAA7BA,aAAcC,EAAe,EAAfA,SASlH,OACE,oCACE,yBAAKC,UAAU,eACb,wBAAIA,UAAU,6BAA6BR,IAE7C,yBAAKQ,UAAU,eACb,uBAAGA,UAAU,gBAAgBP,IAE/B,6BACA,yBAAKO,UAAU,gBACb,uBAAGC,KAAMP,EAAeQ,OAAO,UAA/B,oBAA8D,IADhE,KAEI,uBAAGD,KAAMN,EAAgBO,OAAO,UAAhC,mBAA8D,IAC/DN,GAAW,oCACV,oCACA,uBAAGK,KAAML,EAASM,OAAO,UAAzB,aAKJ,yBAAKF,UAAU,kBACb,yBAAKA,UAAU,aACb,yBAAKA,UAAU,sBACb,4BAAQG,MAAOL,EAAcM,MAAM,MAAMC,OAAO,MAAMC,IAAKT,EAASU,YAAY,IAAIC,MAAM,0EAA0EC,iBAAe,MAGvL,yBAAKT,UAAU,mBACb,sDACA,4BAhCCD,EAASW,KAAI,SAAAC,GAClB,OAAO,wBAAIX,UAAU,aAAaW,W,ICDlCC,E,gLACJC,OAAA,WA+BE,OACE,kBAAC,IAAD,CAAQC,SAAUC,KAAKC,MAAMF,SAAUX,MA/BvB,mBAgCd,kBAAC,IAAD,CAAKA,MAAM,aAEX,kBAAC,EAAD,CACEX,aAAc,iBACdC,YACE,+GAEFC,cACE,0DAEFC,eACE,yDAEFI,SAzBwB,CAC5B,yIACA,2JACA,oHACA,4DACA,oJACA,oFACA,kGAmBIF,QAAS,4CACTC,aAAc,wBAGhB,kBAAC,EAAD,CACEN,aAAc,eACdC,YACE,oGAEFC,cACE,6DAEFC,eACE,4DAEFC,QAAS,6CACTG,SA5DqB,CACzB,6HACA,6GACA,6GACA,6FACA,mJACA,6JACA,qFAsDIF,QAAS,4CACTC,aAAc,sBAGhB,kBAAC,EAAD,CACEN,aAAc,YACdC,YACE,iEAEFC,cAAe,sDACfC,eACE,uDAEFI,SAhEoB,CACxB,2HACA,sIACA,4IACA,mLACA,qFA4DIF,QAAS,4CACTC,aAAc,oBAEhB,kBAAC,OAAD,CAAMmB,GAAG,KACP,yBAAKjB,UAAU,gBACb,kBAAC,IAAD,CAAQkB,UAAU,QAAlB,e,GApFWC,IAAMC,WA8FhBC,GAFET,YAEO,e,kCCrGtB,yBAOMU,EAPN,UAOsBC,EAAOC,OAAV,4EAAGD,CAAH,qVAWH,SAAAP,GAAK,OAAIA,EAAMA,MAAMS,YAAc,WACxC,SAAAT,GAAK,OAAIA,EAAMA,MAAMU,OAAS,wBAC1B,SAAAV,GAAK,OAAIA,EAAMA,MAAMW,UAAY,UAC/B,SAAAX,GAAK,OAAIA,EAAMA,MAAMY,YAAc,SACjC,SAAAZ,GAAK,OAAIA,EAAMA,MAAMa,QAAU,SAClC,SAAAb,GAAK,OAAIA,EAAMA,MAAME,aAClB,SAAAF,GAAK,OAAIA,EAAMA,MAAMc,gBAOzBC,IA5BA,SAAAf,GAAK,OAClB,kBAACM,EAAD,CAAeN,MAAOA,GAAQA,EAAMgB","file":"component---src-pages-projects-js-dd22abe9fbfd169b7ed1.js","sourcesContent":["import React from 'react'\nimport Layout from \"./layout\"\n\nconst projectDisplay = ({ projectTitle, description, gitHubBackend, gitHubFrontend, website, youtube, youtubeTitle, features }) => {\n  const siteTitle = 'Recent Projects'\n  \n  const renderFeatures = () => {\n    return features.map(info => {\n      return <li className='list-item'>{info}</li>\n    })\n  }\n\n  return (\n    <>\n      <div className='center-text'>\n        <h2 className='padding-left inline-block'>{projectTitle}</h2>\n      </div>\n      <div className='center-text'>\n        <i className='inline-block'>{description}</i>\n      </div>\n      <br></br>\n      <div className='padding-left' >\n        <a href={gitHubBackend} target=\"_blank\" >Github - Backend</a>{' '}\n        | <a href={gitHubFrontend} target=\"_blank\" >Github - Client</a>{' '}\n        {website && <>\n          <span>| </span> \n          <a href={website} target=\"_blank\" >Website</a>\n          </>\n        }\n      </div>\n\n      <div className=\"grid-container\">\n        <div className='grid-item'>\n          <div className='project-demo-video'>\n            <iframe title={youtubeTitle} width=\"560\" height=\"315\" src={youtube} frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>  \n          </div>\n        </div>\n        <div className='grid-item-right'>\n          <h4>Features & Description</h4>\n          <ul>\n            {renderFeatures()}\n          </ul>\n        </div>\n      </div>\n    </>\n  )\n}\n\nexport default projectDisplay","import React from \"react\"\nimport { Link, graphql } from \"gatsby\"\nimport Layout from \"../components/layout\"\nimport SEO from \"../components/seo\"\nimport Button from \"../components/button\"\nimport ProjectDisplay from \"../components/projectDisplay\"\n\nclass Projects extends React.Component {\n  render() {\n    const siteTitle = \"Recent Projects\"\n\n    const songContolFeatures = [\n      \"Created an AWS S3 bucket that enables users to upload, save, and stream audio recordings and provides song version control\",\n      \"Used CarrierWave and Fog gem to communicate with Amazon S3 allowing for an easy and accessible entry point\",\n      \"Utilized React Hooks to manage state and implemented Material UI for consistent design and user experience\",\n      \"Applied ChordSheetJS npm package to format song lyrics for ease of visibility for the user\",\n      \"Built a lyric writing tool to look up for a word’s synonyms, rhymes, and definitions that enables quick and effortless reference with one search\",\n      \"Implemented a Ruby on Rails backend and used serializers to render and format JSON data providing a quick and easy way to organize fetches from the client\",\n      \"Implemented Auth with bcrypt passwords and JWT tokens for secure login and logout\",\n    ]\n\n    const flatPlateFeatures = [\n      \"Utilized the MealDB API to pull and parse data to seed the database providing hundreds a real recipes for users to enjoy\",\n      \"Implemented a dynamic and controlled form to create new recipes and ingredients that allows the user to quickly create a new recipe\",\n      \"Applied a search function using React state to sort and filter recipes by category, region, and name making all recipes easily searchable\",\n      \"Used ActiveRecord and Ruby on Rails join tables to organize, store, and like recipes allowing the user to reference and select favorite recipes for quick access and future use.\",\n      \"Implemented Auth with bcrypt passwords and JWT tokens for secure login and logout\",\n    ]\n\n    const capsuleClosetFeatures = [\n      \"Worked on a team with two other developers to create an application using a Ruby on Rails api, Postgres database, and a React frontend\",\n      \"Implemented a filtering feature on clothing items based on category, color, size, and brand that allows the user to quickly find a desired clothing item\",\n      \"Utilized React hooks and reducers for centralized state management, making it easier to to debug and modify state\",\n      \"Built reusable components resulting in a slimmer codebase\",\n      \"Created a dynamic drawer that allows to user to create and edit an outfit while viewing the contents of their closet for a better user experience\",\n      \"Implemented Auth with bcrypt passwords and JWT tokens for secure login and logout\",\n      \"Used Material UI to style components that allows for easy manipulation and quick theme changes\",\n    ]\n\n    return (\n      <Layout location={this.props.location} title={siteTitle}>\n        <SEO title=\"Projects\" />\n\n        <ProjectDisplay\n          projectTitle={\"Capsule Closet\"}\n          description={\n            \"A web application designed to minimize the user's closet by providing organization and quick outfit creation\"\n          }\n          gitHubBackend={\n            \"https://github.com/Joshua-Phelps/capsule-closet-backend\"\n          }\n          gitHubFrontend={\n            \"https://github.com/Joshua-Phelps/capsule-closet-client\"\n          }\n          features={capsuleClosetFeatures}\n          youtube={\"https://www.youtube.com/embed/m9WLhJ9x4ts\"}\n          youtubeTitle={\"Capsule Closet Demo\"}\n        />\n\n        <ProjectDisplay\n          projectTitle={\"Song Control\"}\n          description={\n            \"Songwriting application with writing tools designed to assist songwriters in the creative process\"\n          }\n          gitHubBackend={\n            \"https://github.com/Joshua-Phelps/mod-5-songwriting-backend\"\n          }\n          gitHubFrontend={\n            \"https://github.com/Joshua-Phelps/mod-5-songwriting-client\"\n          }\n          website={\"https://song-control-client.herokuapp.com/\"}\n          features={songContolFeatures}\n          youtube={\"https://www.youtube.com/embed/181d-tg6OPc\"}\n          youtubeTitle={\"Song Control Demo\"}\n        />\n\n        <ProjectDisplay\n          projectTitle={\"FlatPlate\"}\n          description={\n            \"Recipe application designed to organize and create new recipes\"\n          }\n          gitHubBackend={\"https://github.com/Joshua-Phelps/recipe-app-backend\"}\n          gitHubFrontend={\n            \"https://github.com/Joshua-Phelps/recipe-app-frontend\"\n          }\n          features={flatPlateFeatures}\n          youtube={\"https://www.youtube.com/embed/6zrZ0ikvud4\"}\n          youtubeTitle={\"Flat Plate Demo\"}\n        />\n        <Link to=\"/\">\n          <div className=\"padding-left\">\n            <Button marginTop=\"85px\">Go Home</Button>\n          </div>\n        </Link>\n      </Layout>\n    )\n  }\n}\n\nexport default Projects\n\nexport const pageQuery = graphql`\n  query {\n    site {\n      siteMetadata {\n        title\n      }\n    }\n    allMdx(sort: { fields: [frontmatter___date], order: DESC }) {\n      edges {\n        node {\n          excerpt\n          fields {\n            slug\n          }\n          frontmatter {\n            date(formatString: \"MMMM DD, YYYY\")\n            title\n            description\n          }\n        }\n      }\n    }\n  }\n`\n","import React from \"react\"\nimport styled from \"styled-components\"\n\nconst Button = props => (\n  <ButtonWrapper props={props}>{props.children}</ButtonWrapper>\n)\n\nconst ButtonWrapper = styled.button`\n  display: block;\n  border: none;\n  text-align: center;\n  box-sizing: border-box;\n  text-decoration: none;\n  padding: 10px 25px;\n  cursor: pointer;\n  text-transform: uppercase;\n  letter-spacing: 2px;\n\n  background: ${props => props.props.background || \"black\"};\n  color: ${props => props.props.color || \"rgb(255, 255, 255)\"};\n  font-size: ${props => props.props.fontSize || \"15px\"};\n  font-weight: ${props => props.props.fontWeight || \"600\"};\n  border-radius: ${props => props.props.radius || \"6px\"};\n  margin-top: ${props => props.props.marginTop};\n  margin-bottom: ${props => props.props.marginBottom};\n\n  &:hover {\n    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.25);\n  }\n`\n\nexport default Button\n"],"sourceRoot":""}