fix ssl ambigous

Reviewed-on: #1

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-alpine AS builder
+FROM node:20-alpine AS builder
 
 RUN apk add --no-cache yarn
 
@@ -13,14 +13,17 @@ COPY ./src/app/favicon.ico ./public/favicon.ico
 
 RUN yarn build
 
-FROM node:18-alpine AS runner
+FROM node:20-alpine AS runner
 
 WORKDIR /app
 
 RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
+RUN adduser --system --uid 1001 --ingroup nodejs nextjs
 
-ENV NODE_ENV production
+RUN mkdir -p ./.next/cache
+RUN chown nextjs:nodejs ./.next/cache
+
+ENV NODE_ENV=production
 
 USER nextjs
 

amp.Dockerfile

@@ -0,0 +1,28 @@
+# Install dependencies
+FROM node:22-alpine AS deps
+WORKDIR /app
+COPY package.json yarn.lock* ./
+RUN yarn install --frozen-lockfile
+
+# Build
+FROM node:22-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN yarn build
+
+# Production image
+FROM node:22-alpine AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+
+# Only copy necessary files
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/package.json ./package.json
+COPY --from=builder /app/node_modules ./node_modules
+
+EXPOSE 3000
+
+CMD ["yarn", "start"]

next.config.mjs

@@ -6,8 +6,7 @@ const nextConfig = {
     remotePatterns: [
       {
         protocol: 'https',
-        hostname: 'media.tenor.com',
+        hostname: 'media.tenor.com'
-        pathname: '/1BCeG1aTiBAAAAAd/temptation-stairway-ena.gif'
       }
     ]
   },

package.json

@@ -13,20 +13,29 @@
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^15.3.4",
     "@types/mdx": "^2.0.13",
+    "axios": "^1.13.2",
     "clsx": "^2.1.1",
-    "dayjs": "^1.11.13",
+    "date-fns": "^4.1.0",
-    "next": "14.2.24",
+    "dompurify": "^3.3.1",
+    "ioredis": "^5.8.2",
+    "jsdom": "^27.4.0",
+    "next": "^14.2.35",
+    "nodemailer": "^7.0.12",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "sharp": "^0.34.5",
+    "validator": "^13.15.26"
   },
   "devDependencies": {
     "@iconify/react": "^5.2.0",
+    "@types/jsdom": "^27.0.0",
     "@types/node": "^20",
+    "@types/nodemailer": "^7.0.4",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/validator": "^13.15.10",
     "add": "^2.0.6",
-    "eslint": "^8",
+    "eslint-config-next": "^16.0.10",
-    "eslint-config-next": "14.2.24",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
     "typescript": "^5",

src/app/api/contact/route.ts

@@ -0,0 +1,102 @@
+import { NextRequest, NextResponse } from "next/server";
+
+import { rateLimited, sendEmail, validateTurnstile } from "@/lib/server-utils";
+import { trimTooLong } from "@/lib/strings";
+
+import validator from "validator";
+
+const validateInput = (data: any) => {
+  return (
+    typeof data !== "object" ||
+    (
+      !data.anon &&
+      (
+        typeof data.name !== "string" ||
+        typeof data.email !== "string"
+      ) ||
+      typeof data.message !== "string" ||
+      typeof data["cf-turnstile-response"] !== "string"
+    ) ||
+    !data.anon &&
+    (
+      !data.name.trim() ||
+      !data.email.trim() ||
+      !validator.isEmail(data.email) ||
+      data.email.length > 50
+    ) ||
+    !data.message.trim(),
+    !data["cf-turnstile-response"].trim()
+  )
+}
+
+export async function POST(req: NextRequest) {
+  const agent = req.headers.get("cf-connecting-ip") ?? req.headers.get("x-forwarded-for") ?? "damn";
+  
+  let data;
+  try {
+    data = await req.json();
+  } catch {
+    return NextResponse.json(
+      { error: "Invalid input" },
+      { status: 400 }
+    );
+  }
+
+  const cf_token = data["cf-turnstile-response"];
+
+  console.log(`[${agent}] Verify captcha`);
+
+  if (typeof cf_token !== 'string' || !cf_token.trim()) {
+    return NextResponse.json(
+      { error: "Captcha Failed" },
+      { status: 403 }
+    );
+  }
+
+  const captchaVerified = await validateTurnstile(cf_token, agent);
+
+  if (!captchaVerified) {
+    return NextResponse.json(
+      { error: "Captcha Failed" },
+      { status: 403 }
+    );
+  }
+  
+  console.log(`[${agent}] Verify rate limit`);
+
+  const isRateLimited = await rateLimited(agent);
+  
+  if (isRateLimited) {
+    return NextResponse.json(
+      { error: "Too many requests" },
+      { status: 429 }
+    );
+  }
+
+  if (validateInput(data)) {
+    return NextResponse.json(
+      { error: "Invalid input" },
+      { status: 400 }
+    );
+  }
+
+  console.log(`[${agent}] Sending email...`);
+
+  try {
+    const email = data.anon || !data.email ? process.env.SMTP_USER : data.email;
+    const name = trimTooLong(data.anon || !data.name ? 'Anonymous' : data.name, 20);
+
+    await sendEmail(name, email, data.message);
+
+    console.log(`[${agent}] Email sended...`);
+
+    return NextResponse.json({ status: "ok" });
+  }
+  catch (err) {
+    console.error(err);
+    return NextResponse.json({
+      status: "failed",
+      message: err instanceof Error ? err.message : ''
+    });
+  }
+}

src/app/globals.css

@@ -5,6 +5,16 @@
 :root {
   --background: #0F0A1F;
   --primary: #F48120;
+  --primary-darker: #cc6d1f;
+}
+
+@keyframes click-bounce {
+  0%, 100% {
+    transform: translate(0px, 0px) scale(1, 1);
+  }
+  10% {
+    transform: translate(0px, 14px) scale(1.2, 0.9);
+  }
 }
 
 @keyframes silly-bounce {
@@ -13,11 +23,35 @@
     animation-timing-function: linear(0.2, 0.8, 1);
   }
   50% {
-    transform: translate(0px, -280px) scale(1.18, 0.9);
+    transform: translate(0px, -120px) 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);
+  }
+}
+
+@keyframes window-popdown {
+  0% {
+    transform: scale(1, 1);
+  }
+  60% {
+    transform: scale(1, 0.03);
+  }
+  100% {
+    transform: scale(0, 0.03);
+  }
+}
+
 h2 {
   @apply text-2xl font-bold
 }

src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Roboto_Mono } from 'next/font/google'
 import "./globals.css";
