Window system

src/app/globals.css

@@ -13,11 +13,23 @@
     animation-timing-function: linear(0.2, 0.8, 1);
   }
   50% {
-    transform: translate(0px, -280px) scale(1.18, 0.9);
+    transform: translate(0px, -180px) scale(1.18, 0.9);
     animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
   }
 }
 
+@keyframes window-popup {
+  0% {
+    transform: scale(0, 0.03);
+  }
+  40% {
+    transform: scale(1, 0.03);
+  }
+  100% {
+    transform: scale(1, 1);
+  }
+}
+
 h2 {
   @apply text-2xl font-bold
 }

src/app/page.tsx

@@ -5,9 +5,10 @@ import HomeText from "@/components/home-text.mdx"
 
 import Link from "next/link";
 import { FakeWindow } from "@/components/windows";
+import Taskbar from "@/components/taskbar";
 
 export default function Home() {
-  return (
+  return (<>
     <main className="flex items-center pt-16 md:pt-24 pb-12 px-8 md:px-0">
       <FakeWindow windowText="Homepage">
         <header className="text-center mb-8">
@@ -34,5 +35,5 @@ export default function Home() {
         </footer>
       </FakeWindow>
     </main>
-  );
+  </>);
 }

src/components/client-windows.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import { Icon } from "@iconify/react";
+import clsx from "clsx";
+import { useState, useRef } from "react";
+
+export const FakeRelativeWindow = ({
+  windowText, className, draggable, children
+}: {
+  windowText: string,
+  className?: string,
+  draggable?: boolean
+  children: React.ReactNode
+}) => {
+  const [isMinimized, setMinimize] = useState(false);
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const popupRef = useRef<HTMLDivElement>(null);
+  const pos = useRef({
+    dragging: false,
+    mouseX: 0,
+    mouseY: 0,
+    x: 0,
+    y: 0
+  });
+
+  const toggleMinimize = () => setMinimize(!isMinimized);
+
+  const onMouseDown = (e: React.MouseEvent) => {
+    if (popupRef.current) {
+      pos.current.dragging = true;
+      pos.current.mouseX = e.clientX;
+      pos.current.mouseY = e.clientY;
+      pos.current.x = offset.x;
+      pos.current.y = offset.y;
+      document.body.style.userSelect = "none";
+    }
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+  };
+
+  const onMouseUp = () => {
+    pos.current.dragging = false;
+    document.body.style.userSelect = "";
+    window.removeEventListener("mousemove", onMouseMove);
+    window.removeEventListener("mouseup", onMouseUp);
+  };
+
+  const onMouseMove = (e: MouseEvent) => {
+    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;
+      popupRef.current.style.transform = `translate(${newX}px, ${newY}px)`;
+      setOffset({ x: newX, y: newY });
+    }
+  };
+
+  return (
+    <div className={clsx("absolute", className)}>
+      <div className="mx-auto md:border bg-background border-primary animate-window-popup" ref={popupRef}>
+        <div
+          className="hidden md:flex bg-primary p-2 justify-between text-background windowbar"
+          onMouseDown={onMouseDown}
+        >
+          <div className="ms-1 pointer-events-none">
+            {windowText}
+          </div>
+          <div className="flex gap-2">
+            <button className="bg-primary border border-[#FFA826] border-outset p-1" onClick={toggleMinimize}><Icon icon="lucide:minus"/></button>
+          </div>
+        </div>
+        <div className={clsx("m-1 border border-primary", isMinimized ? "h-0 overflow-y-clip" : "h-fit")}>
+          <div className={"md:p-4 animate-[fade-in-half_1s]"}>
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/home-text.mdx

@@ -1,6 +1,7 @@
 import Image from "next/image"
 import Link from "next/link";
 import { FloatingLabel } from "./floating-label";
+import { FakeRelativeWindow } from "./client-windows";
 
 Welcome!
 
@@ -9,17 +10,19 @@ 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">
+    <FakeRelativeWindow windowText="Boing-boing" className='hidden lg:inline-block absolute -left-96 -bottom-32'>
-        <Image
+        <Link href="https://x.com/JoelGuerraC/status/1287088236171603969/photo/1" target="_blank">
-            className="hidden lg:inline-block absolute -left-96 -bottom-32 animate-silly-bouncing"
+            <Image
-            alt="Nola"
+                className="animate-silly-bouncing"
-            src="/images/coral-a1.png"
+                alt="Nola"
-            width={200}
+                src="/images/coral-a1.png"
-            height={200}
+                width={200}
-            quality={10}
+                height={200}
-            unoptimized
+                quality={10}
-        />
+                unoptimized
-    </Link>
+            />
+        </Link>
+    </FakeRelativeWindow>
 </div>
 
 ## About Me
@@ -60,16 +63,18 @@ We aspire to blend creativity and technical mastery to shape products that empow
 - Integrate artificial intelligence into digital products, creating smart, helpful, and engaging features that elevate the overall value and interactivity of applications.
 
 <div className="relative">
-    <FloatingLabel placeholder="This is Nola, my OC :3">
+    <FakeRelativeWindow draggable windowText="nola.png" className='hidden lg:inline-block -right-[120%]'>
-        <Image
+        <FloatingLabel placeholder="This is Nola, my OC :3">
-            className="hidden lg:inline-block absolute -right-96"
+            <Image
-            alt="Nola"
+                className=""
-            src="/images/nola.png"
+                alt="Nola"
-            width={250}
+                src="/images/nola.png"
-            height={250}
+                width={250}
-            unoptimized
+                height={250}
-        />
+                unoptimized
-    </FloatingLabel>
+            />
+        </FloatingLabel>
+    </FakeRelativeWindow>
 </div>
 
 ## Why Nonsense

src/components/sosmed.tsx

@@ -37,12 +37,11 @@ export const Sosmed = () => {
   return (
     <div className="flex justify-center gap-4 mb-10">
       {sosmeds.map((sosmed) => (
-        <FloatingLabel placeholder={sosmed.name}>
+        <FloatingLabel key={sosmed.name} placeholder={sosmed.name}>
           <Link
             className="grid items-center justify-center border border-primary w-[48px] xs:w-[54px] h-auto aspect-square transition-[transform] duration-75 hover:-translate-y-1 hover:scale-105"
             href={sosmed.url}
             target="_blank"
-            key={sosmed.name}
           >
             <Icon icon={sosmed.icon} className={`text-primary text-4xl ${sosmed.size}`} />
           </Link>

src/components/taskbar.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+const Taskbar = () => {
+  return (
+    <div className="fixed bg-background p-2 border-t border-primary bottom-0 left-0 w-screen inline-flex gap-3 items-center">
+      <div className="px-4 font-bold">
+        NolaOS
+      </div>
+      <div className="flex gap-2">
+        <button className="border border-primary px-3 py-2">
+          Vision & Mission
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default Taskbar;

tailwind.config.ts

@@ -24,6 +24,13 @@ const config: Config = {
     },
     animation: {
       "silly-bouncing": 'silly-bounce 0.8s infinite',
+      'window-popup': 'window-popup 1s'
+    },
+    keyframes: {
+      "fade-in-half": {
+        '0%, 50%': { opacity: "0" },
+        '100%': { opacity: '1' },
+      }
     }
   },
   plugins: [],