backup before fucked

pnpm-lock.yaml

@@ -8,9 +8,6 @@ dependencies:
   "@phosphor-icons/react":
     specifier: ^2.0.15
     version: 2.0.15(react-dom@18.2.0)(react@18.2.0)
-  fs:
-    specifier: 0.0.1-security
-    version: 0.0.1-security
   gray-matter:
     specifier: ^4.0.3
     version: 4.0.3
@@ -707,13 +704,6 @@ packages:
       }
     dev: true
 
-  /fs@0.0.1-security:
-    resolution:
-      {
-        integrity: sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w==,
-      }
-    dev: false
-
   /fsevents@2.3.3:
     resolution:
       {

src/components/About.jsx

@@ -7,8 +7,12 @@ const About = () => {
         <div className="border-t md:border-t-2"></div>
       </div>
       <div className="p-4 text-balance max-w-md">
-        Time changes world changes everything changes I mean should I accept the
-        world?
+        Hi my name is blueskychan_ (Shorly you can call me garfield/fuse/mind)
+        :3, a stupid 14 y/o person in this earth 🌎, I am a student in
+        Benjamarachanusorn School! I live in Nonthaburi, Thailand 🇹🇭, I like
+        computer and programming stuffs I play osu! and Minecraft/Roblox in
+        sometimes, I like to listen to music I can write code in C# and C++, i
+        still learning Python, JavaScript, and go!
       </div>
     </>
   )

src/components/Avatar.jsx

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

src/components/Profile.jsx

@@ -2,10 +2,10 @@ const Profile = () => {
   return (
     <div className="text-gray-300 text-lg">
       <p className="space-x-1">
-        <span className="text-gray-100 text-lg font-bold">bluestar</span>
-        <span className="font-extralight">she/her</span>
+        <span className="text-gray-100 text-lg font-bold">blueskychan_</span>
+        <span className="font-extralight  text-sm">she/they :3</span>
       </p>
-      <div className="text-sm font-bold">Acer Pricker</div>
+      <div className="text-sm font-bold">Phapoom Saksri</div>
     </div>
   )
 }

src/pages/index.jsx

@@ -11,7 +11,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">
+    <div className="backdrop-blur-md bg-gray-700/50 rounded-lg p-2">
       <div className="flex flex-row space-x-3 p-4 items-center ">
         <Avatar />
         <Profile />

src/pages/post/[slug].jsx

@@ -27,7 +27,8 @@ export async function getStaticProps({ params: { slug } }) {
 }
 
 export default function PostPage({ frontmatter, content }) {
-  const proseClass = "prose p-4 prose-invert prose-neutral mx-auto bg-gray-700/50 backdrop-blue-md backdrop-blur-md h-screen"
+  const proseClass =
+    "prose p-4 prose-invert prose-neutral mx-auto bg-gray-700/50 backdrop-blue-md backdrop-blur-md h-screen"
   return (
     <div className={proseClass}>
       <h1 className="border-b-2 p-1">{frontmatter.title}</h1>

src/styles/globals.css

@@ -2,13 +2,20 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
+html {
+  /* Apply background styles to the html element */
   --background-image: url("/illust_111261733_20231222_212212.jpg");
-
   background-image: var(--background-image);
-  background-position: center;
   background-repeat: no-repeat;
+  background-attachment: fixed;
   background-size: cover;
+  background-position: center center;
   color: rgb(255, 255, 255);
+  height: 100%; /* Ensure full height */
+  
+}
+
+body {
+  /* Ensure body also fills viewport */
   height: 100%;
 }