update home page

src/app/globals.css

@@ -7,6 +7,15 @@
   --primary: #F48120;
 }
 
+@keyframes click-bounce {
+  0%, 100% {
+    transform: translate(0px, 0px) scale(1, 1);
+  }
+  10% {
+    transform: translate(0px, 14px) scale(1.2, 0.9);
+  }
+}
+
 @keyframes silly-bounce {
   0%, 100% {
     transform: translate(0px, 0px) scale(0.9, 1.1);

src/app/not-found.tsx

@@ -1,4 +1,6 @@
+import WobblingImage from "@/components/wobbling-image";
 import type { Metadata } from "next";
+import Link from "@/components/link";
 
 export const metadata: Metadata = {
   title: "Wep wep",
@@ -8,11 +10,23 @@ export default function NotFound() {
   return (
     <main className="flex items-center h-screen pt-16 md:pt-32 pb-12 px-8 md:px-0">
       <div className="mx-auto w-[380px]">
-        <header className="mb-8 -ms-5 text-center">
-          <h1 className="font-bold text-8xl">404</h1>
-        </header>
-        <div className="">
-          Oh you lost, you know there&apos;s nothing here...
+        <noscript>
+          <header className="mb-8 -ms-5 text-center">
+            <h1 className="font-bold text-8xl">404</h1>
+          </header>
+          <div className="">
+            Oh you lost, you know there&apos;s nothing here...
+          </div>
+        </noscript>
+        <WobblingImage
+          images={{
+            idle: "/images/coralz_idle.png",
+            aware: "/images/coralz_scared.png",
+            poked: "/images/coralz_poked.png"
+          }}
+        />
+        <div className="-mt-2">
+          <Link className="text-xs" target="_blank" href="https://x.com/JoelGuerraC/status/1840178999546319101">{">]"}Image source</Link>
         </div>
       </div>
     </main>

src/app/page.tsx

@@ -1,11 +1,10 @@
 import { LandingImage } from "@/components/landing-image";
 import { NolaGlitchClientOnly } from "@/components/nola-glitch";
 import { Sosmed } from "@/components/sosmed";
-import HomeText from "@/components/home-text.mdx"
+import HomeText from "@/components/texts/home.mdx"
 
-import Link from "next/link";
+import Link from "@/components/link";
 import { FakeWindow, HomeWindows } from "@/components/windows";
-import Taskbar from "@/components/taskbar";
 import { WindowManagerProvider } from "@/hooks/window-manager";
 
 export default function Home() {
@@ -24,16 +23,16 @@ export default function Home() {
           </noscript>
           <NolaGlitchClientOnly />
           <Sosmed />
-          <article className="space-y-6 leading-relaxed relative">
+          <article className="space-y-5 leading-relaxed relative text-sm">
             <HomeText />
           </article>
           <section className="my-8">
-            <p>⚡ Powered with <Link href="https://www.cloudflare.com/" target="_blank" className="text-primary underline">Cloudflare</Link> ☁️</p>
+            <p>⚡ Powered with <Link href="https://www.cloudflare.com/" target="_blank">Cloudflare</Link> ☁️</p>
           </section>
           <footer className="mt-20 text-center">
             <p>&copy; <span className="text-sm">2025 Nomi Nonszy</span></p>
             <p className="text-sm">
-              <Link href={"/terms"} className="text-primary underline">Terms</Link> and <Link href={"/privacy"} className="text-primary underline">Privacy</Link>
+              <Link href={"/terms"}>Terms</Link> and <Link href={"/privacy"}>Privacy</Link>
             </p>
           </footer>
         </FakeWindow>

src/components/client-windows.tsx

@@ -45,6 +45,9 @@ export const FakeRelativeWindow = ({
     content: "animate-[fade-in-half_1s]"
   });
 
+  const offsetRef = useRef({ x: 0, y: 0 });
+  const [isDragging, setDragging] = useState(false);
+
   const popupRef = useRef<HTMLDivElement>(null);
   const pos = useRef({
     dragging: false,
@@ -72,14 +75,6 @@ export const FakeRelativeWindow = ({
     }
   }, []);
 
-  useEffect(() => {
-    console.log(windowManager.windows)
-  }, [windowManager.windows]);
-
-  useEffect(() => {
-    if (popupRef.current) popupRef.current.style.transform = `translate(${currentWindow?.offset.x || 0}px, ${currentWindow?.offset.y || 0}px)`;
-  }, [currentWindow?.offset])
-
   useEffect(() => {
     if (!withAnim) return;
     const node = popupRef.current;
@@ -104,6 +99,18 @@ export const FakeRelativeWindow = ({
     return () => observer.disconnect();
   }, []);
 
+  useEffect(() => {
+    if (popupRef.current && currentWindow) {
+      const initPos = {
+        x: currentWindow.offset.x,
+        y: currentWindow.offset.y
+      }
+      offsetRef.current.x = initPos.x;
+      offsetRef.current.y = initPos.y;
+      popupRef.current.style.transform = `translate(${initPos.x}px, ${initPos.y}px)`;
+    }
+  }, [popupRef.current, currentWindow]);
+
   const toggleMinimize = () => windowManager.toggleMinimize(windowName);
   const handleClose = () => windowManager.close(windowName);
 
@@ -113,19 +120,26 @@ export const FakeRelativeWindow = ({
       pos.current.dragging = true;
       pos.current.mouseX = e.clientX;
       pos.current.mouseY = e.clientY;
-      pos.current.x = currentWindow.offset.x;
-      pos.current.y = currentWindow.offset.y;
+      pos.current.x = offsetRef.current.x;
+      pos.current.y = offsetRef.current.y;
       document.body.style.userSelect = "none";
+      setDragging(true);
     }
     window.addEventListener("mousemove", onMouseMove);
     window.addEventListener("mouseup", onMouseUp);
   };
 
   const onMouseUp = () => {
+    windowManager.move(windowName, {
+      x: offsetRef.current.x,
+      y: offsetRef.current.y
+    });
+
     pos.current.dragging = false;
     document.body.style.userSelect = "";
     window.removeEventListener("mousemove", onMouseMove);
     window.removeEventListener("mouseup", onMouseUp);
+    setDragging(false);
   };
 
   const onMouseMove = (e: MouseEvent) => {
@@ -133,12 +147,10 @@ export const FakeRelativeWindow = ({
     if (pos.current.dragging && popupRef.current) {
       const dx = e.clientX - pos.current.mouseX;
       const dy = e.clientY - pos.current.mouseY;
-      const newX = pos.current.x + dx;
-      const newY = pos.current.y + dy;
-      windowManager.move(windowName, {
-        x: newX,
-        y: newY
-      });
+      const x = pos.current.x + dx;
+      const y = pos.current.y + dy;
+      offsetRef.current = { x, y }
+      popupRef.current.style.transform = `translate(${x}px, ${y}px)`;
     }
   };
 
@@ -146,28 +158,60 @@ export const FakeRelativeWindow = ({
 
   return (
     <div className={clsx("absolute hidden lg:block", className)}>
-      <div className={clsx("mx-auto md:border bg-background border-primary", withAnim && animation.window)} ref={popupRef}>
+      {/* Outline Window */}
+      {draggable && (
         <div
-          className="hidden md:flex bg-primary p-2 justify-between text-background windowbar"
-          onMouseDown={onMouseDown}
+          className={clsx("absolute border-primary w-full z-10", isDragging && "md:border")}
+          ref={popupRef}
         >
-          <div className="ms-1 pointer-events-none">
-            {currentWindow ? currentWindow.name : "Error!"}
-          </div>
-          <div className="flex gap-2">
+          <div
+            className={clsx("hidden md:flex p-2 gap-2 justify-end text-background windowbar", isDragging ? "opacity-0" : "opacity-100")}
+            onMouseDown={onMouseDown}
+          >
             <button
-              className="bg-primary border border-[#FFA826] border-outset p-1"
+              className={clsx("bg-primary border border-[#FFA826] border-outset p-1")}
               onClick={toggleMinimize}
             >
               <Icon icon="lucide:minus"/>
             </button>
             <button
-              className="bg-primary border border-[#FFA826] border-outset p-1"
+              className={clsx("bg-primary border border-[#FFA826] border-outset p-1")}
               onClick={handleClose}
             >
               <Icon icon="lucide:x"/>
             </button>
           </div>
+          <div className={clsx("m-1", currentWindow?.minimized && "h-0")}>
+            <div className={clsx("md:p-4 opacity-0")}>
+              {children}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Main window */}
+      <div
+        className={clsx("md:border bg-background border-primary", withAnim && animation.window)}
+        style={{
+          transform: `translate(${currentWindow.offset.x}px, ${currentWindow.offset.y}px)`
+        }}
+      >
+        <div className="hidden md:flex bg-primary p-2 justify-between text-background windowbar">
+          <div className="ms-1 pointer-events-none">
+            {currentWindow ? currentWindow.name : "Error!"}
+          </div>
+          <div className={clsx("flex gap-2", !isDragging ? "opacity-0" : "opacity-100")}>
+            <button
+              className="bg-primary border border-[#FFA826] border-outset p-1 pointer-events-none"
+            >
+              <Icon icon="lucide:minus"/>
+            </button>
+            <button
+              className="bg-primary border border-[#FFA826] border-outset p-1 pointer-events-none"
+            >
+              <Icon icon="lucide:x"/>
+            </button>
+          </div>
         </div>
         <div className={clsx("m-1 border border-primary", currentWindow?.minimized ? "h-0 overflow-y-clip" : "h-fit")}>
           <div className={clsx("md:p-4", withAnim && animation.content)}>

src/components/home-text.mdx

@@ -1,69 +0,0 @@
-import Image from "next/image"
-import Link from "next/link";
-import { FloatingLabel } from "@/components/floating-label";
-
-Welcome!
-
-This is our cozy little corner of the internet where we run a bunch of services and websites on my own servers.
-
-We've got tools and resources for us but some we provide it for you, stuff that just works and doesn't burn our wallet.
-
-## About Me
-
-Nomi Nonszy (or also known as Nonszy, Nomi Nonsense, whatever, some ppl know my real name).
-I write code and make sure the server doesn't catch on fire lol. 
-
-I build sick web apps with modern stacks (and trash).
-Big fan of open-source stuff, CLI life, Arch 💅.
-I only play indie games, and cooking up cursed mods just for fun.
-
-<Image
-    className="mb-12 mx-auto"
-    alt="Coral"
-    src="https://media1.tenor.com/m/CpCvknTOMMwAAAAC/ena-ena-joel-g.gif"
-    width={250}
-    height={250}
-    unoptimized
-/>
-
-{new Date(Date.now()) < new Date("2026-02-16") && (
-<p>
-    Pls add my <Link href="https://steamcommunity.com/id/nomi_nonsz" target="_blank" className="text-[#F48120] underline">Steam</Link>, I am so lonely 💔. 
-</p>
-)}
-
-## Vision
-
-Developers who brings together web technology, AI, and game development to create innovative, meaningful, and impactful digital experiences.
-
-We aspire to blend creativity and technical mastery to shape products that empower others and reflect our passion for independent, modern technology.
-
-## Mission
-
-- Gain a solid understanding of IT infrastructure, including how systems operate behind the scenes, how to independently manage servers, and how to ensure stability, security, and scalability throughout the development and deployment lifecycle.
-- Develop self-hosted systems and applications, whether on local machines or remote environments, promoting digital independence, data ownership, and efficient resource control.
-- Build the ability to design and develop web applications that are responsive, intuitive, fast, and visually compelling, with a strong focus on user experience and modern interface principles.
-- Integrate artificial intelligence into digital products, creating smart, helpful, and engaging features that elevate the overall value and interactivity of applications.
-
-## Why Nonsense
-
-Nonszy is an absurd abbreviation of Nonsense, it's not that we don't understand the each other or its uses, it's just a word you've chosen to dismiss our existence.
-
-Our work on web technologies has improved game development and art for anyone, but you still choose to see us as nothing more than senseless non-existent entities.
-
-But you, who's life is centered around nothing but a shallow sense of being superior to others through your knowledge or skill?
-
-We love what we do because it helps those in need, whether they realize it or not. It's a sense-less world you live in, but it's just us or someone who know how to keep things better.
-
-Let's continue pushing ahead towards a brighter tomorrow where we can use technology for the greater good, including the ones who are on your side. We love you as much as we do for who you are, and we're just here to bring about positive change for all.
-
-<FloatingLabel placeholder="Pat pat pat">
-    <Image
-        className="mb-12 mx-auto"
-        alt="Pat coral"
-        src="https://media.tenor.com/jZkB6qUnOQUAAAAi/coral-glasses-dream-bbq-ena.gif"
-        width={350}
-        height={350}
-        unoptimized
-    />
-</FloatingLabel>

src/components/landing-image.tsx

@@ -2,7 +2,7 @@ import Image from "next/image"
 import { FloatingLabel } from "./floating-label"
 
 export const LandingImage = () => (
-  <FloatingLabel placeholder="Coral Glasses ❤️. Alert: NOT MY WORK! character by JoelG, See terms and conditions">
+  <FloatingLabel placeholder="Coral Glasses ❤️. Alert: NOT MY WORK! See the end of the page">
     <Image
       className="mb-8 mx-auto"
       alt="Coral <3"

src/components/link.tsx

@@ -0,0 +1,14 @@
+import clsx from "clsx";
+import NextLink from "next/link"
+
+function Link({ className, ...props }: React.ComponentProps<typeof NextLink>) {
+  return (
+    <NextLink
+      className={clsx("text-primary underline", className)}
+      {...props}
+    />
+  )
+}
+
+
+export default Link;

src/components/page-template.tsx

@@ -15,7 +15,7 @@ export const SimpleArticle = ({
           Back
         </ButtonPrimary>
       </Link>
-      <article className="space-y-6 [&_p]:leading-relaxed relative [&_h1]:text-2xl [&_h2]:text-xl">
+      <article className="space-y-5 [&_p]:leading-relaxed [&_p]:text-sm [&_li]:text-sm relative [&_h1]:text-2xl [&_h2]:text-xl">
         {children}
       </article>
     </div>

src/components/texts/home.mdx

@@ -0,0 +1,92 @@
+import Image from "next/image"
+import Link from "@/components/link";
+import { FloatingLabel } from "@/components/floating-label";
+
+Welcome!
+
+This is our cozy little corner of the internet where we run services and websites on my own servers.
+
+We've got tools, resources, game server and other stuff that just works and doesn't burn our wallet, maybe.
+
+## About Me
+
+Nomi Nonszy (also known as Nonszy, Nomi Nonsense, whatever).
+I write code, do some art, and make sure our server doesn't catch on fire lol.
+
+I build sick web apps with modern stacks. Big fan of open-source stuff.
+Hate something that make things overengineered and boilerplate, but still use them anyway.
+I only play indie games, and cooking up cursed mods just for fun.
+
+Multifandom with Psychopomp, Deltarune, and ENA! I'm currently dedicated to the ENA SERIES!! Especially <Link href="https://enajoelg.fandom.com/wiki/Coral_Glasses" target="_blank">Coral Glasses</Link> my beloved wife ❤️
+
+<Image
+    className="mb-12 mx-auto"
+    alt="Coral"
+    src="https://media1.tenor.com/m/CpCvknTOMMwAAAAC/ena-ena-joel-g.gif"
+    width={250}
+    height={250}
+    unoptimized
+/>
+
+{new Date(Date.now()) < new Date("2026-02-16") && (
+<p>
+    Pls add my <Link href="https://steamcommunity.com/id/nomi_nonsz" target="_blank">Steam</Link>, I am so lonely 💔. 
+</p>
+)}
+
+{/* ## Vision
+
+To contribute to the global developer ecosystem by sharing knowledge, conducting research, and crafting tools and systems that make technology more efficient, accessible, and affordable for everyone.
+
+## Mission
+
+Our mission is to explore, learn, and innovate across all layers of technology from app development to infrastructure management
+
+- Learn the art of server management, containerization, cloud deployment, and resource monitoring to understand how platforms operate at scale.
+
+- Explore how automation can simplify complex processes like provisioning, monitoring, scaling, and maintaining servers, allowing us to focus more on development and innovation.
+
+- Study and implement security best practices to protect our systems from threats, while also ensuring high availability and fault tolerance across distributed environments.
+
+- Conduct experiments and share findings, build open-source tools, and support fellow developers by creating systems and free platform that make development easier, safer, and more efficient.
+
+- Delve into low-level programming and computer system fundamentals to understand how software interacts with hardware, empowering us to optimize systems from the ground up. */}
+
+## Why Nonsense
+
+Nonszy is an absurd abbreviation of Nonsense, it's not that we don't understand the each other or its uses, it's just a word you've chosen to dismiss our existence.
+
+We love what we do because it helps those in need, whether they realize it or not. It's a sense-less world you live in, but it's just us or someone who know how to keep things better.
+
+<FloatingLabel placeholder="Pat pat pat">
+    <Image
+        className="mb-12 mx-auto"
+        alt="Pat coral"
+        src="https://media.tenor.com/jZkB6qUnOQUAAAAi/coral-glasses-dream-bbq-ena.gif"
+        width={350}
+        height={350}
+        unoptimized
+    />
+</FloatingLabel>
+
+## Coral Glasses
+
+<Image
+    className="float-left mr-5 pb-1"
+    alt="Coral Dialogue"
+    src="/images/coral-dialogue.jpg"
+    width={200}
+    height={200}
+/>
+
+Coral Glasses is a supporting character from the video game
+<Link href="https://store.steampowered.com/app/2134320/ENA_Dream_BBQ/" target="_blank">ENA: Dream BBQ</Link>,
+developed by
+<Link href="https://joelgc.com/" target="_blank">JoelG</Link>,
+and published under the ENA Team. She speaks Korean in the game and is voiced by Kim Minsol
+
+The game is part of the surreal and artistically distinct ENA universe, which expands upon his earlier animated web series of the same name.
+
+She's supposed to handle business stuff, but she's sweating, faxing out of her hairline, and spiraling into mild panic every five minutes
+
+She's cute, anxious, awkward, weird, beautiful and i swear, she's literally me at work sweating through every conversation ashdjakwoiqhkaslchmaujqk

src/components/texts/privacy.mdx

@@ -1,5 +1,5 @@
 # Privacy Policy
 
-This website ("nonszy.space") fully respects the privacy of its visitors. This document explains how we handle visitor information. The short answer is: **we do not collect, track, or store your personal information**.
+This website ("nonszy.space") fully respects the privacy of its visitors. This page explains how we handle visitor information. The short answer is: **we do not collect, track, or store your personal information**.
 
 However, future feature additions will update the privacy policy.

src/components/windows.tsx

@@ -98,6 +98,7 @@ export const HomeWindows = () => (
         width={240}
         height={200}
         quality={10}
+        priority={false}
         unoptimized
       />
     </FakeRelativeWindow>

src/components/wobbling-image.tsx

@@ -0,0 +1,152 @@
+'use client'
+
+import clsx from "clsx";
+import Image from "next/image";
+import { useCallback, useEffect, useRef, useState } from "react"
+
+interface WobblingImageInterface {
+  images: {
+    idle: string;
+    aware?: string;
+    poked?: string;
+    weird?: string;
+  }
+}
+
+function WobblingImage ({
+  images
+}: WobblingImageInterface) {
+  const size = 400;
+  const [isPoked, setPoked] = useState(false);
+  const [isAware, setAware] = useState(false);
+  const pokeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const [isAnimating, setIsAnimating] = useState(false);
+  
+  const audioPath = "/sound/poke.wav";
+  const audioContextRef = useRef<AudioContext | null>(null);
+  const [audioBuffer, setAudioBuffer] = useState<AudioBuffer | null>(null);
+  const [audioLoaded, setAudioLoaded] = useState(false);
+  
+  const [dummyAudio, setDummyAudio] = useState<HTMLAudioElement | null>(null);
+
+  useEffect(() => {
+    if (typeof Audio !== undefined) setDummyAudio(new Audio(audioPath))
+    return () => {
+      if (dummyAudio) dummyAudio.pause();
+    }
+  }, [])
+
+  const initializeAudioContext = useCallback((): AudioContext => {
+    if (!audioContextRef.current) {
+      audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)();
+    }
+    return audioContextRef.current;
+  }, []);
+
+  const loadAudio = useCallback(async (url: string): Promise<AudioBuffer> => {
+    const response = await fetch(url);
+    const arrayBuffer = await response.arrayBuffer();
+    const context = initializeAudioContext();
+    return await context.decodeAudioData(arrayBuffer);
+  }, [initializeAudioContext]);
+
+  const initializeAudio = useCallback(async (): Promise<void> => {
+    if (audioBuffer) return;
+
+    setAudioLoaded(false);
+    try {
+      const buffer = await loadAudio(audioPath);
+      setAudioBuffer(buffer);
+    } catch (error) {
+      console.error('Failed to load audio:', error);
+    }
+    finally {
+      setAudioLoaded(true);
+    }
+  }, [audioBuffer, loadAudio]);
+
+  const playRandomPitch = useCallback(async (): Promise<void> => {
+    await initializeAudio();
+
+    if (!audioBuffer || !audioContextRef.current) return;
+
+    const context = audioContextRef.current;
+    const changeToLowPitch = Math.floor(Math.random() * 66);
+    const randomPitch = Math.random() * 0.38 + (changeToLowPitch == 1 ? 0.25 : 0.75);
+
+    const source = context.createBufferSource();
+    source.buffer = audioBuffer;
+    source.playbackRate.value = randomPitch;
+    source.connect(context.destination);
+    source.start(0);
+
+    source.onended = () => {
+      source.disconnect();
+    };
+  }, [audioBuffer, initializeAudio]);
+
+
+  function handleClick() {
+    const pokedDuration = 700 + Math.floor(Math.random() * 100)
+    if (!isAware) setAware(true);
+
+    setIsAnimating(false);
+    requestAnimationFrame(() => setIsAnimating(true));
+    
+    playRandomPitch();
+    if (dummyAudio && !audioLoaded) {
+      dummyAudio.currentTime = 0;
+      dummyAudio.play();
+    }
+
+    if (pokeTimeoutRef.current) {
+      clearTimeout(pokeTimeoutRef.current);
+    }
+    setPoked(true);
+    pokeTimeoutRef.current = setTimeout(() => {
+      setPoked(false);
+    }, pokedDuration);
+  }
+
+  function handleAnimationEnd() {
+    setIsAnimating(false);
+  }
+
+  return (
+    <div className="">
+      <div
+        className={clsx(
+          "relative mx-auto cursor-grab active:cursor-grabbing h-[400px] select-none",
+          isAnimating && "animate-[click-bounce_230ms_ease-out]"
+        )}
+        onClick={handleClick}
+        onAnimationEnd={handleAnimationEnd}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClick(); } }}
+        onMouseDown={(e) => e.preventDefault()}
+        onPointerDown={(e) => e.preventDefault()}
+      >
+        <Image
+          className={clsx("absolute left-1/2 -translate-x-1/2 top-0 pointer-events-none", isPoked ? "opacity-0" : "opacity-100")}
+          alt="clip1"
+          src={isAware ? (images.aware || images.idle) : images.idle}
+          width={size}
+          height={size}
+          draggable={false}
+        />
+        <Image
+          className={clsx("absolute left-1/2 -translate-x-1/2 top-0 pointer-events-none", isPoked ? "opacity-100" : "opacity-0")}
+          alt="clip2"
+          src={images.poked || images.idle}
+          width={size}
+          height={size}
+          draggable={false}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default WobblingImage;

tailwind.config.ts

@@ -24,6 +24,7 @@ const config: Config = {
     },
     animation: {
       "silly-bouncing": 'silly-bounce 0.8s infinite',
+      "click-bouncing": 'click-bounce 200ms',
       'window-popup': 'window-popup 1s',
       'window-popdown': 'window-popdown 1s'
     },