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

Merge pull request #4 from wompmacho/fixing-video-not-loading-500-error

Browse Source 
minor css updates, moving all videos to django site
This commit is contained in:
wompmacho
2020-11-10 09:12:44 -05:00
committed by GitHub
parent de1dd1ac87 683381ccaa
commit 238c76f058
40 changed files with 195 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/LibLoader.svelte
View File

@@ -1,22 +0,0 @@
<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
src/components/Nav.svelte
View File

@@ -1,6 +1,5 @@
<script>
import Social from '../components/Social.svelte';
import 'bootstrap/dist/css/bootstrap.min.css';
export let segment;
</script>

9
src/routes/about.svelte
View File

@@ -2,6 +2,7 @@
<title>About</title>
</svelte:head>
<img class="rounded" src="./img/old_photos/desk_colored.jpg" alt="django gif">
<h2>(•_•)</h2>
@@ -38,6 +39,11 @@
<hr>
<style>
img{
width: 100%;
padding: 1em;
}
.container{
display: inline-flexbox;
}
@@ -56,8 +62,7 @@
}
h2{
font-size: 5em;
margin: 1em;
font-size: large;
text-align: center;
display: block;
}

68
src/routes/index.svelte
View File

@@ -1,48 +1,36 @@
<script>
import { listen_dev } from "svelte/internal";
</script>
<style>
h1, figure, p {
text-align: center;
margin: 0 auto;
}
h1 {
font-size: 2.8em;
text-transform: uppercase;
font-weight: 700;
margin: 0 0 0.5em 0;
}
figure {
margin: 0 0 1em 0;
}
p {
margin: 1em auto;
}
@media (min-width: 480px) {
/* h1 {
font-size: 4em;
} */
}
</style>
<svelte:head>
<title>WompMacho.com</title>
</svelte:head>
<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>Caption</figcaption> -->
</figure>
<p><strong></strong></p>
<img class="rounded" src="./img/old_photos/swordColorBalenced_1.jpg" alt="django gif">
<h1>wadup fool</h1>
<div class="container rounded">
<p>Eventually This will be replaced with an embed of the stream when live. Working on other things atm.</p>
</div>
<style>
h1 {
text-align: center;
font-size: x-large;
text-transform: uppercase;
font-weight: 700;
}
img{
width: 100%;
padding: 1em;
}
.container{
display: inline-flexbox;
}
p{
margin: 1em;
border-radius: 5px;
padding: 1em;
background-color: #333333;
}
</style>

43
src/routes/livestream.svelte
View File

