New design :3

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",

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:
       {

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.

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

src/components/About.jsx

@@ -1,4 +1,6 @@
 // About.js
+import Twemoji from "react-twemoji"
+import PageLink from "./PageLink.jsx"
 const About = () => {
   return (
     <>
@@ -7,12 +9,19 @@ const About = () => {
         <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)
+        <Twemoji options={{ className: "twemoji w-4 h-4 inline-block" }}>
-        :3, a stupid 14 y/o person in this earth 🌎, I am a student in
+          Hey, I'm blueskychan_, a 14-year-old student at{" "}
-        Benjamarachanusorn School! I live in Nonthaburi, Thailand 🇹🇭, I like
+          <a
-        computer and programming stuffs I play osu! and Minecraft/Roblox in
+            className="p-1 bg-blue-600/20 transition-colors hover:bg-blue-700 font-bold"
-        sometimes, I like to listen to music I can write code in C# and C++, i
+            href="https://bs.ac.th"
-        still learning Python, JavaScript, and go!
+          >
+            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>
     </>
   )

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

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" />,
     },
   ]

src/styles/globals.css

@@ -12,7 +12,6 @@ html {
   background-position: center center;
   color: rgb(255, 255, 255);
   height: 100%; /* Ensure full height */
-  
 }
 
 body {