styling changes, cleanup, updated res nav

2020-11-19 19:35:04 -05:00
parent 75d5251af6
commit 62ff8c76d1
13 changed files with 115 additions and 123 deletions
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -4,7 +4,7 @@
 </script>

 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-	<li class="nav-item rounded"><a class="nav-item" rel=prefetch aria-current="{segment === undefined ? 'page' : undefined}" href=".">WompMacho</a></li>
+	<li class="nav-item rounded brand"><a class="nav-item" rel=prefetch aria-current="{segment === undefined ? 'page' : undefined}" href=".">WompMacho</a></li>
 	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 	  <span class="navbar-toggler-icon"></span>
 	</button>
@@ -13,12 +13,11 @@
 	  <ul class="navbar-nav mr-auto">
 		<li class="nav-item rounded"><a class="nav-link" rel=prefetch aria-current="{segment === 'about' ? 'page' : undefined}" href="about">About</a></li>
 		<li class="nav-item rounded"><a class="nav-link" rel=prefetch aria-current="{segment === 'livestream' ? 'page' : undefined}" href="livestream">Live Stream</a></li>
-		<li class="nav-item rounded"><a class="nav-link" rel=prefetch aria-current="{segment === 'projects' ? 'page' : undefined}" href="projects">Fun Stuff</a></li>
+		<li class="nav-item rounded"><a class="nav-link" rel=prefetch aria-current="{segment === 'projects' ? 'page' : undefined}" href="projects">Projects</a></li>
 	  </ul>
 	  <Social></Social>
 	</div>
  </nav>
-
 <style>

 	.navbar-collapse{
@@ -66,6 +65,8 @@
 	}

 	@media only screen and (max-width: 769px) {
-		
+		.nav-link{
+			box-shadow: 0px 0px 2px #000000;
+		}
    }
 </style>
--- a/src/components/ProjNav.svelte
+++ b/src/components/ProjNav.svelte
@@ -61,5 +61,9 @@
 			width: max-content;
 			margin: auto;
        }
+
+		li{
+			box-shadow: 0px 0px 5px #000000;
+		}
    }
 </style>
--- a/src/components/Resume_Nav.svelte
+++ b/src/components/Resume_Nav.svelte
@@ -7,7 +7,6 @@
 	<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 === 'projects' ? 'page' : undefined}" href="/projects" data-toggle="tooltip" title="This will take you away from this page.">Projects</a></li>
 </ul>

 <style>
@@ -34,7 +33,6 @@

 	li {
 		display: block;
-		float: left;
 	}
 	
 	li:hover {
@@ -55,5 +53,9 @@
 			width: max-content;
 			margin: auto;
        }
+
+		li{
+			box-shadow: 0px 0px 5px #000000;
+		}
    }
 </style>
--- a/src/components/Social.svelte
+++ b/src/components/Social.svelte
@@ -22,4 +22,10 @@
    a:hover{
        color: red;
    }
+
+    @media only screen and (max-width: 769px) {
+		.social{
+			padding: 1em;
+		}
+    }
 </style>
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -18,22 +18,14 @@
 	.spacer{
 		height: 5vh;
 	}
-
-	hr{
-		background-color: red;
-		max-width: 20vw;
-		margin-top: 2em;
-		margin-bottom: 2em;
-	}
 </style>

 <Nav {segment}></Nav>

-<main class="shadow rounded p-3 ">
+<main class="shadow rounded p-3">
 	<slot></slot>
 </main>

 <div class="spacer"></div>

-
 <Footer></Footer>
--- a/src/routes/about.svelte
+++ b/src/routes/about.svelte
@@ -8,8 +8,6 @@

 <hr>

-<div class="spacer"></div>
-
 <div class="container shadow rounded">
 	<h2>sup</h2>
 	<p>
@@ -20,7 +18,11 @@
 	</p>
 </div>

-<div class="spacer"></div>
+<hr>
+
+<img class="shadow rounded" src="./img/old_photos/headphonesColorized2.jpg" alt="desk and assorted things">
+
+<hr>

 <div class="container shadow rounded">
 	<h2>Q&A</h2>
@@ -40,15 +42,9 @@
 	</p>
 </div>

-<div class="spacer"></div>
-
 <hr>

 <style>
