From 8a362315b89889da7fd5c220e7d70a9962efaf53 Mon Sep 17 00:00:00 2001 From: Phapoom Saksri Date: Thu, 28 Dec 2023 00:33:55 +0700 Subject: [PATCH] New design :3 --- package.json | 3 +- pnpm-lock.yaml | 103 ++++++++++++++++++++++++++++++++- posts/lorem.md | 10 ---- posts/moveon.md | 23 ++++++++ src/components/About.jsx | 23 +++++--- src/components/PageLink.jsx | 12 ++++ src/components/SocialLinks.jsx | 27 +++++++-- src/pages/index.jsx | 24 ++++---- src/styles/globals.css | 1 - 9 files changed, 190 insertions(+), 36 deletions(-) delete mode 100644 posts/lorem.md create mode 100644 posts/moveon.md create mode 100644 src/components/PageLink.jsx diff --git a/package.json b/package.json index fc39b79..b4aaf95 100644 --- 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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9f794f0..6ca9c55 100644 --- 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: { diff --git a/posts/lorem.md b/posts/lorem.md deleted file mode 100644 index 9afafdc..0000000 --- a/posts/lorem.md +++ /dev/null @@ -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. diff --git a/posts/moveon.md b/posts/moveon.md new file mode 100644 index 0000000..7cc8374 --- /dev/null +++ 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 \ No newline at end of file diff --git a/src/components/About.jsx b/src/components/About.jsx index 77556af..2e66597 100644 --- 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 = () => {
-
- 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! +
+ + Hey, I'm blueskychan_, a 14-year-old student at{" "} + + Benjamarachanusorn + + 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 ! tooโ€”check it out! ๐Ÿ˜Š +
) diff --git a/src/components/PageLink.jsx b/src/components/PageLink.jsx new file mode 100644 index 0000000..969d202 --- /dev/null +++ b/src/components/PageLink.jsx @@ -0,0 +1,12 @@ +const PageLink = ({ to, text }) => { + return ( + + {text} + + ) +} + +export default PageLink diff --git a/src/components/SocialLinks.jsx b/src/components/SocialLinks.jsx index 14c8c17..947869f 100644 --- 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: , + }, + { + href: "https://twitter.com/blueskychan_", + LinkIcon: , + }, + { + href: "https://t.me/blueskychan_", + LinkIcon: , + }, + { + href: "https://discord.com/users/736163902835916880", LinkIcon: , }, { - href: "https://www.instagram.com/bluestar.pics", + href: "https://www.instagram.com/blueskychan_irl", LinkIcon: , }, { - href: "https://github.com/bluestarowo", + href: "https://github.com/blueskychan-dev", LinkIcon: , }, ] diff --git a/src/pages/index.jsx b/src/pages/index.jsx index e9b9027..fec09b2 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -9,18 +9,18 @@ const inter = Inter({ subsets: ["latin"] }) export default function Home() { return (
-
-
- - + className={`flex min-h-screen items-center justify-center ${inter.className}`} + > +
+
+ + +
+
+ + +
-
- - -
-
-
+ ) } diff --git a/src/styles/globals.css b/src/styles/globals.css index befc790..c8e7e25 100644 --- 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 {