minor css updates, moving all videos to django site

instances cant load mp4s for some reason, refactored to pul straight from other site

src/components/LibLoader.svelte

@@ -1,22 +0,0 @@
-<svelte:head>
-  <script bind:this={script} src={url}></script>
-</svelte:head>
-
-<script>
-    import { onMount, createEventDispatcher } from 'svelte';
-
-    const dispatch = createEventDispatcher();
-    export let url;
-    let script;
-
-    onMount(async () => {
-        script.addEventListener('load', () => {
-            dispatch('loaded');
-        })
-
-        script.addEventListener('error', (event) => {
-            console.error("something went wrong", event);
-            dispatch('error');
-        });
-    });
-</script>

src/components/Nav.svelte

@@ -1,6 +1,5 @@
 <script>
 	import Social from '../components/Social.svelte';
-	import 'bootstrap/dist/css/bootstrap.min.css';
 	export let segment;
 </script>
 

src/routes/about.svelte

@@ -2,6 +2,7 @@
 	<title>About</title>
 </svelte:head>
 
+<img class="rounded" src="./img/old_photos/desk_colored.jpg" alt="django gif">
 
 <h2>(•_•)</h2>
 
@@ -38,6 +39,11 @@
 <hr>
 
 <style>
+	img{
+        width: 100%;
+        padding: 1em;
+    }
+
 	.container{
 		display: inline-flexbox;
 	}
@@ -56,8 +62,7 @@
 	}
 
 	h2{
-		font-size: 5em;
-		margin: 1em;
+		font-size: large;
 		text-align: center;
 		display: block;
 	}

src/routes/index.svelte

@@ -1,48 +1,36 @@
-<script>
-
-	import { listen_dev } from "svelte/internal";
-
-</script>
-
-<style>
-	h1, figure, p {
-		text-align: center;
-		margin: 0 auto;
-	}
-
-	h1 {
-		font-size: 2.8em;
-		text-transform: uppercase;
-		font-weight: 700;
-		margin: 0 0 0.5em 0;
-	}
-
-	figure {
-		margin: 0 0 1em 0;
-	}
-
-	p {
-		margin: 1em auto;
-	}
-
-	@media (min-width: 480px) {
-		/* h1 {
-			font-size: 4em;
-		} */
-	}
-</style>
-
 <svelte:head>
 	<title>WompMacho.com</title>
 </svelte:head>
 
-<figure class="">
-	<video class="shadow rounded" type="video/mp4" src="video/streamClips.mp4" autoplay="true" loop="true" video muted="true" style="height: 100%; width: 100%; object-fit: cover;" alt="Video Of Clips From Live Stream"></video>
-	<!-- <figcaption>Caption</figcaption> -->
-</figure>
-
-<p><strong></strong></p>
+<img class="rounded" src="./img/old_photos/swordColorBalenced_1.jpg" alt="django gif">
 
 <h1>wadup fool</h1>
 
+<div class="container rounded">
 	<p>Eventually This will be replaced with an embed of the stream when live. Working on other things atm.</p>
+</div>
+
+<style>
+	h1 {
+		text-align: center;
+		font-size: x-large;
+		text-transform: uppercase;
+		font-weight: 700;
+	}
+
+    img{
+        width: 100%;
+        padding: 1em;
+    }
+
+	.container{
+		display: inline-flexbox;
+	}
+
+	p{
+		margin: 1em;
+		border-radius: 5px;
+		padding: 1em;
+		background-color: #333333;
+	}
+</style>

src/routes/livestream.svelte

@@ -3,29 +3,27 @@
 </svelte:head>
 
 <figure class="">
-	<video class="shadow rounded" type="video/mp4" src="video/streamClips.mp4" autoplay="true" loop="true" video muted="true" style="height: 100%; width: 100%; object-fit: cover;" alt="Video Of Clips From Live Stream"></video>
+	<video class="shadow rounded" type="video/mp4" src="https://django.wompmacho.com/static/video/streamClips.mp4" autoplay="true" loop="true" video muted="true" style="height: 100%; width: 100%; object-fit: cover;" alt="Video Of Clips From Live Stream"></video>
 	<!-- <figcaption>Clips From Stream</figcaption> -->
 </figure>
 
 <h1>Live Stream</h1>
