{"componentChunkName":"component---src-templates-portfolio-tsx","path":"/portfolio/street-lights/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"NETFLIX CLONE\",\n  \"description\": \"This clone website was made using React, Firebase, and Styled Components.\",\n  \"date\": \"2019-06-28T00:00:00.000Z\",\n  \"image\": \"./image.jpg\",\n  \"banner\": \"./banner.jpg\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Row = makeShortcode(\"Row\");\nvar Col = makeShortcode(\"Col\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Row, {\n    mdxType: \"Row\"\n  }, \"Why create a clone website?\"), \"I needed to have a keen eye for layout and color details in order to match the animations according to its original specifications. Being able to accurately convert a design of a popular website allowed me to become proficient at translating mockups and prototypes to webpages.\", mdx(Row, {\n    mdxType: \"Row\"\n  }, \"Access my code and README on Github\"), mdx(\"hr\", null), mdx(\"h2\", null, \"TECHNOLOGIES USED\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"JavaScript\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"React\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"CSS\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"TMDB API Movie Database\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Firebase for deployment\")), mdx(Row, {\n    mdxType: \"Row\"\n  }, mdx(Col, {\n    mdxType: \"Col\"\n  }), mdx(Col, {\n    mdxType: \"Col\"\n  }, mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1200px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/a8ce3a703432c72cdb12493be1332c37/2b460/w2.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"58.333333333333336%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBBAX/xAAVAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAABpPmyKgM//8QAGRAAAgMBAAAAAAAAAAAAAAAAAQIAEBED/9oACAEBAAEFAuWKXYGbW1//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPwEn/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQIBAT8BZ//EABoQAAAHAAAAAAAAAAAAAAAAAAABESBBUYH/2gAIAQEABj8CvAaw3//EABwQAAICAgMAAAAAAAAAAAAAAAABESExQVFxgf/aAAgBAQABPyHLx2DTd4G81QnA2eSuD//aAAwDAQACAAMAAAAQ+P8A/8QAFhEBAQEAAAAAAAAAAAAAAAAAAQAR/9oACAEDAQE/EFhYX//EABYRAQEBAAAAAAAAAAAAAAAAAAEAEf/aAAgBAgEBPxADbf/EABsQAQADAQADAAAAAAAAAAAAAAEAETEhQVGB/9oACAEBAAE/ECFIBot+cWFBuxGsIJz7UtMrwnZQEZvpleif/9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image\",\n    \"title\": \"image\",\n    \"src\": \"/static/a8ce3a703432c72cdb12493be1332c37/e5166/w2.jpg\",\n    \"srcSet\": [\"/static/a8ce3a703432c72cdb12493be1332c37/f93b5/w2.jpg 300w\", \"/static/a8ce3a703432c72cdb12493be1332c37/b4294/w2.jpg 600w\", \"/static/a8ce3a703432c72cdb12493be1332c37/e5166/w2.jpg 1200w\", \"/static/a8ce3a703432c72cdb12493be1332c37/2b460/w2.jpg 1534w\"],\n    \"sizes\": \"(max-width: 1200px) 100vw, 1200px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")))), mdx(Row, {\n    mdxType: \"Row\"\n  }, mdx(Col, {\n    mdxType: \"Col\"\n  }), mdx(Col, {\n    mdxType: \"Col\"\n  }, mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1200px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/1d81f83a2247a8fcead832c4012ba6ac/0a188/w1.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"66%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAECAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABz6YuGIr/xAAYEAADAQEAAAAAAAAAAAAAAAABAhEAEv/aAAgBAQABBQJwoSrk5lhDkbvf/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAHRAAAQIHAAAAAAAAAAAAAAAAAAExAhARISJBkf/aAAgBAQAGPwKHJK7GLyZODIf/xAAdEAEAAgICAwAAAAAAAAAAAAABABEhQTFRcYGR/9oACAEBAAE/IUkRGDrERoLFczpbvctir2R1bfMLW34z/9oADAMBAAIAAwAAABAMD//EABYRAQEBAAAAAAAAAAAAAAAAAAEREP/aAAgBAwEBPxAYTP/EABcRAAMBAAAAAAAAAAAAAAAAAAABESH/2gAIAQIBAT8Qa2lP/8QAGxAAAgMBAQEAAAAAAAAAAAAAAREAITFhkbH/2gAIAQEAAT8QIDUbDwkTQQski/DGGwYcIRdcgMT9jSkhICFuXYuLP//Z')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image\",\n    \"title\": \"image\",\n    \"src\": \"/static/1d81f83a2247a8fcead832c4012ba6ac/e5166/w1.jpg\",\n    \"srcSet\": [\"/static/1d81f83a2247a8fcead832c4012ba6ac/f93b5/w1.jpg 300w\", \"/static/1d81f83a2247a8fcead832c4012ba6ac/b4294/w1.jpg 600w\", \"/static/1d81f83a2247a8fcead832c4012ba6ac/e5166/w1.jpg 1200w\", \"/static/1d81f83a2247a8fcead832c4012ba6ac/d9c39/w1.jpg 1800w\", \"/static/1d81f83a2247a8fcead832c4012ba6ac/0a188/w1.jpg 1908w\"],\n    \"sizes\": \"(max-width: 1200px) 100vw, 1200px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")))), mdx(Row, {\n    mdxType: \"Row\"\n  }, mdx(Col, {\n    mdxType: \"Col\"\n  }), mdx(Col, {\n    mdxType: \"Col\"\n  }), mdx(Col, {\n    mdxType: \"Col\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"NETFLIX CLONE","date":"28 June 2019","description":"This clone website was made using React, Firebase, and Styled Components.","banner":{"publicURL":"/static/42f999413677f4d23d05d4a84fd5efeb/banner.jpg","childImageSharp":{"fluid":{"srcSet":"/static/42f999413677f4d23d05d4a84fd5efeb/9104c/banner.jpg 480w,\n/static/42f999413677f4d23d05d4a84fd5efeb/a6352/banner.jpg 960w,\n/static/42f999413677f4d23d05d4a84fd5efeb/d8255/banner.jpg 1920w,\n/static/42f999413677f4d23d05d4a84fd5efeb/af56c/banner.jpg 2880w,\n/static/42f999413677f4d23d05d4a84fd5efeb/27fce/banner.jpg 3840w,\n/static/42f999413677f4d23d05d4a84fd5efeb/6a059/banner.jpg 6000w","base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwb/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABz8uS1jh//8QAFhABAQEAAAAAAAAAAAAAAAAAABIQ/9oACAEBAAEFAtpSn//EABURAQEAAAAAAAAAAAAAAAAAAAAh/9oACAEDAQE/AYj/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAUEAEAAAAAAAAAAAAAAAAAAAAg/9oACAEBAAY/Al//xAAaEAADAQADAAAAAAAAAAAAAAAAARFRECEx/9oACAEBAAE/IY8I84vEdPEViP/aAAwDAQACAAMAAAAQnz//xAAWEQADAAAAAAAAAAAAAAAAAAAAEVH/2gAIAQMBAT8QVCo//8QAFREBAQAAAAAAAAAAAAAAAAAAACH/2gAIAQIBAT8Qqv/EAB0QAAIBBAMAAAAAAAAAAAAAAAABESExUdFhgZH/2gAIAQEAAT8QTrM+jmeEPAl6B0MUOajZoP/Z","aspectRatio":1.5,"src":"/static/42f999413677f4d23d05d4a84fd5efeb/d8255/banner.jpg","sizes":"(max-width: 1920px) 100vw, 1920px"},"id":"45c4ad72-a075-5035-b0d5-0c8923819192"}}}}},"pageContext":{"slug":"/portfolio/street-lights/"}},"staticQueryHashes":["1139857438","1946588481","2083862410","2213455283","2418326273","3067102388"]}