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,71 +1,71 @@
-
 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) => {
+lines.forEach((line, index) => {
-    const sectionIndex = Math.floor(index / linesPerSection) % transFlagColors.length;
+  const sectionIndex =
-    const color = transFlagColors[sectionIndex];
+    Math.floor(index / linesPerSection) % transFlagColors.length
-    console.log(`%c${line}`, `color: ${color}; font-size: 28px;`);
+  const color = transFlagColors[sectionIndex]
-  });
+  console.log(`%c${line}`, `color: ${color}; font-size: 28px;`)
+})

src/components/About.jsx

@@ -16,12 +16,13 @@ const About = () => {
             className="border px-2.5 py-0.5 mr-1 rounded-lg hover:underline bg-blue-600/20 transition-colors hover:bg-blue-700 font-bold"
             href="https://bs.ac.th"
           >
-             Benjamarachanusorn
+            Benjamarachanusorn
           </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
+          More! I play osu! for daily and other for sometimes, Music is
-          got a <PageLink to="/blog" text="blog" />! too—check it out! :3
+          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">
+        <span className="text-lg font-bold md:text-xl">blueskychan_</span>
-          blueskychan_
+        <span className="font-extralight text-base md:text-xl">she/her :3</span>
-        </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
+      <main className={`flex min-h-screen items-center justify-center`}>
-        className={`flex min-h-screen items-center justify-center ${inter.className}`}
-      >
         <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,10 +3,9 @@
 @tailwind utilities;
 
 html {
-
   --background-image: url("/bg.jpg");
   background-image: var(--background-image);
- 
+
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;