{"componentChunkName":"component---src-templates-project-js","path":"/projects/codepen-challenges/","result":{"data":{"markdownRemark":{"html":"<p>A <a href=\"https://codepen.io/collection/Xermmq\">collection of CodePen experiments</a> created for CodePen’s weekly challenges. My background in music allowed me to base each challenge submission around music, exploiting an underused feature in web development: music and audio.</p>\n<p>The collection includes:</p>\n<ul>\n<li><a href=\"https://codepen.io/sparlos/pen/oOqMGw\">generative music based on prime numbers</a></li>\n<li><a href=\"https://codepen.io/sparlos/pen/gydjdL\">an implementation of the bubble sort algorithm represented using tones</a></li>\n<li><a href=\"https://codepen.io/sparlos/pen/QRwVjp\">an infinitely random starfield where every star creates a tone based on the star’s Y position</a></li>\n<li><a href=\"https://codepen.io/collection/Xermmq\">a visual representation of Steve Reich’s ‘Piano Phase’ using planet orbits</a></li>\n<li><a href=\"https://codepen.io/sparlos/pen/argZay\">a beat creation system where each portion of the beat is represented by a component of a hamburger</a>.</li>\n</ul>\n<p>Every project was implemented using Vue for logic and SCSS for styling. The source code for all of the projects is available for perusal at the CodePen links provided.</p>","frontmatter":{"title":"CodePen Weekly Challenges","tags":"Vue,SCSS,JS,Animation,Algorithms,Design","image":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAACg0lEQVQoz2NQvFKherFTJTlS3tVGycdJ1FRbISXZ4tETEf9gBgYGRmZmRgYmBl4RU+UUH71WVmFlJmYWBjiQv5ypdKFKrSRZNiFYOjFUIthHuTjf5MFVYX9/kGYWFiZGkGYTpWQv3SY2YRVmZlZGRgZGRhDBIHMxSvF8tlZmlrpPkmZQioJ1oGpmjuH948L+XhCbgSQzKycLrzgTvxQrGw/cViagdsk7LrK3w1XXZ6jNy9FaXKY2o0RzQ5fei90CQW4gzdzcjBycDOwcTJxczNw8QAYjEHFwAkmQARKzvCVnRsouiFNZka22olRjRYPygnbFeTNdw4OTdDRiTQ3ijPXjjfVijXTijLTjjHXjTPSBInHGepF6WgyS2iUS2mWKGsEmxh5mVlHGRh7y6iG8GqVLY/P+1+V+q8j9WZnzu7b4b2fzv76uP02VPyuyf1YCBXN/VeUxSBoWSxqWyOsFK+n7qlpnqZoEy+sE8etXzApN+5of/zQ74WVmwpPK5LvTM+/OzX3UlPIyI/5FTsKLbBBikDQoljQoldcKUNNy1jONUNeyU9AN5dermOqX8DY57E5syMOooOupgSdqQo9VBV7OCX4YGfggLvhBQjgQMUgZFIvpFelaJzp6xlu5ptg4R6kYxfLrlU9wj3kc4nE9OfZ2dend0vwHtVUPSwrvVZTcqSq5lZN2Pcj7eogvg5RhsZhuoYFdhqN3hqFNnJlDrIpRAlBzl0PYdRfLSzmZ16dOvjtt8rWJfXdmTL0xsf/2zOlXK0vPujmc9XCCOLtYXDdHTDtTUi9LQjdTWj9PUL+s1TLgkqPFESvzY2aGR4z1TjrbnwnwOWKkC+QeszQ5bm8NRABIBNaxhNqcIwAAAABJRU5ErkJggg==","aspectRatio":1.7777777777777777,"src":"/static/f973077abc19dc00a9229f86e3959822/a2cf9/codepen-challenges.png","srcSet":"/static/f973077abc19dc00a9229f86e3959822/8f8d9/codepen-challenges.png 250w,\n/static/f973077abc19dc00a9229f86e3959822/ddb9e/codepen-challenges.png 500w,\n/static/f973077abc19dc00a9229f86e3959822/a2cf9/codepen-challenges.png 1000w,\n/static/f973077abc19dc00a9229f86e3959822/52e98/codepen-challenges.png 1500w,\n/static/f973077abc19dc00a9229f86e3959822/3897f/codepen-challenges.png 1920w","sizes":"(max-width: 1000px) 100vw, 1000px"}}}}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/projects/codepen-challenges/"}}}