Compare commits
No commits in common. "72dc69a6fa6a4f0afc787537da2b6e7da0961cc0" and "c9cc5be5c99727aa24e9728bd5517c2539d04e13" have entirely different histories.
72dc69a6fa
...
c9cc5be5c9
@ -13,7 +13,6 @@
|
||||
"@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",
|
||||
|
Binary file not shown.
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
Before Width: | Height: | Size: 24 KiB |
@ -4,18 +4,7 @@
|
||||
|
||||
:root {
|
||||
--background: #0F0A1F;
|
||||
--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);
|
||||
}
|
||||
--primary: #FFA826;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@ -25,7 +14,3 @@ h2 {
|
||||
ul {
|
||||
@apply list-disc ms-8 space-y-4
|
||||
}
|
||||
|
||||
.border-outset {
|
||||
border-style: outset;
|
||||
}
|
@ -4,15 +4,14 @@ 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">
|
||||
<FakeWindow windowText="Homepage">
|
||||
<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-primary">space</span>
|
||||
Nomi Nonsense Workspace
|
||||
</h1>
|
||||
</header>
|
||||
<noscript>
|
||||
@ -20,16 +19,16 @@ export default function Home() {
|
||||
</noscript>
|
||||
<NolaGlitchClientOnly />
|
||||
<Sosmed />
|
||||
<article className="space-y-6 leading-relaxed relative">
|
||||
<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-primary underline">Cloudflare</Link> ☁️</p>
|
||||
<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>© <span className="text-sm">2024-2025 Nomi Nonsense</span></p>
|
||||
</footer>
|
||||
</FakeWindow>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
@ -1,17 +0,0 @@
|
||||
import { PopoverText } from "./popover-text";
|
||||
|
||||
export const FloatingLabel = ({
|
||||
placeholder,
|
||||
children
|
||||
}: {
|
||||
placeholder: string;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
return (
|
||||
<div>
|
||||
<PopoverText text={placeholder}>
|
||||
{children}
|
||||
</PopoverText>
|
||||
</div>
|
||||
);
|
||||
};
|
@ -1,6 +1,5 @@
|
||||
import Image from "next/image"
|
||||
import Link from "next/link";
|
||||
import { FloatingLabel } from "./floating-label";
|
||||
|
||||
Welcome!
|
||||
|
||||
@ -8,24 +7,10 @@ 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).
|
||||
I write code and make sure the server doesn't catch on fire lol.
|
||||
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.
|
||||
|
||||
I build sick web apps with modern stacks (and trash).
|
||||
Big fan of open-source stuff, CLI life, Arch 💅.
|
||||
@ -33,7 +18,8 @@ I only play indie games, and cooking up cursed mods just for fun.
|
||||
|
||||
<Image
|
||||
className="mb-12 mx-auto"
|
||||
alt="Coral"
|
||||
alt="Pat coral"
|
||||
title="Pat pat pat pat pat"
|
||||
src="https://media1.tenor.com/m/CpCvknTOMMwAAAAC/ena-ena-joel-g.gif"
|
||||
width={250}
|
||||
height={250}
|
||||
@ -59,19 +45,6 @@ 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.
|
||||
@ -84,13 +57,12 @@ 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.
|
||||
|
||||
<FloatingLabel placeholder="Pat pat pat">
|
||||
<Image
|
||||
<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>
|
||||
/>
|
@ -1,15 +1,13 @@
|
||||
import Image from "next/image"
|
||||
import { FloatingLabel } from "./floating-label"
|
||||
|
||||
export const LandingImage = () => (
|
||||
<FloatingLabel placeholder="Coral Glasses ❤️. Warning: not my work, character by JoelG">
|
||||
<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>
|
||||
)
|
@ -1,48 +0,0 @@
|
||||
'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>
|
||||
)
|
||||
}
|
@ -2,7 +2,6 @@
|
||||
|
||||
import { Icon } from "@iconify/react";
|
||||
import Link from "next/link";
|
||||
import { FloatingLabel } from "./floating-label";
|
||||
|
||||
const sosmeds = [
|
||||
{
|
||||
@ -27,9 +26,10 @@ const sosmeds = [
|
||||
icon: 'mdi:reddit'
|
||||
},
|
||||
{
|
||||
name: 'gitea',
|
||||
url: 'https://gitea.nonszy.space/',
|
||||
icon: 'cib:gitea'
|
||||
name: 'itch.io',
|
||||
url: 'https://nomi-nonsense.itch.io/',
|
||||
icon: 'cib:itch-io',
|
||||
size: 'text-[30px]'
|
||||
},
|
||||
]
|
||||
|
||||
@ -37,16 +37,15 @@ export const Sosmed = () => {
|
||||
return (
|
||||
<div className="flex justify-center gap-4 mb-10">
|
||||
{sosmeds.map((sosmed) => (
|
||||
<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"
|
||||
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>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
|
@ -1,26 +0,0 @@
|
||||
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>
|
||||
)
|
@ -21,9 +21,6 @@ const config: Config = {
|
||||
'lg': '1024px',
|
||||
'xl': '1280px',
|
||||
'2xl': '1536px',
|
||||
},
|
||||
animation: {
|
||||
"silly-bouncing": 'silly-bounce 0.8s infinite',
|
||||
}
|
||||
},
|
||||
plugins: [],
|
||||
|
@ -784,11 +784,6 @@ 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"
|
||||
|
Loading…
x
Reference in New Issue
Block a user