+import Script from "next/script";
 
 const roboto_mono = Roboto_Mono({
   subsets: ['latin']
@@ -22,6 +23,7 @@ export default function RootLayout({
         className={`bg-background ${roboto_mono.className} antialiased text-white`}
       >
         {children}
+        <Script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer />
       </body>
     </html>
   );

src/app/not-found.tsx

@@ -1,4 +1,6 @@
+import WobblingImage from "@/components/wobbling-image";
 import type { Metadata } from "next";
+import Link from "@/components/link";
 
 export const metadata: Metadata = {
   title: "Wep wep",
@@ -8,12 +10,24 @@ export default function NotFound() {
   return (
     <main className="flex items-center h-screen pt-16 md:pt-32 pb-12 px-8 md:px-0">
       <div className="mx-auto w-[380px]">
+        <noscript>
           <header className="mb-8 -ms-5 text-center">
             <h1 className="font-bold text-8xl">404</h1>
           </header>
           <div className="">
             Oh you lost, you know there&apos;s nothing here...
           </div>
+        </noscript>
+        <WobblingImage
+          images={{
+            idle: "/images/coralz_idle.png",
+            aware: "/images/coralz_scared.png",
+            poked: "/images/coralz_poked.png"
+          }}
+        />
+        <div className="-mt-2">
+          <Link className="text-xs" target="_blank" href="https://x.com/JoelGuerraC/status/1840178999546319101">{">]"}Image source</Link>
+        </div>
       </div>
     </main>
   );

src/app/page.tsx

@@ -1,15 +1,23 @@
 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 HomeText from "@/components/texts/home.mdx"
 
-import Link from "next/link";
+import Link from "@/components/link";
-import { FakeWindow } from "@/components/windows";
+import { FakeWindow, HomeWindows } from "@/components/windows";
+import { SnowfallBackground } from "@/components/events/christmas";
+
+import { WindowManagerProvider } from "@/hooks/window-manager";
+import { ThemeEventsProvider } from "@/hooks/theme-events";
 
 export default function Home() {
-  return (
+  return (<>
-    <main className="flex items-center pt-16 md:pt-24 pb-12 px-8 md:px-0">
+    <main className="flex items-center pt-16 md:pt-24 pb-12 px-8 md:px-0 overflow-x-hidden">
+      <ThemeEventsProvider>
+        <SnowfallBackground />
+        <WindowManagerProvider>
           <FakeWindow windowText="Homepage">
+            <HomeWindows />
             <header className="text-center mb-8">
               <h1 className="font-bold text-3xl leading-normal">
                 Nonszy Work<span className="text-primary">space</span>
@@ -20,16 +28,18 @@ export default function Home() {
             </noscript>
             <NolaGlitchClientOnly />
             <Sosmed />
-          <article className="space-y-6 leading-relaxed relative">
+            <article className="space-y-5 leading-relaxed relative text-sm">
               <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>
+              <p>&copy; <span className="text-sm">2025 Nomi Nonszy</span></p>
+              <p className="text-sm">
+                <Link href={"/terms"}>Terms</Link> and <Link href={"/privacy"}>Privacy</Link>
+              </p>
             </footer>
           </FakeWindow>
+        </WindowManagerProvider>
+      </ThemeEventsProvider>
     </main>
-  );
+  </>);
 }

src/app/privacy/page.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from "next";
+
+import PrivacyPolicy from "@/components/texts/privacy.mdx"
+import { SimpleArticle } from "@/components/page-template";
+
+export const metadata: Metadata = {
+  title: "Privacy Policy",
+};
+
+export default function Terms () {
+  return (
+    <SimpleArticle>
+      <PrivacyPolicy />
+    </SimpleArticle>
+  )
+}

src/app/terms/page.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from "next";
+
+import TermsAndConditions from "@/components/texts/terms.mdx"
+import { SimpleArticle } from "@/components/page-template";
+
+export const metadata: Metadata = {
+  title: "Terms",
+};
+
+export default function Terms () {
+  return (
+    <SimpleArticle>
+      <TermsAndConditions />
+    </SimpleArticle>
+  )
+}

src/components/button.tsx

@@ -0,0 +1,13 @@
+import clsx from "clsx"
+
+export function ButtonPrimary({
+  className,
+  ...props
+}: React.ComponentProps<"button">) {
+  return (
+    <button
+      className={clsx("bg-primary text-background px-3 py-2 items-center inline-flex gap-2 justify-center flex-row", className)}
+      {...props}
+    />
+  )
+}

src/components/client-windows.tsx

@@ -0,0 +1,222 @@
+'use client'
+
+import { FakeWindow, useWindowManager } from "@/hooks/window-manager";
+import { Icon } from "@iconify/react";
+import clsx from "clsx";
+import React, { useState, useRef, useEffect, useReducer } from "react";
+
+export const RestoreWindowsButton = ({ onClick, className, ...props}: React.ComponentProps<"button">) => {
+  const windowManager = useWindowManager();
+
+  const isWindowsDataDirty = !windowManager.windows.find(w =>
+    w.closed == true
+    || w.minimized == true
+    || (w.offset.x != 0 && w.offset.y != 0)
+  )
+
+  return (
+    <button
+      className={clsx("bg-primary border border-[#FFA826]", className, isWindowsDataDirty && "hidden")}
+      onClick={windowManager.resetAll}
+      {...props}
+    />
+  )
+}
+
+export const FakeRelativeWindow = ({
+  windowText,
+  className,
+  draggable,
+  withAnim,
+  children
+}: {
+  windowText: string,
+  className?: string,
+  draggable?: boolean,
+  withAnim?: boolean,
+  children: React.ReactNode
+}) => {
+  const windowManager = useWindowManager();
+  const windowName = windowText.toLocaleLowerCase();
+  const currentWindow = windowManager.get(windowName);
+
+  const [animation, setAnimation] = useState({
+    window: "animate-window-popup",
+    content: "animate-[fade-in-half_1s]"
+  });
+
+  const offsetRef = useRef({ x: 0, y: 0 });
+  const [isDragging, setDragging] = useState(false);
+
+  const popupRef = useRef<HTMLDivElement>(null);
+  const pos = useRef({
+    dragging: false,
+    mouseX: 0,
+    mouseY: 0,
+    x: 0,
+    y: 0
+  });
+
+  const populateWindow = () => {
+    windowManager.add({
+      name: windowName,
+      closed: false,
+      minimized: false,
+      offset: { x: 0, y: 0 }
+    })
+  }
+
+  useEffect(() => {
+    populateWindow();
+    return () => {
+      windowManager.remove(windowName);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!withAnim) return;
+    const node = popupRef.current;
+    if (!node) return;
+    const observer = new window.IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setAnimation({
+            window: "animate-window-popup",
+            content: "animate-[fade-in-half_1s]"
+          });
+        } else {
+          setAnimation({
+            window: "scale-x-0 scale-y-[0.03] animate-window-popdown",
+            content: "animate-[fade-out-half_1s]"
+          });
+        }
+      },
+      { threshold: 0.3 }
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (popupRef.current && currentWindow) {
+      const initPos = {
+        x: currentWindow.offset.x,
+        y: currentWindow.offset.y
+      }
+      offsetRef.current.x = initPos.x;
+      offsetRef.current.y = initPos.y;
+      popupRef.current.style.transform = `translate(${initPos.x}px, ${initPos.y}px)`;
+    }
+  }, [popupRef.current, currentWindow]);
+
+  const toggleMinimize = () => windowManager.toggleMinimize(windowName);
+  const handleClose = () => windowManager.close(windowName);
+
+  const onMouseDown = (e: React.MouseEvent) => {
+    if (!draggable || !currentWindow) return;
+    if (popupRef.current) {
+      pos.current.dragging = true;
+      pos.current.mouseX = e.clientX;
+      pos.current.mouseY = e.clientY;
+      pos.current.x = offsetRef.current.x;
+      pos.current.y = offsetRef.current.y;
+      document.body.style.userSelect = "none";
+      setDragging(true);
+    }
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+  };
+
+  const onMouseUp = () => {
+    windowManager.move(windowName, {
+      x: offsetRef.current.x,
+      y: offsetRef.current.y
+    });
+
+    pos.current.dragging = false;
+    document.body.style.userSelect = "";
+    window.removeEventListener("mousemove", onMouseMove);
+    window.removeEventListener("mouseup", onMouseUp);
+    setDragging(false);
+  };
+
+  const onMouseMove = (e: MouseEvent) => {
+    if (!currentWindow) return;
+    if (pos.current.dragging && popupRef.current) {
+      const dx = e.clientX - pos.current.mouseX;
+      const dy = e.clientY - pos.current.mouseY;
+      const x = pos.current.x + dx;
+      const y = pos.current.y + dy;
+      offsetRef.current = { x, y }
+      popupRef.current.style.transform = `translate(${x}px, ${y}px)`;
+    }
+  };
+
+  if (!currentWindow || currentWindow?.closed) return
+
+  return (
+    <div className={clsx("absolute hidden lg:block", className)}>
+      {/* Outline Window */}
+      {draggable && (
+        <div
+          className={clsx("absolute border-primary w-full z-10", isDragging && "md:border")}
+          ref={popupRef}
+        >
+          <div
+            className={clsx("hidden md:flex p-2 gap-2 justify-end text-background windowbar", isDragging ? "opacity-0" : "opacity-100")}
+            onMouseDown={onMouseDown}
+          >
+            <button
+              className={clsx("bg-primary border border-[#FFA826] border-outset p-1")}
+              onClick={toggleMinimize}
+            >
+              <Icon icon="lucide:minus"/>
+            </button>
+            <button
+              className={clsx("bg-primary border border-[#FFA826] border-outset p-1")}
+              onClick={handleClose}
+            >
+              <Icon icon="lucide:x"/>
+            </button>
+          </div>
+          <div className={clsx("m-1", currentWindow?.minimized && "h-0")}>
+            <div className={clsx("md:p-4 opacity-0")}>
+              {children}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Main window */}
+      <div
+        className={clsx("md:border bg-background bg-opacity-50 border-primary", withAnim && animation.window)}
+        style={{
+          transform: `translate(${currentWindow.offset.x}px, ${currentWindow.offset.y}px)`
+        }}
+      >
+        <div className="hidden md:flex bg-primary p-2 justify-between text-background windowbar">
+          <div className="ms-1 pointer-events-none">
+            {currentWindow ? currentWindow.name : "Error!"}
+          </div>
+          <div className={clsx("flex gap-2", !isDragging ? "opacity-0" : "opacity-100")}>
+            <button
+              className="bg-primary border border-[#FFA826] border-outset p-1 pointer-events-none"
+            >
+              <Icon icon="lucide:minus"/>
+            </button>
+            <button
+              className="bg-primary border border-[#FFA826] border-outset p-1 pointer-events-none"
+            >
+              <Icon icon="lucide:x"/>
+            </button>
+          </div>
+        </div>
+        <div className={clsx("m-1 border border-primary", currentWindow?.minimized ? "h-0 overflow-y-clip" : "h-fit")}>
+          <div className={clsx("md:p-4", withAnim && animation.content)}>
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/events/christmas.tsx

@@ -0,0 +1,204 @@
+'use client'
+
+import { useThemeEvents } from '@/hooks/theme-events';
+import { getEvent } from '@/lib/utils';
+import clsx from 'clsx';
+import NextImage from 'next/image';
+import { ReactNode, useEffect, useRef, useState } from 'react';
+
+interface Snowflake {
+  x: number;
+  y: number;
+  radius: number;
+  speed: number;
+  sway: number;
+  swayOffset: number;
+  opacity: number;
+  rotation: number;
+  rotationSpeed: number;
+}
+
+interface ChristmasProps {
+  left: number;
+  top: number;
+  size: number;
+  img: string;
+  className?: string;
+  flip?: boolean;
+  absolute?: boolean;
+}
+
+export const ChristmasExclusive = ({ children }: { children: ReactNode }) => {
+  const eventNow = useThemeEvents()?.event;
+
+  if (eventNow?.name == 'christmas') return children;
+  return null;
+}
+
+export const ChristmasProperty: React.FC<ChristmasProps> = ({
+  left,
+  top,
+  img,
+  size,
+  className,
+  flip
+}) => {
+  return (
+    <ChristmasExclusive>
+      <div
+        className={clsx('absolute md:block hidden', flip && '-scale-x-100', className)}
+        style={{
+          left, top
+        }}
+      >
+        <NextImage
+          className='pointer-events-none'
+          src={img}
+          alt='Christmas prop'
+          height={size}
+          width={size}
+          unoptimized={img.slice(img.length - 3, img.length) == 'gif'}
+        />
+      </div>
+    </ChristmasExclusive>
+  )
+}
+
+function SnowfallRawBackground() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  const snowflakesRef = useRef<Snowflake[]>([]);
+  const animationFrameRef = useRef<number>(0);
+  const imageRef = useRef<HTMLImageElement | null>(null);
+
+  useEffect(() => {
+    const updateDimensions = () => {
+      setDimensions({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    updateDimensions();
+    window.addEventListener('resize', updateDimensions);
+    
+    return () => window.removeEventListener('resize', updateDimensions);
+  }, []);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    canvas.width = dimensions.width;
+    canvas.height = dimensions.height;
+
+    // Load the snowflake image using a plain Image so we can draw it to canvas reliably
+    const img = new Image();
+    img.src = '/images/event_snowflake.png';
+    let mounted = true;
+
+    const start = () => {
+      if (!mounted) return;
+      imageRef.current = img;
+
+      const createSnowflake = (init?: boolean): Snowflake => {
+        let posy = -10;
+        let radius = Math.random() * 18 + 10;
+        let speed = Math.random() * 1 + 0.5;
+        let sway = Math.random() * 0.5 + 0.2;
+
+        if (init) {
+          const initHeight = (dimensions.height / 1.1);
+          posy = Math.random() * initHeight + posy;
+          radius = (posy / (initHeight + posy) - 1) * -radius;
+        }
+
+        if (window.innerWidth < 768) {
+          radius /= 1.4;
+        }
+
+        return {
+          x: Math.random() * dimensions.width,
+          y: posy,
+          radius,
+          speed,
+          sway,
+          swayOffset: Math.random() * Math.PI * 2,
+          opacity: Math.random() * 0.5 + 0.2,
+          rotation: Math.random() * Math.PI * 2,
+          rotationSpeed: (Math.random() - 0.5) * 0.02,
+        }
+      };
+
+      const snowflakes: Snowflake[] = [];
+      for (let i = 0; i < 80; i++) {
+        snowflakes.push(createSnowflake(true));
+      }
+      snowflakesRef.current = snowflakes;
+
+      const animate = () => {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        snowflakesRef.current.forEach((flake, index) => {
+          flake.y += flake.speed;
+          flake.x += Math.sin(flake.swayOffset + flake.y * 0.02) * flake.sway;
+          flake.rotation += flake.rotationSpeed;
+
+          const shrink = dimensions.height < 768 ? 0.005 : 0.01;
+          flake.radius = Math.max(2, flake.radius - shrink);
+
+          if (flake.y > dimensions.height || flake.radius <= 0.5) {
+            snowflakesRef.current[index] = createSnowflake();
+            return;
+          }
+
+          ctx.save();
+          ctx.globalAlpha = flake.opacity;
+          ctx.translate(flake.x, flake.y);
+          ctx.rotate(flake.rotation);
+
+          ctx.drawImage(
+            img,
+            -flake.radius / 2,
+            -flake.radius / 2,
+            flake.radius,
+            flake.radius
+          );
+
+          ctx.restore();
+        });
+
+        animationFrameRef.current = requestAnimationFrame(animate);
+      };
+
+      animationFrameRef.current = requestAnimationFrame(animate);
+    };
+
+    if (img.complete) start();
+    else img.onload = start;
+
+    return () => {
+      mounted = false;
+      cancelAnimationFrame(animationFrameRef.current);
+      img.onload = null;
+      imageRef.current = null;
+    };
+  }, [dimensions]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className="fixed top-0 left-0 w-full h-full pointer-events-none"
+      style={{ zIndex: 0 }}
+      aria-hidden="true"
+    />
+  );
+}
+
+export const SnowfallBackground = () => (
+  <ChristmasExclusive>
+    <SnowfallRawBackground />
+  </ChristmasExclusive>
+)

src/components/events/eventprops.tsx

@@ -0,0 +1 @@
+'use client'

src/components/floating-label.tsx

@@ -8,10 +8,8 @@ export const FloatingLabel = ({
   children: React.ReactNode;
 }) => {
   return (
-    <div>
     <PopoverText text={placeholder}>
       {children}
     </PopoverText>
-    </div>
   );
 };

src/components/form/contact-form.tsx

@@ -0,0 +1,114 @@
+'use client'
+
+import { useRef, useState } from "react";
+import axios, { AxiosError } from "axios";
+
+import { CheckboxInput, Input, Submit } from "./form";
+import { FloatingLabel } from "../floating-label";
+import { CloudflareTurnstile } from "../turnstile";
+
+export default function ContactForm() {
+  const [anon, setAnon] = useState(false);
+  const formRef = useRef<HTMLFormElement | null>(null);
+  const [status, setStatus] = useState<'success' | 'loading' | 'failed' | 'idle'>('idle');
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const statusMsg = {
+    success: 'Sended!',
+    loading: 'Sending...',
+    failed: 'Failed :(',
+    idle: 'Send!'
+  }
+
+  const send = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setStatus('idle');
+    setErrorMsg('');
+
+    if (status == 'loading' || !formRef.current) return;
+    
+    const formData = new FormData(formRef.current);
+    
+    const data = {
+      anon,
+      name: formData.get('name')?.toString(),
+      email: formData.get('email')?.toString(),
+      message: formData.get('message')!.toString(),
+      "cf-turnstile-response": formData.get('cf-turnstile-response')?.toString()
+    }
+    
+    if ((!data.name || !data.email) && !data.anon) {
+      setErrorMsg("Name and email are required. Unless you check the box to send anonymously");
+      return;
+    }
+    
+    if (data.message.length < 1) {
+      setErrorMsg("What do you want to tell me???");
+      return;
+    }
+    
+    if (!data["cf-turnstile-response"]) {
+      setErrorMsg("Please fill in the captcha");
+      return;
+    }
+
+    setStatus('loading');
+
+    try {
+      await axios.post('/api/contact', data);
+      setStatus('success');
+    }
+    catch (err) {
+      setStatus('failed');
+      setErrorMsg("Something went wrong, Sorry...");
+
+      if (err instanceof AxiosError) {
+        if (err.status == 429) setErrorMsg("Limit reached, please try again later...");
+        if (err.status == 403) setErrorMsg("Captcha failed or expired, please try again later");
+      }
+    }
+  }
+
+  return (
+    <form action="POST" className="space-y-4" ref={formRef} onSubmit={send}>
+      <FloatingLabel placeholder="Leave an anonymous message, but I can't reply to you">
+        <CheckboxInput
+          name="anon"
+          placeholder="Send anonymously🤫"
+          onChange={setAnon}
+        />
+      </FloatingLabel>
+      <label className={anon ? "hidden" : "block"} htmlFor="contact-name">
+        <div className="mb-2">Name</div>
+        <Input
+          id="contact-name"
+          className="w-full"
+          name="name"
+          type="text"
+          placeholder="Any name you want me to know"
+        />
+      </label>
+      <label className={anon ? "hidden" : "block"} htmlFor="contact-email">
+        <div className="mb-2">Email</div>
+        <Input
+          id="contact-email"
+          className="w-full"
+          name="email"
+          type="email"
+        />
+      </label>
+      <label className="block" htmlFor="contact-msg">
+        <div className="mb-2">Message</div>
+        <textarea
+          name="message"
+          id="contact-msg"
+          className="max-h-96 h-32 w-full p-3 bg-background border border-primary"
+          placeholder="Tell me something cool, or ask question"
+        />
+      </label>
+      <CloudflareTurnstile />
+      <div className="text-primary">{errorMsg}</div>
+      <Submit disabled={status === "loading"} className="w-full">{statusMsg[status]}</Submit>
+    </form>
+  );
+}

src/components/form/form.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import clsx from "clsx";
+import { Icon } from "@iconify/react";
+import { useState } from "react";
+
+export function Input ({ className, type, ...props }: React.ComponentProps<'input'>) {
+  return (
+    <input
+      type={type}
+      className={clsx("block py-3 px-4 bg-background text-white border border-primary", className)}
+      {...props}
+    />
+  )
+}
+
+export function Submit ({ className, type, ...props }: React.ComponentProps<'button'>) {
+  return (
+    <button
+      type={'submit'}
+      className={clsx("block py-3 px-4 bg-primary disabled:bg-primary-darker text-background", className)}
+      {...props}
+    />
+  )
+}
+
+interface CheckboxInputProps {
+  name: string,
+  placeholder: string,
+  onChange: (value: boolean) => void
+}
+
+export function CheckboxInput ({ placeholder, name, onChange }: CheckboxInputProps) {
+  const [checked, setCheck] = useState(false);
+
+  const onClick = () => {
+    setCheck(c => !c);
+    onChange(!checked);
+  }
+
+  return (
+    <div className="">
+      <button type="button" id={`checkbox-${name}`} className="inline-block bg-none border border-primary w-4 h-4" onClick={onClick}>
+        {checked && <Icon icon="lucide:check" className="text-primary" />}
+      </button>
+      <label htmlFor={`checkbox-${name}`} className="ps-2 inline-block">{placeholder}</label>
+    </div>
+  )
+}

src/components/home-text.mdx

@@ -1,96 +0,0 @@
-import Image from "next/image"
-import Link from "next/link";
-import { FloatingLabel } from "./floating-label";
-
-Welcome!
-
-This is our cozy little corner of the internet where we run a bunch of services and websites on my own servers.
-
-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 build sick web apps with modern stacks (and trash).
-Big fan of open-source stuff, CLI life, Arch 💅.
-I only play indie games, and cooking up cursed mods just for fun.
-
-<Image
-    className="mb-12 mx-auto"
-    alt="Coral"
-    src="https://media1.tenor.com/m/CpCvknTOMMwAAAAC/ena-ena-joel-g.gif"
-    width={250}
-    height={250}
-    unoptimized
-/>
-
-{new Date(Date.now()) < new Date("2026-02-16") && (
-<p>
-    Pls add my <Link href="https://steamcommunity.com/id/nomi_nonsz" target="_blank" className="text-[#F48120] underline">Steam</Link>, I am so lonely 💔. 
-</p>
-)}
-
-## Vision
-
-Developers who brings together web technology, AI, and game development to create innovative, meaningful, and impactful digital experiences.
-
-We aspire to blend creativity and technical mastery to shape products that empower others and reflect our passion for independent, modern technology.
-
-## 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.
-- Develop self-hosted systems and applications, whether on local machines or remote environments, promoting digital independence, data ownership, and efficient resource control.
-- 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.
-
-Our work on web technologies has improved game development and art for anyone, but you still choose to see us as nothing more than senseless non-existent entities.
-
-But you, who's life is centered around nothing but a shallow sense of being superior to others through your knowledge or skill?
-
-We love what we do because it helps those in need, whether they realize it or not. It's a sense-less world you live in, but it's just us or someone who know how to keep things better.
-
-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
-        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

@@ -2,11 +2,11 @@ import Image from "next/image"
 import { FloatingLabel } from "./floating-label"
 
 export const LandingImage = () => (
-  <FloatingLabel placeholder="Coral Glasses ❤️. Warning: not my work, character by JoelG">
+  <FloatingLabel placeholder="ENA ❤️. Alert: NOT MY WORK!">
     <Image
-      className="mb-8 mx-auto"
+      className="mb-8 mx-auto h-auto"
       alt="Coral <3"
-      src="https://media1.tenor.com/m/RIP2rxKM_FgAAAAC/ena-ena-dream-bbq.gif"
+      src="https://media.tenor.com/1BCeG1aTiBAAAAAd/temptation-stairway-ena.gif"
       width={280}
       height={280}
       unoptimized

src/components/link.tsx

@@ -0,0 +1,14 @@
+import clsx from "clsx";
+import NextLink from "next/link"
+
+function Link({ className, ...props }: React.ComponentProps<typeof NextLink>) {
+  return (
+    <NextLink
+      className={clsx("text-primary underline", className)}
+      {...props}
+    />
+  )
+}
+
+
+export default Link;

src/components/page-template.tsx

@@ -0,0 +1,23 @@
+import Link from "next/link"
+import { ButtonPrimary } from "./button"
+import { Icon } from "@iconify/react"
+
+export const SimpleArticle = ({
+  children
+}: {
+  children: React.ReactNode
+}) => (
+  <main className="flex items-center pt-16 md:pt-24 pb-12 px-8 md:px-0">
+    <div className="mx-auto w-[480px] md:w-[520px]">
+      <Link href={"../"}>
+        <ButtonPrimary className="mb-8">
+          <Icon icon={"lucide:chevron-left"} />
+          Back
+        </ButtonPrimary>
+      </Link>
+      <article className="space-y-5 [&_p]:leading-relaxed [&_p]:text-sm [&_li]:text-sm relative [&_h1]:text-2xl [&_h2]:text-xl">
+        {children}
+      </article>
+    </div>
+  </main>
+)

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;

src/components/texts/home.mdx

@@ -0,0 +1,96 @@
+import Image from "next/image"
+import Link from "@/components/link";
+import { FloatingLabel } from "@/components/floating-label";
+import ContactForm from "@/components/form/contact-form";
+
+Welcome!
+
+This is our cozy little corner of the internet where we run services and websites on my own servers.
+
+We've got tools, resources, game server and other stuff that just works and doesn't burn our wallet, maybe.
+
+I love putting silly favorite characters on this site
+
+## About Me
+
+Nomi Nonszy (also known as Nonszy, Nomi Nonsense, whatever).
+I write code, do some art, and make sure our server doesn't catch on fire lol.
+
+I build sick web apps with modern stacks. Big fan of open-source stuff.
+Hate something that make things overengineered and boilerplate, but still use them anyway.
+Love with indie games, and cooking up cursed mods just for fun.
+
+Multifandom with Psychopomp, Deltarune, and ENA! I'm currently dedicated to the ENA SERIES!!
+
+<Image
+    className="mb-12 mx-auto"
+    alt="Coral"
+    src="https://media1.tenor.com/m/CpCvknTOMMwAAAAC/ena-ena-joel-g.gif"
+    width={250}
+    height={250}
+    unoptimized
+/>
+
+{new Date(Date.now()) < new Date("2026-02-16") && (
+<p>
+    Pls add my <Link href="https://steamcommunity.com/id/nomi_nonsz" target="_blank">Steam</Link>, I am so lonely 💔. 
+</p>
+)}
+
+{/* ## Vision
+
+To contribute to the global developer ecosystem by sharing knowledge, conducting research, and crafting tools and systems that make technology more efficient, accessible, and affordable for everyone.
+
+## Mission
+
+Our mission is to explore, learn, and innovate across all layers of technology from app development to infrastructure management
+
+- Learn the art of server management, containerization, cloud deployment, and resource monitoring to understand how platforms operate at scale.
+
+- Explore how automation can simplify complex processes like provisioning, monitoring, scaling, and maintaining servers, allowing us to focus more on development and innovation.
+
+- Study and implement security best practices to protect our systems from threats, while also ensuring high availability and fault tolerance across distributed environments.
+
+- Conduct experiments and share findings, build open-source tools, and support fellow developers by creating systems and free platform that make development easier, safer, and more efficient.
+
+- Delve into low-level programming and computer system fundamentals to understand how software interacts with hardware, empowering us to optimize systems from the ground up. */}
+
+## Why Nonsense
+
+Nonszy is an absurd abbreviation of 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.
+
+We love what we do because it helps those in need, whether they realize it or not. It's a sense-less world you live in, but it's just us or someone who know how to keep things better.
+
+<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>
+
+## Coral Glasses
+
+<Image
+    className="float-left mr-5 pb-1"
+    alt="Coral Dialogue"
+    src="/images/coral-dialogue.jpg"
+    width={200}
+    height={200}
+/>
+
+Coral Glasses is a supporting character from the video game
+<Link href="https://store.steampowered.com/app/2134320/ENA_Dream_BBQ/" target="_blank">ENA: Dream BBQ</Link>,
+developed by
+<Link href="https://joelgc.com/" target="_blank">JoelG</Link>,
+and published under the ENA Team. She speaks Korean in the game and is voiced by Kim Minsol
+
+The game is part of the surreal and artistically distinct ENA universe, which expands upon his earlier animated web series of the same name.
+
+
+## Tell me something
+
+<ContactForm />

src/components/texts/privacy.mdx

@@ -0,0 +1,5 @@
+# Privacy Policy
+
+This website ("nonszy.space") fully respects the privacy of its visitors. This page explains how we handle visitor information. The short answer is: **we do not collect, track, or store your personal information**.
+
+However, future feature additions will update the privacy policy.

src/components/texts/terms.mdx

@@ -0,0 +1,46 @@
+# Terms
+
+## Acceptance of Terms
+
+By accessing and using this website (“nonszy.space”), you agree to be bound by these Terms and Conditions. If you do not agree with any part of these Terms and Conditions, you are advised not to use this Site.
+
+## Third Party Intellectual Property Rights
+
+Some materials on this Site, **such as the Coral Glasses character, or the ENA Dream BBQ game and ENA Series, are the property of <a href='https://joelgc.com' className='text-primary underline'>JoelG</a>** and are used under fair use. The Site owner does not claim any rights to these materials. All copyrights and trademarks remain the property of their respective owners.
+
+## Content Ownership and Copyright
+
+Some materials on this Site, including but not limited to **applications, code, digital works, 2D illustrations, 3D works, designs, and OC (Original Characters) such as Nola, that owned by the site owner**, are protected by copyright and intellectual property rights in accordance with applicable laws and regulations.
+
+- Content may only be used for personal and non-commercial purposes unless written permission is obtained.
+- It is prohibited to reproduce, modify, distribute, sell, or utilize the content on this Site for commercial purposes without written permission.
+
+## Prohibited Uses for AI Training
+
+All content on this Site is **strictly prohibited from being used for training, developing, or improving artificial intelligence (AI) models**, including but not limited to:
+
+- Machine learning, deep learning, or AI datasets in any form.
+- Third-party services that collect data for the purpose of training AI models.
+- Platforms or automated systems that copy, archive, or process content for AI analysis.
+
+Any violation of these terms may be subject to legal action in accordance with applicable copyright and intellectual property laws.
+
+## User Responsibility
+
+Users are prohibited from:
+
+- Hacking, data mining, or other actions that may harm the Site.
+- Uploading or distributing harmful material, including malware or illegal content.
+- Using the Site to violate applicable laws or regulations.
+
+## External Links
+
+This Site may contain links to third-party sites. The Site owner is not responsible for the content, policies, or practices of such external sites.
+
+## Disclaimer
+
+The Site is provided “as is” without warranty of any kind. The Site owner is not responsible for any direct or indirect losses resulting from the use of the Site.
+
+## Changes to Terms and Conditions
+
+These Terms and Conditions are subject to change at any time without prior notice. The latest version will be published on this page and will be effective from the date of publication.

src/components/turnstile.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+export const CloudflareTurnstile = () => (
+  <div
+    className="cf-turnstile [&_#content]:bg-background"
+    data-sitekey={process.env.NEXT_PUBLIC_CF_SITE_KEY}
+    data-theme="dark"
+  />
+)

src/components/windows.tsx

@@ -1,5 +1,9 @@
 import { Icon } from "@iconify/react";
 import { FloatingLabel } from "@/components/floating-label";
+import { FakeRelativeWindow, RestoreWindowsButton } from "./client-windows";
+import Image from "next/image"
+import Link from "next/link";
+import { ChristmasProperty } from "./events/christmas";
 
 export const FakeWindow = ({
   windowText, children
@@ -7,11 +11,22 @@ export const FakeWindow = ({
   windowText: string
   children: React.ReactNode
 }) => (
-  <div className="mx-auto w-[480px] md:w-[520px] md:border border-primary">
+  <div className="relative md:bg-background mx-auto w-[480px] md:w-[520px] md:border border-primary z-10">
+    <ChristmasProperty
+      img="/images/event_santahat1.png"
+      size={180}
+      left={-60}
+      top={-80}
+    />
+    <div className="p-1 pb-0">
       <div className="hidden md:flex bg-primary p-2 justify-between text-background">
         <div className="ms-1 pointer-events-none">
           {windowText}
         </div>
+        <div className="inline-flex">
+          <RestoreWindowsButton className="border-outset px-2 text-xs me-2">
+            Restore Windows
+          </RestoreWindowsButton>
           <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>
@@ -19,8 +34,83 @@ export const FakeWindow = ({
             </div>
           </FloatingLabel>
         </div>
+      </div>
+    </div>
+    <div className="m-1 md:border border-primary">
       <div className="md:p-8">
         {children}
       </div>
     </div>
+  </div>
 )
+
+export const HomeWindows = () => (
+  <div className="relative">
+    <FakeRelativeWindow
+      windowText="nola.png"
+      className="-right-[73%] top-[1300px] z-20"
+      draggable
+    >
+      <FloatingLabel placeholder="This is Nola, my OC :3">
+        <div className="relative">
+          <ChristmasProperty img="/images/event_santahat1.png" size={150} top={-40} left={70} flip />
+          <Image
+            className=""
+            alt="Nola"
+            src="/images/nola.png"
+            width={200}
+            height={200}
+          />
+        </div>
+      </FloatingLabel>
+    </FakeRelativeWindow>
+    <FakeRelativeWindow
+      windowText="bouncing_coral.exe"
+      className="-left-[78%] top-[260px] z-20"
+    >
+      <Link
+        href="https://x.com/JoelGuerraC/status/1287088236171603969/photo/1"
+        target="_blank"
+      >
+        <Image
+          className="animate-silly-bouncing"
+          alt="Bounce Coral"
+          src="/images/coral-a1.png"
+          width={200}
+          height={200}
+          quality={10}
+          unoptimized
+        />
+      </Link>
+    </FakeRelativeWindow>
+    <FakeRelativeWindow
+      windowText="cube_coral.exe"
+      className='-left-[75%] top-[1980px] z-10'
+      draggable
+    >
+      <Image
+        alt="Coral 1"
+        src="https://media.tenor.com/J-gqkU0R8VgAAAAi/coral-glasses-ena-dream-bbq.gif"
+        width={200}
+        height={200}
+        quality={10}
+        unoptimized
+      />
+    </FakeRelativeWindow>
+    <FakeRelativeWindow
+      windowText="ena_spin.exe"
+      className="-right-[85%] top-[440px] z-10"
+      draggable
+    >
+      <Image
+        alt="Coral Cupcake"
+        src="https://media.tenor.com/Uv-PLe5GIe0AAAAi/gyaruface.gif"
+        width={240}
+        height={200}
+        quality={10}
+        priority={false}
+        unoptimized
+      />
+    </FakeRelativeWindow>
+  </div>
+);

src/components/wobbling-image.tsx

@@ -0,0 +1,174 @@
+'use client'
+
+import clsx from "clsx";
+import Image from "next/image";
+import { useCallback, useEffect, useRef, useState } from "react"
+
+interface WobblingImageInterface {
+  images: {
+    idle: string;
+    aware?: string;
+    poked?: string;
+    weird?: string;
+  }
+}
+
+interface ImageClipInterface {
+  name: string;
+  src: string;
+  size: number;
+  visible?: boolean;
+}
+
+const ImageClip: React.FC<ImageClipInterface> = ({
+  name, src, size, visible
+}) => (
+  <Image
+    className={clsx("absolute left-1/2 -translate-x-1/2 top-0 pointer-events-none", visible ? "opacity-100" : "opacity-0")}
+    alt={name}
+    src={src}
+    width={size}
+    height={size}
+    draggable={false}
+  />
+)
+
+function WobblingImage ({
+  images
+}: WobblingImageInterface) {
+  const size = 400;
+  const [isPoked, setPoked] = useState(false);
+  const [isAware, setAware] = useState(false);
+  const pokeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const [isAnimating, setIsAnimating] = useState(false);
+  
+  const audioPath = "/sound/poke.wav";
+  const audioContextRef = useRef<AudioContext | null>(null);
+  const [audioBuffer, setAudioBuffer] = useState<AudioBuffer | null>(null);
+  const [audioLoaded, setAudioLoaded] = useState(false);
+  
+  const [dummyAudio, setDummyAudio] = useState<HTMLAudioElement | null>(null);
+
+  useEffect(() => {
+    if (typeof Audio !== undefined) setDummyAudio(new Audio(audioPath))
+    return () => {
+      if (dummyAudio) dummyAudio.pause();
+    }
+  }, [])
+
+  const initializeAudioContext = useCallback((): AudioContext => {
+    if (!audioContextRef.current) {
+      audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)();
+    }
+    return audioContextRef.current;
+  }, []);
+
+  const loadAudio = useCallback(async (url: string): Promise<AudioBuffer> => {
+    const response = await fetch(url);
+    const arrayBuffer = await response.arrayBuffer();
+    const context = initializeAudioContext();
+    return await context.decodeAudioData(arrayBuffer);
+  }, [initializeAudioContext]);
+
+  const initializeAudio = useCallback(async (): Promise<void> => {
+    if (audioBuffer) return;
+
+    setAudioLoaded(false);
+    try {
+      const buffer = await loadAudio(audioPath);
+      setAudioBuffer(buffer);
+    } catch (error) {
+      console.error('Failed to load audio:', error);
+    }
+    finally {
+      setAudioLoaded(true);
+    }
+  }, [audioBuffer, loadAudio]);
+
+  const playRandomPitch = useCallback(async (): Promise<void> => {
+    await initializeAudio();
+
+    if (!audioBuffer || !audioContextRef.current) return;
+
+    const context = audioContextRef.current;
+    const changeToLowPitch = Math.floor(Math.random() * 66);
+    const randomPitch = Math.random() * 0.38 + (changeToLowPitch == 1 ? 0.25 : 0.75);
+
+    const source = context.createBufferSource();
+    source.buffer = audioBuffer;
+    source.playbackRate.value = randomPitch;
+    source.connect(context.destination);
+    source.start(0);
+
+    source.onended = () => {
+      source.disconnect();
+    };
+  }, [audioBuffer, initializeAudio]);
+
+
+  function handleClick() {
+    const pokedDuration = 700 + Math.floor(Math.random() * 100)
+    if (!isAware) setAware(true);
+
+    setIsAnimating(false);
+    requestAnimationFrame(() => setIsAnimating(true));
+    
+    playRandomPitch();
+    if (dummyAudio && !audioLoaded) {
+      dummyAudio.currentTime = 0;
+      dummyAudio.play();
+    }
+
+    if (pokeTimeoutRef.current) {
+      clearTimeout(pokeTimeoutRef.current);
+    }
+    setPoked(true);
+    pokeTimeoutRef.current = setTimeout(() => {
+      setPoked(false);
+    }, pokedDuration);
+  }
+
+  function handleAnimationEnd() {
+    setIsAnimating(false);
+  }
+
+  return (
+    <div className="">
+      <div
+        className={clsx(
+          "relative mx-auto cursor-grab active:cursor-grabbing h-[400px] select-none",
+          isAnimating && "animate-[click-bounce_230ms_ease-out]"
+        )}
+        onClick={handleClick}
+        onAnimationEnd={handleAnimationEnd}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClick(); } }}
+        onMouseDown={(e) => e.preventDefault()}
+        onPointerDown={(e) => e.preventDefault()}
+      >
+        <ImageClip
+          name="idle"
+          src={images.idle}
+          size={size}
+          visible={!isPoked && !isAware}
+        />
+        <ImageClip
+          name="aware"
+          src={images.aware || images.idle}
+          size={size}
+          visible={!isPoked && isAware}
+        />
+        <ImageClip
+          name="poked"
+          src={images.poked || images.idle}
+          size={size}
+          visible={isPoked}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default WobblingImage;

src/hooks/theme-events.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { EventsDate } from "@/lib/types";
+import { getEvent } from "@/lib/utils";
+import { createContext, useContext } from "react";
+
+interface ThemeEventsContextType {
+  event: EventsDate | undefined
+}
+
+const ThemeEventsContext = createContext<ThemeEventsContextType | undefined>(undefined);
+
+export const ThemeEventsProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const eventNow = getEvent();
+
+  return <ThemeEventsContext.Provider value={{ event: eventNow }}>
+    {children}
+  </ThemeEventsContext.Provider>
+}
+
+export const useThemeEvents = () => useContext(ThemeEventsContext);

src/hooks/window-manager.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import React, { createContext, useContext, useEffect, useState } from "react";
+
+export interface FakeWindow {
+  name: string;
+  minimized: boolean;
+  closed: boolean;
+  offset: {
+    x: number;
+    y: number;
+  }
+}
+
+interface WindowManagerContextType {
+  windows: FakeWindow[];
+  isLocalDataExists: boolean;
+  get: (name: string) => FakeWindow | undefined;
+  add: (window: FakeWindow) => void;
+  updateWindow: (name: string, changes: Partial<FakeWindow>) => void;
+  toggleMinimize: (name: string) => void;
+  close: (name: string) => void;
+  remove: (name: string) => void;
+  move: (name: string, offset: { x: number; y: number }) => void;
+  resetAll: () => void;
+}
+
+const WindowManagerContext = createContext<WindowManagerContextType | undefined>(undefined);
+
+export const WindowManagerProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [windows, setWindows] = useState<FakeWindow[]>([]);
+  const [isInit, setInit] = useState(false);
+  const [isLocalDataExists, setExists] = useState(false);
+
+  useEffect(() => {
+    const data = localStorage.getItem("fake-windows-data");
+    if (data) {
+      setWindows(JSON.parse(data));
+      setExists(true);
+    }
+    setInit(true);
+  }, []);
+
+  useEffect(() => {
+    if (isInit && typeof window !== 'undefined' && windows.length > 0) {
+      window.localStorage.setItem('fake-windows-data', JSON.stringify(windows));
+    }
+  }, [windows]);
+
+  const get = (name: string) => windows.find(window => window.name == name);
+  const add = (window: FakeWindow) => setWindows(w => [...w, window]);
+  const updateWindow = (name: string, changes: Partial<FakeWindow>) =>
+    setWindows(w =>
+      w.map(win => win.name === name ? { ...win, ...changes } : win)
+    );
+  const toggleMinimize = (name: string) => 
+    setWindows(w =>
+      w.map(win => win.name === name ? { ...win, minimized: !win.minimized } : win)
+    );
+  const open = (name: string) => updateWindow(name, { closed: false });
+  const close = (name: string) => updateWindow(name, { closed: true });
+  const move = (name: string, offset: { x: number; y: number }) =>
+    updateWindow(name, { offset });
+
+  const remove = (name: string) => setWindows(w => w.filter(win => win.name !== name));
+
+  const resetAll = () => setWindows(w =>
+    w.map(win => ({
+      name: win.name,
+      closed: false,
+      minimized: false,
+      offset: { x: 0, y: 0 }
+    }))
+  );
+
+  return (
+    <WindowManagerContext.Provider value={{
+      windows,
+      isLocalDataExists,
+      get, add, updateWindow, toggleMinimize, close, move, remove, resetAll
+    }}>
+      {children}
+    </WindowManagerContext.Provider>
+  );
+};
+
+export function useWindowManager() {
+  const ctx = useContext(WindowManagerContext);
+  if (!ctx) throw new Error("useWindowManager must be used within WindowManagerProvider");
+  return ctx;
+}

src/lib/mailer.ts

@@ -0,0 +1,12 @@
+import nodemailer from "nodemailer";
+
+export const transporter = nodemailer.createTransport({
+  // @ts-ignore
+  host: process.env.SMTP_HOST,
+  port: Number(process.env.SMTP_PORT),
+  secure: process.env.SMTP_SECURE == "true",
+  auth: {
+    user: process.env.SMTP_USER,
+    pass: process.env.SMTP_PASS
+  }
+});

src/lib/redis.ts

@@ -0,0 +1,5 @@
+import Redis from "ioredis";
+
+export const redis = new Redis(process.env.REDIS_URL!, {
+  maxRetriesPerRequest: 3,
+});

src/lib/server-utils.ts

@@ -0,0 +1,53 @@
+import axios from "axios";
+import { JSDOM } from 'jsdom';
+import DOMPurify from "dompurify";
+
+import { redis } from "./redis";
+import { transporter } from "./mailer";
+import { trimTooLong } from "./strings";
+import { escape } from "validator";
+
+export async function rateLimited(clientId: string) {
+  const key = `contact:${clientId}`;
+  const count = await redis.incr(key);
+  if (count === 1) {
+    await redis.expire(key, 600);
+  }
+  return count > 3;
+}
+
+export async function validateTurnstile(token: string, remoteip: string) {
+  const body = new URLSearchParams({
+    secret: process.env.CF_SECRET_KEY!,
+    response: token,
+    remoteip
+  })
+
+  const res = await axios.post("https://challenges.cloudflare.com/turnstile/v0/siteverify", body, {
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded"
+    }
+  });
+
+  const result = await res.data;
+  return result.success === true;
+}
+
+export async function sendEmail(name: string, email: string, message: string) {
+  const rawMessage = `From: ${name}\nEmail: ${email}\n\nMessage:\n${trimTooLong(message, 5000)}`;
+  const messageHTML = sanitize(escape(rawMessage));
+
+  await transporter.sendMail({
+    from: `Nonszy Contact Form <${process.env.SMTP_USER}>`,
+    replyTo: email,
+    to: process.env.SMTP_REPLY,
+    subject: `[CONTACT_FORM] from ${name}`,
+    text: rawMessage,
+    // html: messageHTML
+  })
+}
+
+export function sanitize(dirty: string) {
+  const window = new JSDOM('').window;
+  return DOMPurify(window).sanitize(dirty);
+}

src/lib/strings.ts

@@ -0,0 +1,3 @@
+export const trimTooLong = (text: string, limit: number, endsWith?: string) => {
+  return text.length > limit ? text.slice(0, limit) + (endsWith ?? "...") : text;
+}

src/lib/types.ts

@@ -0,0 +1,5 @@
+export type EventsDate = {
+  name: string,
+  start: number[],
+  end: number[]
+}

src/lib/utils.ts

@@ -1,8 +1,29 @@
 'use client'
 
-import dayjs from 'dayjs';
+import { format, isWithinInterval } from "date-fns";
+import type { EventsDate } from "./types";
+
+const events: EventsDate[] = [
+  {
+    name: 'christmas',
+    start: [12, 20],
+    end: [12, 32]
+  },
+]
 
 export function getExpirationDate () {
   const expirationDate = new Date("2026-02-15");
-  return dayjs(expirationDate).format("dddd, D MMMM YYYY");
+  return format(expirationDate, "dddd, D MMMM YYYY");
+}
+
+export function getEvent (): EventsDate | undefined {
+  return events.find((e) => {
+    const today = new Date(Date.now());
+    const year = today.getFullYear();
+
+    const start = new Date(year, e.start[0] - 1, e.start[1]);
+    const end = new Date(year, e.end[0] - 1, e.end[1]);
+    
+    return isWithinInterval(today, { start, end })
+  })
 }

tailwind.config.ts

@@ -12,6 +12,7 @@ const config: Config = {
         background: "var(--background)",
         foreground: "var(--foreground)",
         primary: "var(--primary)",
+        'primary-darker': "var(--primary-darker)",
       },
     },
     screens: {
@@ -24,6 +25,19 @@ const config: Config = {
     },
     animation: {
       "silly-bouncing": 'silly-bounce 0.8s infinite',
+      "click-bouncing": 'click-bounce 200ms',
+      'window-popup': 'window-popup 1s',
+      'window-popdown': 'window-popdown 1s'
+    },
+    keyframes: {
+      "fade-in-half": {
+        '0%, 50%': { opacity: "0" },
+        '100%': { opacity: '1' },
+      },
+      "fade-out-half": {
+        '0%, 50%': { opacity: "1" },
+        '100%': { opacity: '0' },
+      }
     }
   },
   plugins: [],