Add hax0r message

src/components/HackerText.astro

@@ -0,0 +1,54 @@
+---
+interface Props {
+    text: string;
+}
+
+const { text } = Astro.props;
+---
+
+<p id="text" data-value={text} class="mt-4 text-center text-white font-mono text-7xl">{text}</p>
+
+<script>
+    // Code I stole
+    const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    const targetElement = document.querySelector("#text") as HTMLElement;
+
+    function performTrick() {
+        let interval = 0;
+        let iteration = 0;
+
+        clearInterval(interval);
+
+        const originalText = targetElement.dataset.value || "";
+
+        interval = setInterval(() => {
+            targetElement.innerText = originalText
+                .split("")
+                .map((letter, index) => {
+                    if (index < iteration) {
+                        return originalText[index];
+                    }
+
+                    return alphabet[
+                        Math.floor(Math.random() * alphabet.length)
+                    ];
+                })
+                .join("");
+
+            if (iteration >= originalText.length) {
+                clearInterval(interval);
+            }
+
+            iteration += 1 / 3;
+        }, 30);
+    }
+
+    performTrick();
+
+    // Rerun trick on mouseover 
+    if (targetElement) {
+        targetElement.addEventListener("mouseover", (event) => {
+            performTrick();
+        });
+    }
+</script>

src/pages/index.astro

@@ -3,6 +3,7 @@ import "@/styles/globals.css";
 import { Image } from "astro:assets";
 
 import Navbar from "../components/Navbar.astro";
+import HackerText from "../components/HackerText.astro";
 
 import foscLogo from "../assets/img/fosc-logo-old.png";
 ---
@@ -30,7 +31,7 @@ import foscLogo from "../assets/img/fosc-logo-old.png";
           <div class="mt-[10vh] h-[30vh]">
             <Image class="h-full w-auto" src={foscLogo} alt="FOSC Logo" />
           </div>
-          <p class="mt-4 text-center text-white">Welcome to FOSC</p>
+          <HackerText text="FOSC"></HackerText>
         </div>
 
       </div>
@@ -40,6 +41,8 @@ import foscLogo from "../assets/img/fosc-logo-old.png";
 
 <style>
   body {
+    background-color: black !important;
     background-image: url(../img/coreboot2.webp);
   }
 </style>
+

tailwind.config.cjs

@@ -1,4 +1,6 @@
 /** @type {import('tailwindcss').Config} */
+const defaultTheme = require("tailwindcss/defaultTheme");
+
 module.exports = {
   darkMode: ["class"],
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
@@ -11,6 +13,9 @@ module.exports = {
       },
     },
     extend: {
+      fontFamily: {
+        mono: ["Researcher", ...defaultTheme.fontFamily.sans],
+      },
       colors: {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",