OwO

package.json

@@ -25,5 +25,6 @@
     "postcss": "^8",
     "prettier": "^3.1.1",
     "tailwindcss": "^3.3.0"
-  }
+  },
+  "packageManager": "pnpm@9.1.0+sha512.67f5879916a9293e5cf059c23853d571beaf4f753c707f40cb22bed5fb1578c6aad3b6c4107ccb3ba0b35be003eb621a16471ac836c87beb53f9d54bb4612724"
 }

public/random.js

@@ -1,4 +1,3 @@
-
 const lines = [
   "ねえ 女の子になりたい",
   "お願い いいですか？",
@@ -57,15 +56,16 @@ const lines = [
   "女の子になりたい！",
   "お願い いいですか？",
   "可愛くなっていいですか？",
-    "ナイショだよ"
-  ];
+  "ナイショだよ",
+]
 
-  const transFlagColors = ['#55CDFC', '#F7A8B8', 'white'];
+const transFlagColors = ["#55CDFC", "#F7A8B8", "white"]
 
-  const linesPerSection = Math.ceil(lines.length / transFlagColors.length);
+const linesPerSection = Math.ceil(lines.length / transFlagColors.length)
 
-  lines.forEach((line, index) => {
-    const sectionIndex = Math.floor(index / linesPerSection) % transFlagColors.length;
-    const color = transFlagColors[sectionIndex];
-    console.log(`%c${line}`, `color: ${color}; font-size: 28px;`);
-  });
+lines.forEach((line, index) => {
+  const sectionIndex =
+    Math.floor(index / linesPerSection) % transFlagColors.length
+  const color = transFlagColors[sectionIndex]
+  console.log(`%c${line}`, `color: ${color}; font-size: 28px;`)
+})

src/components/About.jsx

@@ -20,8 +20,9 @@ const About = () => {
           </Link>
           School in Nonthaburi, Thailand 🇹🇭. I love computer and programming,
           with skills in C# and C++. Currently learning Python, JavaScript, and
-          More! I play osu! for daily and other for sometimes, Music is randomly, and I've
-          got a <PageLink to="/blog" text="blog" />! too—check it out! :3
+          More! I play osu! for daily and other for sometimes, Music is
+          randomly, and I've got a <PageLink to="/blog" text="blog" />!
+          too—check it out! :3
         </Twemoji>
       </div>
     </>

src/components/Avatar.jsx

@@ -4,7 +4,13 @@ const Avatar = () => {
   return (
     <>
       <div className="rounded-2xl overflow-hidden w-24" id="status">
-        <Image priority={true} src="/pfp.png" width={128} height={128} alt="Profile picture" />
+        <Image
+          priority={true}
+          src="/pfp.png"
+          width={128}
+          height={128}
+          alt="Profile picture"
+        />
       </div>
       <Tooltip anchorSelect="#status" content=":3" />
     </>

src/components/Profile.jsx

@@ -2,12 +2,8 @@ const Profile = () => {
   return (
     <div className="text-lg">
       <p className="space-x-1">
-        <span className="text-lg font-bold md:text-xl">
-          blueskychan_
-        </span>
-        <span className="font-extralight text-base md:text-xl">
-          she/her :3
-        </span>
+        <span className="text-lg font-bold md:text-xl">blueskychan_</span>
+        <span className="font-extralight text-base md:text-xl">she/her :3</span>
       </p>
       <div className="text-sm font-bold">Phapoom Saksri</div>
     </div>

src/pages/_app.jsx

@@ -1,5 +1,33 @@
 import "~/styles/globals.css"
 
-export default function App({ Component, pageProps }) {
+// pages/_app.js
+import { useEffect } from "react"
+import { useRouter } from "next/router"
+import { Roboto, Mali } from "next/font/google"
+
+const roboto = Roboto({
+  weight: "400",
+  subsets: ["latin"],
+})
+
+const mali = Mali({ subsets: ["latin"], weight: "400" })
+
+function MyApp({ Component, pageProps }) {
+  const router = useRouter()
+
+  const uwuQuery = router.query.uwu !== undefined
+
+  useEffect(() => {
+    if (uwuQuery) {
+      document.body.classList.add(mali.className)
+      document.body.classList.remove(roboto.className)
+    } else {
+      document.body.classList.add(roboto.className)
+      document.body.classList.remove(mali.className)
+    }
+  }, [uwuQuery])
+
   return <Component {...pageProps} />
 }
+
+export default MyApp

src/pages/_document.jsx

@@ -1,5 +1,5 @@
 import { Html, Head, Main, NextScript } from "next/document"
-import Script from 'next/script'
+import Script from "next/script"
 
 export default function Document() {
   return (

src/pages/index.jsx

@@ -1,11 +1,11 @@
-import { Inter } from "next/font/google"
+//import { Mali } from "next/font/google"
 import About from "~/components/About"
 import Avatar from "~/components/Avatar"
 import Profile from "~/components/Profile"
 import SocialLinks from "~/components/SocialLinks"
 import Head from "next/head"
 
-const inter = Inter({ subsets: ["latin"] })
+//const inter = Mali({ subsets: ["latin"], weight: "400" })
 
 export default function Home() {
   return (
@@ -19,9 +19,7 @@ export default function Home() {
         />
       </Head>
 
-      <main
-        className={`flex min-h-screen items-center justify-center ${inter.className}`}
-      >
+      <main className={`flex min-h-screen items-center justify-center`}>
         <div className="backdrop-blur-md bg-[#1b1327]/50 rounded-lg p-3 max-w-md md:max-w-lg overflow-hidden overflow-ellipsis">
           <div className="flex flex-row space-x-3 items-center p-3">
             <Avatar />

src/styles/globals.css

@@ -3,7 +3,6 @@
 @tailwind utilities;
 
 html {
-
   --background-image: url("/bg.jpg");
   background-image: var(--background-image);