-	.spacer{
-		margin: 2em;
-	}
-
 	question{
 		display: block;
 		width: 100%;
@@ -81,7 +77,7 @@
 		font-size: xx-large;
 		text-align: center;
 		display: block;
-		padding: 1em;
+		padding-top: 1em;
 		font-weight: 900;
 	}

--- a/src/routes/livestream.svelte
+++ b/src/routes/livestream.svelte
@@ -7,45 +7,36 @@
 	<!-- <figcaption>Clips From Stream</figcaption> -->
 </figure>

-<div class="spacer"></div>
-
 <hr>

-<div class="spacer"></div>
+<h1>Live Stream</h1>

-<a href="https://discord.gg/pVNnTDA"><img src="https://img.shields.io/discord/238458588169895937?label=Discord&style=plastic" alt="Discord Members Online Shield"></a>
+<h3>Find the Live Stream on Youtube, Facebook or Twitch</h3>

-<div class="spacer"></div>
+<div class="d-flex justify-content-center align-middle padd">
+	<a rel=prefetch class="mx-2" href="https://www.youtube.com/wompmacho"><i class="fab fa-youtube fa-3x"></i></a>
+	<a rel=prefetch class="mx-2" href="https://www.twitch.com/wompmacho/"><i class="fab fa-twitch fa-3x"></i></a>
+	<a rel=prefetch class="mx-2" href="https://www.facebook.com/wompmacho"><i class="fab fa-facebook fa-3x"></i></a>
+</div>

 <div class="container shadow rounded">
-	<h1>Live Stream</h1>
+	<a class="padd" href="https://discord.gg/pVNnTDA"><img src="https://img.shields.io/discord/238458588169895937?label=Discord&style=plastic" alt="Discord Members Online Shield"></a>

 	<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. 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>
-
-	<h3>I hope you are too. ♥</h3>
 </div>

-<div class="spacer"></div>
+<h3 class="padd">I hope you are too. ♥</h3>

 <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">
-	<a rel=prefetch class="mx-2" href="https://www.youtube.com/wompmacho"><i class="fab fa-youtube fa-5x"></i></a>
-	<a rel=prefetch class="mx-2" href="https://www.twitch.com/wompmacho/"><i class="fab fa-twitch fa-5x"></i></a>
-	<a rel=prefetch class="mx-2" href="https://www.facebook.com/wompmacho"><i class="fab fa-facebook fa-5x"></i></a>
-</div>
-
 <style>
