some cool changes

package.json

@@ -15,13 +15,16 @@
     "react-dom": "^18"
   },
   "devDependencies": {
+    "@iconify/react": "^5.2.0",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "add": "^2.0.6",
     "eslint": "^8",
     "eslint-config-next": "14.2.24",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5"
+    "typescript": "^5",
+    "yarn": "^1.22.22"
   }
 }

src/app/globals.css

@@ -4,4 +4,5 @@
 
 :root {
   --background: #0F0A1F;
+  --primary: #FFA826;
 }

src/app/page.tsx

@@ -1,6 +1,8 @@
 import { ExpirationDate } from "@/components/expiration-date";
 import { NolaGlitchClientOnly } from "@/components/nola-glitch";
+import { Sosmed } from "@/components/sosmed";
 import Image from "next/image";
+import Link from "next/link";
 
 export default function Home() {
   return (
@@ -18,9 +20,11 @@ export default function Home() {
             src="https://media.tenor.com/1BCeG1aTiBAAAAAd/temptation-stairway-ena.gif"
             width={200}
             height={200}
+            unoptimized
           />
         </noscript>
         <NolaGlitchClientOnly />
+        <Sosmed />
         <article className="space-y-6 leading-relaxed">
           <p>What? what are you expecting specifically on this base page?</p>
           <p>
@@ -29,7 +33,7 @@ export default function Home() {
           <p>This domain will active until <ExpirationDate /></p>
         </article>
         <section className="my-8">
-          <p>⚡ Powered with <a href="https://www.cloudflare.com/" target="_blank" className="text-[#F48120] underline">Cloudflare</a> ☁️</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>&copy; <span className="text-sm">2024-2025 Nomi Nonsense</span></p>

src/components/nola-glitch.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useEffect, useRef, useState } from "react";
+import Image from "next/image";
 
 export const NolaGlitch = () => {
   const ascii = useRef<HTMLDivElement>(null);
@@ -93,17 +94,28 @@ export const NolaGlitch = () => {
 }
 
 export const NolaGlitchClientOnly = () => {
-  const [isClient, setIsClient] = useState(false);
+  const [willTheyLucky, setLucky] = useState(false);
+  const probability = 8;
 
   useEffect(() => {
-    setIsClient(true);
+    const rand = Math.floor(Math.random() * probability)
+    setLucky(rand == 1);
   }, []);
 
-  if (!isClient) {
+  if (!willTheyLucky) {
-    return null;
+    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 <div className="text-[9px] mb-4 leading-[0.8rem] h-[320px] text-center">
+  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">
     <NolaGlitch />
   </div>
 }

src/components/sosmed.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { Icon } from "@iconify/react";
+import Link from "next/link";
+
+const sosmeds =  [
+  {
+    name: 'x',
+    url: 'https://x.com/_nomi_nonsz',
+    icon: 'pajamas:twitter',
+    size: 'text-3xl'
+  },
+  {
+    name: 'facebook',
+    url: 'https://www.facebook.com/nominonsense/',
+    icon: 'mdi:facebook'
+  },
+  {
+    name: 'github',
+    url: 'https://github.com/nomi-nonsz/',
+    icon: 'mdi:github'
+  },
+  {
+    name: 'reddit',
+    url: 'https://www.reddit.com/user/_nomi_nonsz',
+    icon: 'mdi:reddit'
+  },
+  {
+    name: 'itch',
+    url: 'https://nomi-nonsense.itch.io/',
+    icon: 'cib:itch-io',
+    size: 'text-3xl'
+  },
+]
+
+export const Sosmed = () => {
+  return (
+    <div className="flex justify-center gap-3 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"
+          href={sosmed.url}
+          target="_blank"
+          key={sosmed.name}
+        >
+          <Icon icon={sosmed.icon} className={`text-primary text-4xl ${sosmed.size}`} />
+        </Link>
+      ))}
+    </div>
+  )
+}

tailwind.config.ts

@@ -11,8 +11,12 @@ const config: Config = {
       colors: {
         background: "var(--background)",
         foreground: "var(--foreground)",
+        primary: "var(--primary)",
       },
     },
+    screens: {
+      'xs': '480px'
+    }
   },
   plugins: [],
 };

yarn.lock

@@ -58,6 +58,18 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3"
   integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
 
+"@iconify/react@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/@iconify/react/-/react-5.2.0.tgz#c525afc322edba4152aa81e42e22a71a7c31a62b"
+  integrity sha512-7Sdjrqq3fkkQNks9SY3adGC37NQTHsBJL2PRKlQd455PoDi9s+Es9AUTY+vGLFOYs5yO9w9yCE42pmxCwG26WA==
+  dependencies:
+    "@iconify/types" "^2.0.0"
+
+"@iconify/types@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@iconify/types/-/types-2.0.0.tgz#ab0e9ea681d6c8a1214f30cd741fe3a20cc57f57"
+  integrity sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==
+
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
@@ -339,6 +351,11 @@ acorn@^8.9.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.14.0.tgz#063e2c70cac5fb4f6467f0b11152e04c682795b0"
   integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==
 
+add@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/add/-/add-2.0.6.tgz#248f0a9f6e5a528ef2295dbeec30532130ae2235"
+  integrity sha512-j5QzrmsokwWWp6kUcJQySpbG+xfOBqqKnup3OIk1pz+kB/80SLorZ9V8zHFLO92Lcd+hbvq8bT+zOGoPkmBV0Q==
+
 ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
@@ -2857,6 +2874,11 @@ yaml@^2.3.4:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.7.0.tgz#aef9bb617a64c937a9a748803786ad8d3ffe1e98"
   integrity sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==
 
+yarn@^1.22.22:
+  version "1.22.22"
+  resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.22.tgz#ac34549e6aa8e7ead463a7407e1c7390f61a6610"
+  integrity sha512-prL3kGtyG7o9Z9Sv8IPfBNrWTDmXB4Qbes8A9rEzt6wkJV8mUvoirjU0Mp3GGAU06Y0XQyA3/2/RQFVuK7MTfg==
+
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"