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

commiting a but load of content huehue

Browse Source
This commit is contained in:
wompmacho
2020-11-09 19:39:47 -05:00
parent b1e7384254
commit cdccb41c0c
56 changed files with 4471 additions and 10626 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/routes/_layout.svelte
View File

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

38
src/routes/about.svelte
View File

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

7
src/routes/esports.svelte
View File

@@ -1,7 +0,0 @@
<svelte:head>
<title>esports</title>
</svelte:head>
<h1>Esports Page</h1>
<p>This is the 'esports' page.</p>

30
src/routes/index.svelte
View File

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

57
src/routes/livestream.svelte
View File

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

28
src/routes/projects/[slug].json.js
View File

@@ -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`
}));
}
}

64
src/routes/projects/[slug].svelte
View File

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

160
src/routes/projects/_posts.js
View File

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

16
src/routes/projects/index.json.js
View File

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

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

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

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

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

117
src/routes/resume/experiance.svelte
View File

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

7
src/routes/videography.svelte
View File

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