New design :3

2025-07-07 15:21:04 +00:00 · 2023-12-28 00:33:55 +07:00 · 2023-12-28 00:33:55 +07:00 · 8a362315b8
commit 8a362315b8
parent 7c11b02db7
9 changed files with 190 additions and 36 deletions
--- a/package.json
+++ b/package.json
@ -15,7 +15,8 @@
    "next": "14.0.4",
    "react": "^18",
    "react-dom": "^18",
-    "react-tooltip": "^5.25.0"
+    "react-tooltip": "^5.25.0",
+    "react-twemoji": "^0.5.0"
  },
  "devDependencies": {
    "@tailwindcss/typography": "^0.5.10",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -26,6 +26,9 @@ dependencies:
  react-tooltip:
    specifier: ^5.25.0
    version: 5.25.0(react-dom@18.2.0)(react@18.2.0)
+  react-twemoji:
+    specifier: ^0.5.0
+    version: 0.5.0(react@18.2.0)

 devDependencies:
  "@tailwindcss/typography":
@ -704,6 +707,18 @@ packages:
      }
    dev: true

+  /fs-extra@8.1.0:
+    resolution:
+      {
+        integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==,
+      }
+    engines: { node: ">=6 <7 || >=8" }
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 4.0.0
+      universalify: 0.1.2
+    dev: false
+
  /fsevents@2.3.3:
    resolution:
      {
@ -900,6 +915,26 @@ packages:
      esprima: 4.0.1
    dev: false

+  /jsonfile@4.0.0:
+    resolution:
+      {
+        integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==,
+      }
+    optionalDependencies:
+      graceful-fs: 4.2.11
+    dev: false
+
+  /jsonfile@5.0.0:
+    resolution:
+      {
+        integrity: sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w==,
+      }
+    dependencies:
+      universalify: 0.1.2
+    optionalDependencies:
+      graceful-fs: 4.2.11
+    dev: false
+
  /kind-of@6.0.3:
    resolution:
      {
@ -947,6 +982,13 @@ packages:
      }
    dev: true

+  /lodash.isequal@4.5.0:
+    resolution:
+      {
+        integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==,
+      }
+    dev: false
+
  /lodash.isplainobject@4.0.6:
    resolution:
      {
@ -1129,7 +1171,6 @@ packages:
        integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==,
      }
    engines: { node: ">=0.10.0" }
-    dev: true

  /object-hash@3.0.0:
    resolution:
@ -1318,6 +1359,17 @@ packages:
    hasBin: true
    dev: true

+  /prop-types@15.8.1:
+    resolution:
+      {
+        integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==,
+      }
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+    dev: false
+
  /punycode.js@2.3.1:
    resolution:
      {
@ -1346,6 +1398,13 @@ packages:
      scheduler: 0.23.0
    dev: false

+  /react-is@16.13.1:
+    resolution:
+      {
+        integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==,
+      }
+    dev: false
+
  /react-tooltip@5.25.0(react-dom@18.2.0)(react@18.2.0):
    resolution:
      {
@ -1361,6 +1420,21 @@ packages:
      react-dom: 18.2.0(react@18.2.0)
    dev: false

+  /react-twemoji@0.5.0(react@18.2.0):
+    resolution:
+      {
+        integrity: sha512-xz3NLWTFCfWOmPd559jcFX4f976ORIPpL9SwdBQO5BZwIYD1U1vpbY2E6k2vwPCVH78s2m1GbG5jpHKGUPZ+gw==,
+      }
+    engines: { node: ">=5.0" }
+    peerDependencies:
+      react: ">=16.4.2"
+    dependencies:
+      lodash.isequal: 4.5.0
+      prop-types: 15.8.1
+      react: 18.2.0
+      twemoji: 14.0.1
+    dev: false
+
  /react@18.2.0:
    resolution:
      {
@ -1661,6 +1735,25 @@ packages:
      }
    dev: false

+  /twemoji-parser@14.0.0:
+    resolution:
+      {
+        integrity: sha512-9DUOTGLOWs0pFWnh1p6NF+C3CkQ96PWmEFwhOVmT3WbecRC+68AIqpsnJXygfkFcp4aXbOp8Dwbhh/HQgvoRxA==,
+      }
+    dev: false
+
+  /twemoji@14.0.1:
+    resolution:
+      {
+        integrity: sha512-eoqhea0sUhmC10iTacksyp1v9O4BP1jKmVqtK+Nztw40/dzawSHkXL3/xCpyh+mukmEvJ0Gw9VLvwZfQ9HKXDw==,
+      }
+    dependencies:
+      fs-extra: 8.1.0
+      jsonfile: 5.0.0
+      twemoji-parser: 14.0.0
+      universalify: 0.1.2
+    dev: false
+
  /uc.micro@2.0.0:
    resolution:
      {
@ -1668,6 +1761,14 @@ packages:
      }
    dev: false

+  /universalify@0.1.2:
+    resolution:
+      {
+        integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==,
+      }
+    engines: { node: ">= 4.0.0" }
+    dev: false
+
  /update-browserslist-db@1.0.13(browserslist@4.22.2):
    resolution:
      {
--- a/posts/lorem.md
+++ b/posts/lorem.md
@ -1,10 +0,0 @@
---
-title: "lorem ipsum"
-date: ""
-tags:
-  - sit amet
---
-
-### Lorem ipsum
-
-Sit commodo voluptate do quis excepteur veniam aliquip ut dolore. Exercitation elit incididunt aute ipsum deserunt ullamco. Sit cupidatat elit cupidatat aute Lorem non in aute esse nostrud in labore ullamco magna. Minim Lorem mollit est est amet magna. Magna dolore dolore nisi nostrud dolore ut reprehenderit sint cupidatat officia. Commodo reprehenderit tempor est consequat magna pariatur pariatur officia mollit sint dolore elit commodo dolor.
--- a/posts/moveon.md
+++ b/posts/moveon.md
@ -0,0 +1,23 @@
+---
+title: "Goodbye fusemeow.me, Hello blueskychan.dev"
+date: "28/12/2023"
+tags:
+  - new home
+---
+
+### Move on from fusemeow.me to blueskychan.dev
+
+Now i just move on from fusemeow.me to blueskychan.dev, here is why:
+- 1. Performance:
+Because old blueskychan website (aka fusemeow.me) is kinda use gif image to animated background and it make some devices like older phones/potato devices can crash easily, it why we move on!
+- 2. Design:
+The old one, i use staic html and css but this new version now, they are use next.js to design all of website, also this one is just image (not gif like old one) so now it look better!
+- 3. Backend System:
+The old one is hosted on github pages, but due to this version use next.js, now we move on to use a vercel for hosting the website! Also we have a blog system, so they need to use next.js too!
+
+> However, fusemeow.me will hosted until 7 January 2024, and it will be gone!, but osu!collab image will be hosted in here soon!
+
+Also Thanks you for all support! :3
+
+Credit: @bluestar.owo (Helper)
+- Last updated: 28 Dec 2023
--- a/src/components/About.jsx
+++ b/src/components/About.jsx
@ -1,4 +1,6 @@
 // About.js
+import Twemoji from "react-twemoji"
+import PageLink from "./PageLink.jsx"
 const About = () => {
  return (
    <>
@ -6,13 +8,20 @@ const About = () => {
      <div className="p-2">
        <div className="border-t md:border-t-2"></div>
      </div>
-      <div className="p-4 text-balance max-w-md">
-        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 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"
+            href="https://bs.ac.th"
+          >
+            Benjamarachanusorn
+          </a>
+          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
+          got a <PageLink to="/blog" text="blog" />! too—check it out! 😊
+        </Twemoji>
      </div>
    </>
  )
--- a/src/components/PageLink.jsx
+++ b/src/components/PageLink.jsx
@ -0,0 +1,12 @@
+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"
+    >
+      {text}
+    </a>
+  )
+}
+
+export default PageLink
--- a/src/components/SocialLinks.jsx
+++ b/src/components/SocialLinks.jsx
@ -1,18 +1,37 @@
 import LinkIcon from "./LinkIcon"
-import { DiscordLogo, GithubLogo, InstagramLogo } from "@phosphor-icons/react"
+import {
+  FacebookLogo,
+  TwitterLogo,
+  TelegramLogo,
+  DiscordLogo,
+  GithubLogo,
+  InstagramLogo,
+} from "@phosphor-icons/react"

 const SocialLinks = () => {
  const profileLinks = [
    {
-      href: "https://discord.com/users/829156179803504670",
+      href: "https://facebook.com/fusemeoww",
+      LinkIcon: <FacebookLogo size={32} color="#F3F4F6" weight="bold" />,
+    },
+    {
+      href: "https://twitter.com/blueskychan_",
+      LinkIcon: <TwitterLogo size={32} color="#F3F4F6" weight="bold" />,
+    },
+    {
+      href: "https://t.me/blueskychan_",
+      LinkIcon: <TelegramLogo size={28} color="#F3F4F6" weight="bold" />,
+    },
+    {
+      href: "https://discord.com/users/736163902835916880",
      LinkIcon: <DiscordLogo size={28} color="#F3F4F6" weight="bold" />,
    },
    {
-      href: "https://www.instagram.com/bluestar.pics",
+      href: "https://www.instagram.com/blueskychan_irl",
      LinkIcon: <InstagramLogo size={28} color="#F3F4F6" weight="bold" />,
    },
    {
-      href: "https://github.com/bluestarowo",
+      href: "https://github.com/blueskychan-dev",
      LinkIcon: <GithubLogo size={28} color="#F3F4F6" weight="bold" />,
    },
  ]
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@ -9,18 +9,18 @@ const inter = Inter({ subsets: ["latin"] })
 export default function Home() {
  return (
    <main
-    className={`flex min-h-screen items-center justify-center ${inter.className}`}
-  >
-    <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 />
+      className={`flex min-h-screen items-center justify-center ${inter.className}`}
+    >
+      <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 />
+        </div>
+        <div>
+          <SocialLinks />
+          <About />
+        </div>
      </div>
-      <div>
-        <SocialLinks />
-        <About />
-      </div>
-    </div>
-  </main>
+    </main>
  )
 }
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@ -12,7 +12,6 @@ html {
  background-position: center center;
  color: rgb(255, 255, 255);
  height: 100%; /* Ensure full height */
-  
 }

 body {