commiting a but load of content huehue
This commit is contained in:
wompmacho
1787
package-lock.json
generated
1787
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
13
package.json
13
package.json
@@ -9,13 +9,16 @@
|
|||||||
"start": "node __sapper__/build"
|
"start": "node __sapper__/build"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"bootstrap": "^4.5.3",
|
||||||
"compression": "^1.7.1",
|
"compression": "^1.7.1",
|
||||||
|
"jquery": "^3.5.1",
|
||||||
|
"ml5": "^0.6.0",
|
||||||
|
"p5": "^1.1.9",
|
||||||
"polka": "next",
|
"polka": "next",
|
||||||
"sirv": "^1.0.0"
|
"sirv": "^1.0.0",
|
||||||
|
"sveltestrap": "^3.9.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"sapper": "^0.28.0",
|
|
||||||
"svelte": "^3.17.3",
|
|
||||||
"@babel/core": "^7.0.0",
|
"@babel/core": "^7.0.0",
|
||||||
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
|
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
|
||||||
"@babel/plugin-transform-runtime": "^7.0.0",
|
"@babel/plugin-transform-runtime": "^7.0.0",
|
||||||
@@ -28,6 +31,8 @@
|
|||||||
"@rollup/plugin-url": "^5.0.0",
|
"@rollup/plugin-url": "^5.0.0",
|
||||||
"rollup": "^2.3.4",
|
"rollup": "^2.3.4",
|
||||||
"rollup-plugin-svelte": "^6.0.0",
|
"rollup-plugin-svelte": "^6.0.0",
|
||||||
"rollup-plugin-terser": "^7.0.0"
|
"rollup-plugin-terser": "^7.0.0",
|
||||||
|
"sapper": "^0.28.0",
|
||||||
|
"svelte": "^3.29.4"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
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>
|
<script>
|
||||||
export let segment;
|
//export let segment;
|
||||||
import Social from '../components/Social.svelte';
|
import Social from '../components/Social.svelte';
|
||||||
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||||
|
export let segment;
|
||||||
|
|
||||||
</script>
|
</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>
|
<style>
|
||||||
|
|
||||||
|
.navbar-collapse{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
background-color: #323233 !important;
|
background-color: #323233 !important;
|
||||||
border-bottom: 1px solid rgba(255,62,0,0.1);
|
border-bottom: 1px solid rgba(255,62,0,0.1);
|
||||||
font-weight: 300;
|
font-weight: 400;
|
||||||
padding: 0 1em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
@@ -49,30 +71,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #cccccc;
|
color: #cccccc !important;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
padding: 1em 0.5em;
|
padding: 1em 0.5em;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
</style>
|
</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>
|
<social-links>
|
||||||
<div class="social d-flex justify-content-center align-middle">
|
<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 rel=prefetch 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 rel=prefetch class="mx-2" href="https://www.youtube.com/wompmacho"><i class="fab fa-youtube fa-2x"></i></a>
|
||||||
<a 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.twitch.com/wompmacho/"><i class="fab fa-twitch fa-2x"></i></a>
|
||||||
<a 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.facebook.com/wompmacho"><i class="fab fa-facebook 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://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>
|
</div>
|
||||||
</social-links>
|
</social-links>
|
||||||
|
|
||||||
|
|||||||
@@ -14,6 +14,9 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
}
|
}
|
||||||
|
.spacer{
|
||||||
|
height: 5vh;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<Nav {segment}></Nav>
|
<Nav {segment}></Nav>
|
||||||
@@ -22,4 +25,7 @@
|
|||||||
<slot></slot>
|
<slot></slot>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<div class="spacer"></div>
|
||||||
|
|
||||||
|
|
||||||
<Footer></Footer>
|
<Footer></Footer>
|
||||||
@@ -2,6 +2,40 @@
|
|||||||
<title>About</title>
|
<title>About</title>
|
||||||
</svelte:head>
|
</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>
|
<script>
|
||||||
import successkid from 'images/successkid.jpg';
|
|
||||||
import logo_512 from 'images/logo-512.png';
|
import { listen_dev } from "svelte/internal";
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -21,20 +21,14 @@
|
|||||||
margin: 0 0 1em 0;
|
margin: 0 0 1em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 400px;
|
|
||||||
margin: 0 0 1em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: 1em auto;
|
margin: 1em auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 480px) {
|
@media (min-width: 480px) {
|
||||||
h1 {
|
/* h1 {
|
||||||
font-size: 4em;
|
font-size: 4em;
|
||||||
}
|
} */
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
@@ -42,19 +36,13 @@
|
|||||||
<title>WompMacho.com</title>
|
<title>WompMacho.com</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<h1>Great success!</h1>
|
|
||||||
|
|
||||||
<figure class="">
|
<figure class="">
|
||||||
<img src="{logo_512}" alt="">
|
<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> -->
|
||||||
|
|
||||||
<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>
|
|
||||||
</figure>
|
</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>
|
<title>Live Stream</title>
|
||||||
</svelte:head>
|
</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.
|
// underscore tells Sapper not to do that.
|
||||||
|
|
||||||
const posts = [
|
const posts = [
|
||||||
|
|
||||||
|
|
||||||
{
|
{
|
||||||
title: 'WompMacho.com',
|
title: 'Audio Visualizer',
|
||||||
slug: 'this-website',
|
slug: 'audio-visualizer',
|
||||||
html: `
|
html: `
|
||||||
<h3>About This Site goes here</h3>
|
<!-- Sound Visualizer Animation -->
|
||||||
`
|
<div class="animation_container">
|
||||||
},
|
<div class="animation_inner">
|
||||||
{
|
<div class="" id="sound_visualizer_canvas"></div>
|
||||||
title: 'Django Site',
|
<div class="branding overlay">WompMacho</div>
|
||||||
slug: 'django',
|
<div class="logo overlay"
|
||||||
html: `
|
style="background: url('img/WompLogo.png'); height: 100%; width: 100%; background-size: 30%; background-repeat: no-repeat; background-position: center;">
|
||||||
<h3>About Django Site goes here</h3>
|
</div>
|
||||||
`
|
</div>
|
||||||
},
|
</div>
|
||||||
{
|
|
||||||
title: 'Tuner',
|
<p>
|
||||||
slug: 'tuner',
|
Javascript web application utilizing the P5.js libraries to
|
||||||
html: `
|
create a visual interpretation of audio. This takes input
|
||||||
<h3>About Tuner JS goes here</h3>
|
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
|
||||||
title: 'Sound Visualizer',
|
lowered. There is additional CSS animations assisting in the
|
||||||
slug: 'sound-visualizer',
|
coloring/opacity of the brand name and size manipulation to
|
||||||
html: `
|
give the “pulse effect”.
|
||||||
<h3>About Sound Visualizer JS goes here</h3>
|
</p>
|
||||||
`
|
<h5>
|
||||||
},
|
Click on page to enable permissions and allow for audio
|
||||||
{
|
input. Audio player is available in the bottom left corner.
|
||||||
title: 'Fractal Tree App',
|
</h5>
|
||||||
slug: 'fractal-tree-java-applet',
|
|
||||||
html: `
|
<style>
|
||||||
<h3>About Fractal Tree Java Applet App goes here</h3>
|
.overlay {
|
||||||
`
|
position: absolute;
|
||||||
},
|
}
|
||||||
{
|
|
||||||
title: 'Wompchat Chrome Extension',
|
/* -- wrapper -- */
|
||||||
slug: 'wompchat',
|
.animation_inner {
|
||||||
html: `
|
height: 100%;
|
||||||
<h3>About Wompchat Chrome Extension goes here</h3>
|
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>
|
<svelte:head>
|
||||||
<title>Projects</title>
|
<title>Past and Current Projects</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<h1>Past Projects</h1>
|
<h1>Past and Current Projects</h1>
|
||||||
|
|
||||||
<ul>
|
<figure class="">
|
||||||
{#each posts as post}
|
<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>
|
||||||
<!-- we're using the non-standard `rel=prefetch` attribute to
|
<figcaption>Led Cube I made on Live Stream</figcaption>
|
||||||
tell Sapper to load the data for the page as soon as
|
</figure>
|
||||||
the user hovers over the link or taps it, instead of
|
|
||||||
waiting for the 'click' event -->
|
<style>
|
||||||
<li><a rel="prefetch" href="projects/{post.slug}">{post.title}</a></li>
|
h1{
|
||||||
{/each}
|
text-align: center;
|
||||||
</ul>
|
}
|
||||||
|
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>
|
<svelte:head>
|
||||||
<title>education</title>
|
<title>Education</title>
|
||||||
</svelte:head>
|
</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>
|
<svelte:head>
|
||||||
<title>experiance</title>
|
<title>Experiance</title>
|
||||||
</svelte:head>
|
</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 compression from 'compression';
|
||||||
import * as sapper from '@sapper/server';
|
import * as sapper from '@sapper/server';
|
||||||
|
|
||||||
|
|
||||||
const { PORT, NODE_ENV } = process.env;
|
const { PORT, NODE_ENV } = process.env;
|
||||||
const dev = NODE_ENV === 'development';
|
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,
|
// 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
|
// which Sapper has generated for you. It's not right for every
|
||||||
// app, but if it's right for yours then uncomment this section
|
// 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))) {
|
// if (!cachedAsset && url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
|
||||||
return caches.match('/service-worker-index.html');
|
// return caches.match('/service-worker-index.html');
|
||||||
}
|
// }
|
||||||
*/
|
|
||||||
|
|
||||||
return cachedAsset || fetchAndCache(event.request);
|
return cachedAsset || fetchAndCache(event.request);
|
||||||
})()
|
})()
|
||||||
|
|||||||
@@ -1,13 +1,16 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<link rel="canonical" href="https://wompmacho.com"/>
|
<link rel="canonical" href="https://www.wompmacho.com"/>
|
||||||
<meta charset="utf-8">
|
<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">
|
<meta name="theme-color" content="#333333">
|
||||||
|
|
||||||
%sapper.base%
|
%sapper.base%
|
||||||
|
<!-- Bootstrap -->
|
||||||
|
<script>
|
||||||
|
|
||||||
|
</script>
|
||||||
<!-- Font Awesome icons (free version)-->
|
<!-- Font Awesome icons (free version)-->
|
||||||
<script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous"></script>
|
<script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous"></script>
|
||||||
<!-- Google fonts-->
|
<!-- Google fonts-->
|
||||||
@@ -47,9 +50,7 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<!-- Bootstrap core JS-->
|
<!-- jQuery, Popper.js, and Bootstrap JS -->
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
<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"></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>
|
||||||
<!-- Third party plugin JS-->
|
</html>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
|
|
||||||
</html>
|
|
||||||
10333
static/css/bootstrap-grayscale-styles.css
vendored
10333
static/css/bootstrap-grayscale-styles.css
vendored
File diff suppressed because it is too large
Load Diff
22
static/css/branding.css
Normal file
22
static/css/branding.css
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
/* Brand */
|
||||||
|
.brand {
|
||||||
|
font-family: "Viner Hand ITC";
|
||||||
|
animation: brand_name 10s ease infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
.branding_contain {
|
||||||
|
height: 40vh;
|
||||||
|
width: 40vw;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
margin: 0 auto;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Brand on hover */
|
||||||
|
.brand:hover,
|
||||||
|
.brand:focus {
|
||||||
|
color: #519aba;
|
||||||
|
animation: size-pulse 2s infinite;
|
||||||
|
}
|
||||||
841
static/css/keyframe_animation.css
Normal file
841
static/css/keyframe_animation.css
Normal file
@@ -0,0 +1,841 @@
|
|||||||
|
/* -------------------- keyframes -------------------- */
|
||||||
|
|
||||||
|
@keyframes spiner {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
75% {}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes opacity {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
box-shadow: inset 0px 0px 100px rgba(255, 0, 0, .2);
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
75% {}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
0% { opacity: 0;}
|
||||||
|
50% { opacity: 0.5;}
|
||||||
|
100% { opacity: 1;}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInOut {
|
||||||
|
0% { opacity: 0;}
|
||||||
|
50% { opacity: 1;}
|
||||||
|
100% { opacity: 0;}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide_left {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
5% {
|
||||||
|
transform: translateX(-235px) translateY(-70px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
transform: translateX(-235px) translateY(-70px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide_right {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
5% {
|
||||||
|
transform: translateX(230px) translateY(-80px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
transform: translateX(230px) translateY(-80px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide_up {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
5% {
|
||||||
|
transform: translateX(0px) translateY(-80px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
transform: translateX(0px) translateY(-80px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide_text_up {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
5% {
|
||||||
|
transform: translateX(0px) translateY(-53px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
transform: translateX(0px) translateY(-53px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide_text_left {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
5% {
|
||||||
|
transform: translateX(-235px) translateY(-35px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
transform: translateX(-235px) translateY(-35px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide_text_right {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
5% {
|
||||||
|
transform: translateX(230px) translateY(-35px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
transform: translateX(230px) translateY(-35px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes slide_right_up {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
5% {
|
||||||
|
transform: translateX(230px) translateY(-80px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
transform: translateX(230px) translateY(-80px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide_right_middle {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
5% {
|
||||||
|
transform: translateX(230px) translateY(-15px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
transform: translateX(230px) translateY(-15px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide_right_middle_2 {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
74% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
75% {
|
||||||
|
transform: translateX(230px) translateY(-15px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
}
|
||||||
|
|
||||||
|
90% {
|
||||||
|
transform: translateX(230px) translateY(-15px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
95% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide_right_bottom {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
5% {
|
||||||
|
transform: translateX(230px) translateY(50px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
transform: translateX(230px) translateY(50px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide_text_right_top {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
5% {
|
||||||
|
transform: translateX(230px) translateY(-50px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
transform: translateX(230px) translateY(-50px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide_text_right_middle {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
5% {
|
||||||
|
transform: translateX(230px) translateY(17px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
transform: translateX(230px) translateY(17px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide_text_right_middle_2 {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
74% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
75% {
|
||||||
|
transform: translateX(230px) translateY(17px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
}
|
||||||
|
|
||||||
|
90% {
|
||||||
|
transform: translateX(230px) translateY(17px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
95% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes slide_text_right_bottom {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
5% {
|
||||||
|
transform: translateX(230px) translateY(80px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
transform: translateX(230px) translateY(80px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------------------- Music -------------------- */
|
||||||
|
|
||||||
|
@keyframes scroll {
|
||||||
|
0% {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(0%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scroll_Repeat {
|
||||||
|
0% {
|
||||||
|
transform: translateX(0%);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scroll_text {
|
||||||
|
0% {
|
||||||
|
transform: translateX(100%);
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 11px #fff, 0 0 12px #228DFF, 0 0 13px #228DFF, 0 0 14px #228DFF, 0 0 15px #228DFF, 0 0 16px #228DFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
text-shadow: 0 0 10px #000, 0 0 11px #000, 0 0 12px #000, 0 0 13px #32CD32, 0 0 14px #32CD32, 0 0 15px #32CD32, 0 0 16px #32CD32, 0 0 17px #32CD32;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes music_title {
|
||||||
|
0% {
|
||||||
|
color: black;
|
||||||
|
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* -------------------- alerts -------------------- */
|
||||||
|
|
||||||
|
@keyframes most_recent_follower {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
45% {
|
||||||
|
transform: translateX(0px) translateY(80px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
}
|
||||||
|
|
||||||
|
47% {
|
||||||
|
transform: translateX(0px) translateY(80px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 10px #00F, 0 0 20px #00F, 0 0 30px #00F, 0 0 40px #32CD32, 0 0 70px #32CD32, 0 0 80px #32CD32, 0 0 100px #32CD32, 0 0 150px #32CD32;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes session_top_cheerer {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
53% {
|
||||||
|
transform: translateX(0px) translateY(80px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
}
|
||||||
|
|
||||||
|
57% {
|
||||||
|
transform: translateX(0px) translateY(80px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 10px #00F, 0 0 20px #00F, 0 0 30px #00F, 0 0 40px #32CD32, 0 0 70px #32CD32, 0 0 80px #32CD32, 0 0 100px #32CD32, 0 0 150px #32CD32;
|
||||||
|
}
|
||||||
|
|
||||||
|
60% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes most_recent_subscriber {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
60% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
65% {
|
||||||
|
transform: translateX(0px) translateY(80px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
}
|
||||||
|
|
||||||
|
70% {
|
||||||
|
transform: translateX(0px) translateY(80px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 10px #00F, 0 0 20px #00F, 0 0 30px #00F, 0 0 40px #32CD32, 0 0 70px #32CD32, 0 0 80px #32CD32, 0 0 100px #32CD32, 0 0 150px #32CD32;
|
||||||
|
}
|
||||||
|
|
||||||
|
71% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes most_recent_donator {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
70% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
75% {
|
||||||
|
transform: translateX(0px) translateY(80px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
}
|
||||||
|
|
||||||
|
95% {
|
||||||
|
transform: translateX(0px) translateY(80px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 10px #FF0000, 0 0 20px #FF0000, 0 0 30px #FF0000, 0 0 40px #32CD32, 0 0 70px #32CD32, 0 0 80px #32CD32, 0 0 100px #32CD32, 0 0 150px #32CD32;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes session_top_donator {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
70% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
75% {
|
||||||
|
transform: translateX(0px) translateY(-80px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
||||||
|
}
|
||||||
|
|
||||||
|
95% {
|
||||||
|
transform: translateX(0px) translateY(-80px);
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 10px #FF0000, 0 0 20px #FF0000, 0 0 30px #FF0000, 0 0 40px #32CD32, 0 0 70px #32CD32, 0 0 80px #32CD32, 0 0 100px #32CD32, 0 0 150px #32CD32;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(0px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------------------- filter-animation -------------------- */
|
||||||
|
|
||||||
|
@keyframes filter-animation {
|
||||||
|
0% {
|
||||||
|
filter: hue-rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
filter: hue-rotate(360deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
filter: hue-rotate(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------------------- Brand Name -------------------- */
|
||||||
|
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------------------- pulse -------------------- */
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0% {
|
||||||
|
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
70% {
|
||||||
|
box-shadow: 0 0 0 50px rgba(204, 169, 44, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes size-pulse {
|
||||||
|
0% {
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes size-pulse-large {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: scale(1.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* -------------------- spiral -------------------- */
|
||||||
|
|
||||||
|
@keyframes spiral {
|
||||||
|
0% {
|
||||||
|
transform: scaleX(0);
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: scaleX(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: scaleX(0);
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------------------- shine -------------------- */
|
||||||
|
|
||||||
|
@keyframes shine {
|
||||||
|
0% {
|
||||||
|
background-image: -webkit-linear-gradient(top left,
|
||||||
|
rgba(255, 255, 255, 0.0) 0%,
|
||||||
|
rgba(255, 255, 255, 0.2) 45%,
|
||||||
|
rgba(255, 255, 255, 0.5) 48%,
|
||||||
|
rgba(255, 255, 255, 0.8) 50%,
|
||||||
|
rgba(255, 255, 255, 0.5) 52%,
|
||||||
|
rgba(255, 255, 255, 0.2) 57%,
|
||||||
|
rgba(255, 255, 255, 0.0) 100%);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
transform: translate(-100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translate(300%);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------------------- lines -------------------- */
|
||||||
|
|
||||||
|
@keyframes lines {
|
||||||
|
|
||||||
|
0%,
|
||||||
|
50%,
|
||||||
|
100% {
|
||||||
|
transform: translateY(0%);
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
transform: translateY(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
75% {
|
||||||
|
transform: translateY(-100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
50
static/css/sound_visualizer.css
Normal file
50
static/css/sound_visualizer.css
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- wrapper -- */
|
||||||
|
.branding_animation {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- Overwrite Canvas default -- */
|
||||||
|
#defaultCanvas0 {
|
||||||
|
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;
|
||||||
|
}
|
||||||
BIN
static/gif/FractalTree.gif
Normal file
BIN
static/gif/FractalTree.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
BIN
static/gif/django.gif
Normal file
BIN
static/gif/django.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 978 KiB |
BIN
static/img/WompLogo.png
Normal file
BIN
static/img/WompLogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
static/img/certbot.png
Normal file
BIN
static/img/certbot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
static/img/gcloud.png
Normal file
BIN
static/img/gcloud.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
BIN
static/img/nginx.png
Normal file
BIN
static/img/nginx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
static/img/node.png
Normal file
BIN
static/img/node.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
static/img/notMyguitar.png
Normal file
BIN
static/img/notMyguitar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
static/img/ubuntu.png
Normal file
BIN
static/img/ubuntu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
static/img/womp-chat/icon48.png
Normal file
BIN
static/img/womp-chat/icon48.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
@@ -1,18 +1,18 @@
|
|||||||
{
|
{
|
||||||
"background_color": "#ffffff",
|
"background_color": "#ffffff",
|
||||||
"theme_color": "#333333",
|
"theme_color": "#333333",
|
||||||
"name": "TODO",
|
"name": "WompMacho.com",
|
||||||
"short_name": "TODO",
|
"short_name": "WompMacho.com",
|
||||||
"display": "minimal-ui",
|
"display": "minimal-ui",
|
||||||
"start_url": "/",
|
"start_url": "/",
|
||||||
"icons": [
|
"icons": [
|
||||||
{
|
{
|
||||||
"src": "logo-192.png",
|
"src": "img/logo-192.png",
|
||||||
"sizes": "192x192",
|
"sizes": "192x192",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"src": "logo-512.png",
|
"src": "img/logo-512.png",
|
||||||
"sizes": "512x512",
|
"sizes": "512x512",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user