-
+<div class="container">
+	<a href="https://discord.gg/pVNnTDA"><img src="https://img.shields.io/discord/238458588169895937?label=Discord&style=plastic" alt="Discord Members Online Shield"></a>
+</div>
 <p>
 	See Discord for latest Announcements and Go-Live Notifications
 </p>
-<a href="https://discord.gg/pVNnTDA"><img src="https://img.shields.io/discord/238458588169895937?label=Discord&style=plastic" alt="Discord Members Online Shield"></a>
 
 <hr>
-	<h4>
+	<h3>
 		Sep 2016 - Present
-	</h4>
+	</h3>
 
 	<p>
 		I have tried to create a fun and unique livestream experience on various streaming platforms. As a result I have developed skills I never thought I would have obtained. It has been hard working to develop my stage. I found myself working in social media engagement, content creation, sound engineering, graphic design, lighting and filmography, animation, coding and dabbling in a multitude of other areas. Over the last few years I have dedicated everything I have to further enhance my stream and become a better entertainer. 
-
-	</p>
-		
-	<p> 
 		I am just having too much fun man.
+
 	</p>
 
 	<p>
@@ -43,17 +41,36 @@
 </div>
 
 <style>
-	hr{
-		background-color: red;
-		max-width: 20vw;
+	.container{
+        display: flex;
+        justify-content: center;
+        margin-bottom: 2em;
+    }
+
+	h1{
+		text-align: center;
+		font-size: x-large;
 	}
 
 	h3{
-		font-size: large;
+		margin-left: 2em;
+		font-size: medium;
 		text-align: center;
 		margin: 1em;
 	}
 
+	p{
+		margin: 1em;
+		border-radius: 5px;
+		padding: 1em;
+		background-color: #333333;
+	}
+
+	hr{
+		background-color: red;
+		max-width: 20vw;
+	}
+
 	a{
         color: #00ff00;
     }

src/routes/projects/_posts.js

@@ -1,143 +0,0 @@
-// Ordinarily, you'd generate this data from markdown files in your
-// repo, or fetch them from a database of some kind. But in order to
-// avoid unnecessary dependencies in the starter template, and in the
-// service of obviousness, we're just going to leave it here.
-
-// This file is called `_posts.js` rather than `posts.js`, because
-// we don't want to create an `/projects/posts` route — the leading
-// underscore tells Sapper not to do that.
-
-const posts = [
-
-
-	{
-		title: 'Audio Visualizer',
-		slug: 'audio-visualizer',
-		html: `
-		<!-- 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>
-		`
-	}
-];
-
-posts.forEach(post => {
-	post.html = post.html.replace(/^\t{3}/gm, '');
-});
-
-export default posts;

src/routes/projects/audio-visualizer.svelte

@@ -51,9 +51,10 @@
 	}
 
 	p{
-        max-width: 70vw;
-        margin: auto;
-        padding-bottom: 1em;
+		margin: 1em;
+		border-radius: 5px;
+		padding: 1em;
+		background-color: #333333;
 	}
 
     h5{

src/routes/projects/django-site.svelte

@@ -22,7 +22,10 @@ I have had many iterations of my personal websites. I mostly use it to collect m
 
 <style>
 	p{
-        margin: auto;
+		margin: 1em;
+		border-radius: 5px;
+		padding: 1em;
+		background-color: #333333;
 	}
 
     a{

src/routes/projects/fractal-tree-app.svelte

@@ -41,7 +41,10 @@
     }
 
 	p{
-        margin: auto;
+		margin: 1em;
+		border-radius: 5px;
+		padding: 1em;
+		background-color: #333333;
 	}
 
     hr{

src/routes/projects/index.svelte

@@ -5,7 +5,7 @@
 <h1>Past and Current Projects</h1>
 
 <figure class="">
-	<video class="shadow rounded" type="video/mp4" src="video/ledCube.mp4" autoplay="true" loop="true" video muted="true" style="height: 100%; width: 100%; object-fit: cover;" alt="Video Of LED Cube I Made"></video>
+	<video class="shadow rounded" type="video/mp4" src="https://django.wompmacho.com/static/video/ledCube.MP4" autoplay="true" loop="true" video muted="true" style="height: 100%; width: 100%; object-fit: cover;" alt="Video Of LED Cube I Made"></video>
 	<figcaption>Led Cube I made on Live Stream</figcaption>
 </figure>
 

src/routes/projects/this-website.svelte

@@ -7,32 +7,37 @@
 <h1>About this website</h1>
 
 <p>
-    This website uses the Svelte/Sapper Web Framework. It is deployed using node and nginx on ubuntu in a gcloud virtual instance. It also utilizes certbot for https. ♥
+    This website was built using the Svelte/Sapper Web Framework. 
+    It is deployed using Node in a GCloud hosted Docker Container. ♥
 </p>
 
 <hr>
 
 <div class="container">
     <img src="img/logo-512.png" alt="Svelte Logo">
-    <img src="img/node.png" alt="Svelte Logo">
-    <img src="img/nginx.png" alt="Svelte Logo">
-    <img src="img/gcloud.png" alt="Svelte Logo">
-    <img src="img/ubuntu.png" alt="Svelte Logo">
-    <img src="img/certbot.png" alt="Svelte Logo">
+    <img src="img/node.png" alt="Node Logo">
+    <img src="img/gcloud.png" alt="GCloud Logo">
+    <img src="img/docker_logo.png" alt="Docker Logo">
+    <img src="img/bootstrap_logo.png" alt="Bootstrap Logo">
+    <img src="img/html_logo.png" alt="HTML Logo">
+    <img src="img/css_logo.png" alt="CSS Logo">
 </div>
 
 <style>
 	p{
-        margin: auto;
+		margin: 1em;
+		border-radius: 5px;
+		padding: 1em;
+		background-color: #333333;
 	}
     
     .container{
-        padding: 5em;
+        padding: 1em;
+        display: block;
     }
 
     img{
         max-height: 6em;
-        display: inline-block;
         margin: auto 1em;
     }
 

src/routes/projects/tuner.svelte

@@ -27,6 +27,13 @@
 <h5>Click on page to enable permissions and start the tuner</h5>
 
 <style>
+	p{
+		margin: 1em;
+		border-radius: 5px;
+		padding: 1em;
+		background-color: #333333;
+	}
+
     #tuner_sketch{
         height: 50vh;
         width: calc(50vh / 1.5);

src/routes/projects/videography.svelte

@@ -41,7 +41,10 @@
 	}
 
 	p{
-        margin: auto;
+		margin: 1em;
+		border-radius: 5px;
+		padding: 1em;
+		background-color: #333333;
 	}
 	
     hr{

src/routes/projects/womp-chat.svelte

@@ -1,5 +1,5 @@
 <svelte:head>
-	<title>About Wompchat Chrome Extension</title>
+	<title>Wompchat Chrome Extension</title>
 </svelte:head>
 
 
@@ -28,7 +28,7 @@
 </p>
 
 <h3>
-    I decided I didn't want to wait and built out something of my own. Find is on the Chrome Store Below. 
+    I decided I didn't want to wait and built out something of my own. Find the extension on the Chrome Store Below. 
 </h3>
 
 <hr>
@@ -42,8 +42,10 @@
     }
 
 	p{
-        margin: auto;
+		margin: 1em;
+		border-radius: 5px;
 		padding: 1em;
+		background-color: #333333;
 	}
 
     a{
@@ -71,10 +73,6 @@
         margin: auto;
     }
 
-    p{
-        margin: auto;
-    }
-
     .gif{
         width: 50%;
         display: block;

src/routes/resume/consulting.svelte

@@ -6,14 +6,27 @@
 
 <!-- Datacenter Operations Engineer -->
 <h3 class="">
-	GIG Description -
-	<span class="twitter">Company</span>
+	Media - <span class="">Melanie Colley Realty</span>
 </h3>
-<span class="twitterIcon right">Special icon</span>
+<span class="iconHere"></span>
+
+<h4 class="">March 2020 - Current</h4>
 
-<h4 class="">March 2016 - Sep 2017</h4>
 <p class="">
-    Info about the consulting gig
+	Social Media Managment, Content Creation, Website Development, Design & SEO, Facebook Ads/Marketing.
+</p>
+
+<hr>
+
+<h3 class="">
+	Media - <span class="">Tabora Farms & Winery</span>
+</h3>
+<span class="iconHere"></span>
+
+<h4 class="">Febuary 2019 - June 2020</h4>
+
+<p class="">
+	Social Media Managment, Website Development, Design & SEO. Tax & Licensing for Wine in multiple States. 
 </p>
 
 <hr>
@@ -26,4 +39,11 @@
 		background-color: red;
 		max-width: 20vw;
 	}
+
+	p{
+		margin: 1em;
+		border-radius: 5px;
+		padding: 1em;
+		background-color: #333333;
+	}
 </style>

src/routes/resume/education.svelte

@@ -65,4 +65,11 @@
 		background-color: red;
 		max-width: 20vw;
 	}
