Compare commits
2 commits
25287795d8
...
242af79ed0
Author | SHA1 | Date | |
---|---|---|---|
242af79ed0 | |||
e3cfd9142f |
10 changed files with 113 additions and 221 deletions
|
@ -121,6 +121,13 @@
|
||||||
"color": "red",
|
"color": "red",
|
||||||
"caseInsensitive": true
|
"caseInsensitive": true
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"words": [
|
||||||
|
"EVIL"
|
||||||
|
],
|
||||||
|
"color": "red",
|
||||||
|
"bold": true
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"words": [
|
"words": [
|
||||||
"Spooky's Jump Scare Mansion"
|
"Spooky's Jump Scare Mansion"
|
||||||
|
@ -134,7 +141,8 @@
|
||||||
".html",
|
".html",
|
||||||
"Shortcat",
|
"Shortcat",
|
||||||
"Valve",
|
"Valve",
|
||||||
"Spooky",
|
"Spooky Month",
|
||||||
|
"spooky",
|
||||||
"The Ironclad",
|
"The Ironclad",
|
||||||
"Search Party"
|
"Search Party"
|
||||||
],
|
],
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
function rain() {
|
function rain() {
|
||||||
var html = ""
|
var html = ""
|
||||||
|
|
||||||
html += `<link rel="stylesheet" type="text/css" href="/themes/rain/style.css"> <script src="/themes/rain/script.js"></script>`
|
html += `<link rel="stylesheet" type="text/css" href="/themes/rain/style.css">`
|
||||||
|
|
||||||
html += `<div class="rainStuff"><div class="rainContainer">`
|
html += `<div class="rainStuff"><div class="rainContainer">`
|
||||||
|
|
||||||
var amount = 7
|
var amount = 7
|
||||||
|
@ -57,77 +58,27 @@ function rain() {
|
||||||
return html
|
return html
|
||||||
}
|
}
|
||||||
|
|
||||||
function purpleMagic() {
|
function halloween() {
|
||||||
var html = ""
|
var html = ""
|
||||||
|
|
||||||
html += `<link rel="stylesheet" type="text/css" href="/themes/magic/style.css"> <script src="/themes/magic/script.js"></script>`
|
html += `<link rel="stylesheet" type="text/css" href="/themes/halloween/style.css">`
|
||||||
html += `<div class="magicStuff"><div class="magicContainer">`
|
|
||||||
|
|
||||||
var amount = 15
|
|
||||||
|
|
||||||
for (let index = 0; index < amount; index++) {
|
|
||||||
html += `<div class="particle"></div>`
|
|
||||||
}
|
|
||||||
html += "<style>"
|
|
||||||
for (let index = 0; index < amount; index++) {
|
|
||||||
html += `
|
|
||||||
.particle:nth-of-type(${index + 1}) {
|
|
||||||
animation: magic${index} ${((Math.round(Math.random() * 10) / 10) * 0.3) + 20}s linear, sway 4s cubic-bezier(0.445, 0.05, 0.55, 0.95) alternate;
|
|
||||||
animation-delay: ${Math.round(Math.random() * 100) / 100 * 20}s;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
if (index % 2 == 0) {
|
|
||||||
html.replace("alternate", "alternate-reverse")
|
|
||||||
}
|
|
||||||
|
|
||||||
var pos = Math.round(Math.random() * 100)
|
|
||||||
|
|
||||||
html += `@keyframes magic${index} { `
|
|
||||||
|
|
||||||
html += `
|
|
||||||
0% {
|
|
||||||
top: 110vh;
|
|
||||||
right: ${pos}%;
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
90% {
|
|
||||||
top: -10vh;
|
|
||||||
right: ${pos}%;
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
90.1% {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
html += `}`
|
|
||||||
|
|
||||||
}
|
|
||||||
html += "</style>"
|
|
||||||
html += "</div></div>"
|
|
||||||
|
|
||||||
return html
|
return html
|
||||||
}
|
}
|
||||||
|
|
||||||
function code() {
|
|
||||||
return '<link rel="stylesheet" type="text/css" href="/themes/code/style.css">' // <script src="/themes/code/script.js"></script>'
|
|
||||||
}
|
|
||||||
|
|
||||||
var events = []
|
|
||||||
events = events.concat(Array(10).fill(""))
|
|
||||||
events.push(rain())
|
|
||||||
|
|
||||||
events = events.concat(Array(10).fill(""))
|
|
||||||
events.push(purpleMagic())
|
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
returnTheme: function() {
|
returnTheme: function() {
|
||||||
var time = new Date()
|
var time = new Date()
|
||||||
return events[time.getDate() % events.length]
|
|
||||||
|
if (time.getMonth() + 1 == 10) {
|
||||||
|
return halloween()
|
||||||
|
}
|
||||||
|
|
||||||
|
else if (time.getDate() % 10 == 0) {
|
||||||
|
return rain()
|
||||||
|
}
|
||||||
|
|
||||||
|
return ""
|
||||||
},
|
},
|
||||||
|
|
||||||
}
|
}
|
|
@ -17,21 +17,22 @@
|
||||||
<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.0">
|
||||||
|
|
||||||
<title>Violet's Purgatory</title>
|
<title>Violet's EVIL Purgatory</title>
|
||||||
|
|
||||||
<meta name="darkreader-lock">
|
<meta name="darkreader-lock">
|
||||||
|
|
||||||
<meta content="Violet's Purgatory" property="og:title" />
|
<meta content="Violet's EVIL Purgatory" property="og:title" />
|
||||||
<meta content="Hi, I'm Violet, a 15 year old web & game developer. My site has info about me, so please visit!" property="og:description" />
|
<meta content="Hi, I'm Violet, an EVIL 15 year old web & game developer. Happy Halloween!" property="og:description" />
|
||||||
<meta content="https://api.violets-purgatory.dev/v1/pfp" property="og:image" />
|
<meta content="https://api.violets-purgatory.dev/v1/pfp" property="og:image" />
|
||||||
<meta content="#a200ff" data-react-helmet="true" name="theme-color" />
|
<meta content="orange" data-react-helmet="true" name="theme-color" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
{WEATHER_MODIFIER}
|
{WEATHER_MODIFIER}
|
||||||
<h1 class="animatedTitle">Welcome to <span class="mainTitle noHighlight">Violet's Purgatory</span><span class="note">Commit {COMMIT_COUNT}</span></h1>
|
<h1 class="animatedTitle">Welcome to <span class="mainTitle noHighlight">Violet's <span class="evil">EVIL</span> Purgatory</span><span class="note">Commit {COMMIT_COUNT}</span></h1>
|
||||||
<main class="animatedMain">
|
<main class="animatedMain">
|
||||||
<p>Make sure to check out this project on <a href="https://git.violets-purgatory.dev/bingus_violet/violets-purgatory">Forgejo</a>!</p>
|
<p>Make sure to check out this project on <a href="https://git.violets-purgatory.dev/bingus_violet/violets-purgatory">Forgejo</a>!</p>
|
||||||
|
<p class="evil">I know, pretty spooky right</p>
|
||||||
<hr>
|
<hr>
|
||||||
<div id="card">
|
<div id="card">
|
||||||
<h2>{Violet}</h2>
|
<h2>{Violet}</h2>
|
||||||
|
@ -53,7 +54,7 @@
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
<div>
|
<div>
|
||||||
<p style="padding: 10px;">Hi, I'm Violet! a 15 year old web and game developer. I make dynamic websites with server-side rendering, so no Javascript needed! I'm currently making games in the Godot Engine, and my dynamic sites in NodeJS.</p>
|
<p style="padding: 10px;">Hi, I'm Violet! a<span class="evil">n EVIL</span> 15 year old web and game developer. I make dynamic websites with server-side rendering, so no Javascript needed! I'm currently making games in the Godot Engine, and my dynamic sites in NodeJS.</p>
|
||||||
<div class="linkContainer">
|
<div class="linkContainer">
|
||||||
<a class="chip" href="./socials/">Socials</a>
|
<a class="chip" href="./socials/">Socials</a>
|
||||||
<a class="chip" href="./stats">Stats</a>
|
<a class="chip" href="./stats">Stats</a>
|
||||||
|
|
|
@ -340,3 +340,7 @@ b, b > *, .activityTitle, .activityTitle > *, .bold {
|
||||||
.durationBarFormatter {
|
.durationBarFormatter {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.evil {
|
||||||
|
display: none;
|
||||||
|
}
|
|
@ -1,29 +0,0 @@
|
||||||
function typeWriter(elem, delay) {
|
|
||||||
var elemText = elem.text().split('')
|
|
||||||
elem.text('_'.repeat(elemText.length))
|
|
||||||
var i = 0
|
|
||||||
function nextLetter() {
|
|
||||||
elem.text(elemText.slice(0, i).join('') + '_'.repeat(elemText.length - i))
|
|
||||||
if (i < elemText.length) {
|
|
||||||
setTimeout(() => {
|
|
||||||
i++
|
|
||||||
nextLetter()
|
|
||||||
}, 20)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
setTimeout(() => {
|
|
||||||
if (elem.text() == '_'.repeat(elemText.length)) {
|
|
||||||
nextLetter()
|
|
||||||
}
|
|
||||||
}, delay);
|
|
||||||
}
|
|
||||||
|
|
||||||
// $(document).ready(() => {
|
|
||||||
// var i = 0
|
|
||||||
// var arr = $("span").each((_, item) => {
|
|
||||||
// if ($(item).text().length > 0) {
|
|
||||||
// i++
|
|
||||||
// typeWriter($(item), i * 150)
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
// })
|
|
|
@ -1,16 +0,0 @@
|
||||||
* {
|
|
||||||
font-family: "Consolas", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New";
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mainTitle, .mainTitle > span {
|
|
||||||
color: limegreen !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mainTitle {
|
|
||||||
animation: typer 2s linear;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
79
static/themes/halloween/style.css
Normal file
79
static/themes/halloween/style.css
Normal file
|
@ -0,0 +1,79 @@
|
||||||
|
body {
|
||||||
|
background-image: linear-gradient(rgb(40, 25, 0), black 100vh);
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainTitle {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainTitle > .evil {
|
||||||
|
color: red;
|
||||||
|
|
||||||
|
/* animation-name: evilReveal;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-fill-mode: both; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.evil {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#card {
|
||||||
|
/* background-color: rgb(75, 0, 0); */
|
||||||
|
/* border-color: orange; */
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href]:not(.chip) {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
body::after {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: rgb(30, 4, 75);
|
||||||
|
background-image: linear-gradient(rgb(30, 4, 75), black);
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
opacity: 0;
|
||||||
|
content: "";
|
||||||
|
|
||||||
|
z-index: -1;
|
||||||
|
|
||||||
|
animation-name: flashbang;
|
||||||
|
animation-delay: 0.9s;
|
||||||
|
animation-duration: 3s;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes flashbang {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes orangeShift {
|
||||||
|
0% {
|
||||||
|
color:
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes evilReveal {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
} */
|
|
@ -1,34 +0,0 @@
|
||||||
$(document).ready(() => {
|
|
||||||
function particle() {
|
|
||||||
var particle = $("<div></div>")
|
|
||||||
particle.addClass("particle")
|
|
||||||
particle.css("left", (Math.random() * 100).toString() + "%")
|
|
||||||
particle.css("visibility", "visible")
|
|
||||||
particle.css("top", "100%")
|
|
||||||
var anim = "sway 4s infinite cubic-bezier(0.445, 0.05, 0.55, 0.95)"
|
|
||||||
if (Math.round(Math.random()) == 1) {
|
|
||||||
anim += " alternate"
|
|
||||||
} else {
|
|
||||||
anim += " alternate-reverse"
|
|
||||||
}
|
|
||||||
particle.css("animation", anim)
|
|
||||||
|
|
||||||
particle.animate({
|
|
||||||
"top": "-5%"
|
|
||||||
}, (((Math.round(Math.random() * 10) / 10) * 0.3) + 20) * 1000, () => {
|
|
||||||
particle.remove()
|
|
||||||
})
|
|
||||||
|
|
||||||
$(".magicContainer").append(particle)
|
|
||||||
}
|
|
||||||
|
|
||||||
$(".magicContainer > *").remove()
|
|
||||||
|
|
||||||
function loop() {
|
|
||||||
particle()
|
|
||||||
setTimeout(() => {
|
|
||||||
loop()
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
loop()
|
|
||||||
})
|
|
|
@ -1,44 +0,0 @@
|
||||||
|
|
||||||
#card {
|
|
||||||
background-color: rgba(25, 0, 70, 1);
|
|
||||||
/* backdrop-filter: blur(5px); */
|
|
||||||
}
|
|
||||||
.magicStuff {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
height: 0;
|
|
||||||
z-index: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.magicContainer {
|
|
||||||
height: 100vh;
|
|
||||||
width: 100vw;
|
|
||||||
top: 0px;
|
|
||||||
left: 0vw;
|
|
||||||
position: absolute;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.particle {
|
|
||||||
position: absolute;
|
|
||||||
width: 5px;
|
|
||||||
aspect-ratio: 1/1;
|
|
||||||
background-color: rgb(100, 70, 255);
|
|
||||||
/* background-image: radial-gradient(rgba(175, 0, 255, 1) 0% 25%, rgba(175, 0, 255, 0.6) 25% 50%, rgba(175, 0, 255, 0.3) 50% 75%, rgba(0, 0, 255, 0)); */
|
|
||||||
border-radius: 50%;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: linear-gradient(black, rgb(50, 0, 90));
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes sway {
|
|
||||||
from {
|
|
||||||
transform: translateX(-30px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: translateX(30px);
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,28 +0,0 @@
|
||||||
$(document).ready(() => {
|
|
||||||
function particle() {
|
|
||||||
var particle = $("<div></div>")
|
|
||||||
particle.addClass("rainDrop")
|
|
||||||
particle.css("left", (Math.random() * 100).toString() + "%")
|
|
||||||
particle.css("visibility", "visible")
|
|
||||||
particle.css("top", "-10%")
|
|
||||||
|
|
||||||
particle.animate({
|
|
||||||
"top": "110%",
|
|
||||||
"easing": "linear"
|
|
||||||
}, 600, () => {
|
|
||||||
particle.remove()
|
|
||||||
})
|
|
||||||
|
|
||||||
$(".rainContainer").append(particle)
|
|
||||||
}
|
|
||||||
|
|
||||||
$(".rainContainer > *").remove()
|
|
||||||
|
|
||||||
function loop() {
|
|
||||||
particle()
|
|
||||||
setTimeout(() => {
|
|
||||||
loop()
|
|
||||||
}, 100 * (Math.random() + 0.25));
|
|
||||||
}
|
|
||||||
loop()
|
|
||||||
})
|
|
Loading…
Reference in a new issue