commiting a but load of content huehue
This commit is contained in:
wompmacho
22
src/components/LibLoader.svelte
Normal file
22
src/components/LibLoader.svelte
Normal file
@@ -0,0 +1,22 @@
|
||||
<svelte:head>
|
||||
<script bind:this={script} src={url}></script>
|
||||
</svelte:head>
|
||||
|
||||
<script>
|
||||
import { onMount, createEventDispatcher } from 'svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
export let url;
|
||||
let script;
|
||||
|
||||
onMount(async () => {
|
||||
script.addEventListener('load', () => {
|
||||
dispatch('loaded');
|
||||
})
|
||||
|
||||
script.addEventListener('error', (event) => {
|
||||
console.error("something went wrong", event);
|
||||
dispatch('error');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -1,15 +1,37 @@
|
||||
<script>
|
||||
export let segment;
|
||||
//export let segment;
|
||||
import Social from '../components/Social.svelte';
|
||||
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
export let segment;
|
||||
|
||||
</script>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<li class="nav-item"><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>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item"><a class="nav-link" rel=prefetch aria-current="{segment === 'about' ? 'page' : undefined}" href="about">About</a></li>
|
||||
<li class="nav-item"><a class="nav-link" rel=prefetch aria-current="{segment === 'livestream' ? 'page' : undefined}" href="livestream">Live Stream</a></li>
|
||||
<li class="nav-item"><a class="nav-link" rel=prefetch aria-current="{segment === 'projects' ? 'page' : undefined}" href="projects">Fun Stuff</a></li>
|
||||
</ul>
|
||||
<Social></Social>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
|
||||
.navbar-collapse{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: #323233 !important;
|
||||
border-bottom: 1px solid rgba(255,62,0,0.1);
|
||||
font-weight: 300;
|
||||
padding: 0 1em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
ul {
|
||||
@@ -49,30 +71,9 @@
|
||||
}
|
||||
|
||||
a {
|
||||
color: #cccccc;
|
||||
color: #cccccc !important;
|
||||
text-decoration: none;
|
||||
padding: 1em 0.5em;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
|
||||
Menu
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarResponsive">
|
||||
<ul class="navbar-nav">
|
||||
<li class=""><a class="" aria-current="{segment === undefined ? 'page' : undefined}" href=".">WompMacho</a></li>
|
||||
<li class=""><a aria-current="{segment === 'about' ? 'page' : undefined}" href="about">about</a></li>
|
||||
<li class=""><a aria-current="{segment === 'livestream' ? 'page' : undefined}" href="livestream">Live Stream</a></li>
|
||||
<li class=""><a aria-current="{segment === 'esports' ? 'page' : undefined}" href="esports">esports</a></li>
|
||||
<li class=""><a aria-current="{segment === 'videography' ? 'page' : undefined}" href="videography">videography</a></li>
|
||||
|
||||
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
|
||||
the blog data when we hover over the link or tap it on a touchscreen -->
|
||||
<li><a rel=prefetch aria-current="{segment === 'projects' ? 'page' : undefined}" href="projects">projects</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<Social></Social>
|
||||
</nav>
|
||||
|
||||
56
src/components/ProjNav.svelte
Normal file
56
src/components/ProjNav.svelte
Normal file
@@ -0,0 +1,56 @@
|
||||
<script>
|
||||
export let segment;
|
||||
</script>
|
||||
|
||||
<ul class="navbar-nav shadow rounded">
|
||||
<li class="rounded"><a rel=prefetch aria-current="{segment === 'womp-chat' ? 'page' : undefined}" href="/projects/womp-chat">WompChat Chrome Extension</a></li>
|
||||
<li class="rounded"><a rel=prefetch aria-current="{segment === 'this-website' ? 'page' : undefined}" href="/projects/this-website">This Site</a></li>
|
||||
<li class="rounded"><a rel=prefetch aria-current="{segment === 'django-site' ? 'page' : undefined}" href="/projects/django-site">Django Site</a></li>
|
||||
<li class="rounded"><a rel=prefetch aria-current="{segment === 'videography' ? 'page' : undefined}" href="/projects/videography">Videography</a></li>
|
||||
<li class="rounded"><a rel=prefetch aria-current="{segment === 'fractal-tree-app' ? 'page' : undefined}" href="/projects/fractal-tree-app">Fractal Tree App</a></li>
|
||||
<li class="rounded"><a aria-current="{segment === 'audio-visualizer' ? 'page' : undefined}" href="/projects/audio-visualizer">Audio Visualizer</a></li>
|
||||
<li class="rounded"><a aria-current="{segment === 'tuner' ? 'page' : undefined}" href="/projects/tuner">Guitar Tuner</a></li>
|
||||
</ul>
|
||||
|
||||
<style>
|
||||
a {
|
||||
color: #cccccc;
|
||||
text-decoration: none;
|
||||
padding: 1em 0.5em;
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex-direction: column;
|
||||
background-color: #323233;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* clearfix */
|
||||
ul::after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 10em;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: #474748;
|
||||
}
|
||||
|
||||
[aria-current] {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background-color: #161616;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
50
src/components/Resume_Nav.svelte
Normal file
50
src/components/Resume_Nav.svelte
Normal file
@@ -0,0 +1,50 @@
|
||||
<script>
|
||||
export let segment;
|
||||
</script>
|
||||
|
||||
<ul class="navbar-nav shadow rounded">
|
||||
<li class=""><a rel=prefetch class="" aria-current="{segment === undefined ? 'page' : undefined}" href="/resume">Michael</a></li>
|
||||
<li class=""><a rel=prefetch aria-current="{segment === 'experiance' ? 'page' : undefined}" href="/resume/experiance">Experiance</a></li>
|
||||
<li class=""><a rel=prefetch aria-current="{segment === 'education' ? 'page' : undefined}" href="/resume/education">Education</a></li>
|
||||
<li class=""><a rel=prefetch aria-current="{segment === 'esports' ? 'page' : undefined}" href="/resume/esports">Esports</a></li>
|
||||
<li class=""><a rel=prefetch aria-current="{segment === 'consulting' ? 'page' : undefined}" href="/resume/consulting">Consulting</a></li>
|
||||
<li class=""><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>
|
||||
a {
|
||||
color: #cccccc;
|
||||
text-decoration: none;
|
||||
padding: 1em 0.5em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex-direction: row;
|
||||
background-color: #323233;
|
||||
}
|
||||
|
||||
/* clearfix */
|
||||
ul::after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: #474748;
|
||||
}
|
||||
|
||||
[aria-current] {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background-color: #161616;
|
||||
}
|
||||
</style>
|
||||
@@ -1,12 +1,17 @@
|
||||
<social-links>
|
||||
<div class="social d-flex justify-content-center align-middle">
|
||||
<a class="mx-2" href="https://discord.gg/pVNnTDA"><i class="fab fa-discord fa-2x"></i></a>
|
||||
<a class="mx-2" href="https://www.youtube.com/wompmacho"><i class="fab fa-youtube fa-2x"></i></a>
|
||||
<a class="mx-2" href="https://github.com/wompmacho"><i class="fab fa-github fa-2x"></i></a>
|
||||
<a class="mx-2" href="https://twitter.com/wompmacho"><i class="fab fa-twitter fa-2x"></i></a>
|
||||
<a class="mx-2" href="https://www.instagram.com/wompmacho/"><i class="fab fa-instagram fa-2x"></i></a>
|
||||
<a class="mx-2" href="https://www.linkedin.com/in/wompmacho/"><i class="fab fa-linkedin fa-2x"></i></a>
|
||||
<a class="mx-2" href="https://www.facebook.com/wompmacho"><i class="fab fa-facebook fa-2x"></i></a>
|
||||
<a rel=prefetch class="mx-2" href="https://discord.gg/pVNnTDA"><i class="fab fa-discord fa-2x"></i></a>
|
||||
|
||||
<a rel=prefetch class="mx-2" href="https://www.youtube.com/wompmacho"><i class="fab fa-youtube fa-2x"></i></a>
|
||||
<a rel=prefetch class="mx-2" href="https://www.twitch.com/wompmacho/"><i class="fab fa-twitch fa-2x"></i></a>
|
||||
<a rel=prefetch class="mx-2" href="https://www.facebook.com/wompmacho"><i class="fab fa-facebook fa-2x"></i></a>
|
||||
|
||||
<a rel=prefetch class="mx-2" href="https://twitter.com/wompmacho"><i class="fab fa-twitter fa-2x"></i></a>
|
||||
<a rel=prefetch class="mx-2" href="https://www.instagram.com/wompmacho/"><i class="fab fa-instagram fa-2x"></i></a>
|
||||
|
||||
<a rel=prefetch class="mx-2" href="https://www.linkedin.com/in/wompmacho/"><i class="fab fa-linkedin fa-2x"></i></a>
|
||||
<a rel=prefetch class="mx-2" href="https://github.com/wompmacho"><i class="fab fa-github fa-2x"></i></a>
|
||||
|
||||
</div>
|
||||
</social-links>
|
||||
|
||||
|
||||
BIN
src/node_modules/images/logo-192.png
generated
vendored
BIN
src/node_modules/images/logo-192.png
generated
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB |
BIN
src/node_modules/images/logo-512.png
generated
vendored
BIN
src/node_modules/images/logo-512.png
generated
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
@@ -14,6 +14,9 @@
|
||||
box-sizing: border-box;
|
||||
margin-top: 1em;
|
||||
}
|
||||
.spacer{
|
||||
height: 5vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
<Nav {segment}></Nav>
|
||||
@@ -22,4 +25,7 @@
|
||||
<slot></slot>
|
||||
</main>
|
||||
|
||||
<div class="spacer"></div>
|
||||
|
||||
|
||||
<Footer></Footer>
|
||||
@@ -2,6 +2,40 @@
|
||||
<title>About</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>About this site</h1>
|
||||
<h1>About</h1>
|
||||
|
||||
<p>This is the 'about' page. There's not much here.</p>
|
||||
<faceThing>(•_•)</faceThing>
|
||||
|
||||
<figure>
|
||||
<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. 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 bled into all
|
||||
parts
|
||||
of my life. Esports peaked my interest and again I found my way into the tech side and developing platforms.
|
||||
Building machines that pushed as many frames as possible to get that bleeding edge. I began playing with
|
||||
virtual machines, arduino, raspberry pi and bare-metal machines. I started hosting websites and game servers
|
||||
from home. Eventually I started streaming and found a new joy in the Twitch community. I developed my
|
||||
streaming portfolio and platform. Graphic design, content creation, lighting, filmography, social media,
|
||||
websites, custom scripting overlays, entertainment, and lets not forget GAMING.
|
||||
</p>
|
||||
<figcaption>
|
||||
I keep finding new things to tweak and play with.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<h4>
|
||||
I don’t plan on stopping.
|
||||
</h4>
|
||||
|
||||
<style>
|
||||
faceThing{
|
||||
font-size: 5em;
|
||||
margin: 1em;
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +0,0 @@
|
||||
<svelte:head>
|
||||
<title>esports</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>Esports Page</h1>
|
||||
|
||||
<p>This is the 'esports' page.</p>
|
||||
@@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import successkid from 'images/successkid.jpg';
|
||||
import logo_512 from 'images/logo-512.png';
|
||||
|
||||
import { listen_dev } from "svelte/internal";
|
||||
|
||||
</script>
|
||||
|
||||
@@ -21,20 +21,14 @@
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
h1 {
|
||||
/* h1 {
|
||||
font-size: 4em;
|
||||
}
|
||||
} */
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -42,19 +36,13 @@
|
||||
<title>WompMacho.com</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>Great success!</h1>
|
||||
|
||||
<figure class="">
|
||||
<img src="{logo_512}" alt="">
|
||||
|
||||
|
||||
<img alt="Success Kid" src="{successkid}">
|
||||
<figcaption>Have fun with Sapper!</figcaption>
|
||||
|
||||
<video class="" type="video/mp4" src="" autoplay="true" loop="true" video muted="true" style="height: 100%; width: 100%; object-fit: cover;"></video>
|
||||
<video class="shadow rounded" type="video/mp4" src="video/streamClips.mp4" autoplay="true" loop="true" video muted="true" style="height: 100%; width: 100%; object-fit: cover;" alt="Video Of Clips From Live Stream"></video>
|
||||
<!-- <figcaption>Caption</figcaption> -->
|
||||
</figure>
|
||||
|
||||
<p><strong></strong></p>
|
||||
|
||||
<p><strong>Try editing this file goteem to test live reloading.</strong></p>
|
||||
|
||||
<h1>wadup fool</h1>
|
||||
|
||||
<p>Eventually This will be replaced with an embed of the stream when live. Working on other things atm.</p>
|
||||
@@ -2,6 +2,59 @@
|
||||
<title>Live Stream</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>Stream Page</h1>
|
||||
<figure class="">
|
||||
<video class="shadow rounded" type="video/mp4" src="video/streamClips.mp4" autoplay="true" loop="true" video muted="true" style="height: 100%; width: 100%; object-fit: cover;" alt="Video Of Clips From Live Stream"></video>
|
||||
<!-- <figcaption>Clips From Stream</figcaption> -->
|
||||
</figure>
|
||||
|
||||
<p>Stream Stuff Lives Here</p>
|
||||
<h1>Live Stream</h1>
|
||||
|
||||
<p>
|
||||
See Discord for latest Announcements and Go-Live Notifications
|
||||
</p>
|
||||
<a href="https://discord.gg/pVNnTDA"><img src="https://img.shields.io/discord/238458588169895937?label=Discord&style=plastic" alt="Discord Members Online Shield"></a>
|
||||
|
||||
<hr>
|
||||
<h4>
|
||||
Sep 2016 - Present
|
||||
</h4>
|
||||
|
||||
<p>
|
||||
I have tried to create a fun and unique livestream experience on various streaming platforms. As a result I have developed skills I never thought I would have obtained. It has been hard working to develop my stage. I found myself working in social media engagement, content creation, sound engineering, graphic design, lighting and filmography, animation, coding and dabbling in a multitude of other areas. Over the last few years I have dedicated everything I have to further enhance my stream and become a better entertainer.
|
||||
|
||||
</p>
|
||||
|
||||
<p>
|
||||
I am just having too much fun man.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
I hope you are too. ♥
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<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>
|
||||
hr{
|
||||
background-color: red;
|
||||
max-width: 20vw;
|
||||
}
|
||||
h3{
|
||||
text-align: center;
|
||||
margin: 1em;
|
||||
}
|
||||
a{
|
||||
color: #00ff00;
|
||||
}
|
||||
a:hover{
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
@@ -1,28 +0,0 @@
|
||||
import posts from './_posts.js';
|
||||
|
||||
const lookup = new Map();
|
||||
posts.forEach(post => {
|
||||
lookup.set(post.slug, JSON.stringify(post));
|
||||
});
|
||||
|
||||
export function get(req, res, next) {
|
||||
// the `slug` parameter is available because
|
||||
// this file is called [slug].json.js
|
||||
const { slug } = req.params;
|
||||
|
||||
if (lookup.has(slug)) {
|
||||
res.writeHead(200, {
|
||||
'Content-Type': 'application/json'
|
||||
});
|
||||
|
||||
res.end(lookup.get(slug));
|
||||
} else {
|
||||
res.writeHead(404, {
|
||||
'Content-Type': 'application/json'
|
||||
});
|
||||
|
||||
res.end(JSON.stringify({
|
||||
message: `Not found`
|
||||
}));
|
||||
}
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
<script context="module">
|
||||
export async function preload({ params }) {
|
||||
// the `slug` parameter is available because
|
||||
// this file is called [slug].svelte
|
||||
const res = await this.fetch(`projects/${params.slug}.json`);
|
||||
const data = await res.json();
|
||||
|
||||
if (res.status === 200) {
|
||||
return { post: data };
|
||||
} else {
|
||||
this.error(res.status, data.message);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export let post;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/*
|
||||
By default, CSS is locally scoped to the component,
|
||||
and any unused styles are dead-code-eliminated.
|
||||
In this page, Svelte can't know which elements are
|
||||
going to appear inside the {{{post.html}}} block,
|
||||
so we have to use the :global(...) modifier to target
|
||||
all elements inside .content
|
||||
*/
|
||||
.content :global(h2) {
|
||||
font-size: 1.4em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.content :global(pre) {
|
||||
background-color: #f9f9f9;
|
||||
box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.05);
|
||||
padding: 0.5em;
|
||||
border-radius: 2px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.content :global(pre) :global(code) {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content :global(ul) {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.content :global(li) {
|
||||
margin: 0 0 0.5em 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
<title>{post.title}</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>{post.title}</h1>
|
||||
|
||||
<div class="content">
|
||||
{@html post.html}
|
||||
</div>
|
||||
36
src/routes/projects/_layout.svelte
Normal file
36
src/routes/projects/_layout.svelte
Normal file
@@ -0,0 +1,36 @@
|
||||
<script>
|
||||
import ProjNav from '../../components/ProjNav.svelte';
|
||||
export let segment;
|
||||
</script>
|
||||
|
||||
<div class="innerMain">
|
||||
<ProjNav {segment}></ProjNav>
|
||||
<main class="shadow p-3 mb-5 bg-white rounded">
|
||||
<slot></slot>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div class="spacer"></div>
|
||||
|
||||
<style>
|
||||
.innerMain{
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
position: relative;
|
||||
max-width: 60em;
|
||||
background-color: #252526 !important;
|
||||
padding: 2em;
|
||||
box-sizing: border-box;
|
||||
margin-top: 1em;
|
||||
margin-left: 1em;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.spacer{
|
||||
height: 5vh;
|
||||
}
|
||||
</style>
|
||||
@@ -8,46 +8,130 @@
|
||||
// underscore tells Sapper not to do that.
|
||||
|
||||
const posts = [
|
||||
|
||||
|
||||
{
|
||||
title: 'WompMacho.com',
|
||||
slug: 'this-website',
|
||||
title: 'Audio Visualizer',
|
||||
slug: 'audio-visualizer',
|
||||
html: `
|
||||
<h3>About This Site goes here</h3>
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'Django Site',
|
||||
slug: 'django',
|
||||
html: `
|
||||
<h3>About Django Site goes here</h3>
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'Tuner',
|
||||
slug: 'tuner',
|
||||
html: `
|
||||
<h3>About Tuner JS goes here</h3>
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'Sound Visualizer',
|
||||
slug: 'sound-visualizer',
|
||||
html: `
|
||||
<h3>About Sound Visualizer JS goes here</h3>
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'Fractal Tree App',
|
||||
slug: 'fractal-tree-java-applet',
|
||||
html: `
|
||||
<h3>About Fractal Tree Java Applet App goes here</h3>
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'Wompchat Chrome Extension',
|
||||
slug: 'wompchat',
|
||||
html: `
|
||||
<h3>About Wompchat Chrome Extension goes here</h3>
|
||||
<!-- Sound Visualizer Animation -->
|
||||
<div class="animation_container">
|
||||
<div class="animation_inner">
|
||||
<div class="" id="sound_visualizer_canvas"></div>
|
||||
<div class="branding overlay">WompMacho</div>
|
||||
<div class="logo overlay"
|
||||
style="background: url('img/WompLogo.png'); height: 100%; width: 100%; background-size: 30%; background-repeat: no-repeat; background-position: center;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Javascript web application utilizing the P5.js libraries to
|
||||
create a visual interpretation of audio. This takes input
|
||||
via microphone or audio being played locally and uses the
|
||||
amplitude of the frequencies to animate lines thats
|
||||
translate into little circles. These circles change color
|
||||
based on the amplitude and fade to alpha when levels are
|
||||
lowered. There is additional CSS animations assisting in the
|
||||
coloring/opacity of the brand name and size manipulation to
|
||||
give the “pulse effect”.
|
||||
</p>
|
||||
<h5>
|
||||
Click on page to enable permissions and allow for audio
|
||||
input. Audio player is available in the bottom left corner.
|
||||
</h5>
|
||||
|
||||
<style>
|
||||
.overlay {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* -- wrapper -- */
|
||||
.animation_inner {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
font-size: 3.5vw;
|
||||
animation: brand_name 10s ease infinite alternate;
|
||||
}
|
||||
|
||||
#sound_visualizer_canvas{
|
||||
height: 100% !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* --branding -- */
|
||||
.branding {
|
||||
font-family: "Viner Hand ITC";
|
||||
color: white;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
/* -- logo -- */
|
||||
.logo {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
animation: size-pulse 15s infinite;
|
||||
}
|
||||
|
||||
.animation_container {
|
||||
height: 40vh;
|
||||
width: 40vw;
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@keyframes brand_name {
|
||||
0% {
|
||||
color: #000;
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF;
|
||||
}
|
||||
|
||||
50% {
|
||||
color: white;
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF;
|
||||
}
|
||||
|
||||
100% {
|
||||
color: white;
|
||||
text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #228DFF;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes size-pulse {
|
||||
0% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- P5 Lib -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
|
||||
|
||||
<!-- ML5 Lib -->
|
||||
<script src="https://unpkg.com/ml5@0.3.1/dist/ml5.min.js"></script>
|
||||
|
||||
<script src="/static/js/sound_visualizer.js"></script>
|
||||
`
|
||||
}
|
||||
];
|
||||
|
||||
242
src/routes/projects/audio-visualizer.svelte
Normal file
242
src/routes/projects/audio-visualizer.svelte
Normal file
@@ -0,0 +1,242 @@
|
||||
<svelte:head>
|
||||
<title>Javascript Audio Visualizer</title>
|
||||
</svelte:head>
|
||||
|
||||
<!-- Sound Visualizer Animation -->
|
||||
<div class="animation_container">
|
||||
<div class="animation_inner">
|
||||
<div class="" id="sound_visualizer_canvas"></div>
|
||||
<div class="branding overlay">WompMacho</div>
|
||||
<div class="logo overlay"
|
||||
style="background: url('img/WompLogo.png'); height: 100%; width: 100%; background-size: 30%; background-repeat: no-repeat; background-position: center;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<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>
|
||||
|
||||
<hr>
|
||||
|
||||
<h5>
|
||||
Click on page to enable permissions and allow for audio
|
||||
input.
|
||||
</h5>
|
||||
|
||||
<style>
|
||||
h1{
|
||||
font-size: x-large;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
hr{
|
||||
background-color: red;
|
||||
max-width: 20vw;
|
||||
}
|
||||
|
||||
p{
|
||||
max-width: 70vw;
|
||||
margin: auto;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
h5{
|
||||
font-size: smaller;
|
||||
max-width: 40vw;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* -- wrapper -- */
|
||||
.animation_inner {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
font-size: 3.5vw;
|
||||
animation: brand_name 10s ease infinite alternate;
|
||||
}
|
||||
|
||||
/* --branding -- */
|
||||
.branding {
|
||||
font-family: "Viner Hand ITC";
|
||||
color: white;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
/* -- logo -- */
|
||||
.logo {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
animation: size-pulse 15s infinite;
|
||||
}
|
||||
|
||||
.animation_container {
|
||||
height: 40vh;
|
||||
width: 40vw;
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@keyframes brand_name {
|
||||
0% {
|
||||
color: #000;
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF;
|
||||
}
|
||||
|
||||
50% {
|
||||
color: white;
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF;
|
||||
}
|
||||
|
||||
100% {
|
||||
color: white;
|
||||
text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #228DFF;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes size-pulse {
|
||||
0% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
#sound_visualizer_canvas{
|
||||
height: 100% !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { onDestroy } from 'svelte'
|
||||
import { onMount } from "svelte";
|
||||
|
||||
let mic, fft, myp5;
|
||||
|
||||
onMount(async () => {
|
||||
const container = document.getElementById('sound_visualizer_canvas');
|
||||
const p5Module = await import("p5");
|
||||
window.p5 = p5Module.default;
|
||||
await import("p5/lib/addons/p5.sound");
|
||||
|
||||
let width, height;
|
||||
width = container.offsetWidth;
|
||||
height = container.offsetHeight;
|
||||
|
||||
const sketch = (sketch) => {
|
||||
sketch.setup = () => {
|
||||
|
||||
// Set Color Mode
|
||||
sketch.colorMode(sketch.HSB);
|
||||
// Make work in degrees for circle
|
||||
sketch.angleMode(sketch.DEGREES);
|
||||
|
||||
// Set Smoothing, bar count, dimmensions
|
||||
var smoothing = 0.8;
|
||||
var bands = 256;
|
||||
|
||||
sketch.createCanvas(width, height);
|
||||
|
||||
// Create an Audio input
|
||||
mic = new p5.AudioIn();
|
||||
console.log('Mic Started');
|
||||
|
||||
// Fast Fourier Transform (apmlitude at various frequencies)
|
||||
fft = new p5.FFT(smoothing, bands);
|
||||
fft.setInput(mic);
|
||||
|
||||
// start the Audio Input.
|
||||
// By default, it does not .connect() (to the computer speakers)
|
||||
mic.start();
|
||||
};
|
||||
|
||||
sketch.draw = () => {
|
||||
sketch.clear();
|
||||
resetSketch();
|
||||
}
|
||||
|
||||
function resetSketch(){
|
||||
width = container.offsetWidth;
|
||||
height = container.offsetHeight;
|
||||
// Analyze the spectrum and gives array
|
||||
var spectrum = fft.analyze();
|
||||
|
||||
// Move to Center
|
||||
sketch.translate(width / 2, height / 2);
|
||||
|
||||
for (var i = 0; i < spectrum.length; i++) {
|
||||
var angle = sketch.map(i, 180, spectrum.length, 0, 250);
|
||||
var amplitude = spectrum[i];
|
||||
|
||||
var radius = sketch.map(amplitude, 0, 360, Math.sqrt(width * height) / 4, Math.sqrt(width * height) / 2, true);
|
||||
var x = radius * sketch.cos(angle);
|
||||
var y = radius * sketch.sin(angle);
|
||||
//noStroke();
|
||||
|
||||
// draw bars
|
||||
var e1 = sketch.line(x, y, x, y);
|
||||
var e2 = sketch.line(y, x, y, x);
|
||||
|
||||
// Rotate
|
||||
e1.rotate(16);
|
||||
e2.rotate(16);
|
||||
//rotate(radius/PI);
|
||||
sketch.strokeWeight(13);
|
||||
sketch.stroke(sketch.color(sketch.map(amplitude, 0, 255, 0, 255, true), sketch.map(amplitude, 0, 255, 200, 255, true), sketch.map(amplitude, 0, 255, Math.random(), 255, true), amplitude));
|
||||
}
|
||||
}
|
||||
|
||||
sketch.windowResized = () => {
|
||||
sketch.resizeCanvas(width, height);
|
||||
resetSketch();
|
||||
}
|
||||
};
|
||||
|
||||
myp5 = new p5(sketch, container);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
mic.stop();
|
||||
myp5.remove();
|
||||
console.log('Mic Stopped');
|
||||
});
|
||||
|
||||
</script>
|
||||
55
src/routes/projects/django-site.svelte
Normal file
55
src/routes/projects/django-site.svelte
Normal file
@@ -0,0 +1,55 @@
|
||||
<svelte:head>
|
||||
<title>Django Site</title>
|
||||
</svelte:head>
|
||||
|
||||
<img class="rounded" src="gif/django.gif" alt="django gif">
|
||||
|
||||
<hr>
|
||||
|
||||
<h1>Django Site</h1>
|
||||
|
||||
<p>
|
||||
I have had many iterations of my personal websites. I mostly use it to collect my projects and as an opportunity to learn new technologies. I started out way back with a simple WAMP stack using my windows machine to host simple static page resumes. Things have changed a lot since then and I have touched on many frameworks, operating systems and different types of virtualization to host machines. My django site was a notable iteration. It was a website that I fully deployed at home on my own super micro server. It used Django / python / nginx on a hyper-V / ubuntu virtual machine. I wanted to deploy a full LAMP stack from top to bottom and show it in practice while also touching up on my front-end skills and making a fully responsive and mobile friendly website.
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<p>
|
||||
Though it was originally hosted at home on my server. I have since migrated the site to a gcloud instance. You can find it below still kicking with a run down of the technologies in practice. Also includes a nice little diagram of the original network.
|
||||
</p>
|
||||
|
||||
<a rel=prefetch href="https://django.wompmacho.com/super_micro/"><i class="rounded fab fa-python fa-3x"></i></a>
|
||||
|
||||
<style>
|
||||
p{
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
a{
|
||||
margin-top: 1em;
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
a:hover{
|
||||
background-color: #1e1e1e;
|
||||
color: red;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: x-large;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
hr{
|
||||
background-color: red;
|
||||
max-width: 20vw;
|
||||
}
|
||||
</style>
|
||||
51
src/routes/projects/fractal-tree-app.svelte
Normal file
51
src/routes/projects/fractal-tree-app.svelte
Normal file
@@ -0,0 +1,51 @@
|
||||
<svelte:head>
|
||||
<title>Fractal Tree Java Applet</title>
|
||||
</svelte:head>
|
||||
|
||||
<img class="rounded" src="gif/FractalTree.gif" alt="Svelte Logo">
|
||||
|
||||
<hr>
|
||||
|
||||
<h1>Fractal Tree Java Applet</h1>
|
||||
|
||||
<p>
|
||||
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>
|
||||
|
||||
<hr>
|
||||
|
||||
<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;
|
||||
}
|
||||
|
||||
a:hover{
|
||||
background-color: #1e1e1e;
|
||||
color: red;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
p{
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
hr{
|
||||
background-color: red;
|
||||
max-width: 20vw;
|
||||
}
|
||||
</style>
|
||||
@@ -1,16 +0,0 @@
|
||||
import posts from './_posts.js';
|
||||
|
||||
const contents = JSON.stringify(posts.map(post => {
|
||||
return {
|
||||
title: post.title,
|
||||
slug: post.slug
|
||||
};
|
||||
}));
|
||||
|
||||
export function get(req, res) {
|
||||
res.writeHead(200, {
|
||||
'Content-Type': 'application/json'
|
||||
});
|
||||
|
||||
res.end(contents);
|
||||
}
|
||||
@@ -1,34 +1,19 @@
|
||||
<script context="module">
|
||||
export function preload() {
|
||||
return this.fetch(`projects.json`).then(r => r.json()).then(posts => {
|
||||
return { posts };
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export let posts;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
ul {
|
||||
margin: 0 0 1em 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
<title>Projects</title>
|
||||
<title>Past and Current Projects</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>Past Projects</h1>
|
||||
<h1>Past and Current Projects</h1>
|
||||
|
||||
<ul>
|
||||
{#each posts as post}
|
||||
<!-- we're using the non-standard `rel=prefetch` attribute to
|
||||
tell Sapper to load the data for the page as soon as
|
||||
the user hovers over the link or taps it, instead of
|
||||
waiting for the 'click' event -->
|
||||
<li><a rel="prefetch" href="projects/{post.slug}">{post.title}</a></li>
|
||||
{/each}
|
||||
</ul>
|
||||
<figure class="">
|
||||
<video class="shadow rounded" type="video/mp4" src="video/ledCube.mp4" autoplay="true" loop="true" video muted="true" style="height: 100%; width: 100%; object-fit: cover;" alt="Video Of LED Cube I Made"></video>
|
||||
<figcaption>Led Cube I made on Live Stream</figcaption>
|
||||
</figure>
|
||||
|
||||
<style>
|
||||
h1{
|
||||
text-align: center;
|
||||
}
|
||||
figcaption{
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
48
src/routes/projects/this-website.svelte
Normal file
48
src/routes/projects/this-website.svelte
Normal file
@@ -0,0 +1,48 @@
|
||||
<svelte:head>
|
||||
<title>About this website</title>
|
||||
</svelte:head>
|
||||
|
||||
<hr>
|
||||
|
||||
<h1>About this website</h1>
|
||||
|
||||
<p>
|
||||
This website uses the Svelte/Sapper Web Framework. It is deployed using node and nginx on ubuntu in a gcloud virtual instance. It also utilizes certbot for https. ♥
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="container">
|
||||
<img src="img/logo-512.png" alt="Svelte Logo">
|
||||
<img src="img/node.png" alt="Svelte Logo">
|
||||
<img src="img/nginx.png" alt="Svelte Logo">
|
||||
<img src="img/gcloud.png" alt="Svelte Logo">
|
||||
<img src="img/ubuntu.png" alt="Svelte Logo">
|
||||
<img src="img/certbot.png" alt="Svelte Logo">
|
||||
</div>
|
||||
|
||||
<style>
|
||||
p{
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.container{
|
||||
padding: 5em;
|
||||
}
|
||||
|
||||
img{
|
||||
max-height: 6em;
|
||||
display: inline-block;
|
||||
margin: auto 1em;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: x-large;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
hr{
|
||||
background-color: red;
|
||||
max-width: 20vw;
|
||||
}
|
||||
</style>
|
||||
257
src/routes/projects/tuner.svelte
Normal file
257
src/routes/projects/tuner.svelte
Normal file
@@ -0,0 +1,257 @@
|
||||
<svelte:head>
|
||||
<title>JavaScript Guitar Tuner</title>
|
||||
</svelte:head>
|
||||
|
||||
<div id="tuner_sketch" class="content"></div>
|
||||
|
||||
<hr>
|
||||
|
||||
<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>
|
||||
|
||||
<hr>
|
||||
|
||||
<h5>Click on page to enable permissions and start the tuner</h5>
|
||||
|
||||
<style>
|
||||
#tuner_sketch{
|
||||
height: 50vh;
|
||||
width: calc(50vh / 1.5);
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
hr{
|
||||
background-color: red;
|
||||
max-width: 20vw;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: x-large;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
h5{
|
||||
font-size: smaller;
|
||||
max-width: 40vw;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { onDestroy } from 'svelte'
|
||||
|
||||
let mic, myp5;
|
||||
|
||||
onMount(async () => {
|
||||
const container = document.getElementById('tuner_sketch');
|
||||
const p5Module = await import("p5");
|
||||
window.p5 = p5Module.default;
|
||||
await import("p5/lib/addons/p5.sound");
|
||||
const ml5 = await import("ml5");
|
||||
window.ml5 = ml5.default;
|
||||
|
||||
let pitch;
|
||||
let freq = 0;
|
||||
let threshold = 1;
|
||||
let canvas;
|
||||
let audioContext;
|
||||
let WIDTH = container.clientWidth;
|
||||
let HEIGHT = container.clientHeight;
|
||||
let baseFreq = 440;
|
||||
let test = 0;
|
||||
let notes = [];
|
||||
let img;
|
||||
|
||||
// ml5 pitchdetection-crepe modle can only handle from C#1 - D6 Reliably
|
||||
const model_url = "https://cdn.jsdelivr.net/gh/ml5js/ml5-data-and-models/models/pitch-detection/crepe/";
|
||||
const note_frequencies = "https://gist.githubusercontent.com/quimbs/fe52bc25dca44cd3fcb8/raw/f9fe9c6bb68f343a4b81a17445efc200702d45dd/notes.json";
|
||||
|
||||
const sketch = (sketch) => {
|
||||
|
||||
sketch.preload = () => {
|
||||
// load image
|
||||
img = sketch.loadImage("img/notMyguitar.png");
|
||||
}
|
||||
|
||||
sketch.setup = () => {
|
||||
// Resize for init
|
||||
WIDTH = document.getElementById("tuner_sketch").clientWidth;
|
||||
HEIGHT = document.getElementById("tuner_sketch").clientHeight;
|
||||
|
||||
// Create Canvas
|
||||
sketch.createCanvas(WIDTH, HEIGHT);
|
||||
|
||||
// request access to mic and starting mic
|
||||
audioContext = sketch.getAudioContext();
|
||||
mic = new p5.AudioIn();
|
||||
mic.start(startPitch);
|
||||
console.log('Mic Started');
|
||||
|
||||
// Get notes/freq json
|
||||
getNotes();
|
||||
};
|
||||
|
||||
// fetches notes/freq JSON and overwrites empty note array
|
||||
async function getNotes() {
|
||||
const response = await fetch(note_frequencies);
|
||||
const data = await response.json();
|
||||
notes = data[baseFreq];
|
||||
}
|
||||
|
||||
sketch.draw = () => {
|
||||
WIDTH = container.clientWidth;
|
||||
HEIGHT = container.clientHeight;
|
||||
sketch.clear();
|
||||
resetSketch();
|
||||
}
|
||||
|
||||
function resetSketch(){
|
||||
sketch.image(img, WIDTH / 2 / 2, 0, WIDTH / 2, HEIGHT);
|
||||
sketch.textAlign(sketch.CENTER, sketch.CENTER);
|
||||
sketch.fill(105, 105, 105);
|
||||
sketch.strokeWeight(3);
|
||||
|
||||
let closestNote = 0;
|
||||
let difference = Infinity;
|
||||
for (let i = 0; i < notes.length; i++) {
|
||||
let diff = freq - notes[i].frequency;
|
||||
if (Math.abs(diff) < Math.abs(difference)) {
|
||||
closestNote = notes[i];
|
||||
difference = diff;
|
||||
}
|
||||
}
|
||||
|
||||
// change color based on prox to threshold
|
||||
if (Math.abs(difference) < threshold) {
|
||||
sketch.strokeWeight(6);
|
||||
sketch.stroke(0, 255, 0);
|
||||
sketch.fill(0, 0, 0);
|
||||
} else if (Math.abs(difference) < threshold + 4) {
|
||||
sketch.strokeWeight(4);
|
||||
sketch.stroke(255, 165, 0);
|
||||
} else if (Math.abs(difference) < threshold + 13) {
|
||||
sketch.strokeWeight(3);
|
||||
sketch.stroke(255, 165, 0);
|
||||
}
|
||||
|
||||
// freq text
|
||||
let freq_message = freq.toFixed(2) + " hz";
|
||||
let note_message = closestNote.note;
|
||||
|
||||
// test if pitch detected
|
||||
if ((sketch.i = parseInt(freq_message) < 1)) {
|
||||
freq_message = "no audio detected";
|
||||
sketch.stroke(27, 51, 71);
|
||||
sketch.strokeWeight(3);
|
||||
note_message = "🔇";
|
||||
}
|
||||
|
||||
// draw text
|
||||
function drawText(freq_message, note_message) {
|
||||
sketch.textSize(WIDTH / 16);
|
||||
sketch.text(freq_message, WIDTH / 2, (HEIGHT / 2) * 1.8);
|
||||
sketch.textSize(WIDTH / 6);
|
||||
sketch.text(note_message, WIDTH / 2, (HEIGHT / 2) * 1.5);
|
||||
}
|
||||
|
||||
drawText(freq_message, note_message);
|
||||
|
||||
// Canvas radius
|
||||
let radius = WIDTH / 2;
|
||||
// Default for p5 is RADIANS
|
||||
sketch.angleMode(sketch.DEGREES);
|
||||
// set angle to 90 relative to origin
|
||||
let angle = -90 + difference;
|
||||
// set origin to center
|
||||
let x1 = WIDTH / 2;
|
||||
let y1 = HEIGHT / 2;
|
||||
|
||||
// create circles
|
||||
let x2 = Math.cos(angle) * radius;
|
||||
let y2 = Math.sin(angle) * radius;
|
||||
|
||||
// Draw line
|
||||
sketch.line(x1, y1, x2 + radius, y2 + radius);
|
||||
console.log(
|
||||
"x1=" +
|
||||
x1 +
|
||||
"|" +
|
||||
"y1=" +
|
||||
y1 +
|
||||
"|" +
|
||||
"x2=" +
|
||||
x2 +
|
||||
"|" +
|
||||
"y2=" +
|
||||
y2 +
|
||||
"|" +
|
||||
"radius=" +
|
||||
radius +
|
||||
"|" +
|
||||
"angle=" +
|
||||
angle +
|
||||
"|"
|
||||
);
|
||||
sketch.stroke(0);
|
||||
}
|
||||
|
||||
sketch.windowResized = () => {
|
||||
sketch.resizeCanvas(width, height);
|
||||
resetSketch();
|
||||
}
|
||||
|
||||
// Create pitch from ml5 lib
|
||||
function startPitch() {
|
||||
pitch = ml5.pitchDetection(
|
||||
model_url,
|
||||
audioContext,
|
||||
mic.stream,
|
||||
modelLoaded
|
||||
);
|
||||
}
|
||||
|
||||
// Loads pitch model
|
||||
function modelLoaded() {
|
||||
console.log("Model Loaded");
|
||||
getPitch();
|
||||
}
|
||||
|
||||
// recursively keeps getting pitch
|
||||
function getPitch() {
|
||||
pitch.getPitch(function (err, frequency) {
|
||||
if (frequency) {
|
||||
freq = frequency;
|
||||
} else {
|
||||
freq = -100;
|
||||
}
|
||||
getPitch();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
myp5 = new p5(sketch, container);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
mic.stop();
|
||||
myp5.remove();
|
||||
console.log('Mic Stopped');
|
||||
});
|
||||
</script>
|
||||
76
src/routes/projects/videography.svelte
Normal file
76
src/routes/projects/videography.svelte
Normal file
@@ -0,0 +1,76 @@
|
||||
<svelte:head>
|
||||
<title>Videography</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="container">
|
||||
<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>
|
||||
I do Real Estate Videography.
|
||||
You can find some of my clients videos on YouTube
|
||||
</p>
|
||||
|
||||
<h3>
|
||||
For Bussiness Enquiries: <a href="mailto:wompmacho@gmail.com">wompmacho@gmail.com</a>
|
||||
</h3>
|
||||
|
||||
<hr>
|
||||
|
||||
<a class="rounded bottom_link" rel=prefetch href="media.wompmacho.com"><i class="fab fa-youtube fa-3x"></i></a>
|
||||
|
||||
<style>
|
||||
.container{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
|
||||
}
|
||||
|
||||
iframe{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
p{
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
hr{
|
||||
background-color: red;
|
||||
max-width: 20vw;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: x-large;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
h3{
|
||||
font-size: small;
|
||||
text-align: center;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.bottom_link{
|
||||
margin-top: 1em;
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: rgb(0, 255, 0);
|
||||
}
|
||||
|
||||
.bottom_link:hover{
|
||||
background-color: #1e1e1e;
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
77
src/routes/projects/womp-chat.svelte
Normal file
77
src/routes/projects/womp-chat.svelte
Normal file
@@ -0,0 +1,77 @@
|
||||
<svelte:head>
|
||||
<title>About Wompchat Chrome Extension</title>
|
||||
</svelte:head>
|
||||
|
||||
<img class="gif rounded" src="https://cdn.jsdelivr.net/gh/wompmacho/womp/assets/gif/emotesMenu.gif" alt="WompChat Emote Menu Gif">
|
||||
|
||||
<hr>
|
||||
|
||||
<h1>WompChat Chrome Extension</h1>
|
||||
|
||||
<p>
|
||||
This is a little venture I went on for my chat ♥
|
||||
</p>
|
||||
|
||||
<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>
|
||||
|
||||
<h3>
|
||||
I decided I didn't want to wait and built out something of my own. Find is on the Chrome Store Below.
|
||||
</h3>
|
||||
|
||||
<hr>
|
||||
|
||||
<a class="rounded" rel=prefetch href="https://chrome.google.com/webstore/search/wompmacho"><img src="img/womp-chat/icon48.png" alt="WompChat Icon"></a>
|
||||
|
||||
<style>
|
||||
p{
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
a{
|
||||
margin-top: 1em;
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
a:hover{
|
||||
background-color: #1e1e1e;
|
||||
color: red;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: x-large;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
h3{
|
||||
font-size: smaller;
|
||||
margin: 1em;
|
||||
text-align: center;
|
||||
max-width: 20vw;
|
||||
}
|
||||
|
||||
p{
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.gif{
|
||||
width: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
hr{
|
||||
background-color: red;
|
||||
max-width: 20vw;
|
||||
}
|
||||
</style>
|
||||
29
src/routes/resume/_layout.svelte
Normal file
29
src/routes/resume/_layout.svelte
Normal file
@@ -0,0 +1,29 @@
|
||||
<script>
|
||||
import ResumeNav from '../../components/Resume_Nav.svelte';
|
||||
export let segment;
|
||||
</script>
|
||||
|
||||
|
||||
<ResumeNav {segment}></ResumeNav>
|
||||
|
||||
<main class="shadow p-3 mb-5 bg-white rounded">
|
||||
<slot></slot>
|
||||
</main>
|
||||
|
||||
<div class="spacer"></div>
|
||||
|
||||
<style>
|
||||
main {
|
||||
position: relative;
|
||||
max-width: 60em;
|
||||
background-color: #252526 !important;
|
||||
padding: 2em;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.spacer{
|
||||
height: 5vh;
|
||||
}
|
||||
</style>
|
||||
29
src/routes/resume/consulting.svelte
Normal file
29
src/routes/resume/consulting.svelte
Normal file
@@ -0,0 +1,29 @@
|
||||
<svelte:head>
|
||||
<title>Consulting</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>Consulting</h1>
|
||||
|
||||
<!-- Datacenter Operations Engineer -->
|
||||
<h3 class="">
|
||||
GIG Description -
|
||||
<span class="twitter">Company</span>
|
||||
</h3>
|
||||
<span class="twitterIcon right">Special icon</span>
|
||||
|
||||
<h4 class="">March 2016 - Sep 2017</h4>
|
||||
<p class="">
|
||||
Info about the consulting gig
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<style>
|
||||
h1{
|
||||
text-align: center;
|
||||
}
|
||||
hr{
|
||||
background-color: red;
|
||||
max-width: 20vw;
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,68 @@
|
||||
<svelte:head>
|
||||
<title>education</title>
|
||||
<title>Education</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>Education Page</h1>
|
||||
<h1>Education</h1>
|
||||
|
||||
<p>In conjunction with Experiance Page</p>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<hr>
|
||||
|
||||
<style>
|
||||
h1{
|
||||
text-align: center;
|
||||
}
|
||||
h3{
|
||||
font-size: large;
|
||||
}
|
||||
h4{
|
||||
font-size: small;
|
||||
}
|
||||
hr{
|
||||
background-color: red;
|
||||
max-width: 20vw;
|
||||
}
|
||||
</style>
|
||||
64
src/routes/resume/esports.svelte
Normal file
64
src/routes/resume/esports.svelte
Normal file
@@ -0,0 +1,64 @@
|
||||
<svelte:head>
|
||||
<title>Esports</title>
|
||||
</svelte:head>
|
||||
|
||||
<figure class="">
|
||||
<video class="shadow rounded" type="video/mp4" src="video/overwatch_clips.mp4" autoplay="true" loop="true" video muted="true" style="height: 100%; width: 100%; object-fit: cover;" alt="Video Of Clips From Live Stream"></video>
|
||||
<!-- <figcaption>sup</figcaption> -->
|
||||
</figure>
|
||||
|
||||
<h1>Esports</h1>
|
||||
|
||||
<!-- Overwatch T3 Coach -->
|
||||
<h3><span class="overwatch">Overwatch</span> T3 Coach</h3>
|
||||
<span class="overwatchIcon right"></span>
|
||||
|
||||
<h4 class="">Sep 2017 - Present</h4>
|
||||
<p>
|
||||
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
|
||||
them in their growth in esports, strategy, planning and mindset for becoming a professional gamer. I
|
||||
am currently coaching 4 teams actively ranging from diamond tier to T3 top 500 teams. As a streamer
|
||||
and youtuber I have also had the unique opportunity to be exposed to the social media presence of
|
||||
the
|
||||
Overwatch scene and participated in many events which have helped organizations within the Overwatch
|
||||
realm
|
||||
grow. This has also been a great platform for me to live coach students and teams so that I can
|
||||
reach a broader audience while also 1on1 coaching individuals. I do a lot of vod reviews and
|
||||
educational content for teams privately with 1000+ hours of coaching ranging in skill from bronze
|
||||
to Top 500. I strive to accomplish the goal of having every student to receive my coaching to become
|
||||
a better player and professional in some meaningful and impactful way.
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- Skycru Alpha Esports Captain -->
|
||||
<h3><span class="skycru">Skycru Alpha</span> Esports Captain</h3>
|
||||
<span class="skycruIcon right"></span>
|
||||
<h4>October 2017 - May 2018</h4>
|
||||
<p>
|
||||
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>
|
||||
<ul>
|
||||
<li>2019 Overwatch Open Division Season 1 - North America</li>
|
||||
<li>ZOTAC CUP Overwatch Community Tournament #16 - North America</li>
|
||||
<li>ZOTAC CUP Overwatch Community Tournament #19 - North America</li>
|
||||
</ul>
|
||||
<p>
|
||||
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
|
||||
also worked as a player development coach providing counselling and dispute management.
|
||||
</p>
|
||||
|
||||
<style>
|
||||
h1{
|
||||
text-align: center;
|
||||
}
|
||||
hr{
|
||||
background-color: red;
|
||||
max-width: 20vw;
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,118 @@
|
||||
<svelte:head>
|
||||
<title>experiance</title>
|
||||
<title>Experiance</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>Experiance Page</h1>
|
||||
|
||||
<p>Need A Direct Link For This Page</p>
|
||||
<h1>Experiance</h1>
|
||||
|
||||
|
||||
<!-- Datacenter Operations Engineer -->
|
||||
<h3 class="">
|
||||
Datacenter Operations Engineer -
|
||||
<span class="twitter">Twitter</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.
|
||||
Maintaining
|
||||
infrastructure and bringing sites up to and surpassing SLAs cross country at Sacramento and
|
||||
Atlanta
|
||||
site as well as pop locations. On-call and attending conferences acting as liaison/brand
|
||||
Ambassador
|
||||
for Twitter and reporting on new Technologies. Provided onsite support to network
|
||||
engineering and
|
||||
site reliability teams.
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- Site Operations (STA) -->
|
||||
<h3 class="">Site Operations (STA) -
|
||||
<span class="twitter">Twitter</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
|
||||
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
|
||||
have been
|
||||
responsible for the installation, upgrades, repairs, troubleshooting and management of many
|
||||
variations of platforms on enterprise server hardware. I have provided onsite support to
|
||||
network
|
||||
engineering and site reliability teams and worked diligently to target machines by
|
||||
importance of
|
||||
priority towards the achievement of service level agreement goals. I endeavour to assist my
|
||||
colleagues by providing thoroughly detailed documentation, support and continuously looking
|
||||
for the
|
||||
most effective and efficient workflows, keeping Twitter online and servicing its customers.
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- 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="inc">Inc.</span>
|
||||
</h3>
|
||||
<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
|
||||
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
|
||||
been responsible for maintaining backup libraries, disk security, hardware qualifications, quality
|
||||
assurance, decommission and installation of new hardware and upgrading existing hardware. I
|
||||
coordinate, communicate and assist management, leads and other teams in order to support an
|
||||
effective and efficient workflow. I endeavor to support all my peers to the best of my ability in
|
||||
order to keep Google orderly, efficient and running.
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- Pet Care Specialist - Fins Feathers Paws & Claws -->
|
||||
<h3 class="">Pet Care Specialist - <span class="fins_feathers_paws_and_claws">Fins Feathers Paws &
|
||||
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
|
||||
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
|
||||
keep the store clean and working in a constant efficient workflow. I became acquainted with many
|
||||
forms of pet care services. I specialized in exotic pet care including reptiles birds and freshwater
|
||||
fish. I performed every duty that could be expected of anyone working in a pet store from customer
|
||||
services and sales to fish tank cleaning and nail trimming. I worked hard attempting to make sure
|
||||
every animal I sold went to the right customer and was cared for correctly. I am very happy to work
|
||||
and care for animals.
|
||||
</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>
|
||||
|
||||
|
||||
<style>
|
||||
h1{
|
||||
text-align: center;
|
||||
}
|
||||
hr{
|
||||
background-color: red;
|
||||
max-width: 20vw;
|
||||
}
|
||||
</style>
|
||||
12
src/routes/resume/index.svelte
Normal file
12
src/routes/resume/index.svelte
Normal file
@@ -0,0 +1,12 @@
|
||||
<svelte:head>
|
||||
<title>Resume</title>
|
||||
</svelte:head>
|
||||
|
||||
|
||||
<p>If you are seeing this, you are at my resume Index</p>
|
||||
|
||||
<style>
|
||||
p{
|
||||
margin: 1em;
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +0,0 @@
|
||||
<svelte:head>
|
||||
<title>Videography</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>Videography Page</h1>
|
||||
|
||||
<p>Videography Stuff Lives Here</p>
|
||||
197
src/routes/wompchat.svelte
Normal file
197
src/routes/wompchat.svelte
Normal file
@@ -0,0 +1,197 @@
|
||||
<svelte:head>
|
||||
<title>Wompchat Chrome Extension Page</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>WompChat</h1>
|
||||
|
||||
<img class="gif rounded" src="" alt="WompChat Logo" />
|
||||
|
||||
<h2>Welcome To The Chat</h2>
|
||||
|
||||
<h4>
|
||||
We Are Changing Our Name!
|
||||
</h4>
|
||||
|
||||
<h5>
|
||||
Aparently LIVE CHAT was a bad idea. Now We Are WompChat.
|
||||
</h5>
|
||||
|
||||
<hr>
|
||||
|
||||
<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" />
|
||||
</a>
|
||||
<a href="https://cdn.jsdelivr.net/gh/wompmacho/womp/src/assets/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" />
|
||||
</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" />
|
||||
</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"><button type="button" class="btn btn-dark">Contact Me</button></a>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3>
|
||||
Things I am Working on:
|
||||
</h3>
|
||||
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li><s>Theater Mode Fix for that quality Stream and Chat time</s></li>
|
||||
<li>Autocomplete for emote Selection</li>
|
||||
<li>Unicode Font Converter</li>
|
||||
<li>Theater Mode for regular youtube</li>
|
||||
<li>Better Moderation Option</li>
|
||||
<li>User Profile Info Popup</li>
|
||||
<li>Other Styling Options</li>
|
||||
<li>Youtube Chatbot
|
||||
<ul>
|
||||
<li>Stream Overlay For Chat That Shows Emotes</li>
|
||||
<li>IRC Client for Youtube</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Emote Library
|
||||
<ul>
|
||||
<li>Upload Your Own Emotes</li>
|
||||
<li>Specific channel Emotes for WompChat</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3>How To:</h3>
|
||||
|
||||
<p>
|
||||
There is still a lot of stuff I am working on. This is very Beta at the moment so
|
||||
</p>
|
||||
|
||||
<h4>Use At Your Own Risk</h4>
|
||||
|
||||
<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>
|
||||
|
||||
<p class="highlight">
|
||||
Don't forget to pin this extension for easy access.
|
||||
</p>
|
||||
|
||||
<img class="gif rounded" src="https://cdn.jsdelivr.net/gh/wompmacho/womp/assets/gif/pinYourExtension.gif" alt="pinYourExtension.gif" />
|
||||
|
||||
<p>
|
||||
Youtube Live is slow to load its pages currently.
|
||||
Give the extension a moment while the page's iframes are loading.
|
||||
Once you see the Emote Panel Icon you can open the Emote Selection Panel.
|
||||
</p>
|
||||
|
||||
<img class="gif rounded" src="https://cdn.jsdelivr.net/gh/wompmacho/womp/assets/gif/emotesMenu.gif" alt="emotesMenu.gif" />
|
||||
|
||||
<p class="highlight">
|
||||
Enhanced Theater Mode Is Now Available. Just click the check in the option panel and refresh your page.
|
||||
</p>
|
||||
|
||||
<img class="gif rounded" style="height: 540px; width: 960px;" src="https://github.com/wompmacho/womp/blob/main/cdn/assets/gif/theaterMode.gif?raw=true" alt="theaterMode.gif" />
|
||||
|
||||
<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://cdn.jsdelivr.net/gh/wompmacho/womp/assets/gif/optionsMenu.gif" alt="optionsMenu.gif" />
|
||||
|
||||
<p>
|
||||
Can Also Click on UserNames To Autofill an @ Notification
|
||||
</p>
|
||||
|
||||
<img class="gif rounded" src="https://cdn.jsdelivr.net/gh/wompmacho/womp/assets/gif/clickUserNamesToAtThem.gif" alt="clickUserNamesToAtThem.gif" />
|
||||
|
||||
<h3>more on the way, but for now...</h3>
|
||||
|
||||
<h2>Enjoy!</h2>
|
||||
|
||||
|
||||
<style>
|
||||
.highlight{
|
||||
font-weight:700;
|
||||
color: #00ff00;
|
||||
text-align: center;
|
||||
}
|
||||
.container{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: xx-large;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size: x-large;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h3{
|
||||
text-align: center;
|
||||
font-size: larger;
|
||||
margin-bottom: 1em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
h4{
|
||||
margin: 1em;
|
||||
text-align: center;
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
h5{
|
||||
text-align: center;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
p{
|
||||
margin: auto;
|
||||
max-width: 40vw;
|
||||
padding: 1em;
|
||||
background-color: #333333;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #cccccc;
|
||||
text-decoration: none;
|
||||
margin: .5em;
|
||||
}
|
||||
|
||||
/* clearfix */
|
||||
ul::after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
hr{
|
||||
background-color: red;
|
||||
max-width: 20vw;
|
||||
}
|
||||
|
||||
.gif{
|
||||
display: block;
|
||||
height: 50vh;
|
||||
margin: auto;
|
||||
padding: 2em;
|
||||
}
|
||||
</style>
|
||||
@@ -3,6 +3,7 @@ import polka from 'polka';
|
||||
import compression from 'compression';
|
||||
import * as sapper from '@sapper/server';
|
||||
|
||||
|
||||
const { PORT, NODE_ENV } = process.env;
|
||||
const dev = NODE_ENV === 'development';
|
||||
|
||||
|
||||
@@ -73,11 +73,11 @@ self.addEventListener('fetch', event => {
|
||||
// for pages, you might want to serve a shell `service-worker-index.html` file,
|
||||
// which Sapper has generated for you. It's not right for every
|
||||
// app, but if it's right for yours then uncomment this section
|
||||
/*
|
||||
if (!cachedAsset && url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
|
||||
return caches.match('/service-worker-index.html');
|
||||
}
|
||||
*/
|
||||
|
||||
// if (!cachedAsset && url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
|
||||
// return caches.match('/service-worker-index.html');
|
||||
// }
|
||||
|
||||
|
||||
return cachedAsset || fetchAndCache(event.request);
|
||||
})()
|
||||
|
||||
@@ -1,13 +1,16 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="canonical" href="https://wompmacho.com"/>
|
||||
<link rel="canonical" href="https://www.wompmacho.com"/>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#333333">
|
||||
|
||||
%sapper.base%
|
||||
<!-- Bootstrap -->
|
||||
<script>
|
||||
|
||||
</script>
|
||||
<!-- Font Awesome icons (free version)-->
|
||||
<script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous"></script>
|
||||
<!-- Google fonts-->
|
||||
@@ -47,9 +50,7 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Bootstrap core JS-->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- Third party plugin JS-->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
|
||||
</html>
|
||||
<!-- jQuery, Popper.js, and Bootstrap JS -->
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
|
||||
</html>
|
||||
Reference in New Issue
Block a user