remaster text

next.config.mjs

@@ -1,3 +1,5 @@
+import createMDX from "@next/mdx"
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
@@ -10,7 +12,10 @@ const nextConfig = {
     ]
   },
   output: 'standalone',
-  productionBrowserSourceMaps: false
+  productionBrowserSourceMaps: false,
+  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
 };
 
-export default nextConfig;
+const withMDX = createMDX()
+
+export default withMDX(nextConfig);

package.json

@@ -9,6 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@mdx-js/loader": "^3.1.0",
+    "@mdx-js/react": "^3.1.0",
+    "@next/mdx": "^15.3.4",
+    "@types/mdx": "^2.0.13",
     "dayjs": "^1.11.13",
     "next": "14.2.24",
     "react": "^18",

src/app/globals.css

@@ -5,4 +5,12 @@
 :root {
   --background: #0F0A1F;
   --primary: #FFA826;
+}
+
+h2 {
+  @apply text-2xl font-bold
+}
+
+ul {
+  @apply list-disc ms-8 space-y-4
 }

src/app/not-found.tsx

@@ -7,8 +7,8 @@ export const metadata: Metadata = {
 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-[480px]">
-        <header className="mb-8 text-center">
+      <div className="mx-auto w-[380px]">
+        <header className="mb-8 -ms-5 text-center">
           <h1 className="font-bold text-8xl">404</h1>
         </header>
         <div className="">

src/app/page.tsx

@@ -1,36 +1,26 @@
-import { ExpirationDate } from "@/components/expiration-date";
+import { LandingImage } from "@/components/landing-image";
 import { NolaGlitchClientOnly } from "@/components/nola-glitch";
 import { Sosmed } from "@/components/sosmed";
-import Image from "next/image";
+import HomeText from "@/components/home-text.mdx"
+
 import Link from "next/link";
 
 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-12">
-          <h1 className="font-bold text-xl md:text-3xl">
+        <header className="text-center mb-8">
+          <h1 className="font-bold text-3xl leading-normal">
             Nomi Nonsense Workspace
           </h1>
         </header>
         <noscript>
-          <Image
-            className="mb-12 mx-auto"
-            alt="Spining ENA <3"
-            src="https://media.tenor.com/1BCeG1aTiBAAAAAd/temptation-stairway-ena.gif"
-            width={200}
-            height={200}
-            unoptimized
-          />
+          <LandingImage />
         </noscript>
         <NolaGlitchClientOnly />
         <Sosmed />
         <article className="space-y-6 leading-relaxed">
-          <p>What? what are you expecting specifically on this base page?</p>
-          <p>
-            This is Nomi Nonsense Workspace Domain, where some services and websites that are hosted on their own servers are on this budget domain
-          </p>
-          <p>This domain will active until <ExpirationDate /></p>
+          <HomeText />
         </article>
         <section className="my-8">
           <p>⚡ Powered with <Link href="https://www.cloudflare.com/" target="_blank" className="text-[#F48120] underline">Cloudflare</Link> ☁️</p>

src/components/home-text.mdx

@@ -0,0 +1,68 @@
+import Image from "next/image"
+import Link from "next/link";
+
+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.
+
+## 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. 
+
+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="Pat coral"
+    title="Pat pat pat pat pat"
+    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.
+
+## 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.
+
+<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
+/>

src/components/landing-image.tsx

@@ -0,0 +1,13 @@
+import Image from "next/image"
+
+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
+  />
+)

src/components/nola-glitch.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useRef, useState } from "react";
-import Image from "next/image";
+import { LandingImage } from "./landing-image";
 
 export const NolaGlitch = () => {
   const ascii = useRef<HTMLDivElement>(null);
@@ -95,7 +95,7 @@ export const NolaGlitch = () => {
 
 export const NolaGlitchClientOnly = () => {
   const [willTheyLucky, setLucky] = useState(false);
-  const probability = 8;
+  const probability = 18;
 
   useEffect(() => {
     const rand = Math.floor(Math.random() * probability)
@@ -103,16 +103,7 @@ export const NolaGlitchClientOnly = () => {
   }, []);
 
   if (!willTheyLucky) {
-    return (
-      <Image
-        className="mb-12 mx-auto"
-        alt="Spining ENA <3"
-        src="https://media.tenor.com/1BCeG1aTiBAAAAAd/temptation-stairway-ena.gif"
-        width={200}
-        height={200}
-        unoptimized
-      />
-    )
+    return <LandingImage />
   }
 
   return <div className="text-[6px] xs:text-[9px] leading-[0.53rem] xs:leading-[0.8rem] h-[230px] xs:h-[320px] text-center max-w-[240px] xs:max-w-max mx-auto">

src/components/sosmed.tsx

@@ -26,7 +26,7 @@ const sosmeds =  [
     icon: 'mdi:reddit'
   },
   {
-    name: 'itch',
+    name: 'itch.io',
     url: 'https://nomi-nonsense.itch.io/',
     icon: 'cib:itch-io',
     size: 'text-[30px]'
@@ -35,12 +35,13 @@ const sosmeds =  [
 
 export const Sosmed = () => {
   return (
-    <div className="flex justify-center gap-3 mb-10">
+    <div className="flex justify-center gap-4 mb-10">
       {sosmeds.map((sosmed) => (
         <Link
-          className="grid items-center justify-center border border-primary w-[48px] xs:w-[52px] h-auto aspect-square transition-[transform] duration-75 hover:-translate-y-1"
+          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}`} />

src/mdx-components.tsx

@@ -0,0 +1,7 @@
+import type { MDXComponents } from 'mdx/types'
+ 
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    ...components,
+  }
+}