some cool changes

2025-02-18 11:06:22 +07:00 · 2025-02-18 11:06:22 +07:00 · ece725197d
commit ece725197d
parent 45d8f5dad1
7 changed files with 105 additions and 8 deletions
--- a/package.json
+++ b/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"
  }
 }
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -4,4 +4,5 @@

 :root {
  --background: #0F0A1F;
+  --primary: #FFA826;
 }
--- a/src/app/page.tsx
+++ b/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>
--- a/src/components/nola-glitch.tsx
+++ b/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) {
-    return null;
+  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 <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>
 }
--- a/src/components/sosmed.tsx
+++ b/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>
+  )
+}
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -11,8 +11,12 @@ const config: Config = {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
+        primary: "var(--primary)",
      },
    },
+    screens: {
+      'xs': '480px'
+    }
  },
  plugins: [],
 };
--- a/yarn.lock
+++ b/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"