commiting a but load of content huehue

src/routes/projects/_posts.js

@@ -8,46 +8,130 @@
 // underscore tells Sapper not to do that.
 
 const posts = [
+
+
 	{
-		title: 'WompMacho.com',
-		slug: 'this-website',
+		title: 'Audio Visualizer',
+		slug: 'audio-visualizer',
 		html: `
-			<h3>About This Site goes here</h3>
-		`
-	},
-	{
-		title: 'Django Site',
-		slug: 'django',
-		html: `
-			<h3>About Django Site goes here</h3>
-		`
-	},
-	{
-		title: 'Tuner',
-		slug: 'tuner',
-		html: `
-			<h3>About Tuner JS goes here</h3>
-		`
-	},
-	{
-		title: 'Sound Visualizer',
-		slug: 'sound-visualizer',
-		html: `
-			<h3>About Sound Visualizer JS goes here</h3>
-		`
-	},
-	{
-		title: 'Fractal Tree App',
-		slug: 'fractal-tree-java-applet',
-		html: `
-			<h3>About Fractal Tree Java Applet App goes here</h3>
-		`
-	},
-	{
-		title: 'Wompchat Chrome Extension',
-		slug: 'wompchat',
-		html: `
-			<h3>About Wompchat Chrome Extension goes here</h3>
+		<!-- Sound Visualizer Animation -->
+		<div class="animation_container">
+			<div class="animation_inner">
+				<div class="" id="sound_visualizer_canvas"></div>
+				<div class="branding overlay">WompMacho</div>
+				<div class="logo overlay"
+					style="background: url('img/WompLogo.png'); height: 100%; width: 100%; background-size: 30%; background-repeat: no-repeat; background-position: center;">
+				</div>
+			</div>
+		</div>
+
+		<p>
+			Javascript web application utilizing the P5.js libraries to
+			create a visual interpretation of audio. This takes input
+			via microphone or audio being played locally and uses the
+			amplitude of the frequencies to animate lines thats
+			translate into little circles. These circles change color
+			based on the amplitude and fade to alpha when levels are
+			lowered. There is additional CSS animations assisting in the
+			coloring/opacity of the brand name and size manipulation to
+			give the “pulse effect”.
+		</p>
+		<h5>
+			Click on page to enable permissions and allow for audio
+			input. Audio player is available in the bottom left corner.
+		</h5>
+
+		<style>
+			.overlay {
+				position: absolute;
+			}
+
+			/* -- wrapper -- */
+			.animation_inner {
+				height: 100%;
+				width: 100%;
+				object-fit: cover;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				z-index: 1;
+				font-size: 3.5vw;
+				animation: brand_name 10s ease infinite alternate;
+			}
+
+			#sound_visualizer_canvas{
+				height: 100% !important;
+				width: 100% !important;
+			}
+
+			/* --branding -- */
+			.branding {
+				font-family: "Viner Hand ITC";
+				color: white;
+				width: 100%;
+				display: inline-block;
+				text-align: center;
+				z-index: 5;
+			}
+
+			/* -- logo -- */
+			.logo {
+				position: absolute;
+				z-index: 4;
+				animation: size-pulse 15s infinite;
+			}
+
+			.animation_container {
+				height: 40vh;
+				width: 40vw;
+				display: flex;
+				position: relative;
+				margin: 0 auto;
+				justify-content: center;
+				align-items: center;
+			}
+
+			@keyframes brand_name {
+				0% {
+					color: #000;
+					text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF;
+				}
+			
+				50% {
+					color: white;
+					text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF;
+				}
+			
+				100% {
+					color: white;
+					text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #228DFF;
+				}
+			}
+
+			@keyframes size-pulse {
+				0% {
+					transform: scale(0.9);
+				}
+			
+				50% {
+					transform: scale(1);
+				}
+			
+				100% {
+					transform: scale(0.9);
+				}
+			}
+		</style>
+
+		<!-- P5 Lib -->
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
+
+		<!-- ML5 Lib -->
+		<script src="https://unpkg.com/ml5@0.3.1/dist/ml5.min.js"></script>
+
+		<script src="/static/js/sound_visualizer.js"></script>
 		`
 	}
 ];