add window mode

package.json

@@ -13,6 +13,7 @@
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^15.3.4",
     "@types/mdx": "^2.0.13",
+    "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "next": "14.2.24",
     "react": "^18",

src/app/globals.css

@@ -4,7 +4,18 @@
 
 :root {
   --background: #0F0A1F;
-  --primary: #FFA826;
+  --primary: #F48120;
+}
+
+@keyframes silly-bounce {
+  0%, 100% {
+    transform: translate(0px, 0px) scale(0.9, 1.1);
+    animation-timing-function: linear(0.2, 0.8, 1);
+  }
+  50% {
+    transform: translate(0px, -280px) scale(1.18, 0.9);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
 }
 
 h2 {
@@ -14,3 +25,7 @@ h2 {
 ul {
   @apply list-disc ms-8 space-y-4
 }
+
+.border-outset {
+  border-style: outset;
+}

src/app/page.tsx

@@ -4,31 +4,32 @@ import { Sosmed } from "@/components/sosmed";
 import HomeText from "@/components/home-text.mdx"
 
 import Link from "next/link";
+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">
-            Nomi Nonsense Workspace
-          </h1>
-        </header>
-        <noscript>
-          <LandingImage />
-        </noscript>
-        <NolaGlitchClientOnly />
-        <Sosmed />
-        <article className="space-y-6 leading-relaxed">
-          <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>
   );
 }

src/components/floating-label.tsx

@@ -0,0 +1,17 @@
+import { PopoverText } from "./popover-text";
+
+export const FloatingLabel = ({
+  placeholder,
+  children
+}: {
+  placeholder: string;
+  children: React.ReactNode;
+}) => {
+  return (
+    <div>
+      <PopoverText text={placeholder}>
+        {children}
+      </PopoverText>
+    </div>
+  );
+};

src/components/home-text.mdx

@@ -1,5 +1,6 @@
 import Image from "next/image"
 import Link from "next/link";
+import { FloatingLabel } from "./floating-label";
 
 Welcome!
 
@@ -7,10 +8,24 @@ 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
 
-I'm Nomi Nonsense (Nomi Nonsz or Nonszy whatever, some ppl know my real name).
-I write code and make sure the server doesn't catch on fire 🔥 lol. 
+Nonszy (Nomi Nonsz or Nonszy 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 💅.
@@ -18,8 +33,7 @@ I only play indie games, and cooking up cursed mods just for fun.
 
 <Image
     className="mb-12 mx-auto"
-    alt="Pat coral"
-    title="Pat pat pat pat pat"
+    alt="Coral"
     src="https://media1.tenor.com/m/CpCvknTOMMwAAAAC/ena-ena-joel-g.gif"
     width={250}
     height={250}
@@ -45,6 +59,19 @@ We aspire to blend creativity and technical mastery to shape products that empow
 - 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.
 
+<div className="relative">
+    <FloatingLabel placeholder="This is Nola, my OC :3">
+        <Image
+            className="hidden lg:inline-block absolute -right-80"
+            alt="Nola"
+            src="/images/nola.png"
+            width={250}
+            height={250}
+            unoptimized
+        />
+    </FloatingLabel>
+</div>
+
 ## Why Nonsense
 
 Nomi or 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.
@@ -57,12 +84,13 @@ We love what we do because it helps those in need, whether they realize it or no
 
 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.
 
-<Image
-    className="mb-12 mx-auto"
-    alt="Pat coral"
-    title="Pat pat pat pat pat"
-    src="https://media.tenor.com/jZkB6qUnOQUAAAAi/coral-glasses-dream-bbq-ena.gif"
-    width={350}
-    height={350}
-    unoptimized
-/>
+<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

@@ -1,13 +1,15 @@
 import Image from "next/image"
+import { FloatingLabel } from "./floating-label"
 
 export const LandingImage = () => (
-  <Image
-    className="mb-8 mx-auto"
-    alt="Coral <3"
-    title="Coral Glasses from ENA Dream BBQ"
-    src="https://media1.tenor.com/m/RIP2rxKM_FgAAAAC/ena-ena-dream-bbq.gif"
-    width={280}
-    height={280}
-    unoptimized
-  />
+  <FloatingLabel placeholder="Coral Glasses ❤️. Warning: not my work, character by JoelG">
+    <Image
+      className="mb-8 mx-auto"
+      alt="Coral <3"
+      src="https://media1.tenor.com/m/RIP2rxKM_FgAAAAC/ena-ena-dream-bbq.gif"
+      width={280}
+      height={280}
+      unoptimized
+    />
+  </FloatingLabel>
 )

src/components/popover-text.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import clsx from "clsx";
+import React, { useEffect, useState } from "react";
+
+interface CursorPopoverProps {
+	text: string;
+}
+
+interface PoopoverTextProps extends CursorPopoverProps {
+  children: React.ReactNode
+}
+
+export const CursorPopover: React.FC<CursorPopoverProps> = ({ text }) => {
+	const [position, setPosition] = useState({ x: 0, y: 0 });
+
+	useEffect(() => {
+		const handleMouseMove = (e: MouseEvent) => {
+      setTimeout(() => setPosition({ x: e.clientX, y: e.clientY }), 50)
+		};
+		window.addEventListener("mousemove", handleMouseMove);
+		return () => {
+			window.removeEventListener("mousemove", handleMouseMove);
+		};
+	}, []);
+
+		return (
+			<div
+				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}
+			</div>
+		);
+};
+
+export const PopoverText: React.FC<PoopoverTextProps> = ({ text, children }) => {
+  const [hovered, setHovered] = useState(false);
+  return (
+    <div
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      {hovered && <CursorPopover text={text} />}
+      {children}
+    </div>
+  )
+}

src/components/sosmed.tsx

@@ -2,6 +2,7 @@
 
 import { Icon } from "@iconify/react";
 import Link from "next/link";
+import { FloatingLabel } from "./floating-label";
 
 const sosmeds =  [
   {
@@ -26,10 +27,9 @@ const sosmeds =  [
     icon: 'mdi:reddit'
   },
   {
-    name: 'itch.io',
-    url: 'https://nomi-nonsense.itch.io/',
-    icon: 'cib:itch-io',
-    size: 'text-[30px]'
+    name: 'gitea',
+    url: 'https://gitea.nonszy.space/',
+    icon: 'cib:gitea'
   },
 ]
 
@@ -37,15 +37,16 @@ export const Sosmed = () => {
   return (
     <div className="flex justify-center gap-4 mb-10">
       {sosmeds.map((sosmed) => (
-        <Link
-          className="grid items-center justify-center border md:border-2 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"
-          title={sosmed.name}
-          key={sosmed.name}
-        >
-          <Icon icon={sosmed.icon} className={`text-primary text-4xl ${sosmed.size}`} />
-        </Link>
+        <FloatingLabel 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>
+        </FloatingLabel>
       ))}
     </div>
   )

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>
+)

tailwind.config.ts

@@ -21,6 +21,9 @@ const config: Config = {
       'lg': '1024px',
       'xl': '1280px',
       '2xl': '1536px',
+    },
+    animation: {
+      "silly-bouncing": 'silly-bounce 0.8s infinite',
     }
   },
   plugins: [],

yarn.lock

@@ -784,6 +784,11 @@ client-only@0.0.1:
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 collapse-white-space@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-2.1.0.tgz#640257174f9f42c740b40f3b55ee752924feefca"