wompmacho/old-svelte-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styling changes, cleanup, updated res nav

Browse Source
This commit is contained in:
wompmacho
2020-11-19 19:35:04 -05:00
parent 75d5251af6
commit 62ff8c76d1
13 changed files with 115 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Nav.svelte
View File

@@ -4,7 +4,7 @@
</script> </script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <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"> <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> <span class="navbar-toggler-icon"></span>
</button> </button>
@@ -13,12 +13,11 @@
<ul class="navbar-nav mr-auto"> <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 === '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 === '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> </ul>
<Social></Social> <Social></Social>
</div> </div>
</nav> </nav>
<style> <style>
.navbar-collapse{ .navbar-collapse{
@@ -66,6 +65,8 @@
} }
@media only screen and (max-width: 769px) { @media only screen and (max-width: 769px) {
.nav-link{
box-shadow: 0px 0px 2px #000000;
}
} }
</style> </style>

4
src/components/ProjNav.svelte
View File

@@ -61,5 +61,9 @@
width: max-content; width: max-content;
margin: auto; margin: auto;
} }
li{
box-shadow: 0px 0px 5px #000000;
}
} }
</style> </style>

6
src/components/Resume_Nav.svelte
View File

@@ -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 === '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 === '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 === '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> </ul>
<style> <style>
@@ -34,7 +33,6 @@
li { li {
display: block; display: block;
float: left;
} }
li:hover { li:hover {
@@ -55,5 +53,9 @@
width: max-content; width: max-content;
margin: auto; margin: auto;
} }
li{
box-shadow: 0px 0px 5px #000000;
}
} }
</style> </style>

6
src/components/Social.svelte
View File

@@ -22,4 +22,10 @@
a:hover{ a:hover{
color: red; color: red;
} }
@media only screen and (max-width: 769px) {
.social{
padding: 1em;
}
}
</style> </style>

10
src/routes/_layout.svelte
View File

@@ -18,22 +18,14 @@
.spacer{ .spacer{
height: 5vh; height: 5vh;
} }
hr{
background-color: red;
max-width: 20vw;
margin-top: 2em;
margin-bottom: 2em;
}
</style> </style>
<Nav {segment}></Nav> <Nav {segment}></Nav>
<main class="shadow rounded p-3 "> <main class="shadow rounded p-3">
<slot></slot> <slot></slot>
</main> </main>
<div class="spacer"></div> <div class="spacer"></div>
<Footer></Footer> <Footer></Footer>

16
src/routes/about.svelte
View File

@@ -8,8 +8,6 @@
<hr> <hr>
<div class="spacer"></div>
<div class="container shadow rounded"> <div class="container shadow rounded">
<h2>sup</h2> <h2>sup</h2>
<p> <p>
@@ -20,7 +18,11 @@
</p> </p>
</div> </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"> <div class="container shadow rounded">
<h2>Q&A</h2> <h2>Q&A</h2>
@@ -40,15 +42,9 @@
</p> </p>
</div> </div>
<div class="spacer"></div>
<hr> <hr>
<style> <style>
.spacer{
margin: 2em;
}
question{ question{
display: block; display: block;
width: 100%; width: 100%;
@@ -81,7 +77,7 @@
font-size: xx-large; font-size: xx-large;
text-align: center; text-align: center;
display: block; display: block;
padding: 1em; padding-top: 1em;
font-weight: 900; font-weight: 900;
} }

45
src/routes/livestream.svelte
View File

