add window mode

This commit is contained in:
Nomi Nonsense (Nonszy) 2025-09-01 14:17:49 +07:00
parent c3727993d9
commit 72dc69a6fa
5 changed files with 69 additions and 40 deletions

View File

@ -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;
}

View File

@ -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>
);
}

View File

@ -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}

View File

@ -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}

View File

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