Make sure to check out this project on Forgejo!
-I know, pretty spooky right
{Violet}
@@ -54,7 +53,7 @@
-
Hi, I'm Violet! an EVIL 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.
+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.
Socials
Stats
diff --git a/static/style.css b/static/style.css
index 98293f8..ae3c4fd 100644
--- a/static/style.css
+++ b/static/style.css
@@ -339,8 +339,4 @@ b, b > *, .activityTitle, .activityTitle > *, .bold {
.durationBarFormatter {
float: right;
-}
-
-.evil {
- display: none;
}
\ No newline at end of file
diff --git a/static/themes/code/script.js b/static/themes/code/script.js
new file mode 100644
index 0000000..3f8f6bb
--- /dev/null
+++ b/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)
+// }
+// })
+// })
\ No newline at end of file
diff --git a/static/themes/code/style.css b/static/themes/code/style.css
new file mode 100644
index 0000000..fff5fed
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/static/themes/halloween/style.css b/static/themes/halloween/style.css
deleted file mode 100644
index ad43751..0000000
--- a/static/themes/halloween/style.css
+++ /dev/null
@@ -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;
- }
-} */
\ No newline at end of file
diff --git a/static/themes/magic/script.js b/static/themes/magic/script.js
new file mode 100644
index 0000000..dbe136e
--- /dev/null
+++ b/static/themes/magic/script.js
@@ -0,0 +1,34 @@
+$(document).ready(() => {
+ function particle() {
+ var particle = $("")
+ 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()
+})
\ No newline at end of file
diff --git a/static/themes/magic/style.css b/static/themes/magic/style.css
new file mode 100644
index 0000000..1721029
--- /dev/null
+++ b/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);
+ }
+}
\ No newline at end of file
diff --git a/static/themes/rain/script.js b/static/themes/rain/script.js
new file mode 100644
index 0000000..2205cb4
--- /dev/null
+++ b/static/themes/rain/script.js
@@ -0,0 +1,28 @@
+$(document).ready(() => {
+ function particle() {
+ var particle = $("")
+ 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()
+})
\ No newline at end of file