new website design

2024-07-23 22:53:15 +03:00 · 2024-07-23 22:53:15 +03:00 · 6af6c3ea79
commit 6af6c3ea79
parent 199c85a262
16 changed files with 216 additions and 500 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/global.d.ts
+++ b/global.d.ts
@ -1,15 +1,5 @@
-import P5 from "p5"
-import * as p5Sound from 'p5/lib/addons/p5.sound'
-import * as p5Global from 'p5/global'
-
-export = P5;
-export as namespace p5;
-
 declare global {
-    interface Window {
-        p5: typeof P5,
-        setup: () => void,
-        preload: () => void,
-        draw: () => void
-    }
+    let __BLOG_POSTS__: string[]
+    let __STICKERS__: string[]
 }
+export { };
--- a/package.json
+++ b/package.json
@ -18,7 +18,6 @@
    "esbuild": "^0.23.0",
    "marked": "^13.0.2",
    "mime-types": "^2.1.35",
-    "nano-jsx": "^0.1.0",
-    "p5": "^1.9.4"
+    "nano-jsx": "^0.1.0"
  }
 }
--- a/src/plugins/dev.ts
+++ b/src/plugins/dev.ts
@ -66,6 +66,9 @@ export default class DevPlugin extends Plugin {
        }
        return new Response(rawFile, {
          headers: {
+            "Cache-Control": "no-cache, no-store, must-revalidate",
+            "Pragma": "no-cache",
+            "Expires": "0",
            "Content-Type": (mime.lookup(type) || "application/octet-stream") + "; charset=utf-8",
          },
        });
