Colorful update

src/components/About.jsx

@@ -1,5 +1,6 @@
 // About.js
 import Twemoji from "react-twemoji"
+import Link from "next/link"
 import PageLink from "./PageLink.jsx"
 const About = () => {
   return (
@@ -11,12 +12,12 @@ const About = () => {
       <div className="p-4 text-balance max-w-md ">
         <Twemoji options={{ className: "twemoji w-4 h-4 inline-block" }}>
           Hey, I'm blueskychan_, a 14-year-old student at{" "}
-          <a
-            className="p-1 bg-blue-600/20 transition-colors hover:bg-blue-700 font-bold"
+          <Link
+            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
-          </a>
+             Benjamarachanusorn
+          </Link>
           School in Nonthaburi, Thailand 🇹🇭. I love computer and programming,
           with skills in C# and C++. Currently learning Python, JavaScript, and
           Go! I enjoy osu!, Minecraft, and Roblox. Music is randomly, and I've

src/components/PageLink.jsx

@@ -2,7 +2,7 @@ const PageLink = ({ to, text }) => {
   return (
     <a
       href={to}
-      className="p-1 bg-blue-600/20 transition-colors hover:bg-blue-700 font-bold rounded-lg border-2 border-blue/50"
+      className="px-2.5 py-0.5 bg-blue-600/20 transition-colors hover:bg-blue-700 font-bold rounded-lg border border-blue/50"
     >
       {text}
     </a>

src/components/Profile.jsx

@@ -1,8 +1,8 @@
 const Profile = () => {
   return (
-    <div className="text-gray-300 text-lg">
+    <div className="text-lg">
       <p className="space-x-1">
-        <span className="text-gray-100 text-lg font-bold md:text-xl">
+        <span className="text-lg font-bold md:text-xl">
           blueskychan_
         </span>
         <span className="font-extralight text-base md:text-xl">

src/pages/index.jsx

@@ -22,7 +22,7 @@ export default function Home() {
       <main
         className={`flex min-h-screen items-center justify-center ${inter.className}`}
       >
-        <div className="backdrop-blur-md bg-gray-700/50 rounded-lg p-3 max-w-md md:max-w-lg overflow-hidden overflow-ellipsis">
+        <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 />
             <Profile />

src/styles/globals.css

@@ -3,13 +3,15 @@
 @tailwind utilities;
 
 html {
-  --background-image: url("/illust_111261733_20231222_212212-min.webp");
+
+  --background-image: url("/bg.jpg");
   background-image: var(--background-image);
+ 
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
   background-position: center center;
-  color: rgb(255, 255, 255);
+  color: #ffc6d7fc;
   height: 100%;
 }