{"componentChunkName":"component---src-templates-project-js","path":"/projects/twitch-recreation/","result":{"data":{"markdownRemark":{"html":"<p><a href=\"https://codepen.io/sparlos/full/JxyRWr\">A recreation of the twitch.tv homepage layout</a> from February 2019; the layout has since been changed. This project nicely showcases my ability to take a completely visual design and implement it in code. All of the CSS (SCSS) was hand-coded and no framework was used. Most of the page was created using flexbox, and all of the SCSS follows the BEM methodology.</p>\n<p>This project was mostly focused on design, so there isn’t much actual functionality. The only exception is the video carousel, which was implemented using Vue. The design is semi-responsive, but doesn’t scale fully down to mobile. This is because at the time the actual twitch.tv main page did not either. <a href=\"https://codepen.io/sparlos/pen/JxyRWr\">You can find the source code here</a>.</p>","frontmatter":{"title":"Twitch Homepage Recreation","tags":"HTML,SCSS,JS,Vue,Design","image":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAADM0lEQVQozyWTf1DTBRTA9091alceXVRznOHRFBY7QGZA0LEcEqBtUsAtzyZ4nOEAAcePIczpNhxbA5wxoYGxAwPL9JAu/6g8rj9QJ/6A6QgiheRKfp0/UuuP7NNXenfv3r139z7v1z1RYsJbhLy4EqvDyVM5NzzMlwPfYnU5MFoOoikykFu2m2Knm4LqWvRGHQW1hzhwxIvF3UbnyX58Z35kYvYBj4V8UbY6G4k4HPenzUvAkjwNCeIQ1sgjCEuKZvWbMt6NexllxkY0uj1EJ6QSG6skSixGsU5K7NoYxMteZfDs4FK+aOsWNS88H0Kzs2kpsL+smGxFDAkbUohJUSLfEE+qLFSwCmQKFeLIJEJXyUiOiyIl6R3U6RlkJK7n6iX//8A0ZdoS0Gl3CO6/3Jn9g7v373JtZITh4cv0f/cVfX2tdPd6aD/2Bd5jXrp6Ohk6/xMXhfXcnvmNe4/+5K+/H/PkyT+I3hcqhEnWYKmv57S3kQGfC49pBzs+1JCv09LXcZizPa2c72/HukdL4fZtGCtLGDjexg/dLXztMbIrL4vN76loa21GtHFTBpLXVrOvuobTei2+nduoi49kt0pJSnoWHaZSjn+UTkuuBkNMBFs3ZZKj/YATtUX0Zqdj2ayi8u04UoRJ29x2RHJ5LC+tDKVir4EKdRp7UxXo1kUgfUOOOkuFtUZPYfJ6KgXdIpUSLpVT9omWmnwtJclx6OOjSVwbTaQsihNdbkTiVyQ898xyzCYz01O3uDoyyu3pW8wLu7x3/wG/ToxzIxgkODbG3O8zzC8ssLiwyPhYkNHAdW5O/sLi3B1m5+Z59PAhorBVr7NMANZbnZz7eYGhCxfouTjBYGCay8Jhuvw38QcmGbwSoPvSFKM3xjnjH+XUtRkC14Oc9I8xcGWKYaGRockZRBIBuOLZFZTW26jy9tJgriPT1omhsYUGmwVVgw+z3U7FQTuZ9i4ctgNsNzehdfk43GAiz9ZOQeNR6vYZcX/z/dMOwwXgcsrrD1Ht6Sa/tIhc12cUmVzsqhK+xOWhuM7CxzVV5Dg+p9xQTY55P4VNHRSXV5BndbDT5kZXqudo3yn+A606JELIMV4SAAAAAElFTkSuQmCC","aspectRatio":1.7777777777777777,"src":"/static/2dffd0de393e0f21288bc82cdfdba3d2/a2cf9/twitch-recreation.png","srcSet":"/static/2dffd0de393e0f21288bc82cdfdba3d2/8f8d9/twitch-recreation.png 250w,\n/static/2dffd0de393e0f21288bc82cdfdba3d2/ddb9e/twitch-recreation.png 500w,\n/static/2dffd0de393e0f21288bc82cdfdba3d2/a2cf9/twitch-recreation.png 1000w,\n/static/2dffd0de393e0f21288bc82cdfdba3d2/52e98/twitch-recreation.png 1500w,\n/static/2dffd0de393e0f21288bc82cdfdba3d2/3897f/twitch-recreation.png 1920w","sizes":"(max-width: 1000px) 100vw, 1000px"}}}}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/projects/twitch-recreation/"}}}