From eb49fd01fe1faad8bcd9a84552e8bea11843b5fe Mon Sep 17 00:00:00 2001
From: wompmacho <wompmacho+github@gmail.com>
Date: Wed, 18 Nov 2020 01:18:57 -0500
Subject: [PATCH 1/2] updating styling, adding/removing content

---
 src/components/Footer.svelte                  |   4 +-
 src/components/Nav.svelte                     |   3 +-
 src/components/Resume_Nav.svelte              |   2 +-
 src/routes/_layout.svelte                     |   9 +-
 src/routes/about.svelte                       | 103 +++++++++--------
 src/routes/index.svelte                       |  12 +-
 src/routes/livestream.svelte                  |  49 ++++----
 src/routes/projects/_layout.svelte            |   2 -
 src/routes/projects/audio-visualizer.svelte   |  60 ++++++----
 src/routes/projects/django-site.svelte        |   5 +-
 src/routes/projects/fractal-tree-app.svelte   |   5 +-
 src/routes/projects/index.svelte              |   1 +
 src/routes/projects/this-website.svelte       |   3 +-
 src/routes/projects/tuner.svelte              |  56 +++++----
 src/routes/projects/videography.svelte        |   6 +-
 src/routes/projects/womp-chat.svelte          |  63 +++++------
 src/routes/resume/consulting.svelte           |   8 +-
 src/routes/resume/education.svelte            |   4 -
 src/routes/resume/esports.svelte              |   8 +-
 .../{experiance.svelte => experience.svelte}  |  30 +++--
 src/routes/resume/index.svelte                | 107 +++++++++++++++---
 src/routes/wompchat.svelte                    |  95 ++++++++++++----
 static/css/global.css                         |   7 ++
 23 files changed, 426 insertions(+), 216 deletions(-)
 rename src/routes/resume/{experiance.svelte => experience.svelte} (63%)

diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index 312d133..6f9bd37 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -7,8 +7,8 @@
         margin-top: 1em;
         bottom: 0vh;
         width: 100%;
-        height: 60px;
-        line-height: 60px;
+        height: 40px;
+        line-height: 40px;
         background-color: #252526;
     }
 </style>
