add window mode

src/app/globals.css

@@ -4,7 +4,7 @@
 
 :root {
   --background: #0F0A1F;
-  --primary: #FFA826;
+  --primary: #F48120;
 }
 
 @keyframes silly-bounce {
@@ -25,3 +25,7 @@ h2 {
 ul {
   @apply list-disc ms-8 space-y-4
 }
+
+.border-outset {
+  border-style: outset;
+}

src/app/page.tsx

@@ -2,18 +2,17 @@ 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 Image from "next/image";
 
 import Link from "next/link";
-import { FloatingLabel } from "@/components/floating-label";
+import { FakeWindow } from "@/components/windows";
 
 export default function Home() {
   return (
     <main className="flex items-center pt-16 md:pt-24 pb-12 px-8 md:px-0">
-      <div className="mx-auto w-[480px]">
+      <FakeWindow windowText="Homepage">
           <header className="text-center mb-8">
             <h1 className="font-bold text-3xl leading-normal">
-            Nonszy Work<span className="text-[#F48120]">space</span>
+              Nonszy Work<span className="text-primary">space</span>
             </h1>
           </header>
           <noscript>
@@ -25,12 +24,12 @@ export default function Home() {
             <HomeText />
           </article>
           <section className="my-8">
-          <p>⚡ Powered with <Link href="https://www.cloudflare.com/" target="_blank" className="text-[#F48120] underline">Cloudflare</Link> ☁️</p>
+            <p>⚡ Powered with <Link href="https://www.cloudflare.com/" target="_blank" className="text-primary underline">Cloudflare</Link> ☁️</p>
           </section>
           <footer className="mt-20 text-center">
             <p>&copy; <span className="text-sm">2024-2025 Nomi Nonsense</span></p>
           </footer>
-      </div>
+      </FakeWindow>
     </main>
   );
 }

src/components/home-text.mdx

@@ -8,6 +8,20 @@ This is our cozy little corner of the internet where we run a bunch of services
 
 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.
 
+<div className="relative">
+    <Link href="https://x.com/JoelGuerraC/status/1287088236171603969/photo/1" target="_blank">
+        <Image
+            className="hidden lg:inline-block absolute -left-72 -bottom-32 animate-silly-bouncing"
+            alt="Nola"
+            src="/images/coral-a1.png"
+            width={200}
+            height={200}
+            quality={10}
+            unoptimized
+        />
+    </Link>
+</div>
+
 ## About Me
 
 Nonszy (Nomi Nonsz or Nonszy whatever, some ppl know my real name).
@@ -38,20 +52,6 @@ Developers who brings together web technology, AI, and game development to creat
 
 We aspire to blend creativity and technical mastery to shape products that empower others and reflect our passion for independent, modern technology.
 
-<div className="relative">
-    <Link href="https://x.com/JoelGuerraC/status/1287088236171603969/photo/1" target="_blank">
-        <Image
-            className="hidden lg:inline-block absolute -left-72 top-48 animate-silly-bouncing"
-            alt="Nola"
-            src="/images/coral-a1.png"
-            width={200}
-            height={200}
-            quality={10}
-            unoptimized
-        />
-    </Link>
-</div>
-
 ## 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.
@@ -62,7 +62,7 @@ We aspire to blend creativity and technical mastery to shape products that empow
 <div className="relative">
     <FloatingLabel placeholder="This is Nola, my OC :3">
         <Image
-            className="hidden lg:inline-block absolute -right-72"
+            className="hidden lg:inline-block absolute -right-80"
             alt="Nola"
             src="/images/nola.png"
             width={250}

src/components/popover-text.tsx

@@ -26,7 +26,7 @@ export const CursorPopover: React.FC<CursorPopoverProps> = ({ text }) => {
 
 		return (
 			<div
-				className={clsx((position.x > 0 && position.y > 0) ? "fixed" : "hidden", "pointer-events-none bg-neutral-900 px-3 py-1.5 text-sm z-[9999]")}
+				className={clsx((position.x > 0 && position.y > 0) ? "fixed" : "hidden", "pointer-events-none text-white bg-background border border-primary px-3 py-1.5 text-sm z-[9999]")}
 				style={{ left: position.x + 12, top: position.y + 12 }}
 			>
 				{text}

src/components/windows.tsx

@@ -0,0 +1,26 @@
+import { Icon } from "@iconify/react";
+import { FloatingLabel } from "@/components/floating-label";
+
+export const FakeWindow = ({
+  windowText, children
+}: {
+  windowText: string
+  children: React.ReactNode
+}) => (
+  <div className="mx-auto w-[480px] md:w-[520px] md:border border-primary">
+    <div className="hidden md:flex bg-primary p-2 justify-between text-background">
+      <div className="ms-1 pointer-events-none">
+        {windowText}
+      </div>
+      <FloatingLabel placeholder="Useless button btw">
+        <div className="flex gap-2">
+          <button className="bg-primary border border-[#FFA826] border-outset p-1"><Icon icon="lucide:minus"/></button>
+          <button className="bg-primary border border-[#FFA826] border-outset p-1"><Icon icon="lucide:x"/></button>
+        </div>
+      </FloatingLabel>
+    </div>
+    <div className="md:p-8">
+      {children}
+    </div>
+  </div>
+)