@@ -3,29 +3,27 @@
</svelte:head>
<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>
<video class="shadow rounded" type="video/mp4" src="https://django.wompmacho.com/static/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>
<h1>Live Stream</h1>
<div class="container">
<a href="https://discord.gg/pVNnTDA"><img src="https://img.shields.io/discord/238458588169895937?label=Discord&style=plastic" alt="Discord Members Online Shield"></a>
</div>
<p>
See Discord for latest Announcements and Go-Live Notifications
</p>
<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>
<h3>
Sep 2016 - Present
</h4>
</h3>
<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>
@@ -43,17 +41,36 @@
</div>
<style>
hr{
background-color: red;
max-width: 20vw;
.container{
display: flex;
justify-content: center;
margin-bottom: 2em;
}
h1{
text-align: center;
font-size: x-large;
}
h3{
font-size: large;
margin-left: 2em;
font-size: medium;
text-align: center;
margin: 1em;
}
p{
margin: 1em;
border-radius: 5px;
padding: 1em;
background-color: #333333;
}
hr{
background-color: red;
max-width: 20vw;
}
a{
color: #00ff00;
}

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

@@ -1,143 +0,0 @@
// Ordinarily, you'd generate this data from markdown files in your
// repo, or fetch them from a database of some kind. But in order to
// avoid unnecessary dependencies in the starter template, and in the
// service of obviousness, we're just going to leave it here.
// This file is called `_posts.js` rather than `posts.js`, because
// we don't want to create an `/projects/posts` route — the leading
// underscore tells Sapper not to do that.
const posts = [
{
title: 'Audio Visualizer',
slug: 'audio-visualizer',
html: `
<!-- Sound Visualizer Animation -->
<div class="animation_container">
<div class="animation_inner">
<div class="" id="sound_visualizer_canvas"></div>
<div class="branding overlay">WompMacho</div>
<div class="logo overlay"
style="background: url('img/WompLogo.png'); height: 100%; width: 100%; background-size: 30%; background-repeat: no-repeat; background-position: center;">
</div>
</div>
</div>
<p>
Javascript web application utilizing the P5.js libraries to
create a visual interpretation of audio. This takes input
via microphone or audio being played locally and uses the
amplitude of the frequencies to animate lines thats
translate into little circles. These circles change color
based on the amplitude and fade to alpha when levels are
lowered. There is additional CSS animations assisting in the
coloring/opacity of the brand name and size manipulation to
give the “pulse effect”.
</p>
<h5>
Click on page to enable permissions and allow for audio
input. Audio player is available in the bottom left corner.
</h5>
<style>
.overlay {
position: absolute;
}
/* -- wrapper -- */
.animation_inner {
height: 100%;
width: 100%;
object-fit: cover;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
font-size: 3.5vw;
animation: brand_name 10s ease infinite alternate;
}
#sound_visualizer_canvas{
height: 100% !important;
width: 100% !important;
}
/* --branding -- */
.branding {
font-family: "Viner Hand ITC";
color: white;
width: 100%;
display: inline-block;
text-align: center;
z-index: 5;
}
/* -- logo -- */
.logo {
position: absolute;
z-index: 4;
animation: size-pulse 15s infinite;
}
.animation_container {
height: 40vh;
width: 40vw;
display: flex;
position: relative;
margin: 0 auto;
justify-content: center;
align-items: center;
}
@keyframes brand_name {
0% {
color: #000;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF;
}
50% {
color: white;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF;
}
100% {
color: white;
text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #228DFF;
}
}
@keyframes size-pulse {
0% {
transform: scale(0.9);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.9);
}
}
</style>
<!-- P5 Lib -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
<!-- ML5 Lib -->
<script src="https://unpkg.com/ml5@0.3.1/dist/ml5.min.js"></script>
<script src="/static/js/sound_visualizer.js"></script>
`
}
];
posts.forEach(post => {
post.html = post.html.replace(/^\t{3}/gm, '');
});
export default posts;

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

@@ -51,9 +51,10 @@
}
p{
max-width: 70vw;
margin: auto;
padding-bottom: 1em;
margin: 1em;
border-radius: 5px;
padding: 1em;
background-color: #333333;
}
h5{

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

@@ -22,7 +22,10 @@ I have had many iterations of my personal websites. I mostly use it to collect m
<style>
p{
margin: auto;
margin: 1em;
border-radius: 5px;
padding: 1em;
background-color: #333333;
}
a{

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

@@ -41,7 +41,10 @@
}
p{
margin: auto;
margin: 1em;
border-radius: 5px;
padding: 1em;
background-color: #333333;
}
hr{

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

@@ -5,7 +5,7 @@
<h1>Past and Current Projects</h1>
<figure class="">
<video class="shadow rounded" type="video/mp4" src="video/ledCube.mp4" autoplay="true" loop="true" video muted="true" style="height: 100%; width: 100%; object-fit: cover;" alt="Video Of LED Cube I Made"></video>
<video class="shadow rounded" type="video/mp4" src="https://django.wompmacho.com/static/video/ledCube.MP4" autoplay="true" loop="true" video muted="true" style="height: 100%; width: 100%; object-fit: cover;" alt="Video Of LED Cube I Made"></video>
<figcaption>Led Cube I made on Live Stream</figcaption>
</figure>

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

@@ -7,32 +7,37 @@
<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. ♥
This website was built using the Svelte/Sapper Web Framework.
It is deployed using Node in a GCloud hosted Docker Container. ♥
</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">
<img src="img/node.png" alt="Node Logo">
<img src="img/gcloud.png" alt="GCloud Logo">
<img src="img/docker_logo.png" alt="Docker Logo">
<img src="img/bootstrap_logo.png" alt="Bootstrap Logo">
<img src="img/html_logo.png" alt="HTML Logo">
<img src="img/css_logo.png" alt="CSS Logo">
</div>
<style>
p{
margin: auto;
margin: 1em;
border-radius: 5px;
padding: 1em;
background-color: #333333;
}
.container{
padding: 5em;
padding: 1em;
display: block;
}
img{
max-height: 6em;
display: inline-block;
margin: auto 1em;
}

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

@@ -27,6 +27,13 @@
<h5>Click on page to enable permissions and start the tuner</h5>
<style>
p{
margin: 1em;
border-radius: 5px;
padding: 1em;
background-color: #333333;
}
#tuner_sketch{
height: 50vh;
width: calc(50vh / 1.5);

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

@@ -41,7 +41,10 @@
}
p{
margin: auto;
margin: 1em;
border-radius: 5px;
padding: 1em;
background-color: #333333;
}
hr{

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

@@ -1,5 +1,5 @@
<svelte:head>
<title>About Wompchat Chrome Extension</title>
<title>Wompchat Chrome Extension</title>
</svelte:head>
@@ -28,7 +28,7 @@
</p>
<h3>
I decided I didn't want to wait and built out something of my own. Find is on the Chrome Store Below.
I decided I didn't want to wait and built out something of my own. Find the extension on the Chrome Store Below.
</h3>
<hr>
@@ -42,8 +42,10 @@
}
p{
margin: auto;
margin: 1em;
border-radius: 5px;
padding: 1em;
background-color: #333333;
}
a{
@@ -71,10 +73,6 @@
margin: auto;
}
p{
margin: auto;
}
.gif{
width: 50%;
display: block;

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

@@ -6,14 +6,27 @@
<!-- Datacenter Operations Engineer -->
<h3 class="">
GIG Description -
<span class="twitter">Company</span>
Media - <span class="">Melanie Colley Realty</span>
</h3>
<span class="twitterIcon right">Special icon</span>
<span class="iconHere"></span>
<h4 class="">March 2020 - Current</h4>
<h4 class="">March 2016 - Sep 2017</h4>
<p class="">
Info about the consulting gig
Social Media Managment, Content Creation, Website Development, Design & SEO, Facebook Ads/Marketing.
</p>
<hr>
<h3 class="">
Media - <span class="">Tabora Farms & Winery</span>
</h3>
<span class="iconHere"></span>
<h4 class="">Febuary 2019 - June 2020</h4>
<p class="">
Social Media Managment, Website Development, Design & SEO. Tax & Licensing for Wine in multiple States.
</p>
<hr>
@@ -26,4 +39,11 @@
background-color: red;
max-width: 20vw;
}
p{
margin: 1em;
border-radius: 5px;
padding: 1em;
background-color: #333333;
}
</style>

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

@@ -65,4 +65,11 @@
background-color: red;
max-width: 20vw;
}
p{
margin: 1em;
border-radius: 5px;
padding: 1em;
background-color: #333333;
}
</style>

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

