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

commiting a but load of content huehue

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

10333
static/css/bootstrap-grayscale-styles.css vendored
View File

File diff suppressed because it is too large Load Diff

22
static/css/branding.css Normal file
View 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
View 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
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
static/gif/django.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 978 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
static/img/logo-192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
static/img/logo-512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
static/img/womp-chat/icon48.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

8
static/manifest.json
View File

@@ -1,18 +1,18 @@
{
"background_color": "#ffffff",
"theme_color": "#333333",
"name": "TODO",
"short_name": "TODO",
"name": "WompMacho.com",
"short_name": "WompMacho.com",
"display": "minimal-ui",
"start_url": "/",
"icons": [
{
"src": "logo-192.png",
"src": "img/logo-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "logo-512.png",
"src": "img/logo-512.png",
"sizes": "512x512",
"type": "image/png"
}

3
static/video/ledCube.MP4 Normal file
View File

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

3
static/video/overwatch_clips.mp4 Normal file
View File

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

3
static/video/streamClips.mp4 Normal file
View File

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