a lot of changes, i guess. :3

2025-07-07 15:21:04 +00:00 · 2025-04-23 23:16:27 +07:00 · 2025-04-23 23:16:27 +07:00 · f2f2d710d7
commit f2f2d710d7
parent 77c63d677d
14 changed files with 142 additions and 10 deletions
--- a/public/random.js
+++ b/public/random.js
@ -2,6 +2,16 @@ console.log("What are you doing here? ;-;")
 console.log(
  "Tips: If you add stright=true to the URL, the font will change to Roboto, easier to read :3",
 )
-console.log(
-  "Background Sauce: https://www.pixiv.net/en/artworks/120913376",
-)
+console.log("Sometimes this world is great, but sometimes it sucks.... :c")
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
+sleep(2500).then(() => {
+  console.log(
+    "%cI 🫶 @ahenyao! (so much) <3",
+    "color: #FF69B4; font-size: 20px; font-weight: bold;",
+  )
+  console.log(
+    "%cAlso check out my gallery too! :3 (/gallery)",
+    "color: #FF69B4; font-size: 20px; font-weight: bold;",
+  )
+})
+
--- a/public/sekai/4.jpeg
+++ b/public/sekai/4.jpeg
--- a/public/wallpaper/1.jpeg
+++ b/public/wallpaper/1.jpeg
--- a/public/wallpaper/2.jpeg
+++ b/public/wallpaper/2.jpeg
--- a/public/wallpaper/3.jpeg
+++ b/public/wallpaper/3.jpeg
--- a/public/wallpaper/4.jpeg
+++ b/public/wallpaper/4.jpeg
--- a/public/wallpaper/5.jpeg
+++ b/public/wallpaper/5.jpeg
--- a/src/components/About.jsx
+++ b/src/components/About.jsx
@ -22,7 +22,9 @@ const About = () => {
          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
+          too—check it out! :3<br/>
+          (Also check out my{" "}
+          <PageLink to="/gallery" text="gallery" /> too! :3)
        </Twemoji>
      </div>
    </>
--- a/src/components/Avatar.jsx
+++ b/src/components/Avatar.jsx
@ -12,7 +12,7 @@ const Avatar = () => {
          alt="Profile picture"
        />
      </div>
-      <Tooltip anchorSelect="#status" content="What are you looking at?" />
+      <Tooltip anchorSelect="#status" content="<3" />
    </>
  )
 }
--- a/src/pages/404.jsx
+++ b/src/pages/404.jsx
@ -7,7 +7,7 @@ export default function notFoundPage() {
 		<title>404 Not Found ;-;</title>
 	  </Head>
 	  <main className="flex min-h-s creen 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 flex flex-col items-center justify-center">
+		<div className="backdrop-blur-md bg-[#2a154f]/50 rounded-lg p-3 max-w-md md:max-w-lg overflow-hidden overflow-ellipsis flex flex-col items-center justify-center">
 		  <h1 className="text-lg font-bold text-red-500">404 Not Found :(</h1>
 		  <p className="text-lg font-bold text-white">
 			The page you're looking for is not found, Sorry ;-;
--- a/src/pages/api/random-background-picture.js
+++ b/src/pages/api/random-background-picture.js
@ -7,8 +7,8 @@ export default function handler(req, res) {
        return;
    }

-    const random = Math.floor(Math.random() * 4) + 1; // Generate random number 1-3
-    const imagePath = path.join(process.cwd(), "public", "sekai", `${random}.jpeg`);
+    const random = Math.floor(Math.random() * 5) + 1; // Generate random number 1-6
+    const imagePath = path.join(process.cwd(), "public", "wallpaper", `${random}.jpeg`);

    // Check if the image file exists
    if (!fs.existsSync(imagePath)) {
--- a/src/pages/gallery.jsx
+++ b/src/pages/gallery.jsx
@ -0,0 +1,120 @@
+import { useEffect, useState } from "react";
+import Head from "next/head";
+
+const Gallery = () => {
+  const [images, setImages] = useState([]);
+  const [selectedImage, setSelectedImage] = useState(null);
+
+  useEffect(() => {
+    const fetchImages = async () => {
+      try {
+        const response = await fetch("/gallerypics/data.json");
+        const data = await response.json();
+        const sortedImages = data.images.sort(
+          (a, b) => new Date(b.date) - new Date(a.date)
+        );
+        setImages(sortedImages);
+      } catch (error) {
+        console.error("Error fetching gallery data:", error);
+      }
+    };
+
+    fetchImages();
+  }, []);
+
+  const handleImageClick = (image) => {
+    document.body.style.overflow = "hidden";
+    setSelectedImage(image);
+  };
+
+  const closePopup = () => {
+    document.body.style.overflow = "auto";
+    setSelectedImage(null);
+  };
+
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) {
+      closePopup();
+    }
+  };
+
+  return (
+    <>
+      <Head>
+        <title>Gallery | blueskychan_ :3</title>
+        <meta name="theme-color" content="#FFC0CB" />
+        <meta property="og:title" content="Gallery | blueskychan_ :3" key="title" />
+        <meta
+          property="og:description"
+          content="All of my stupid pics to show :3"
+        />
+      </Head>
+
+      <div className="p-4 backdrop-blur-md bg-gray-800/50 rounded-lg">
+        <h1 className="text-2xl font-bold mb-2 text-center text-[#FFC0CB]">Gallery</h1>
+        <p className="text-center text-gray-300 mb-4">All of my stupid pics to show :3</p>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {images.map((image, index) => (
+            <div
+              key={index}
+              className="border rounded-lg overflow-hidden shadow-lg bg-gray-800 cursor-pointer"
+              onClick={() => handleImageClick(image)}
+            >
+              <div className="relative group">
+                <img
+                  src={image.path}
+                  alt={image.description}
+                  className="w-full h-48 object-cover group-hover:blur-sm transition duration-300"
+                />
+                <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300 bg-black bg-opacity-50">
+                  <p className="text-white text-lg font-semibold">View Image</p>
+                </div>
+              </div>
+              <div className="p-4">
+                <p className="text-sm text-gray-400">{image.date}</p>
+                <p className="text-lg font-semibold">{image.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {selectedImage && (
+          <div 
+            className="fixed inset-0 flex items-center justify-center z-50 backdrop-blur-sm"
+            onClick={handleBackdropClick}
+          >
+            <div className="rounded-lg overflow-hidden shadow-lg max-w-lg w-full mx-4">
+              <img
+                src={selectedImage.path}
+                alt={selectedImage.description}
+                className="w-full h-auto max-h-[80vh] object-contain"
+              />
+              <div className="p-4 bg-gray-800">
+                <p className="text-lg font-semibold text-white">{selectedImage.description}</p>
+                <p className="text-sm text-gray-300">{selectedImage.date}</p>
+                <div className="mt-4 flex justify-end space-x-2">
+                  <a
+                    href={selectedImage.path}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"
+                  >
+                    View Raw Image
+                  </a>
+                  <button
+                    onClick={closePopup}
+                    className="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition"
+                  >
+                    Close
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default Gallery;
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@ -21,7 +21,7 @@ export default function Home() {
      </Head>

      <main>
-        <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="backdrop-blur-md bg-[#2a154f]/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 />
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@ -8,7 +8,7 @@ body {
  color: #ffc6d7fc;
  overflow: hidden;

-  --background-image: url("/api/random-sekai-picture");
+  --background-image: url("/api/random-background-picture");
  background-image: var(--background-image);

  background-repeat: no-repeat;