-	.spacer{
-		margin: 2em;
+
+	.padd{
+		padding: 1em;
 	}

 	.container{
@@ -58,15 +49,12 @@
 	h1{
 		text-align: center;
 		font-size: x-large;
-		padding: 1em;
+		font-weight: 600;
 	}

 	h3{
-		margin-left: 2em;
-		font-size: medium;
+		font-size: small;
 		text-align: center;
-		margin: 1em;
-		font-weight: 700;
 	}

 	p{
@@ -76,11 +64,6 @@

 	}

-	hr{
-		background-color: red;
-		max-width: 20vw;
-	}
-
 	a{
        color: #00ff00;
 		text-align: center;
--- a/src/routes/projects/_layout.svelte
+++ b/src/routes/projects/_layout.svelte
@@ -5,6 +5,7 @@

 <div class="innerMain">
 	<ProjNav {segment}></ProjNav>
+	<br><br>
 	<main class="shadow p-3 mb-5 bg-white rounded">
 		<slot></slot>
 	</main>
--- a/src/routes/resume/_layout.svelte
+++ b/src/routes/resume/_layout.svelte
@@ -5,12 +5,12 @@


 <ResumeNav {segment}></ResumeNav>
-
+<br><br>
 <main class="shadow p-3 mb-5 bg-white rounded">
 	<slot></slot>
 </main>

-<div class="spacer"></div>
+<div class="added_space"></div>

 <style>
 	main {
@@ -23,7 +23,7 @@
 		margin-top: 1em;
 	}

-	.spacer{
+	.added_space{
 		height: 5vh;
 	}
 </style>
--- a/src/routes/resume/education.svelte
+++ b/src/routes/resume/education.svelte
@@ -4,23 +4,26 @@

 <h1>Education</h1>

-<!-- Georgia State University | Clarkston, GA  -->
-<div class="">
-	<h3>Georgia State University | Clarkston, GA</h3>
-	<span class="gaStateIcon right"></span>
-	<h4>Associate's Computer Science</h4>
-	<h4>2012-2017</h4>
-</div>
+<section>
+	<!-- Georgia State University | Clarkston, GA  -->
+	<div class="">
+		<h3>Georgia State University | Clarkston, GA</h3>
+		<span class="gaStateIcon right"></span>
+		<h4>Associate's Computer Science</h4>
+		<h4>2012-2017</h4>
+	</div>

-<div class="spacer"></div>
+	<div class="spacer"></div>

-<!-- Pennridge R.C. High School | Perkasie, PA  -->
-<div class="">
-	<h3>Pennridge R.C. High School | Perkasie, PA</h3>
-	<span class="pennridgeIcon right"></span>
-	<h4>High School Diploma</h4>
-	<h4>2004 – 2009</h4>
-</div>
+	<!-- Pennridge R.C. High School | Perkasie, PA  -->
+	<div class="">
+		<h3>Pennridge R.C. High School | Perkasie, PA</h3>
+		<span class="pennridgeIcon right"></span>
+		<h4>High School Diploma</h4>
+		<h4>2004 – 2009</h4>
+	</div>
+
+</section>

 <div class="spacer"></div>

@@ -31,33 +34,35 @@
 <!-- Certifications -->
 <h1>Certifications</h1>

-<!-- LPIC-1 -->
-<div class="">
-	<h3>LPIC-1</h3>
-	<span class="lpicIcon right"></span>
-	<h4>Linux Professional Institute, License LPI000298926</h4>
-	<h4>February 2014 – February 2019</h4>
-</div>
+<section>
+	<!-- LPIC-1 -->
+	<div class="">
+		<h3>LPIC-1</h3>
+		<span class="lpicIcon right"></span>
+		<h4>Linux Professional Institute, License LPI000298926</h4>
+		<h4>February 2014 – February 2019</h4>
+	</div>

-<div class="spacer"></div>
+	<div class="spacer"></div>

-<!-- SUSE CLA -->
-<div class="">
-	<h3>SUSE Certified Linux Administrator (SUSE CLA)</h3>
-	<span class="suseIcon right"></span>
-	<h4>SUSE Linux Enterprise Server 11, Certification ID number: 10251725</h4>
-	<h4>February 2014 – February 2019</h4>
-</div>
+	<!-- SUSE CLA -->
+	<div class="">
+		<h3>SUSE Certified Linux Administrator (SUSE CLA)</h3>
+		<span class="suseIcon right"></span>
+		<h4>SUSE Linux Enterprise Server 11, Certification ID number: 10251725</h4>
+		<h4>February 2014 – February 2019</h4>
+	</div>

-<div class="spacer"></div>
+	<div class="spacer"></div>

-<!-- SMALL UNMANNED AIRCRAFT SYSTEM -->
-<div class="">
-	<h3>SMALL UNMANNED AIRCRAFT SYSTEM - FAA License (SUAS Part 107)</h3>
-	<span class="faa_license right"></span>
-	<h4>Federal Aviation Administration, Certification ID number: 4408742</h4>
-	<h4>July 2020 – July 2022</h4>
-</div>
+	<!-- SMALL UNMANNED AIRCRAFT SYSTEM -->
+	<div class="">
+		<h3>SMALL UNMANNED AIRCRAFT SYSTEM - FAA License (SUAS Part 107)</h3>
+		<span class="faa_license right"></span>
+		<h4>Federal Aviation Administration, Certification ID number: 4408742</h4>
+		<h4>July 2020 – July 2022</h4>
+	</div>
+</section>

 <hr>

@@ -67,15 +72,19 @@


 <style>
+	section{
+		margin: 1em;
+		border-radius: 5px;
+		padding: 1em;
+		background-color: #333333;
+	}
+
 	a{	
 		display: block;
 		text-align: center;
 		margin: auto;
 	}

-	.spacer{
-		padding: 1em;
-	}
 	h1{
 		text-align: center;
 	}
--- a/src/routes/resume/experience.svelte
+++ b/src/routes/resume/experience.svelte
@@ -6,7 +6,7 @@
 <h1>Consulting</h1>

 <h3 class="">
-	Media - <span class="">Melanie Colley Realty</span>
+	Media - <span class="company_name">Melanie Colley Realty</span>
 </h3>
 <span class="iconHere"></span>

@@ -17,7 +17,7 @@
 </p>

 <h3 class="">
-	Media - <span class="">Tabora Farms & Winery</span>
+	Media - <span class="company_name">Tabora Farms & Winery</span>
 </h3>
 <span class="iconHere"></span>

@@ -34,7 +34,7 @@
 <!-- Datacenter Operations Engineer -->
 <h3 class="">
 	Datacenter Operations Engineer -
-	<span class="twitter"><span class="google" style='color:#156aeb; font-weight: 600;'>Twitter</span></span>
+	<span class="twitter"><span class="company_name" style='color:#156aeb;'>Twitter</span></span>
 	<span class="inc">Inc.</span>
 </h3>
 <span class="twitterIcon right"></span>
@@ -56,7 +56,7 @@

 <!-- Site Operations (STA) -->
 <h3 class="">Site Operations (STA) -
-	<span class="twitter"><span class="google" style='color:#156aeb; font-weight: 600;'>Twitter</span></span>
+	<span class="twitter"><span class="company_name" style='color:#156aeb;'>Twitter</span></span>
 	<span class="inc">Inc.</span>
 </h3>

@@ -81,12 +81,12 @@

 <!-- Operations Technician -->
 <h3 class="">Operations Technician -
-	<span class="google" style='color:#156aeb'>G</span>
-	<span class="google" style='color:#da4531'>o</span>
-	<span class="google" style='color:#ffba02'>o</span>
-	<span class="google" style='color:#176dee'>g</span>
-	<span class="google" style='color:#019e5a'>l</span>
-	<span class="google" style='color:#d94530'>e</span>
+	<span class="google company_name" style='color:#156aeb'>G</span>
+	<span class="google company_name" style='color:#da4531'>o</span>
+	<span class="google company_name" style='color:#ffba02'>o</span>
+	<span class="google company_name" style='color:#176dee'>g</span>
+	<span class="google company_name" style='color:#019e5a'>l</span>
+	<span class="google company_name" style='color:#d94530'>e</span>
 	<span class="inc">Inc.</span>
 </h3>
 <span class="googleIcon right "></span>
@@ -106,7 +106,7 @@
 <hr>

 <!-- Pet Care Specialist - Fins Feathers Paws & Claws  -->
-<h3 class="">Pet Care Specialist - <span class="fins_feathers_paws_and_claws">Fins Feathers Paws &
+<h3 class="">Pet Care Specialist - <span class="company_name">Fins Feathers Paws &
 		Claws</span>
 </h3>
 <h4 class="">August 2010 – April 2011</h4>
@@ -125,7 +125,7 @@
 <hr>

 <!-- Assistant Store Manager - Half Note Cards & Gifts  -->
-<h3 class="">Assistant Store Manager - <span class="tabora">Half Note Cards & Gifts</span>
+<h3 class="">Assistant Store Manager - <span class="company_name">Half Note Cards & Gifts</span>
 </h3>
 <h4 class="">March 2007 - May 2009</h4>
 <p class="shadow rounded">
@@ -135,7 +135,7 @@
 <hr>

 <!-- General Laborer - Tabora Farms & Orchard  -->
-<h3 class="">General Laborer - <span class="tabora">Tabora Farms & Orchard</span>
+<h3 class="">General Laborer - <span class="company_name">Tabora Farms & Orchard</span>
 </h3>
 <h4 class="">June 2004 – September 2006</h4>
 <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.
@@ -152,10 +152,6 @@
 		text-align: center;
 		margin: auto;
 	}
-	
-	.spacer{
-		padding: 2em;
-	}

 	p{
 		margin: 1em;
@@ -167,4 +163,8 @@
 	h1{
 		text-align: center;
 	}
+
+	.company_name{
+		font-weight: 600;
+	}
 </style>
--- a/src/template.html
+++ b/src/template.html
@@ -51,12 +51,6 @@
 			because `src/client.js` references it -->
 		<div id="sapper">%sapper.html%</div>
 	</body>
-	<style>
-		body{
-			background-color: #1e1e1e;
-			color: #ffffff;
-		}
-	</style>

 	<!-- 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>