From 72dc69a6fa6a4f0afc787537da2b6e7da0961cc0 Mon Sep 17 00:00:00 2001
From: nomi-nonsz <norman25.na@gmail.com>
Date: Mon, 1 Sep 2025 14:17:49 +0700
Subject: [PATCH] add window mode

---
 src/app/globals.css             |  6 ++++-
 src/app/page.tsx                | 45 ++++++++++++++++-----------------
 src/components/home-text.mdx    | 30 +++++++++++-----------
 src/components/popover-text.tsx |  2 +-
 src/components/windows.tsx      | 26 +++++++++++++++++++
 5 files changed, 69 insertions(+), 40 deletions(-)
 create mode 100644 src/components/windows.tsx

diff --git a/src/app/globals.css b/src/app/globals.css
index 830e69a..1f3597b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,7 +4,7 @@
 
 :root {
   --background: #0F0A1F;
-  --primary: #FFA826;
+  --primary: #F48120;
 }
 
 @keyframes silly-bounce {
@@ -24,4 +24,8 @@ h2 {
 
 ul {
   @apply list-disc ms-8 space-y-4
+}
+
+.border-outset {
+  border-style: outset;
 }
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index aa872a9..8390b65 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,35 +2,34 @@ 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]">
-        <header className="text-center mb-8">
-          <h1 className="font-bold text-3xl leading-normal">
-            Nonszy Work<span className="text-[#F48120]">space</span>
-          </h1>
-        </header>
-        <noscript>
-          <LandingImage />
-        </noscript>
-        <NolaGlitchClientOnly />
-        <Sosmed />
-        <article className="space-y-6 leading-relaxed relative">
-          <HomeText />
-        </article>
-        <section className="my-8">
-          <p>⚡ Powered with <Link href="https://www.cloudflare.com/" target="_blank" className="text-[#F48120] 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 windowText="Homepage">
+          <header className="text-center mb-8">
+            <h1 className="font-bold text-3xl leading-normal">
+              Nonszy Work<span className="text-primary">space</span>
+            </h1>
+          </header>
+          <noscript>
+            <LandingImage />
+          </noscript>
+          <NolaGlitchClientOnly />
+          <Sosmed />
+          <article className="space-y-6 leading-relaxed relative">
+            <HomeText />
+          </article>
+          <section className="my-8">
+            <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>
+      </FakeWindow>
     </main>
   );
 }
diff --git a/src/components/home-text.mdx b/src/components/home-text.mdx
index ea1537a..9b5c402 100644
--- a/src/components/home-text.mdx
+++ b/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}
diff --git a/src/components/popover-text.tsx b/src/components/popover-text.tsx
index 4d49f01..bad1adc 100644
--- a/src/components/popover-text.tsx
+++ b/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}
diff --git a/src/components/windows.tsx b/src/components/windows.tsx
new file mode 100644
index 0000000..a1adc87
--- /dev/null
+++ b/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>
+)
\ No newline at end of file