+	
+	p{
+		margin: 1em;
+		border-radius: 5px;
+		padding: 1em;
+		background-color: #333333;
+	}
 </style>

src/routes/resume/esports.svelte

@@ -3,7 +3,7 @@
 </svelte:head>
 
 <figure class="">
-	<video class="shadow rounded" type="video/mp4" src="video/overwatch_clips.mp4" autoplay="true" loop="true" video muted="true" style="height: 100%; width: 100%; object-fit: cover;" alt="Video Of Clips From Live Stream"></video>
+	<video class="shadow rounded" type="video/mp4" src="https://django.wompmacho.com/static/video/overwatch_clips.mp4" autoplay="true" loop="true" video muted="true" style="height: 100%; width: 100%; object-fit: cover;" alt="Video Of Clips From Live Stream"></video>
 	<!-- <figcaption>sup</figcaption> -->
 </figure>
 
@@ -54,6 +54,13 @@
 </p>
 
 <style>
+	p{
+		margin: 1em;
+		border-radius: 5px;
+		padding: 1em;
+		background-color: #333333;
+	}
+
 	h1{
 		text-align: center;
 	}

src/routes/resume/experiance.svelte

@@ -108,9 +108,17 @@
 
 
 <style>
+	p{
+		margin: 1em;
+		border-radius: 5px;
+		padding: 1em;
+		background-color: #333333;
+	}
+	
 	h1{
 		text-align: center;
 	}