--- a/src/plugins/variables.ts
+++ b/src/plugins/variables.ts
@ -15,6 +15,9 @@ export default class Variables extends Plugin {
    this.variables["__BLOG_POSTS__"] = JSON.stringify(
      fs.readdirSync("./website/blogs").map((z) => z.replace(".md", ""))
    );
+    this.variables["__STICKERS__"] = JSON.stringify(
+      fs.readdirSync("./website/assets/stickers")
+    );
    const templatePath = path.resolve(__dirname, "../../website/templates");
    if (fs.existsSync(templatePath)) {
      for (const file of fs.readdirSync(templatePath)) {
--- a/website/assets/stickers/meow_sticker.webp
+++ b/website/assets/stickers/meow_sticker.webp
--- a/website/assets/stickers/monero1_sticker.webp
+++ b/website/assets/stickers/monero1_sticker.webp
--- a/website/assets/stickers/monero2_sticker.webp
+++ b/website/assets/stickers/monero2_sticker.webp
--- a/website/assets/stickers/monero3_sticker.webp
+++ b/website/assets/stickers/monero3_sticker.webp
--- a/website/assets/stickers/ovpn_sticker.webp
+++ b/website/assets/stickers/ovpn_sticker.webp
--- a/website/assets/style.css
+++ b/website/assets/style.css
@ -1,36 +1,127 @@
-body[data-theme="light"] {
-    color: #31363F;
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Noto+Emoji:wght@300..700&display=swap");
+
+body {
+  font-family: "Inter", sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+  font-variation-settings: "slnt" 0;
+  scrollbar-color: #ffffffae #000000a1;
+  scrollbar-width: thin;
 }

-body[data-theme="dark"] {
-    color: #eeeeee;
+.order {
+  display: grid;
+  grid-template-areas:
+    "one   two"
+    "four   blog"
+    "three blog";
+  grid-gap: 5px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  height: 98vh;
+}
+@media only screen and (max-width: 600px) {
+  .order {
+    grid-template-areas:
+      "one  "
+      "two  "
+      "blog "
+      "blog ";
+    grid-template-columns: 1fr;
+  }
+  .three {
+    display: none !important;
+  }
+  body {
+    scrollbar-width: auto !important;
+  }
+}
+.emoji {
+  font-family: "Noto Emoji", sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+  font-variation-settings: "slnt" 0;
+}
+.paper > h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+h6s {
+  margin: 0;
+  padding: 0;
+}
+.paper {
+  color: white;
+  background-color: #000000de;
+  padding: 15px;
+  border: 1px black solid;
+  border-radius: 5px;
+  word-wrap: break-word;
+  overflow: auto;
+}
+.blog {
+  grid-area: blog;
+}
+.one {
+  grid-area: one;
+}
+.two {
+  grid-area: two;
+}
+.three {
+  grid-area: three;
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+}
+.three > img,
+.three > video {
+  height: 100%;
+}
+.four {
+  grid-area: four;
+}
+.e-mail {
+  font-size: small;
+}
+/*https://danmarshall.github.io/google-font-to-svg-path/*/
+/*https://yoksel.github.io/url-encoder/*/
+.repeating-bg {
+  background-image: url("data:image/svg+xml,%3Csvg width='99.612' height='99.612' viewBox='0 0 99.612 99.612' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='svgGroup' stroke-linecap='round' fill-rule='evenodd' font-size='9pt' stroke='%23000' stroke-width='0.25mm' fill='%23000' style='stroke:%23000;stroke-width:0.25mm;fill:%23000'%3E%3Cpath d='M 30.47 95.753 A 48.715 48.715 0 0 0 49.806 99.611 Q 60.109 99.611 69.142 95.729 Q 78.175 91.847 85.011 85.011 Q 91.847 78.175 95.729 69.142 Q 99.611 60.109 99.611 49.806 Q 99.611 39.503 95.729 30.47 Q 91.847 21.437 85.011 14.601 Q 78.175 7.765 69.142 3.883 Q 60.109 0.001 49.806 0.001 A 48.715 48.715 0 0 0 30.47 3.859 Q 21.437 7.716 14.576 14.576 Q 7.716 21.437 3.859 30.445 A 46.98 46.98 0 0 0 3.169 32.146 A 48.984 48.984 0 0 0 0.001 49.806 A 48.715 48.715 0 0 0 3.859 69.142 Q 7.716 78.175 14.576 85.035 Q 21.437 91.896 30.47 95.753 Z M 49.806 97.657 A 46.875 46.875 0 0 0 68.409 93.946 Q 77.101 90.236 83.668 83.668 Q 90.236 77.101 93.946 68.409 A 46.875 46.875 0 0 0 97.657 49.806 A 46.875 46.875 0 0 0 93.946 31.202 Q 90.236 22.511 83.668 15.944 Q 77.101 9.376 68.409 5.665 A 46.875 46.875 0 0 0 49.806 1.954 A 46.875 46.875 0 0 0 31.202 5.665 Q 22.511 9.376 15.944 15.944 Q 9.376 22.511 5.665 31.202 A 46.875 46.875 0 0 0 1.954 49.806 A 46.875 46.875 0 0 0 5.665 68.409 Q 9.376 77.101 15.944 83.668 Q 22.511 90.236 31.202 93.946 A 46.875 46.875 0 0 0 49.806 97.657 Z M 25.636 75.441 L 23.976 74.464 Q 26.271 70.314 30.299 67.213 Q 34.327 64.112 39.381 62.355 A 31.511 31.511 0 0 1 49.806 60.597 A 31.511 31.511 0 0 1 60.231 62.355 A 31.668 31.668 0 0 1 69.313 67.237 A 24.816 24.816 0 0 1 74.121 72.115 A 22.347 22.347 0 0 1 75.636 74.464 L 73.976 75.441 A 21.687 21.687 0 0 0 69.296 69.752 A 25.564 25.564 0 0 0 68.043 68.727 A 29.994 29.994 0 0 0 59.547 64.186 Q 54.835 62.55 49.806 62.55 Q 44.777 62.55 40.04 64.186 A 30.049 30.049 0 0 0 32.025 68.342 A 28.374 28.374 0 0 0 31.544 68.702 A 22.453 22.453 0 0 0 26.811 73.573 A 20.69 20.69 0 0 0 25.636 75.441 Z M 29.355 43.927 A 4.755 4.755 0 0 0 32.618 45.216 Q 34.913 45.216 36.549 43.263 A 6.833 6.833 0 0 0 37.75 41.187 A 7.624 7.624 0 0 0 38.185 38.575 A 8.876 8.876 0 0 0 38.177 38.195 A 6.983 6.983 0 0 0 36.549 33.888 A 6.828 6.828 0 0 0 36.126 33.427 A 4.823 4.823 0 0 0 32.618 31.935 A 4.64 4.64 0 0 0 30.025 32.707 A 6.163 6.163 0 0 0 28.712 33.888 Q 27.052 35.841 27.052 38.575 A 8.824 8.824 0 0 0 27.056 38.841 A 6.945 6.945 0 0 0 28.712 43.263 A 6.831 6.831 0 0 0 29.355 43.927 Z M 63.73 43.927 A 4.755 4.755 0 0 0 66.993 45.216 Q 69.288 45.216 70.924 43.263 A 6.833 6.833 0 0 0 72.125 41.187 A 7.624 7.624 0 0 0 72.56 38.575 A 8.876 8.876 0 0 0 72.552 38.195 A 6.983 6.983 0 0 0 70.924 33.888 A 6.828 6.828 0 0 0 70.501 33.427 A 4.823 4.823 0 0 0 66.993 31.935 A 4.64 4.64 0 0 0 64.4 32.707 A 6.163 6.163 0 0 0 63.087 33.888 Q 61.427 35.841 61.427 38.575 A 8.824 8.824 0 0 0 61.431 38.841 A 6.945 6.945 0 0 0 63.087 43.263 A 6.831 6.831 0 0 0 63.73 43.927 Z' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
+  background-position: 20px 20px;
 }

-body[data-theme="dark"]>.center>a {
-    color: #eeeeee !important;
+a {
+  color: white;
+}
+.fake-input > .input {
+  border: none;
+  border-bottom: 2px solid black;
+}
+.fake-input > .input:focus {
+  border-bottom: 2px solid red;
+  outline: none;
+}
+.fake-input {
+  border-radius: 6px;
+  border: 3px solid black;
+  padding: 2px;
+}
+.button {
+  background-color: transparent;
+  border-radius: 6px;
+  border: 3px dotted black;
+  padding: 6px;
 }

-body[data-theme="light"]>.center>a {
-    color: #31363F !important;
-}
-
-:root {
-    font-family: Inter, sans-serif;
-    font-feature-settings: 'liga' 1, 'calt' 1;
-}
-
-@supports (font-variation-settings: normal) {
-    :root {
-        font-family: InterVariable, sans-serif;
-    }
-}
-
-.center {
+.body-center {
  position: absolute;
-    top: 10px;
-    left: 10px;
-}
-
-.selected {
-    font-weight: bold;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
--- a/website/blog.html
+++ b/website/blog.html
@ -1,10 +0,0 @@
-__TEMPLATE_HEAD__
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kimeiga/bahunya/dist/bahunya.min.css">
-</head>
-
-<body>
-    <div id="root"></div>
-    <script type="module" src="scripts/blog.js"></script>
-</body>
-
-</html>
--- a/website/index.html
+++ b/website/index.html
@ -1,54 +1,83 @@
 __TEMPLATE_HEAD__
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.2/p5.min.js"
-    integrity="sha512-eu9vkh+EbAsW3fMmPTj/DP5W3UegIdu0Z/OABMocvoofx43MYBkcQ9hRIVxZndV1vcCYQwBg+U1PkWl04TD0Jg=="
-    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

+<script type="module" src="scripts/blog.js"></script>
+<script>
+    window.addEventListener("load", () => {
+        const stickers = document.getElementById("stickers");
+        if (!stickers) return;
+
+        for (const sticker of __STICKERS__) {
+            const img = document.createElement("img");
+            img.src = "assets/stickers/" + sticker;
+            stickers.appendChild(img);
+        }
+    })
+</script>

 <link rel="stylesheet" href="assets/style.css">
-    <script src="scripts/index.js"></script>
-
 </head>

-<body>
-    <span class="center">
-        <div>
-            <button class="selected" id="home-button">home</button> | <button id="donations-button">donations</button> |
-            <a href="/blog.html"><button>blog</button></a>
-        </div>
-        <span id="home">
-            I'm Latvian, 17. My name's Sophie. I love listening to music, I have <span
-                id="songplays">&lt;loading...&gt;</span> song plays.
+<body class="repeating-bg">
+    <div class="order">
+        <div class="paper one">
+            <h1><span class="emoji">☹️☹️☹️</span>.ovh</h1>
+            <p>I'm Latvian, 17. My name's Sophie <small>meows a lot</small>. I love listening to music.</p>
+            
+            <p>I love to play games with peeps! My favorite games recently have been Minecraft and Stardew Valley! DM me
+                if you wanna play with me ^w^</p>
+
+            <p>
+                DNI:
                <br>
-            I am a JS/TS developer, mostly specializing in backend work.
-            <br>
-            I play minecraft, and upgun with friends. I have developed many bukkit plugins for Paper/Folia/Spigot
-            before, and am pretty well versed in them.
-            <br>
-            Contact me at <a href="https://matrix.to/#/@yourfriend:bark.lgbt">matrix</a>, <a
+                Interact: Any person ever
+            </p>
+            <p>Contact me at <a href="https://matrix.to/#/@yourfriend:bark.lgbt">matrix</a>, <a
                    href="https://discord.com/users/845374523263811614">discord</a>, <a
                    href="https://github.com/fucksophie">github (view projects here)</a>, <a
-                href="https://git.sad.ovh/sophie">sadgit</a>, or <a href="https://bark.lgbt/@yourfriend">mastodon</a>
-            <br>
-            <a href="assets/key.txt">Here's my PGP key.</a>
-        </span>
-        <span id="donations" style="display:none">
+                    href="https://git.sad.ovh/sophie">sadgit</a>, or <a
+                    href="https://bark.lgbt/@yourfriend">mastodon.</a>
+
+            </p>
+            <p>E-mail: (run in JS) <span class="e-mail">new TextDecoder().decode(new Uint8Array([115, 111, 102, 105,
+                    106, 97, 64,
+                    100, 117, 99, 107, 46, 99, 111, 109]))</span></p>
+            <a href="assets/key.txt">Signing PGP key downloadable here.</a>
+        </div>
+        <div class="paper two">
+            <h1>donations</h1>
            <ul>
-                <li>BTC bc1q83jdukjn4a2qm0rmn9tqcfkcq60la22lqy2shx</li>
-                <li>ETH/BSC/<strong>USDT</strong>/USDC (send via BSC) 0xc691cd8950Fdf96Faa2aCA1CA9b4B3Fd5B2a44BB</li>
-                <li>SOL 79NKoiXaPzbwbsD5MFKKwmoeEPKtTsoQFfx64MHmULF7</li>
-                <li><strong>XMR
-                        42iW3icQrybKYieQNSrm76dXetuXD6HaxZDijajXkge7GTSKVG4NefxBj3mbWudpY62dxRTihm4beJgy36X8xFKCTWpVAjS</strong>
+                <li>BTC <strong>bc1q83jdukjn4a2qm0rmn9tqcfkcq60la22lqy2shx</strong>
+                </li>
+                <li>ETH/BSC/USDT/USDC (send via BSC) <strong>0xc691cd8950Fdf96Faa2aCA1CA9b4B3Fd5B2a44BB</strong>
+                </li>
+                <li>SOL <strong>79NKoiXaPzbwbsD5MFKKwmoeEPKtTsoQFfx64MHmULF7</strong>
+                </li>
+                <li>XMR
+                    <strong>
+                        42iW3icQrybKYieQNSrm76dXetuXD6HaxZDijajXkge7GTSKVG4NefxBj3mbWudpY62dxRTihm4beJgy36X8xFKCTWpVAjS
+                    </strong>
+                </li>
+                <li>
+                    <a href="https://ko-fi.com/sophskofi">Ko-fi</a>, Paypal (DM or Email me)
                </li>
            </ul>
-            OR <a href="https://ko-fi.com/sophskofi">kofi</a> OR, dm for paypal
-            <br>
-            <img src="assets/sticker.webp" alt="monero-chan" style="width:128px;">
-        </span>
-    </span>
+        </div>
+        <div class="paper four">
+            <h1>Skills</h1>
+            <!--replace this with Code::Stats once I've actually gotten some time on there-->
+            <ul>
+                <li>Around 8 years of near constant JS/TS development. Full-Stack, including discord bots.</li>
+                <li>3 years of TSX</li>
+                <li>SQL and PostgreSQL(pSQL) since I started development.</li>
+                <li>Lots of webdev build tools and more. <a href="https://git.sad.ovh/sophie/website">This site uses my
+                        own build tools.</a></li>
+                <li>9 years of Java development. Mostly Minecraft plugins and MC related projects.</li>
+            </ul>
+        </div>
+        <div class="paper blog" id="root"></div>
+        <div class="paper three" id="stickers"></div>

-    <span style="position:absolute;left:10px;bottom:10px">
-        Click <kbd>spacebar</kbd> to change the themes.
-    </span>
+    </div>
 </body>

 </html>
--- a/website/scripts/blog.tsx
+++ b/website/scripts/blog.tsx
@ -10,7 +10,6 @@ export interface Metadata {
  filename: string;
 }

-//@ts-expect-error
 const blog_posts = __BLOG_POSTS__ as string[];

 const fetchBlogPosts = async () => {
@ -55,34 +54,31 @@ class Main extends Component {
  }

  render(blogPosts: Metadata[]) {
+    
    const pageOpen = useState<Metadata | undefined>(undefined, "pageOpen");
    const md = new URLSearchParams(location.search).get("md");
+    let pageOpenValueRender = pageOpen[0];

    if (blogPosts) {
      const found = blogPosts.find(z => z.filename == md);
      if (found) {
        pageOpen[1](found);
-        //@ts-expect-error
-        pageOpen[0] = found;
+        pageOpenValueRender = found;
      }
    }

-    if (pageOpen[0]) {
-      return <div><BlogPage metadata={pageOpen[0]} updateParent={this.handleSelfUpdate.bind(this)}
-      ></BlogPage></div>
+    if (pageOpenValueRender) {
+      return <div><BlogPage metadata={pageOpenValueRender} updateParent={this.handleSelfUpdate.bind(this)}></BlogPage></div>
    }

-
-    return <div>
-      <h1> sophie's blog </h1>
-
-      <a style="font-size:xx-large;" href="/">back to main page?</a>
+    return <>
+        <h1> blog </h1>
        {() => {
          if (blogPosts) return this.list(blogPosts)
          else return <h3>Loading...</h3>
        }}
        <Giscus searchTerm="main"></Giscus>
-    </div>
+      </>
  }
 }

--- a/website/scripts/index.ts
+++ b/website/scripts/index.ts
@ -1,385 +0,0 @@
-/*
-  The original version of this ProcessingJava script was written by
-  Jason Labbe (available here: https://openprocessing.org/sketch/377231/)
-
-  This is a highly modified version by Sophie, firstly re-written using JS, and then
-  improved using newer techniques (no more pGraphics, using font toPoints now as an example).
-  Jason Labbe's version is licensed under CC BY-SA 3.0 DEED, and so is this version.
-  
-  https://creativecommons.org/licenses/by-sa/3.0/deed.en
-*/
-
-import type { Keyboard } from "puppeteer";
-
-/*
-  You won't believe what they say about us, bad PR
-  Bad chemistry between the 9 and 3-Star
-  Only real fanatics know, TL;DR
-  In the ER, at the hotel, two key-cards
-  GTB, they still want to hear "GT-R"
-  Black Discharge top, G-Star Raw's
-  Sing Peroxide on the stage in B-sharp
-  black windows on the strip, black Dodge Charge
-*/
-
-// Global variables
-let particles: Particle[] = [];
-let font: p5.Font;
-let bgColor: p5.Color;
-
-let darkMode = false;
-
-let darkTheme: p5.Color;
-let lightTheme: p5.Color;
-
-interface Bounds {
-  x: number;
-  y: number;
-  w: number;
-  h: number;
-}
-
-function generateRandomPos(x: number, y: number, mag: number) {
-  let randomDir = createVector(random(0, width), random(0, height));
-
-  let pos = createVector(x, y);
-  pos.sub(randomDir);
-  pos.normalize();
-  pos.mult(mag);
-  pos.add(x, y);
-
-  return pos;
-}
-
-function getTextSize(text: string, font: p5.Font) {
-  let fontSize = 1200; // Wait, doesn't this impact performance heavily?
-  // Nope, a single iteration (once warmed up) only takes around
-  // 0.04799999999254942ms. This means, that for a 8K screen it'd take
-  // 11ms, and for  normal 1080P screen it takes 20-40ms (891 iterations).
-  // This can be optimized further, but it's a single run of this function
-  // every time the word is rerendered. I don't think it matters nearly as much..
-  // Pouring too much time into this single number.. what the hell
-
-  let bounds: Bounds;
-
-  //let iters = 0;
-  //let time = 0;
-  do {
-    //const loopstart = performance.now();
-    fontSize--;
-    bounds = font.textBounds(text, 0, 0, fontSize) as Bounds;
-    //    const loopend = performance.now();
-    //    time += loopend - loopstart;
-    //    iters += 1;
-  } while (bounds.w > windowWidth - 100);
-  //console.log("Took " + time + "ms for " + iters + " iterations");
-  return fontSize;
-}
-
-class Particle {
-  pos: p5.Vector;
-  vel: p5.Vector;
-  acc: p5.Vector;
-
-  target: p5.Vector;
-
-  closeEnoughTarget: number;
-  maxSpeed: number;
-  maxForce: number;
-  particleSize: number;
-  isKilled: boolean;
-  startColor: p5.Color;
-  targetColor: p5.Color;
-  colorWeight: number;
-  colorBlendRate: number;
-
-  constructor() {
-    this.pos = createVector(0, 0);
-    this.vel = createVector(0, 0);
-    this.acc = createVector(0, 0);
-    this.target = createVector(0, 0);
-
-    this.closeEnoughTarget = 50;
-    this.maxSpeed = 4.0;
-    this.maxForce = 0.1;
-    this.particleSize = 5;
-    this.isKilled = false;
-
-    this.startColor = color(0);
-    this.targetColor = color(0);
-    this.colorWeight = 0;
-    this.colorBlendRate = 0.025;
-  }
-
-  move() {
-    // Check if particle is close enough to its target to slow down
-    let proximityMult = 1.0;
-    let distance = dist(this.pos.x, this.pos.y, this.target.x, this.target.y);
-    if (distance < this.closeEnoughTarget) {
-      proximityMult = distance / this.closeEnoughTarget;
-    }
-
-    //.push force towards target
-    let towardsTarget = createVector(this.target.x, this.target.y);
-    towardsTarget.sub(this.pos);
-    towardsTarget.normalize();
-    towardsTarget.mult(this.maxSpeed * proximityMult);
-
-    let steer = createVector(towardsTarget.x, towardsTarget.y);
-    steer.sub(this.vel);
-    steer.normalize();
-    steer.mult(this.maxForce);
-    this.acc.add(steer);
-
-    // Move particle
-    this.vel.add(this.acc);
-    this.pos.add(this.vel);
-    this.acc.mult(0);
-  }
-
-  draw() {
-    // Draw particle
-    let currentColor = lerpColor(
-      this.startColor,
-      this.targetColor,
-      this.colorWeight
-    );
-
-    noStroke();
-    fill(currentColor);
-    ellipse(this.pos.x, this.pos.y, this.particleSize, this.particleSize);
-
-    // Blend towards its target color
-    if (this.colorWeight < 1.0) {
-      this.colorWeight = min(this.colorWeight + this.colorBlendRate, 1.0);
-    }
-  }
-
-  kill() {
-    if (!this.isKilled) {
-      // Set its target outside the scene
-      let randomPos = generateRandomPos(
-        width / 2,
-        height / 2,
-        (width + height) / 2
-      );
-      this.target.x = randomPos.x;
-      this.target.y = randomPos.y;
-
-      // Begin blending its color to black
-      this.startColor = lerpColor(
-        this.startColor,
-        this.targetColor,
-        this.colorWeight
-      );
-      this.targetColor = color(0);
-      this.colorWeight = 0;
-
-      this.isKilled = true;
-    }
-  }
-}
-
-window.preload = function() {
-  font = loadFont("https://rsms.me/inter/font-files/InterVariable.ttf");
-  darkTheme = color(34, 40, 49, 255);
-  lightTheme = color(238, 238, 238, 255);
-}
-
-function nextWord(word: string) {
-  const fontSize = getTextSize(word, font);
-  const bounds = font.textBounds(word, 0, 0, fontSize) as Bounds;
-  let sampleFactor = 0.2;
-
-  if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
-    sampleFactor = 0.1;
-  }
-
-  let points = font.textToPoints(
-    word,
-    (windowWidth - 25 - bounds.w) / 2,
-    (windowHeight + bounds.h / 2) / 2,
-    fontSize,
-    {
-      sampleFactor,
-      simplifyThreshold: 0,
-    }
-  );
-
-  let newColor = color(
-    random(0.0, 255.0),
-    random(0.0, 255.0),
-    random(0.0, 255.0)
-  );
-
-  let particleCount = particles.length;
-  let particleIndex = 0;
-
-  for (let i = 0; i < points.length; i++) {
-    let randomIndex = Math.floor(random(0, points.length));
-    const point = points[randomIndex];
-
-    let newParticle;
-
-    if (particleIndex < particleCount) {
-      newParticle = particles[particleIndex];
-      newParticle.isKilled = false;
-      particleIndex += 1;
-    } else {
-      newParticle = new Particle();
-
-      let randomPos = generateRandomPos(
-        width / 2,
-        height / 2,
-        (width + height) / 2
-      );
-      newParticle.pos.x = randomPos.x;
-      newParticle.pos.y = randomPos.y;
-
-      newParticle.maxSpeed = random(2.0, 5.0);
-      newParticle.maxForce = newParticle.maxSpeed * 0.025;
-      newParticle.particleSize = random(3, 6);
-      newParticle.colorBlendRate = random(0.0025, 0.03);
-
-      particles.push(newParticle);
-    }
-
-    newParticle.startColor = lerpColor(
-      newParticle.startColor,
-      newParticle.targetColor,
-      newParticle.colorWeight
-    );
-    newParticle.targetColor = newColor;
-    newParticle.colorWeight = 0;
-
-    newParticle.target.x = point.x;
-    newParticle.target.y = point.y;
-  }
-
-  if (particleIndex < particleCount) {
-    for (let i = particleIndex; i < particleCount; i++) {
-      let particle = particles[i];
-      particle.kill();
-    }
-  }
-}
-
-window.windowResized = function() {
-  resizeCanvas(windowWidth, windowHeight);
-}
-
-window.setup = function() {
-  // selection
-  let pages = ["home", "donations"];
-  let selected = "home";
-  pages.forEach(z => {
-    const buttonElement = document.getElementById(z+"-button")!;
-    const element = document.getElementById(z)!;    
-    buttonElement.addEventListener("click", _ => {
-      if(z !== selected) {
-        const selectedElement = document.getElementById(selected)!
-        const selectedButton = document.getElementById(selected+"-button")!
-        selectedElement.style.display = "none";
-        element.style.display = "block";
-        selectedButton.className = ""
-        buttonElement.className = "selected";
-        selected = z;
-
-    
-      }
-    })
-  });
-
-  // lastfm
-  (async () => {
-    const lastfm = await fetch(
-      "https://ws.audioscrobbler.com/2.0/?method=user.getinfo&user=yourfriendoss&api_key=8d983789c771afaeb7412ac358d4bad0&format=json"
-    );
-    const json = await lastfm.json();
-    document.getElementById("songplays")!.innerText = json.user.playcount;
-  })();
-
-  const theme = localStorage.getItem("theme");
-  if (theme == "dark") {
-    bgColor = darkTheme;
-    darkMode = true;
-  } else {
-    bgColor = lightTheme;
-    darkMode = false;
-  }
-  document.body.setAttribute("data-theme", darkMode ? "dark" : "light");
-  const canvas = createCanvas(windowWidth, windowHeight);
-  canvas.position(0, 0);
-  canvas.style("zIndex", "-1");
-  background(bgColor);
-  const p = "sad.ovh"
-  nextWord(p);
-
-  let ticks = 0;
-
-  setInterval(() => {
-    const a = particles.filter(z => {
-      const x = Math.abs(Math.floor(z.vel.x))
-      const y = Math.abs(Math.floor(z.vel.y))
-      if (x == 1 || y == 1 || x == 0 || y == 0) {
-        return false;
-      } else {
-        return true;
-      }
-    }).length;
-
-    if (a == 0) ticks++;
-    if (a != 0) ticks = 0;
-
-    if (ticks == 60 * 8) {
-      ticks = 0;
-      nextWord(p)
-    }
-  }, 1)
-}
-window.keyPressed = function (a) {
-  if(!a) return;
-  const event = a as KeyboardEvent;
-  if (event.code == "Space") {
-    if (darkMode) {
-      bgColor = lightTheme;
-    } else {
-      bgColor = darkTheme;
-    }
-    darkMode = !darkMode;
-    document.body.setAttribute("data-theme", darkMode ? "dark" : "light");
-    localStorage.setItem("theme", darkMode ? "dark" : "light");
-  }
-}
-window.draw = function () {
-  fill(bgColor);
-  noStroke();
-  rect(0, 0, width * 2, height * 2);
-
-  for (let x = particles.length - 1; x > -1; x--) {
-    let particle = particles[x];
-    particle.move();
-    particle.draw();
-
-    if (particle.isKilled) {
-      if (
-        particle.pos.x < 0 ||
-        particle.pos.x > width ||
-        particle.pos.y < 0 ||
-        particle.pos.y > height
-      ) {
-        particles.splice(x, 1);
-      }
-    }
-  }
-}
-
-window.mouseDragged = function () {
-  if (mouseButton == LEFT) {
-    for (const particle of particles) {
-      if (dist(particle.pos.x, particle.pos.y, mouseX, mouseY) < 50) {
-        particle.kill();
-      }
-    }
-  }
-}