constants.json

@@ -121,13 +121,6 @@
             "color": "red",
             "caseInsensitive": true
         },
-        {
-            "words": [
-                "EVIL"
-            ],
-            "color": "red",
-            "bold": true
-        },
         {
             "words": [
                 "Spooky's Jump Scare Mansion"
@@ -141,8 +134,7 @@
                 ".html",
                 "Shortcat",
                 "Valve",
-                "Spooky Month",
-                "spooky",
+                "Spooky",
                 "The Ironclad",
                 "Search Party"
             ],

randomThemer.js

@@ -1,8 +1,7 @@
 function rain() {
     var html = ""
 
-    html += `<link rel="stylesheet" type="text/css" href="/themes/rain/style.css">` 
-
+    html += `<link rel="stylesheet" type="text/css" href="/themes/rain/style.css"> <script src="/themes/rain/script.js"></script>`
     html += `<div class="rainStuff"><div class="rainContainer">`
 
     var amount = 7
@@ -58,27 +57,77 @@ function rain() {
     return html
 }
 
-function halloween() {
+function purpleMagic() {
     var html = ""
 
-    html += `<link rel="stylesheet" type="text/css" href="/themes/halloween/style.css">` 
+    html += `<link rel="stylesheet" type="text/css" href="/themes/magic/style.css"> <script src="/themes/magic/script.js"></script>`
+    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
 }
 
+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 = {
     returnTheme: function() {
         var time = new Date()
-
-        if (time.getMonth() + 1 == 10) {
-            return halloween()
-        } 
-
-        else if (time.getDate() % 10 == 0) {
-            return rain()
-        }
-
-        return ""
+        return events[time.getDate() % events.length]
     },
 
 }

static/index.html

@@ -17,22 +17,21 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>Violet's EVIL Purgatory</title>
+    <title>Violet's Purgatory</title>
 
     <meta name="darkreader-lock">
 
-    <meta content="Violet's EVIL Purgatory" property="og:title" />
-    <meta content="Hi, I'm Violet, an EVIL 15 year old web & game developer. Happy Halloween!" property="og:description" />
+    <meta content="Violet's 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="https://api.violets-purgatory.dev/v1/pfp" property="og:image" />
-    <meta content="orange" data-react-helmet="true" name="theme-color" />
+    <meta content="#a200ff" data-react-helmet="true" name="theme-color" />
 </head>
 
 <body>
     {WEATHER_MODIFIER}
-    <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>
+    <h1 class="animatedTitle">Welcome to <span class="mainTitle noHighlight">Violet's Purgatory</span><span class="note">Commit {COMMIT_COUNT}</span></h1>
     <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 class="evil">I know, pretty spooky right</p>
         <hr>
         <div id="card">
             <h2>{Violet}</h2>
@@ -54,7 +53,7 @@
  
             <hr>
            <div>
-                <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>
+                <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>
                 <div class="linkContainer">
                     <a class="chip" href="./socials/">Socials</a>
                     <a class="chip" href="./stats">Stats</a>

static/style.css

@@ -340,7 +340,3 @@ b, b > *, .activityTitle, .activityTitle > *, .bold {
 .durationBarFormatter {
     float: right;
 }
-
-.evil {
-    display: none;
-}

static/themes/code/script.js

@@ -0,0 +1,29 @@
+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)
+//         }
+//     })
+// })

static/themes/code/style.css

@@ -0,0 +1,16 @@
+* {
+    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;
+}

static/themes/halloween/style.css

@@ -1,79 +0,0 @@
-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;
-    }
-} */

static/themes/magic/script.js

@@ -0,0 +1,34 @@
+$(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()
+})

static/themes/magic/style.css

@@ -0,0 +1,44 @@
+
+#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);
+    }
+}

static/themes/rain/script.js

@@ -0,0 +1,28 @@
+$(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()
+})