+
 	hr{
 		background-color: red;
 		max-width: 20vw;

src/routes/resume/index.svelte

@@ -3,10 +3,24 @@
 </svelte:head>
 
 
-<p>If you are seeing this, you are at my resume Index</p>
+<p>If you are seeing this, you have reached the index of my Resume.</p>
+
+<p>
+    Welcome.
+</p>
+
+<hr>
 
 <style>
+    hr{
+		background-color: red;
+		max-width: 20vw;
+	}
+
 	p{
 		margin: 1em;
+		border-radius: 5px;
+		padding: 1em;
+		background-color: #333333;
 	}
 </style>

src/routes/wompchat.svelte

@@ -1,10 +1,10 @@
 <svelte:head>
-	<title>Wompchat Chrome Extension About</title>
+	<title>Wompchat Chrome Extension</title>
 </svelte:head>
 
 <h1>WompChat</h1>
 
-<img title="WompChat" class="gif rounded" src="/img/womp-chat/full512.png" alt="WompChat Logo" />
+<img title="WompChat" class="gif rounded" src="./img/womp-chat/full512.png" alt="WompChat Logo" />
 
 <h2>Welcome To The Chat</h2>
 

src/template.html

@@ -7,6 +7,8 @@
 		<meta name="theme-color" content="#333333">
 
 		%sapper.base%
+		<!-- BootStrap -->
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
 		<!-- Font Awesome icons (free version)-->
         <script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous"></script>
         <!-- Google fonts-->
@@ -17,7 +19,7 @@
 		<link rel="stylesheet" href="css/global.css">
 		
 		<link rel="manifest" href="manifest.json" crossorigin="use-credentials">
-		<link rel="icon" type="image/png" href="icons/favicon.png">
+		<link rel="icon" href="./icons/favicon.ico" type="image/x-icon" />
 
 		<!-- Sapper creates a <script> tag containing `src/client.js`
 			and anything else it needs to hydrate the app and
@@ -47,5 +49,6 @@
 
 	<!-- jQuery, Popper.js, and Bootstrap JS -->
 	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
-	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
+	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
 </html>

static/video/ledCube.MP4

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:769188788e5e4ed765ed9493318799f8da5f5838dd6838411c69c377ed15f6d7
-size 80651090

static/video/overwatch_clips.mp4

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:6af006d6b5601c69db1fee6c3858ea644790c5e7a2048a8a33186d4d96c93981
-size 104627339

static/video/streamClips.mp4

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:a4d381971f1ba7be31d94fba2c2697aeb86bd030615a94165df315f646f2c33c
-size 200001826