@@ -7,45 +7,36 @@
<!-- <figcaption>Clips From Stream</figcaption> --> <!-- <figcaption>Clips From Stream</figcaption> -->
</figure> </figure>
<div class="spacer"></div>
<hr> <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"> <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> <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. 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> <br><br>
I am just having too much fun man. I am just having too much fun man.
</p> </p>
<h3>I hope you are too. ♥</h3>
</div> </div>
<div class="spacer"></div> <h3 class="padd">I hope you are too. ♥</h3>
<hr> <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> <style>
.spacer{
margin: 2em; .padd{
padding: 1em;
} }
.container{ .container{
@@ -58,15 +49,12 @@
h1{ h1{
text-align: center; text-align: center;
font-size: x-large; font-size: x-large;
padding: 1em; font-weight: 600;
} }
h3{ h3{
margin-left: 2em; font-size: small;
font-size: medium;
text-align: center; text-align: center;
margin: 1em;
font-weight: 700;
} }
p{ p{
@@ -76,11 +64,6 @@
} }
hr{
background-color: red;
max-width: 20vw;
}
a{ a{
color: #00ff00; color: #00ff00;
text-align: center; text-align: center;

1
src/routes/projects/_layout.svelte
View File

@@ -5,6 +5,7 @@
<div class="innerMain"> <div class="innerMain">
<ProjNav {segment}></ProjNav> <ProjNav {segment}></ProjNav>
<br><br>
<main class="shadow p-3 mb-5 bg-white rounded"> <main class="shadow p-3 mb-5 bg-white rounded">
<slot></slot> <slot></slot>
</main> </main>

6
src/routes/resume/_layout.svelte
View File

@@ -5,12 +5,12 @@
<ResumeNav {segment}></ResumeNav> <ResumeNav {segment}></ResumeNav>
<br><br>
<main class="shadow p-3 mb-5 bg-white rounded"> <main class="shadow p-3 mb-5 bg-white rounded">
<slot></slot> <slot></slot>
</main> </main>
<div class="spacer"></div> <div class="added_space"></div>
<style> <style>
main { main {
@@ -23,7 +23,7 @@
margin-top: 1em; margin-top: 1em;
} }
.spacer{ .added_space{
height: 5vh; height: 5vh;
} }
</style> </style>

51
src/routes/resume/education.svelte
View File

@@ -4,23 +4,26 @@
<h1>Education</h1> <h1>Education</h1>
<!-- Georgia State University | Clarkston, GA --> <section>
<div class=""> <!-- Georgia State University | Clarkston, GA -->
<div class="">
<h3>Georgia State University | Clarkston, GA</h3> <h3>Georgia State University | Clarkston, GA</h3>
<span class="gaStateIcon right"></span> <span class="gaStateIcon right"></span>
<h4>Associate's Computer Science</h4> <h4>Associate's Computer Science</h4>
<h4>2012-2017</h4> <h4>2012-2017</h4>
</div> </div>
<div class="spacer"></div> <div class="spacer"></div>
<!-- Pennridge R.C. High School | Perkasie, PA --> <!-- Pennridge R.C. High School | Perkasie, PA -->
<div class=""> <div class="">
<h3>Pennridge R.C. High School | Perkasie, PA</h3> <h3>Pennridge R.C. High School | Perkasie, PA</h3>
<span class="pennridgeIcon right"></span> <span class="pennridgeIcon right"></span>
<h4>High School Diploma</h4> <h4>High School Diploma</h4>
<h4>2004 – 2009</h4> <h4>2004 – 2009</h4>
</div> </div>
</section>
<div class="spacer"></div> <div class="spacer"></div>
@@ -31,33 +34,35 @@
<!-- Certifications --> <!-- Certifications -->
<h1>Certifications</h1> <h1>Certifications</h1>
<!-- LPIC-1 --> <section>
<div class=""> <!-- LPIC-1 -->
<div class="">
<h3>LPIC-1</h3> <h3>LPIC-1</h3>
<span class="lpicIcon right"></span> <span class="lpicIcon right"></span>
<h4>Linux Professional Institute, License LPI000298926</h4> <h4>Linux Professional Institute, License LPI000298926</h4>
<h4>February 2014 – February 2019</h4> <h4>February 2014 – February 2019</h4>
</div> </div>
<div class="spacer"></div> <div class="spacer"></div>
<!-- SUSE CLA --> <!-- SUSE CLA -->
<div class=""> <div class="">
<h3>SUSE Certified Linux Administrator (SUSE CLA)</h3> <h3>SUSE Certified Linux Administrator (SUSE CLA)</h3>
<span class="suseIcon right"></span> <span class="suseIcon right"></span>
<h4>SUSE Linux Enterprise Server 11, Certification ID number: 10251725</h4> <h4>SUSE Linux Enterprise Server 11, Certification ID number: 10251725</h4>
<h4>February 2014 – February 2019</h4> <h4>February 2014 – February 2019</h4>
</div> </div>
<div class="spacer"></div> <div class="spacer"></div>
<!-- SMALL UNMANNED AIRCRAFT SYSTEM --> <!-- SMALL UNMANNED AIRCRAFT SYSTEM -->
<div class=""> <div class="">
<h3>SMALL UNMANNED AIRCRAFT SYSTEM - FAA License (SUAS Part 107)</h3> <h3>SMALL UNMANNED AIRCRAFT SYSTEM - FAA License (SUAS Part 107)</h3>
<span class="faa_license right"></span> <span class="faa_license right"></span>
<h4>Federal Aviation Administration, Certification ID number: 4408742</h4> <h4>Federal Aviation Administration, Certification ID number: 4408742</h4>
<h4>July 2020 – July 2022</h4> <h4>July 2020 – July 2022</h4>
</div> </div>
</section>
<hr> <hr>
@@ -67,15 +72,19 @@
<style> <style>
section{
margin: 1em;
border-radius: 5px;
padding: 1em;
background-color: #333333;
}
a{ a{
display: block; display: block;
text-align: center; text-align: center;
margin: auto; margin: auto;
} }
.spacer{
padding: 1em;
}
h1{ h1{
text-align: center; text-align: center;
} }

34
src/routes/resume/experience.svelte
View File

@@ -6,7 +6,7 @@
<h1>Consulting</h1> <h1>Consulting</h1>
<h3 class=""> <h3 class="">
Media - <span class="">Melanie Colley Realty</span> Media - <span class="company_name">Melanie Colley Realty</span>
</h3> </h3>
<span class="iconHere"></span> <span class="iconHere"></span>
@@ -17,7 +17,7 @@
</p> </p>
<h3 class=""> <h3 class="">
Media - <span class="">Tabora Farms & Winery</span> Media - <span class="company_name">Tabora Farms & Winery</span>
</h3> </h3>
<span class="iconHere"></span> <span class="iconHere"></span>
@@ -34,7 +34,7 @@
<!-- Datacenter Operations Engineer --> <!-- Datacenter Operations Engineer -->
<h3 class=""> <h3 class="">
Datacenter Operations Engineer - 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> <span class="inc">Inc.</span>
</h3> </h3>
<span class="twitterIcon right"></span> <span class="twitterIcon right"></span>
@@ -56,7 +56,7 @@
<!-- Site Operations (STA) --> <!-- Site Operations (STA) -->
<h3 class="">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> <span class="inc">Inc.</span>
</h3> </h3>
@@ -81,12 +81,12 @@
<!-- Operations Technician --> <!-- Operations Technician -->
<h3 class="">Operations Technician - <h3 class="">Operations Technician -
<span class="google" style='color:#156aeb'>G</span> <span class="google company_name" style='color:#156aeb'>G</span>
<span class="google" style='color:#da4531'>o</span> <span class="google company_name" style='color:#da4531'>o</span>
<span class="google" style='color:#ffba02'>o</span> <span class="google company_name" style='color:#ffba02'>o</span>
<span class="google" style='color:#176dee'>g</span> <span class="google company_name" style='color:#176dee'>g</span>
<span class="google" style='color:#019e5a'>l</span> <span class="google company_name" style='color:#019e5a'>l</span>
<span class="google" style='color:#d94530'>e</span> <span class="google company_name" style='color:#d94530'>e</span>
<span class="inc">Inc.</span> <span class="inc">Inc.</span>
</h3> </h3>
<span class="googleIcon right "></span> <span class="googleIcon right "></span>
@@ -106,7 +106,7 @@
<hr> <hr>
<!-- Pet Care Specialist - Fins Feathers Paws & Claws --> <!-- 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> Claws</span>
</h3> </h3>
<h4 class="">August 2010 – April 2011</h4> <h4 class="">August 2010 – April 2011</h4>
@@ -125,7 +125,7 @@
<hr> <hr>
<!-- Assistant Store Manager - Half Note Cards & Gifts --> <!-- 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> </h3>
<h4 class="">March 2007 - May 2009</h4> <h4 class="">March 2007 - May 2009</h4>
<p class="shadow rounded"> <p class="shadow rounded">
@@ -135,7 +135,7 @@
<hr> <hr>
<!-- General Laborer - Tabora Farms & Orchard --> <!-- 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> </h3>
<h4 class="">June 2004 – September 2006</h4> <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. <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.
@@ -153,10 +153,6 @@
margin: auto; margin: auto;
} }
.spacer{
padding: 2em;
}
p{ p{
margin: 1em; margin: 1em;
border-radius: 5px; border-radius: 5px;
@@ -167,4 +163,8 @@
h1{ h1{
text-align: center; text-align: center;
} }
.company_name{
font-weight: 600;
}
</style> </style>

6
src/template.html
View File

@@ -51,12 +51,6 @@
because `src/client.js` references it --> because `src/client.js` references it -->
<div id="sapper">%sapper.html%</div> <div id="sapper">%sapper.html%</div>
</body> </body>
<style>
body{
background-color: #1e1e1e;
color: #ffffff;
}
</style>
<!-- jQuery, Popper.js, and Bootstrap JS --> <!-- 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://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

4
static/css/global.css
View File

@@ -37,6 +37,10 @@ hr{
margin-bottom: 2em; margin-bottom: 2em;
} }
.spacer{
height: 2em;
}
@media (min-width: 400px) { @media (min-width: 400px) {
body { body {
font-size: 16px; font-size: 16px;