\ No newline at end of file
diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index 0c20bcc..d982d24 100644
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -27,8 +27,7 @@
 
 	nav {
 		background-color: #323233 !important;
-		border-bottom: 1px solid rgba(255,62,0,0.1);
-		font-weight: 400;
+		padding: 0rem 1rem !important;
 	}
 
 	ul {
diff --git a/src/components/Resume_Nav.svelte b/src/components/Resume_Nav.svelte
index d93af9d..c06f949 100644
--- a/src/components/Resume_Nav.svelte
+++ b/src/components/Resume_Nav.svelte
@@ -4,7 +4,7 @@
 
 <ul class="navbar-nav shadow rounded">
 	<li class="rounded"><a rel=prefetch class="" aria-current="{segment === undefined ? 'page' : undefined}" href="/resume">Michael</a></li>
-	<li class="rounded"><a rel=prefetch aria-current="{segment === 'experiance' ? 'page' : undefined}" href="/resume/experiance">Experiance</a></li>
+	<li class="rounded"><a rel=prefetch aria-current="{segment === 'experience' ? 'page' : undefined}" href="/resume/experience">Experience</a></li>
     <li class="rounded"><a rel=prefetch aria-current="{segment === 'education' ? 'page' : undefined}" href="/resume/education">Education</a></li>
 	<li class="rounded"><a rel=prefetch aria-current="{segment === 'esports' ? 'page' : undefined}" href="/resume/esports">Esports</a></li>
 	<li class="rounded"><a rel=prefetch aria-current="{segment === 'consulting' ? 'page' : undefined}" href="/resume/consulting">Consulting</a></li>
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index 76d87a7..53e28c0 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -17,11 +17,18 @@
 	.spacer{
 		height: 5vh;
 	}
+
+	hr{
+		background-color: red;
+		max-width: 20vw;
+		margin-top: 2em;
+		margin-bottom: 2em;
+	}
 </style>
 
 <Nav {segment}></Nav>
 
-<main class="shadow p-3 mb-5 bg-white rounded">
+<main class="shadow rounded p-3 ">
 	<slot></slot>
 </main>
 
diff --git a/src/routes/about.svelte b/src/routes/about.svelte
index c11d39c..f77960f 100644
--- a/src/routes/about.svelte
+++ b/src/routes/about.svelte
@@ -2,81 +2,94 @@
 	<title>About</title>
 </svelte:head>
 
-<img class="rounded" src="./img/old_photos/desk_colored.jpg" alt="django gif">
+<img class="shadow rounded" src="./img/old_photos/desk_colored.jpg" alt="desk and assorted things">
 
-<h2>(•_•)</h2>
+<h1>(•_•)</h1>
 
 <hr>
 
-<h1>About</h1>
+<div class="spacer"></div>
 
-<div class="container">
+<div class="container shadow rounded">
+	<h2>sup</h2>
 	<p>
-		I am just some guy with a voice who is always thinking about the future. I have been interested in tech my entire life... It started out as a distant admiration for sci-fi shows, video games, learning of amazing people and amazing things. I was obsessed with space… the final frontier. New technology and the tech giants who are creating the future were my everyday bread and butter. 
-	</p>
-
-	<p>
-		This love for tech had the chance to flourish when I found my way into art and music. My artistry enveloped my highschool years. Through my guitar and music I found myself creating a recording studio at home. One thing led to another and I found myself deeply enthralled with audio engineering and building computers to handle the processing. I began tweaking little things, anything I can get my hands on... Eventually I found my way into computer science and IT. I found a new career in fixing and creating... These skills have bled into all parts of my life.
-	</p>
-
-	<p>
-		Esports and Streaming peaked my interest early on but around 2016 I found myself once again wanting to jump into something new. I found myself building machines that pushed as many frames as possible to get that bleeding edge… developing overlays and apps to improve the experience... building new and interactive ways to interact with my viewers on the live stream. 
-	</p>
-	
-	<p>
-		I began playing with virtual machines, arduino, raspberry pi, docker containers and bare-metal machines. I started hosting websites and game servers from home. I developed a community and have been working to become a better entertainer ever since I started streaming. I am always playing with some project so that I can make things better in some way and share it. 
+		I am just some guy with a voice. I have traveled up and down many slopes in life and lived in many places… Found myself in unique situations, surrounded by vastly diverse people…
+		I like tech. I like playing with new things, projects, ideas… 
+		<br><br>
+		Space related things get me randy.
 	</p>
 </div>
 
-<h3>
-	It's crazy how much you can find around you to tweak and make better if you just bother looking. 
-</h3>
+<div class="spacer"></div>
 
-<h4>
-	I don’t plan on stopping.
-</h4>
+<div class="container shadow rounded">
+	<h2>Q&A</h2>
+	<p>
+		<question>You should be/are you a voice Actor?!</question>
+		<answer>I am not, but am interested. business inquiries at wompmacho@gmail.com</answer>
+		<question>Why are you wearing glasses?</question>
+		<answer>Cause I’m pretty… also cause when i started streaming i had very bad lights and they were blinding and idk… it became a thing.</answer>
+		<question>Where are you from?</question>
+		<answer>All over. Alabama, Georgia, Pennsylvania, New York, North Carolina, United Kingdom. I grew up in many places. </answer>
+		<question>How old are you?</question>
+		<answer>no u</answer>
+		<question>Why WompMacho?</question>
+		<answer>cuz waz drunk and game we were playing cut my dumb name choice to this and for whatever reason it was hilarious at the time</answer>
+		<question>How Long Have You Been Streaming?</question>
+		<answer>I dabbeled on and off on another channel... but I truely started in Sep 2016</answer>
+	</p>
+</div>
+
+<div class="spacer"></div>
 
 <hr>
 
 <style>
+	.spacer{
+		margin: 2em;
+	}
+
+	question{
+		display: block;
+		width: 100%;
+		font-weight: 700;
+	}
+
+	answer{
+		display: block;
+		width: 100%;
+		padding-bottom: 1em;
+	}
+
 	img{
         width: 100%;
-        padding: 1em;
     }
 
 	.container{
-		display: inline-flexbox;
-	}
-
-	p{
-		margin: 1em;
-		border-radius: 5px;
 		padding: 1em;
+		display: inline-flexbox;
 		background-color: #333333;
 	}
 
+	p{
+		margin: auto;
+		padding: 2em;
+		min-width: 40vw;
+	}
+
 	h1{
-		font-size: larger;
+		font-size: xx-large;
 		text-align: center;
-		margin: 1em;
+		display: block;
+		padding: 1em;
+		font-weight: 900;
 	}
 
 	h2{
-		font-size: large;
+		font-size: x-large;
 		text-align: center;
 		display: block;
-	}
-
-	h3{
-		margin: 1em;
-		font-size: medium;
-		text-align: center;
-	}
-
-	h4{
-		margin: 1em;
-		font-size: medium;
-		text-align: center;
+		font-weight: 600;
 	}
 
 	hr{
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 3f6fa73..49f6301 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -2,16 +2,17 @@
 	<title>WompMacho.com</title>
 </svelte:head>
 
-<img class="rounded" src="./img/old_photos/swordColorBalenced_1.jpg" alt="django gif">
+<img class="shadow rounded" src="./img/old_photos/swordColorBalenced_1.jpg" alt="GOT sword and various items on desk">
 
 <h1>yo</h1>
 
-<div class="container rounded">
+<div class="container shadow rounded">
 	<p>Eventually This will be replaced with an embed of the stream when live. Working on other things atm.</p>
 </div>
 
 <style>
 	h1 {
+		padding: 1em;
 		text-align: center;
 		font-size: x-large;
 		text-transform: uppercase;
@@ -20,17 +21,16 @@
 
     img{
         width: 100%;
-        padding: 1em;
     }
 
 	.container{
+		padding: 1em;
 		display: inline-flexbox;
+		background-color: #333333;
 	}
 
 	p{
-		margin: 1em;
-		border-radius: 5px;
+		margin: auto;
 		padding: 1em;
-		background-color: #333333;
 	}
 </style>
\ No newline at end of file
diff --git a/src/routes/livestream.svelte b/src/routes/livestream.svelte
index 886095f..763eabb 100644
--- a/src/routes/livestream.svelte
+++ b/src/routes/livestream.svelte
@@ -7,31 +7,34 @@
 	<!-- <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>
+<div class="spacer"></div>
 
 <hr>
-	<h3>
-		Sep 2016 - Present
-	</h3>
+
+<div class="spacer"></div>
+
+<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 class="spacer"></div>
+
+<div class="container shadow rounded">
+	<h1>Live Stream</h1>
 
 	<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. 
+		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. 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. 
+		<br><br>
 		I am just having too much fun man.
-
 	</p>
 
-	<p>
-		I hope you are too. ♥
-	</p>
-	
+	<h3>I hope you are too. ♥</h3>
+</div>
+
+<div class="spacer"></div>
+
 <hr>
 
+<div class="spacer"></div>
+
 <h3>Find the Live Stream on Youtube, Facebook or Twitch</h3>
 
 <div class="d-flex justify-content-center align-middle">
@@ -41,15 +44,21 @@
 </div>
 
 <style>
+	.spacer{
+		margin: 2em;
+	}
+
 	.container{
         display: flex;
+		flex-direction: column;
         justify-content: center;
-        margin-bottom: 2em;
+		background-color: #333333;
     }
 
 	h1{
 		text-align: center;
 		font-size: x-large;
+		padding: 1em;
 	}
 
 	h3{
@@ -57,13 +66,14 @@
 		font-size: medium;
 		text-align: center;
 		margin: 1em;
+		font-weight: 700;
 	}
 
 	p{
-		margin: 1em;
+		margin: auto;
 		border-radius: 5px;
 		padding: 1em;
-		background-color: #333333;
+
 	}
 
 	hr{
@@ -73,6 +83,7 @@
 
 	a{
         color: #00ff00;
+		text-align: center;
     }
 	
     a:hover{
diff --git a/src/routes/projects/_layout.svelte b/src/routes/projects/_layout.svelte
index 69790d7..6ede3e7 100644
--- a/src/routes/projects/_layout.svelte
+++ b/src/routes/projects/_layout.svelte
@@ -23,8 +23,6 @@
 		background-color: #252526 !important;
 		padding: 2em;
 		box-sizing: border-box;
-		margin-top: 1em;
-		margin-left: 1em;
 		width: 100%;
 		overflow: hidden;
 	}
diff --git a/src/routes/projects/audio-visualizer.svelte b/src/routes/projects/audio-visualizer.svelte
index 64d4fa6..5c884f0 100644
--- a/src/routes/projects/audio-visualizer.svelte
+++ b/src/routes/projects/audio-visualizer.svelte
@@ -17,20 +17,22 @@
 
 <h1>Audio Visualizer</h1>
 
-<p>
-    A Javascript web application utilizing the P5.js library to
-    create a visual interpretation of audio. This takes input
-    via microphone or audio being played on client webpage and uses the
-    amplitude of the frequencies to animate lines that is
-    translated into little circles. 
-</p>
-<p>
-    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>
+<div class="container shadow rounded">
+    <p>
+        A Javascript web application utilizing the P5.js library to
+        create a visual interpretation of audio. This takes input
+        via microphone or audio being played on client webpage and uses the
+        amplitude of the frequencies to animate lines that is
+        translated into little circles. 
+    </p>
+    <p>
+        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>
+</div>
 
 <hr>
 
@@ -39,10 +41,33 @@
     input.
 </h5>
 
+<a rel=prefetch href="https://github.com/wompmacho/fractal-tree-draw"><i class="fab fa-github fa-3x"></i></a>
+
+
 <style>
+    a{
+        margin-top: 1em;
+        padding: 1em;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #00ff00;
+    }
+    
+    a:hover{
+        background-color: #1e1e1e;
+        color: red;
+    }
+
+    .container{
+        padding: 1em;
+		background-color: #333333;
+    }
+
     h1{
         font-size: x-large;
         margin: 1em;
+        text-align: center;
     }
 
 	hr{
@@ -50,13 +75,6 @@
 		max-width: 20vw;
 	}
 
-	p{
-		margin: 1em;
-		border-radius: 5px;
-		padding: 1em;
-		background-color: #333333;
-	}
-
     h5{
         font-size: smaller;
         max-width: 40vw;
diff --git a/src/routes/projects/django-site.svelte b/src/routes/projects/django-site.svelte
index 4415590..cfd61ef 100644
--- a/src/routes/projects/django-site.svelte
+++ b/src/routes/projects/django-site.svelte
@@ -2,7 +2,7 @@
 	<title>Django Site</title>
 </svelte:head>
 
-<img class="rounded" src="gif/django.gif" alt="django gif">
+<img class="shadow rounded" src="gif/django.gif" alt="django gif">
 
 <hr>
 
@@ -34,6 +34,7 @@ I have had many iterations of my personal websites. I mostly use it to collect m
         display: flex;
         justify-content: center;
         align-items: center;
+        color: #00ff00;
     }
 
     a:hover{
@@ -44,11 +45,11 @@ I have had many iterations of my personal websites. I mostly use it to collect m
     h1{
         font-size: x-large;
         margin: 1em;
+        text-align: center;
     }
 
     img{
         width: 100%;
-        padding: 1em;
     }
 
     hr{
diff --git a/src/routes/projects/fractal-tree-app.svelte b/src/routes/projects/fractal-tree-app.svelte
index 398aa30..39c929a 100644
--- a/src/routes/projects/fractal-tree-app.svelte
+++ b/src/routes/projects/fractal-tree-app.svelte
@@ -2,13 +2,13 @@
 	<title>Fractal Tree Java Applet</title>
 </svelte:head>
 
-<img class="rounded" src="gif/FractalTree.gif" alt="Svelte Logo">
+<img class="shadow rounded" src="gif/FractalTree.gif" alt="Svelte Logo">
 
 <hr>
 
 <h1>Fractal Tree Java Applet</h1>
 
-<p>
+<p class="shadow rounded">
     This is a simple Java application that demonstrates recursion by visualizing a fractal tree. It takes in an input for length, angle and the number of child nodes and draws to a canvas. These inputs can then be manipulated by the sliders and text field. It utilizes Java, JavaFX, FXML and CSS.
 </p>
 
@@ -33,6 +33,7 @@
 
     h1{
         font-size: x-large;
+        text-align: center;
     }
 
     img{
diff --git a/src/routes/projects/index.svelte b/src/routes/projects/index.svelte
index 947fdde..59e1b56 100644
--- a/src/routes/projects/index.svelte
+++ b/src/routes/projects/index.svelte
@@ -13,6 +13,7 @@
 	h1{
 		text-align: center;
 	}
+	
 	figcaption{
 		text-align: center;
 	}
diff --git a/src/routes/projects/this-website.svelte b/src/routes/projects/this-website.svelte
index f0a8674..791b215 100644
--- a/src/routes/projects/this-website.svelte
+++ b/src/routes/projects/this-website.svelte
@@ -6,7 +6,7 @@
 
 <h1>About this website</h1>
 
-<p>
+<p class="shadow rounded">
     This website was built using the Svelte/Sapper Web Framework. 
     It is deployed using Node in a GCloud hosted Docker Container. ♥
 </p>
@@ -44,6 +44,7 @@
     h1{
         font-size: x-large;
         margin: 1em;
+        text-align: center;
     }
 
     hr{
diff --git a/src/routes/projects/tuner.svelte b/src/routes/projects/tuner.svelte
index 1c4a177..9dceeae 100644
--- a/src/routes/projects/tuner.svelte
+++ b/src/routes/projects/tuner.svelte
@@ -8,31 +8,48 @@
 
 <h1>JavaScript Guitar Tuner</h1>
 
-<p>
-    JavaScript web app that uses a microphone as input and
-    displays frequency, note and a helper line to assist in
-    tuning accuracy. Everything is drawn on a canvas including
-    the background guitar image.
-</p>
-
-<p>
-    Application utilizes P5.js library as
-    well as ML5.js for a pitch detection assistance.
-    Additionally notes and frequencies are fetched via a JSON
-    library hosted on Github.
-</p>
+<div class="container shadow rounded">
+    <p>
+        JavaScript web app that uses a microphone as input and
+        displays frequency, note and a helper line to assist in
+        tuning accuracy. Everything is drawn on a canvas including
+        the background guitar image.
+    </p>
+    
+    <p>
+        Application utilizes P5.js library as
+        well as ML5.js for a pitch detection assistance.
+        Additionally notes and frequencies are fetched via a JSON
+        library hosted on Github.
+    </p>
+</div>
 
 <hr>
 
 <h5>Click on page to enable permissions and start the tuner</h5>
 
+<a rel=prefetch href="https://github.com/wompmacho/fractal-tree-draw"><i class="fab fa-github fa-3x"></i></a>
+
+
 <style>
-	p{
-		margin: 1em;
-		border-radius: 5px;
-		padding: 1em;
+    a{
+        margin-top: 1em;
+        padding: 1em;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #00ff00;
+    }
+    
+    a:hover{
+        background-color: #1e1e1e;
+        color: red;
+    }
+
+    .container{
+        padding: 1em;
 		background-color: #333333;
-	}
+    }
 
     #tuner_sketch{
         height: 50vh;
@@ -48,6 +65,7 @@
     h1{
         font-size: x-large;
         margin: 1em;
+        text-align: center;
     }
 
     h5{
@@ -58,8 +76,6 @@
     }
 </style>
 
-
-
 <script>
     import { onMount } from "svelte";
     import { onDestroy } from 'svelte'
diff --git a/src/routes/projects/videography.svelte b/src/routes/projects/videography.svelte
index 6b16bf1..af2bbf8 100644
--- a/src/routes/projects/videography.svelte
+++ b/src/routes/projects/videography.svelte
@@ -2,14 +2,15 @@
 	<title>Videography</title>
 </svelte:head>
 
-<div class="container">
+<div class="container shadow rounded">
 	<iframe rel="prefetch" title="Real Estate Video" alt="Real Estate Video" src="https://www.youtube.com/embed/-DN8mhOxeKQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
+
 <hr>
 
 <h1>Videography</h1>
 
-<p>
+<p class="shadow rounded">
 	I do Real Estate Videography. 
 	You can find some of my clients videos on YouTube
 </p>
@@ -55,6 +56,7 @@
     h1{
         font-size: x-large;
         margin: 1em;
+		text-align: center;
     }
 
 	h3{
diff --git a/src/routes/projects/womp-chat.svelte b/src/routes/projects/womp-chat.svelte
index 981cfae..68fccbf 100644
--- a/src/routes/projects/womp-chat.svelte
+++ b/src/routes/projects/womp-chat.svelte
@@ -3,57 +3,58 @@
 </svelte:head>
 
 
-<img class="gif rounded" src="https://storage.googleapis.com/womp-website_cloudbuild/cdn/wompchat/gif/emotesMenu.gif" alt="WompChat Emote Menu Gif">
+<img class="gif shadow rounded" src="https://storage.googleapis.com/womp-website_cloudbuild/cdn/wompchat/gif/emotesMenu.gif" alt="WompChat Emote Menu Gif">
 
-
-<a class="rounded" rel=prefetch href="/wompchat"><img class="logo_icon" src="img/womp-chat/icon512.png" alt="WompChat Icon"></a>
-
-<h3>WompChat Extension Website</h3>
+<div class="spacer"></div>
 
 <hr>
 
 <h1>WompChat Chrome Extension</h1>
 
-<p>
-    This is a little venture I went on for my chat ♥    
-</p>
+<div class="container shadow rounded">
 
-<p>
-    After playing around with live streaming on other popular platforms such as YouTube. I found the lack of features frustrating. Twitch got one thing right: it built a quality live-chat and created opportunities for community building.
-    To build on this; other great devs built out browser extensions to further add to the quality of life features, bringing with it Emoticons and even more community building. 
-</p>
-
-<p>
-    Though I do love these platforms, none of them have yet built out features for youtube.
-</p>
+    <p>
+        This is a little venture I went on for my chat ♥    
+        <br><br>
+        After playing around with live streaming on other popular platforms such as YouTube. I found the lack of features frustrating. Twitch got one thing right: it built a quality live-chat and created opportunities for community building.
+        To build on this; other great devs built out browser extensions to further add to the quality of life features, bringing with it Emoticons and even more community building. 
+        <br><br>
+        Though I do love these apps, none of them have yet built out features for youtube.
+    </p>
+</div>
 
 <h3>
-    I decided I didn't want to wait and built out something of my own. Find the extension on the Chrome Store Below. 
+    I decided I didn't want to wait and built out something of my own. 
 </h3>
 
 <hr>
 
-<a rel=prefetch href="https://chrome.google.com/webstore/search/wompmacho"><i class="rounded fab fa-chrome fa-3x"></i></a>
+<h3>Chrome Web Store</h3>
+<a rel=prefetch href="https://chrome.google.com/webstore/search/wompchat"><i class="rounded fab fa-chrome fa-3x"></i></a>
+<h3>Extension Page</h3>
+<a class="rounded" rel=prefetch href="/wompchat"><img class="logo_icon" src="img/womp-chat/icon512.png" alt="WompChat Icon"></a>
 
 
 <style>
+    .spacer{
+        padding: 1em;
+    }
+    
+    .container{
+		padding: 1em;
+		background-color: #333333;
+    }
+
     .logo_icon{
         height: 3.5em;
     }
 
-	p{
-		margin: 1em;
-		border-radius: 5px;
-		padding: 1em;
-		background-color: #333333;
-	}
-
     a{
-        margin-top: 1em;
         padding: 1em;
         display: flex;
         justify-content: center;
         align-items: center;
+        color: #00ff00;
     }
     
     a:hover{
@@ -64,13 +65,16 @@
     h1{
         font-size: x-large;
         margin: 1em;
+        text-align: center;
     }
 
     h3{
-        font-size: smaller;
+        padding: 1em;
         text-align: center;
         max-width: 30vw;
         margin: auto;
+        font-weight: 700;
+        font-size: medium;
     }
 
     .gif{
@@ -78,9 +82,4 @@
         display: block;
         margin: auto;
     }
-
-    hr{
-		background-color: red;
-		max-width: 20vw;
-	}
 </style>
\ No newline at end of file
diff --git a/src/routes/resume/consulting.svelte b/src/routes/resume/consulting.svelte
index bf914f4..a422a34 100644
--- a/src/routes/resume/consulting.svelte
+++ b/src/routes/resume/consulting.svelte
@@ -12,7 +12,7 @@
 
 <h4 class="">March 2020 - Current</h4>
 
-<p class="">
+<p class="shadow rounded">
 	Social Media Managment, Content Creation, Website Development, Design & SEO, Facebook Ads/Marketing.
 </p>
 
@@ -25,7 +25,7 @@
 
 <h4 class="">Febuary 2019 - June 2020</h4>
 
-<p class="">
+<p class="shadow rounded">
 	Social Media Managment, Website Development, Design & SEO. Tax & Licensing for Wine in multiple States. 
 </p>
 
@@ -35,10 +35,6 @@
 	h1{
 		text-align: center;
 	}
-	hr{
-		background-color: red;
-		max-width: 20vw;
-	}
 
 	p{
 		margin: 1em;
diff --git a/src/routes/resume/education.svelte b/src/routes/resume/education.svelte
index 9f58c22..6738266 100644
--- a/src/routes/resume/education.svelte
+++ b/src/routes/resume/education.svelte
@@ -61,8 +61,4 @@
 	h4{
 		font-size: small;
 	}
-	hr{
-		background-color: red;
-		max-width: 20vw;
-	}
 </style>
\ No newline at end of file
diff --git a/src/routes/resume/esports.svelte b/src/routes/resume/esports.svelte
index c158b34..42cdf51 100644
--- a/src/routes/resume/esports.svelte
+++ b/src/routes/resume/esports.svelte
@@ -14,7 +14,7 @@
 <span class="overwatchIcon right"></span>
 
 <h4 class="">Sep 2017 - Present</h4>
-<p>
+<p class="shadow rounded">
 	As a T3 Overwatch Coach I have had the unique opportunity to engage with people
 	of all ages and backgrounds looking to improve, master their abilities and join the path to becoming
 	professionals in esports. I have worked closely with multiple teams and individuals and assisted
@@ -37,7 +37,7 @@
 <h3><span class="skycru">Skycru Alpha</span> Esports Captain</h3>
 <span class="skycruIcon right"></span>
 <h4>October 2017 - May 2018</h4>
-<p>
+<p class="shadow rounded">
 	As captain of Skycru Esports Alpha team I worked diligently to motivate, coordinate and inspire
 	young individuals working to go pro in the Overwatch scene. Coordinating with coaches and management
 	I helped bring together 4.3K sr T3 team that participated in the following tournaments.</p>
@@ -46,7 +46,7 @@
 	<li>ZOTAC CUP Overwatch Community Tournament #16 - North America</li>
 	<li>ZOTAC CUP Overwatch Community Tournament #19 - North America</li>
 </ul>
-<p>
+<p class="shadow rounded">
 	As captain I devised schedules, scrim plans, provided scouting, planned compositions and worked with
 	coaches to create strategies. With past experience, provided technical support to players and
 	streamers, worked as an analyst, provided social media management and graphic design for the team. I
@@ -67,5 +67,7 @@
 	hr{
 		background-color: red;
 		max-width: 20vw;
+		margin-top: 2em;
+		margin-bottom: 2em;
 	}
 </style>
\ No newline at end of file
diff --git a/src/routes/resume/experiance.svelte b/src/routes/resume/experience.svelte
similarity index 63%
rename from src/routes/resume/experiance.svelte
rename to src/routes/resume/experience.svelte
index bba93ec..e6f14da 100644
--- a/src/routes/resume/experiance.svelte
+++ b/src/routes/resume/experience.svelte
@@ -1,22 +1,22 @@
 <svelte:head>
-	<title>Experiance</title>
+	<title>Experience</title>
 </svelte:head>
 
 
-<h1>Experiance</h1>
+<h1>Experience</h1>
 
 
 <!-- Datacenter Operations Engineer -->
 <h3 class="">
 	Datacenter Operations Engineer -
-	<span class="twitter">Twitter</span>
+	<span class="twitter"><span class="google" style='color:#156aeb'>Twitter</span></span>
 	<span class="inc">Inc.</span>
 </h3>
 <span class="twitterIcon right"></span>
 
 
 <h4 class="">March 2016 - Sep 2017</h4>
-<p class="">Site operations, DataCenter team lead. Managed, hired and trained DC operations engineers.
+<p class="shadow rounded">Site operations, DataCenter team lead. Managed, hired and trained DC operations engineers.
 	Maintaining
 	infrastructure and bringing sites up to and surpassing SLAs cross country at Sacramento and
 	Atlanta
@@ -31,12 +31,12 @@
 
 <!-- Site Operations (STA) -->
 <h3 class="">Site Operations (STA) -
-	<span class="twitter">Twitter</span>
+	<span class="twitter"><span class="google" style='color:#156aeb'>Twitter</span></span>
 	<span class="inc">Inc.</span>
 </h3>
 
 <h4 class="">April 2015 – March 2016</h4>
-<p class="">My time at Twitter has given me a unique opportunity to learn and grow. Operating in one of
+<p class="shadow rounded">My time at Twitter has given me a unique opportunity to learn and grow. Operating in one of
 	the
 	largest web-scale data centers in the world I have had the privilege to be a part of a team
 	dedicated to maintaining critical infrastructure to the Twitter production environment. I
@@ -67,7 +67,7 @@
 <span class="googleIcon right "></span>
 
 <h4 class="">November 2012 – March 2015</h4>
-<p class="">As an OTA/OA at Google, I have been responsible for being a part of a cooperative that is
+<p class="shadow rounded">As an OTA/OA at Google, I have been responsible for being a part of a cooperative that is
 	dedicated
 	to maintaining the Google infrastructure. I have been personally responsible for the repair of
 	server equipment and targeting machines by importance of priority towards SLA Goals. I have also
@@ -85,7 +85,7 @@
 		Claws</span>
 </h3>
 <h4 class="">August 2010 – April 2011</h4>
-<p class="">As a pet care specialist at Fins Feathers Paws & claws, I have been responsible for the
+<p class="shadow rounded">As a pet care specialist at Fins Feathers Paws & claws, I have been responsible for the
 	welfare and
 	wellbeing of thousands of animals. I have strived to support the customer in making the right
 	choices for their animals, educating them on the proper care for each animal and working hard to
@@ -99,11 +99,21 @@
 
 <hr>
 
+<!-- Assistant Store Manager - Half Note Cards & Gifts  -->
+<h3 class="">Assistant Store Manager - <span class="tabora">Half Note Cards & Gifts</span>
+</h3>
+<h4 class="">March 2007 - May 2009</h4>
+<p class="shadow rounded">
+	As an Assistant Manager at Half Note Cards & Gifts, I worked as customer service and support, cleaned and maintained the store, worked as a sales agent, maintained security and worked as cashier. I was a balloon specialist and on call for the store for over a year. I did everything from Janitorial duties to stocking and assisting the elderly in reading and finding the right products and services. I was proud to be a model employee, maintaining and profitable efficient store while caring for the interest of the customers.
+</p>
+
+<hr>
+
 <!-- General Laborer - Tabora Farms & Orchard  -->
 <h3 class="">General Laborer - <span class="tabora">Tabora Farms & Orchard</span>
 </h3>
 <h4 class="">June 2004 – September 2006</h4>
-<p class="">Tabora Farms & Orchard was a family owned bussiness. I was responsible for cleaning and maintaining a bakery and deli. I performed janitorial duties as well as assisting customers in finding their products. In this family owned business I assisted in ice cream production, cider production, picking and sorting fruits and vegetables, caring for animal livestock, stocking, baking, planting and groundskeeping. I worked hard to maintain an efficient workflow and a friendly environment in the hopes of always attracting more customers. I assisted in all work to be performed at a bakery from selling goods at local farmers markets to rolling dough for pies. I strived to work hard and benefit my employer and grandfather at this wonderful country shoppe in the rolling hills of Pennsylvania.
+<p class="shadow rounded">Tabora Farms & Orchard was a family owned bussiness. I was responsible for cleaning and maintaining a bakery and deli. I performed janitorial duties as well as assisting customers in finding their products. In this family owned business I assisted in ice cream production, cider production, picking and sorting fruits and vegetables, caring for animal livestock, stocking, baking, planting and groundskeeping. I worked hard to maintain an efficient workflow and a friendly environment in the hopes of always attracting more customers. I assisted in all work to be performed at a bakery from selling goods at local farmers markets to rolling dough for pies. I strived to work hard and benefit my employer and grandfather at this wonderful country shoppe in the rolling hills of Pennsylvania.
 </p>
 
 
@@ -122,5 +132,7 @@
 	hr{
 		background-color: red;
 		max-width: 20vw;
+		margin-top: 2em;
+		margin-bottom: 2em;
 	}
 </style>
\ No newline at end of file
diff --git a/src/routes/resume/index.svelte b/src/routes/resume/index.svelte
index 1d43b57..1cdc0ac 100644
--- a/src/routes/resume/index.svelte
+++ b/src/routes/resume/index.svelte
@@ -1,26 +1,107 @@
 <svelte:head>
-	<title>Resume</title>
+	<title>Resume About</title>
 </svelte:head>
 
+<h3 class="shadow rounded">
+	If you are seeing this, you have reached the index of my Resume. 
+	<br>
+	Please so not share the information that you find here.
+</h3>
 
-<p>If you are seeing this, you have reached the index of my Resume.</p>
+<hr>
 
-<p>
-    Welcome.
-</p>
+<img class="shadow rounded" src="./img/old_photos/guitarGear.jpg" alt="Guitar Gear"> 
+
+<hr>
+
+<h1>About Me</h1>
+
+<section class="content shadow rounded">
+
+	<p>
+		I have traveled up and down many slopes of life and lived in many places… Found myself in unique situations, surrounded by vastly diverse people and working on projects that are on all ends of the spectrum. 
+	</p>
+
+	<div class="container">
+		<ul>
+			<li>Art</li>
+			<li>Music</li>
+			<li>Graphic Design</li>
+			<li>Computers Science</li>
+			<li>I.T.</li>
+			<li>Computer Engineering</li>
+			<li>Live Streaming</li>
+			<li>Youtube</li>
+			<li>Unmanned Aircraft</li>
+			<li>Photography / Videography</li>
+			<li>Analytics</li>
+			<li>Esports</li>
+			<li>Coaching</li>
+		</ul>
+	</div>
+
+	<p>
+		These are just a few areas where I have spent considerable time learning and developing skills that are driven by my passion for technology. I love creating, fixing, tweaking, playing with new things, new ideas, new & old concepts… 
+		<br>
+		<br>
+		When I was in highschool I was building computers and recording studios. When I was in College I was building Web Sites and Data Centers. Now I am building myself as an Influencer and Entertainer.
+	</p>
+
+
+	<h4>
+		I don’t know what is next, but I am sure I will never find an end to the new things I can learn.
+	</h4>
+
+</section>
 
 <hr>
 
 <style>
-    hr{
-		background-color: red;
-		max-width: 20vw;
-	}
-
-	p{
-		margin: 1em;
-		border-radius: 5px;
+	.content{
+		margin: auto;
 		padding: 1em;
 		background-color: #333333;
 	}
+
+	.container{
+		text-align: center;
+	}
+
+	ul{
+		display: inline-block;
+		text-align: left;
+	}
+
+	img{
+        width: 100%;
+		border-radius: 5px;
+    }
+
+	p{
+		margin: auto;
+		padding: 1em;
+	}
+
+	h1{
+		font-size: larger;
+		text-align: center;
+		margin: 1em;
+	}
+
+	h3{
+		margin: 1em;
+		padding: 1em;
+		font-size: medium;
+		text-align: center;
+		font-weight: 700;
+		color: #ffffff;
+		border-radius: 5px;
+		background-color: #2e2020;
+	}
+
+	h4{
+		margin: 1em;
+		font-size: medium;
+		text-align: center;
+	}
 </style>
\ No newline at end of file
diff --git a/src/routes/wompchat.svelte b/src/routes/wompchat.svelte
index 22654d2..d49308c 100644
--- a/src/routes/wompchat.svelte
+++ b/src/routes/wompchat.svelte
@@ -4,10 +4,14 @@
 
 <h1>WompChat</h1>
 
-<img title="WompChat" class="gif rounded" src="./img/womp-chat/full512.png" alt="WompChat Logo" />
+<img title="WompChat" class="gif" src="./img/womp-chat/full512.png" alt="WompChat Logo" />
+
+<div class="spacer"></div>
 
 <h2>Welcome To The Chat</h2>
 
+<div class="spacer"></div>
+
 <h4>
     We Are Changing Our Name!
 </h4>
@@ -20,21 +24,22 @@
 
 <div class="container">
     <a href="https://discord.gg/pVNnTDA">
-      <img class="shield" src="https://img.shields.io/discord/238458588169895937?label=Discord&style=plastic" alt="discord shield.io" />
+      <img class="shield shadow rounded" src="https://img.shields.io/discord/238458588169895937?label=Discord&style=plastic" alt="discord shield.io" />
     </a>
     <a href="https://storage.googleapis.com/womp-website_cloudbuild/cdn/wompchat/img/btc.JPG">
-      <img class="shield" src="https://img.shields.io/static/v1?label=BTC&style=plastic&message=3QkKHVyT1nZLEeH8f77bUhXorXKPQs5gzN&color=red" alt="BTC shield.io" />
+      <img class="shield shadow rounded" src="https://img.shields.io/static/v1?label=BTC&style=plastic&message=3QkKHVyT1nZLEeH8f77bUhXorXKPQs5gzN&color=red" alt="BTC shield.io" />
     </a>
     <a href="https://github.com/wompmacho/womp">
-      <img class="shield" alt="GitHub Release Date" src="https://img.shields.io/github/release-date/wompmacho/womp?label=Latest-Release&style=plastic" />
+      <img class="shield shadow rounded" alt="GitHub Release Date" src="https://img.shields.io/github/release-date/wompmacho/womp?label=Latest-Release&style=plastic" />
     </a>
 </div>
 
 <div class="container">
-    <a class="rounded" href="https://discord.gg/pVNnTDA" title="Join our Discord Community"><button type="button" class="btn btn-dark">Join our Discord Community</button></a>
-    <a class="rounded" href="https://streamelements.com/wompmacho-5882/tip" title="Donations"><button type="button" class="btn btn-dark">Donations</button></a>
-    <a class="rounded" href="https://www.youtube.com/wompmacho" title="Youtube"><button type="button" class="btn btn-dark">Youtube</button></a>
-    <a class="rounded" href="mailto:wompmacho@gmail.com" title="Contact"><button type="button" class="btn btn-dark">Contact Me</button></a>
+    <a class="" href="https://discord.gg/pVNnTDA" title="Join our Discord Community"><button type="button" class="btn btn-dark shadow rounded">Join our Discord Community</button></a>
+    <a class="" href="https://streamelements.com/wompmacho-5882/tip" title="Donations"><button type="button" class="btn btn-dark shadow rounded">Donations</button></a>
+    <a class="" href="https://www.youtube.com/wompmacho" title="Youtube"><button type="button" class="btn btn-dark shadow rounded">Youtube</button></a>
+    <a class="" href="mailto:wompmacho@gmail.com" title="Contact"><button type="button" class="btn btn-dark shadow rounded">Contact Me</button></a>
+    <a class="" href="https://chrome.google.com/webstore/search/wompchat" title="WompChat Extension Page"><button type="button" class="btn btn-dark shadow rounded">Web Store</button></a>
 </div>
 
 <hr>
@@ -69,26 +74,32 @@
 
 <hr>
 
+<div class="spacer"></div>
+
 <h3>How To:</h3>
 
 <p>
-  There is still a lot of stuff I am working on. This is very Beta at the moment so 
+  There is still a lot of stuff I am working on. This is very Beta at the moment... <strong>Use At Your Own Risk</strong>
 </p>
 
-<h4>Use At Your Own Risk</h4>
+<div class="spacer"></div>
 
 <p>
   This is a Chrome Extension for Youtube Live Streams, adding some Quality of Life improvements for the Chat. 
   Adds Top, Trending and Global (500ish) Emotes from popular sites. These Update with what is Trending. 
 </p>
 
-<hr>
+<div class="spacer"></div>
 
-<p class="highlight">
+<p class="highlight rounded">
   Don't forget to pin this extension for easy access. 
 </p>
 
-<img class="gif rounded" src="https://storage.googleapis.com/womp-website_cloudbuild/cdn/wompchat/gif/pinYourExtension.gif" alt="pinYourExtension.gif" />
+<div class="spacer"></div>
+
+<img class="gif shadow rounded" src="https://storage.googleapis.com/womp-website_cloudbuild/cdn/wompchat/gif/pinYourExtension.gif" alt="pinYourExtension.gif" />
+
+<div class="spacer"></div>
 
 <p>
   Youtube Live is slow to load its pages currently. 
@@ -96,33 +107,54 @@
   Once you see the Emote Panel Icon you can open the Emote Selection Panel.
 </p>
 
-<img class="gif rounded" src="https://storage.googleapis.com/womp-website_cloudbuild/cdn/wompchat/gif/emotesMenu.gif" alt="emotesMenu.gif" />
+<div class="spacer"></div>
+
+<img class="gif shadow rounded" src="https://storage.googleapis.com/womp-website_cloudbuild/cdn/wompchat/gif/emotesMenu.gif" alt="emotesMenu.gif" />
+
+<div class="spacer"></div>
 
 <p class="highlight">
-  Enhanced Theater Mode Is Now Available. Just click the check in the option panel and refresh your page.
+  Enhanced Theater Mode Is Now Available. 
+  <br>
+  Just click the check in the option panel and refresh your page.
 </p>
 
-<img class="gif rounded" style="height: 540px; width: 960px;" src="https://storage.googleapis.com/womp-website_cloudbuild/cdn/wompchat/gif/theaterMode.gif" alt="theaterMode.gif" />
+<div class="spacer"></div>
+
+<img class="gif shadow rounded" style="height: 540px; width: 100%;" src="https://storage.googleapis.com/womp-website_cloudbuild/cdn/wompchat/gif/theaterMode.gif" alt="theaterMode.gif" />
+
+<div class="spacer"></div>
 
 <p>        
   Over around 500 Top and Trending Emotes are loaded from popular sites. 
   You can Enable/Disable them in the Options Menu.
 </p>
 
-<img class="gif rounded" src="https://storage.googleapis.com/womp-website_cloudbuild/cdn/wompchat/gif/optionsMenu.gif" alt="optionsMenu.gif" />
+<div class="spacer"></div>
+
+<img class="gif shadow rounded" src="https://storage.googleapis.com/womp-website_cloudbuild/cdn/wompchat/gif/optionsMenu.gif" alt="optionsMenu.gif" />
+
+<div class="spacer"></div>
 
 <p>
   Can Also Click on UserNames To Autofill an @ Notification
 </p>
 
-<img class="gif rounded" src="https://storage.googleapis.com/womp-website_cloudbuild/cdn/wompchat/gif/clickUserNamesToAtThem.gif" alt="clickUserNamesToAtThem.gif" />
+<div class="spacer"></div>
+
+<img class="gif shadow rounded" src="https://storage.googleapis.com/womp-website_cloudbuild/cdn/wompchat/gif/clickUserNamesToAtThem.gif" alt="clickUserNamesToAtThem.gif" />
  
+<div class="spacer"></div>
+
 <h3>more on the way, but for now...</h3>
 
 <h2>Enjoy!</h2>
 
-
 <style>
+    .spacer{
+        padding: 2em;
+    }
+
     .btn-dark{
         background-color: #474748 !important;
     }
@@ -132,8 +164,10 @@
 
     .highlight{
         font-weight:700;
-        color: #00ff00;
+        color: #ffffff;
         text-align: center;
+        box-shadow: 0px 0px 15px #ff0000;
+        border-radius: 5px;
     }
 
     .container{
@@ -175,12 +209,13 @@
         padding: 1em;
         background-color: #333333;
         border-radius: 5px;
+        box-shadow: 0px 0px 15px #000000;
     }
 
     a {
 		color: #cccccc;
 		text-decoration: none;
-        margin: .5em;
+        padding: .5em;
 	}
 
 	/* clearfix */
@@ -197,8 +232,22 @@
 
     .gif{
         display: block;
-        height: 50vh;
+        max-height: 50vh;
         margin: auto;
-        padding: 2em;
+    }
+
+    @media only screen and (max-width: 769px) {
+        .container{
+            flex-direction: column;
+        }
+
+        a{
+            margin: 1em auto auto auto;
+        }
+
+        p{
+            margin: auto;
+            max-width: 90vw;
+        } 
     }
 </style>
\ No newline at end of file
diff --git a/static/css/global.css b/static/css/global.css
index a5b8992..1fdcb4c 100644
--- a/static/css/global.css
+++ b/static/css/global.css
@@ -30,6 +30,13 @@ code {
 	border-radius: 2px;
 }
 
+hr{
+	background-color: red;
+	max-width: 20vw;
+	margin-top: 2em;
+	margin-bottom: 2em;
+}
+
 @media (min-width: 400px) {
 	body {
 		font-size: 16px;

From 6f3f1c826dfb9bbdc8fcadc3b23af87e18f81b2c Mon Sep 17 00:00:00 2001
From: wompmacho <wompmacho+github@gmail.com>
Date: Wed, 18 Nov 2020 01:27:14 -0500
Subject: [PATCH 2/2] update links

---
 src/routes/projects/audio-visualizer.svelte | 2 +-
 src/routes/projects/tuner.svelte            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/projects/audio-visualizer.svelte b/src/routes/projects/audio-visualizer.svelte
index 5c884f0..8b2b2c7 100644
--- a/src/routes/projects/audio-visualizer.svelte
+++ b/src/routes/projects/audio-visualizer.svelte
@@ -41,7 +41,7 @@
     input.
 </h5>
 
-<a rel=prefetch href="https://github.com/wompmacho/fractal-tree-draw"><i class="fab fa-github fa-3x"></i></a>
+<a rel=prefetch href="https://github.com/wompmacho/audio-visualizer"><i class="fab fa-github fa-3x"></i></a>
 
 
 <style>
diff --git a/src/routes/projects/tuner.svelte b/src/routes/projects/tuner.svelte
index 9dceeae..e5366d0 100644
--- a/src/routes/projects/tuner.svelte
+++ b/src/routes/projects/tuner.svelte
@@ -28,7 +28,7 @@
 
 <h5>Click on page to enable permissions and start the tuner</h5>
 
-<a rel=prefetch href="https://github.com/wompmacho/fractal-tree-draw"><i class="fab fa-github fa-3x"></i></a>
+<a rel=prefetch href="https://github.com/wompmacho/"><i class="fab fa-github fa-3x"></i></a>
 
 
 <style>