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

updating styling, adding/removing content

Browse Source
This commit is contained in:
wompmacho
2020-11-18 01:18:57 -05:00
parent aa68cd89da
commit eb49fd01fe
23 changed files with 426 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Footer.svelte
View File

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

3
src/components/Nav.svelte
View File

@@ -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 {

2
src/components/Resume_Nav.svelte
View File

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

9
src/routes/_layout.svelte
View File

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

103
src/routes/about.svelte
View File

@@ -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{

12
src/routes/index.svelte
View File

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

47
src/routes/livestream.svelte
View File

@@ -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{

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

@@ -23,8 +23,6 @@
background-color: #252526 !important;
padding: 2em;
box-sizing: border-box;
margin-top: 1em;
margin-left: 1em;
width: 100%;
overflow: hidden;
}

60
src/routes/projects/audio-visualizer.svelte
View File

@@ -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;

5
src/routes/projects/django-site.svelte
View File

@@ -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{

5
src/routes/projects/fractal-tree-app.svelte
View File

@@ -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{

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

@@ -13,6 +13,7 @@
h1{
text-align: center;
}
figcaption{
text-align: center;
}

3
src/routes/projects/this-website.svelte
View File

@@ -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{

54
src/routes/projects/tuner.svelte
View File

@@ -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>
<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>
<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'

6
src/routes/projects/videography.svelte
View File

@@ -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{

63
src/routes/projects/womp-chat.svelte
View File

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

8
src/routes/resume/consulting.svelte
View File

@@ -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;

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

@@ -61,8 +61,4 @@
h4{
font-size: small;
}
hr{
background-color: red;
max-width: 20vw;
}
</style>

8
src/routes/resume/esports.svelte
View File

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

30
src/routes/resume/experiance.svelte → src/routes/resume/experience.svelte
View File

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

107
src/routes/resume/index.svelte
View File

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

95
src/routes/wompchat.svelte
View File

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

7
static/css/global.css
View File

@@ -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;