@@ -3,7 +3,7 @@
</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>
<video class="shadow rounded" type="video/mp4" src="https://django.wompmacho.com/static/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>
@@ -54,6 +54,13 @@
</p>
<style>
p{
margin: 1em;
border-radius: 5px;
padding: 1em;
background-color: #333333;
}
h1{
text-align: center;
}

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

@@ -108,9 +108,17 @@
<style>
p{
margin: 1em;
border-radius: 5px;
padding: 1em;
background-color: #333333;
}
h1{
text-align: center;
}
hr{
background-color: red;
max-width: 20vw;

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

@@ -3,10 +3,24 @@
</svelte:head>
<p>If you are seeing this, you are at my resume Index</p>
<p>If you are seeing this, you have reached the index of my Resume.</p>
<p>
Welcome.
</p>
<hr>
<style>
hr{
background-color: red;
max-width: 20vw;
}
p{
margin: 1em;
border-radius: 5px;
padding: 1em;
background-color: #333333;
}
</style>

4
src/routes/wompchat.svelte
View File

@@ -1,10 +1,10 @@
<svelte:head>
<title>Wompchat Chrome Extension About</title>
<title>Wompchat Chrome Extension</title>
</svelte:head>
<h1>WompChat</h1>
<img title="WompChat" class="gif rounded" src="/img/womp-chat/full512.png" alt="WompChat Logo" />
<img title="WompChat" class="gif rounded" src="./img/womp-chat/full512.png" alt="WompChat Logo" />
<h2>Welcome To The Chat</h2>

7
src/template.html
View File

@@ -7,6 +7,8 @@
<meta name="theme-color" content="#333333">
%sapper.base%
<!-- BootStrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
@@ -17,7 +19,7 @@
<link rel="stylesheet" href="css/global.css">
<link rel="manifest" href="manifest.json" crossorigin="use-credentials">
<link rel="icon" type="image/png" href="icons/favicon.png">
<link rel="icon" href="./icons/favicon.ico" type="image/x-icon" />
<!-- Sapper creates a <script> tag containing `src/client.js`
and anything else it needs to hydrate the app and
@@ -47,5 +49,6 @@
<!-- jQuery, Popper.js, and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</html>

BIN
static/icons/android-chrome-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
static/icons/android-chrome-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
static/icons/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
static/icons/favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 670 B

BIN
static/icons/favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
static/icons/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
static/img/bootstrap_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
static/img/css_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
static/img/docker_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
static/img/html_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
static/img/old_photos/desk_colored.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 853 KiB

BIN
static/img/old_photos/guitarColorBalenced.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 838 KiB

BIN
static/img/old_photos/guitarGear.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
static/img/old_photos/headphonesColorized1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 724 KiB

BIN
static/img/old_photos/headphonesColorized2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 735 KiB

BIN
static/img/old_photos/swordColorBalenced_1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

3
static/video/ledCube.MP4
View File

@@ -1,3 +0,0 @@
version https://git-lfs.github.com/spec/v1
oid sha256:769188788e5e4ed765ed9493318799f8da5f5838dd6838411c69c377ed15f6d7
size 80651090

3
static/video/overwatch_clips.mp4
View File

@@ -1,3 +0,0 @@
version https://git-lfs.github.com/spec/v1
oid sha256:6af006d6b5601c69db1fee6c3858ea644790c5e7a2048a8a33186d4d96c93981
size 104627339

3
static/video/streamClips.mp4
View File

@@ -1,3 +0,0 @@
version https://git-lfs.github.com/spec/v1
oid sha256:a4d381971f1ba7be31d94fba2c2697aeb86bd030615a94165df315f646f2c33c
size 200001826