Codebase Overhaul:

+ Version bump 1.1.1 -> 1.2.0
+ Structure of the codebase modified for better maintainability
+ Fixed incorrectly labeled buttons
+ Added some additional styles for buttons
+ Added Error handler for WebGL not being enabled (3D Renderer) and fixed firefox specific CSS bugs
+ Added better SSR
+ Added cool matrix background
+ More code optimizations
- Disabled typescript checks on build for more performance and because IDE's checker does it's job already
- Silenced unfixable source map tailwind error (tailwindlabs/tailwindcss#13694)

...and more!

Author: meowabyte

package.json

@@ -1,15 +1,16 @@
 {
   "name": "meowabyte.github.io",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "private": true,
   "license": "MIT",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
+    "tailwindcss": "^4.1.7",
     "lucide-preact": "^0.511.0",
     "preact": "^10.26.5",
     "preact-iso": "^2.9.1",
@@ -22,7 +23,6 @@
     "lightningcss": "^1.30.1",
     "sharp": "^0.34.2",
     "svgo": "^3.3.2",
-    "tailwindcss": "^4.1.7",
     "typescript": "~5.8.3",
     "vite": "^6.3.5",
     "vite-bundle-analyzer": "^0.21.0",

src/app/__prerender.tsx

@@ -2,7 +2,7 @@ if (typeof window !== "undefined") throw new Error("PLEASE DO NOT IMPORT THIS OU
 
 import { prerender as ssr } from "preact-iso"
 import { App } from "./app"
-import { getMetadata } from "../helpers/metadata";
+import { getMetadata } from "../helpers/prerender/metadata";
 
 
 const REQUIRED_PRERENDERS = ["/", "/404"] as const

src/app/app.tsx

@@ -8,7 +8,7 @@ export function App() {
     return <LocationProvider>
         <ErrorBoundary>
             <Router>
-                <Route path="/" component={lazy(() => import("./page"))} />
+                <Route path="/" component={lazy(() => import("./home"))} />
                 <Route path="/404" component={lazy(() => import("./not-found"))} />
                 <Route default component={() => <Navigate to="/404" />} />
             </Router>

src/components/menu/body/aboutme.tsx renamed to src/app/home-sections/aboutme.tsx

@@ -1,9 +1,11 @@
 
+import ModalBody from "../../components/modal/modalbody";
 
-import { calculateAge } from "../../../helpers/utils";
-import { ModalBody } from "../modal";
-
-const age = calculateAge(new Date(2005, 4, 27))
+const age = (() => {
+    const diff = Date.now() - new Date(2005, 4, 27).getTime();
+    const ageDate = new Date(diff);
+    return Math.abs(ageDate.getUTCFullYear() - 1970);
+})()
 
 export default function AboutMe() {
     return <ModalBody className="grid max-lg:w-4/5 max-md:grid-rows-[0.5fr_2fr] md:grid-cols-[1fr_2fr] gap-5">

src/components/menu/body/projects.tsx renamed to src/app/home-sections/projects.tsx

@@ -1,8 +1,7 @@
 import { HardDrive, Link2, StarIcon } from "lucide-preact";
-import { ModalBody } from "../modal";
+import ModalBody from "../../components/modal/modalbody";
 import { SOCIALS } from "./social"
 import { useCallback } from "preact/hooks";
-import languageNames from "../../../helpers/languagenames";
 
 
 type RepoData = { name: string, description: string, stars: number, language: string }
@@ -34,6 +33,14 @@ const FEATURED_REPOS: RepoData[] = [
     }
 ] as const
 
+const languageColors = new Map([
+   ["CSS", "#663399"],
+   ["HTML", "#e34c26"],
+   ["JavaScript", "#f1e05a"],
+   ["Rust", "#dea584"],
+   ["TypeScript", "#3178c6"],
+])
+
 function Project({ repo: { name, description, stars, language } }: { repo: RepoData }) {
     const visitRepo = useCallback(() => window.open(`https://github.com/${SOCIALS.github}/${name}`), [])
 
@@ -44,7 +51,7 @@ function Project({ repo: { name, description, stars, language } }: { repo: RepoD
         </div>
         <span className="min-h-12">{description}</span>
         <div className="flex flex-row justify-between *:flex *:flex-row *:gap-1 *:items-center">
-            <span><div style={{ "--language-color": languageNames.get(language) ?? "#fff" } as any} className="bg-[var(--language-color)] w-[1em] h-[1em] rounded-sm" /> {language}</span>
+            <span><div style={{ "--language-color": languageColors.get(language) ?? "#fff" } as any} className="bg-[var(--language-color)] w-[1em] h-[1em] rounded-sm" /> {language}</span>
             <span><StarIcon size="1.3em" className="inline" /> ±{stars}</span>
         </div>
     </div>

src/components/menu/body/social.tsx renamed to src/app/home-sections/social.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from "preact/hooks";
-import { ModalBody } from "../modal";
+import ModalBody from "../../components/modal/modalbody";
 
 const LINKS = new Map([
     ["youtube", "youtube.com"],

src/app/home.tsx

@@ -0,0 +1,112 @@
+import "../styles/main.css"
+
+import { useCallback, useEffect, useRef, useState } from "preact/hooks"
+import { cn, sleep } from "../helpers/utils"
+import Menu, { MenuProvider } from "../components/menu";
+import MenuButton from "../components/menu/menubutton";
+import SillyRenderer from "../components/silly";
+import { lazy } from "preact-iso";
+
+const MatrixBG = lazy(() => import("../components/bg/matrix"))
+
+const TITLE_TEXT = "Welcome to meowpa.ws!" as const
+const TYPEWRITER_DELAY = 30 as const
+
+const GLITCH_CHARACTERS = ["@", "#", "/", "\\", "&", "%"] as const
+
+export default function Home() {
+  const [isBlinking, setBlinking] = useState(true)
+  const [animationState, setAnimationState] = useState(0)
+  const titleRef = useRef<HTMLSpanElement>(null)
+
+  const startTyping = useCallback(async (clear?: boolean) => {
+    if (!titleRef.current) return;
+
+    let lastBlinkingState = isBlinking;
+    setBlinking(true)
+
+    if (clear) titleRef.current.textContent = ""
+    for(const c of TITLE_TEXT) {
+      titleRef.current.textContent += c
+      await sleep(TYPEWRITER_DELAY)
+    }
+
+    setBlinking(lastBlinkingState)
+  }, [titleRef])
+
+  // Preloading actions
+  useEffect(() => {
+    if (animationState === 2) MatrixBG.preload() // BG Preload
+  }, [animationState])
+
+  // Intro Animation
+  useEffect(() => {
+    const animate = async () => {
+      await sleep(800)
+        .then(() => startTyping(true))
+
+      for (let i = 0; i < 3; i++)
+          await sleep(400)
+            .then(() => setAnimationState(s => s+1))
+    }
+
+    if (document.readyState !== "loading") animate()
+    else document.addEventListener("DOMContentLoaded", animate, { once: true })
+
+    return () => {
+      document.removeEventListener("DOMContentLoaded", animate)
+    }
+  }, [])
+
+  // Title glitch effect
+  useEffect(() => {
+    if (animationState < 2 || !titleRef.current) return;
+
+    const validChars = titleRef.current!.textContent!
+      .split("")
+      .reduce<number[]>((arr, c, i) => {
+        if (c !== " ") arr.push(i)
+        return arr
+      }, [])
+
+    const i = setInterval(async () => {
+      const charIndex = validChars[Math.floor(Math.random() * validChars.length)]
+      const replChar = GLITCH_CHARACTERS[Math.floor(Math.random() * GLITCH_CHARACTERS.length)]
+      
+      const oldTitle = titleRef.current!.textContent!
+      const newTitle = oldTitle.slice(0, charIndex) + replChar + oldTitle.slice(charIndex + 1)
+
+      titleRef.current!.textContent! = newTitle
+      await sleep(100)
+        .then(() => titleRef.current!.textContent! = oldTitle)
+    }, 1500)
+
+    return () => {
+      clearInterval(i)
+    }
+  }, [animationState, titleRef])
+
+  const animationSlide = useCallback((id: number) => cn(
+    "transition duration-200",
+    animationState < id && "opacity-0 -translate-y-5"
+  ), [animationState])
+
+  return (
+    <div class="roboto-mono">
+      <MenuProvider>
+        <div class="select-none fixed left-1/2 top-1/2 -translate-1/2 text-center h-1/2 w-5/6 flex flex-col items-center">
+          <span ref={titleRef} className={cn('text-3xl after:content-["▊"] after:ml-1', isBlinking && "after:animate-[blink_0.5s_alternate_infinite]")}></span>
+          
+          <Menu className={animationSlide(1)}>
+            <MenuButton lazy element={lazy(() => import("./home-sections/aboutme"))}>About Me</MenuButton>
+            <MenuButton lazy element={lazy(() => import("./home-sections/projects"))}>My Projects</MenuButton>
+            <MenuButton lazy element={lazy(() => import("./home-sections/social"))}>My Social Media</MenuButton>
+          </Menu>
+
+          <SillyRenderer className={animationSlide(2)} height={250} width={250} />
+        </div>
+      </MenuProvider>
+      {animationState >= 3 && <MatrixBG className="brightness-90" />}
+    </div>
+  )
+}

src/app/not-found.tsx

@@ -1,9 +1,5 @@
 import NikoLook from "../img/nikolook.webp"
 
 export default function NotFound() {
-  return (
-    <div className="flex flex-col items-center h-screen justify-center">
-      <img src={NikoLook} alt="NikoLook" width={100} height={100} />
-    </div>
-  )
+  return <img src={NikoLook} alt="NikoLook" width={100} height={100} class="fixed inset-1/2 -translate-1/2" />
 }

src/app/page.tsx

@@ -0,0 +1,137 @@
+import { useEffect, useRef, useState } from "preact/hooks"
+import { cn, sleep } from "../../helpers/utils";
+
+const UPDATE_DELAY = 500 as const
+const UPDATE_FADE_OPACITY = 0.2 as const
+const UPDATE_CHARACTERS = ["@", "#", "/", "\\", "&", "%"] as const
+
+
+const FONT_NAME = "Roboto Mono" as const
+const FONT_SIZE = 16 as const
+const FONT = `400 ${FONT_SIZE}px "${FONT_NAME}"` as const
+const FONT_PX = (() => {
+    const c = document.createElement("canvas")
+        .getContext("2d")!
+
+    c.font = FONT
+    return c.measureText("@")
+})()
+
+const FONT_JUMP_SIZE = FONT_PX.actualBoundingBoxAscent + 10
+const UPDATE_FADE_SIZE = FONT_JUMP_SIZE * (Math.ceil(1 / UPDATE_FADE_OPACITY) * 4)
+
+
+type BMAddToMatrixOptions = {
+    /** Position of the element. Random by default */
+    x?: number,
+    /** fillStyle of the element. White by default */
+    style?: string,
+    /** Delay between ticks */
+    delay?: number
+}
+
+class BackgroundManager {
+    target: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    updateInterval?: number;
+
+    constructor(target: HTMLCanvasElement) {
+        this.target = target;
+        this.ctx = this.target.getContext("2d", { willReadFrequently: true })!
+
+        this.setupCanvas()
+        this.setupEvents()
+    }
+
+    setupCanvas() {
+        const canvasData = [this.target.width, this.target.height].includes(0)
+            ? null
+            : this.ctx.getImageData(0, 0, this.target.width, this.target.height)
+
+        this.target.width = window.innerWidth
+        this.target.height = window.innerHeight
+
+        if (canvasData) this.ctx.putImageData(canvasData, 0, 0)
+    }
+
+    setupEvents() {
+        window.addEventListener("resize", this.setupCanvas.bind(this))
+
+        document.fonts.ready
+            .then(() => {
+                this.updateInterval = setInterval(this.addToMatrix.bind(this), UPDATE_DELAY) as unknown as number;
+                this.addToMatrix()
+            })
+    }
+    
+    destroy() {
+        window.removeEventListener("resize", this.setupCanvas.bind(this))
+        if (this.updateInterval) clearInterval(this.updateInterval)
+    }
+
+
+
+    async addToMatrix(o?: BMAddToMatrixOptions) {
+        const x = (() => {
+            const x = o?.x ?? Math.floor(Math.random() * this.target.width)
+            return x - x % FONT_PX.width
+        })()
+        
+        for (let y = 0; y < this.target.height + UPDATE_FADE_SIZE; y += FONT_JUMP_SIZE) {
+            if (x > this.target.width) break; // Resized - disable if outside of area
+
+            // Char
+            this.ctx.fillStyle = o?.style ?? "white"
+            this.ctx.font = FONT
+            this.ctx.fillText(
+                UPDATE_CHARACTERS[Math.floor(Math.random() * UPDATE_CHARACTERS.length)],
+                x, y
+            )
+
+            // Fading
+            this.ctx.fillStyle = `rgba(0,0,0,${UPDATE_FADE_OPACITY})`
+            this.ctx.fillRect(
+                x, y,
+                FONT_PX.width, -UPDATE_FADE_SIZE
+            )
+
+            await sleep(o?.delay ?? 100)
+        }
+    }
+}
+
+export default function MatrixBG({ className }: { className?: string }) {
+    const ref = useRef<HTMLCanvasElement>(null)
+    const [bg, setBg] = useState<BackgroundManager | null>(null)
+
+    // BG add to matrix effect
+    useEffect(() => {
+        if (!bg) return;
+
+        const addToMatrix = ({ x }: MouseEvent) => {
+            bg.addToMatrix({
+                x,
+                style: "red",
+                delay: 30
+            })
+        }
+
+        window.addEventListener("click", addToMatrix)
+        return () => { window.removeEventListener("click", addToMatrix) }
+    }, [bg])
+
+    // Init BG
+    useEffect(() => {
+        if (!ref.current) return;
+        
+        const bg = new BackgroundManager(ref.current)
+        setBg(bg)
+        
+        return () => { bg.destroy() }
+    }, [])
+
+    return <canvas
+        class={cn(className, "fixed left-0 top-0 -z-[9999] pointer-events-none")}
+        ref={ref}
+    />
+}