Merge pull request #55 from rezaageng/dev

feat(kawaii): add kawaii mode
rezaageng · May 2, 2024 · b3e92f6 · b3e92f6
2 parents 11755c6 + c1c2c78
commit b3e92f6
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@
 
 ### Prerequisites
 
-1. [Node.js ](https://nodejs.org) (v16.14.0 or later)
+1. [Node.js ](https://nodejs.org) (v18.17.0 or later)
 2. [PNPM](https://pnpm.io/)
 3. An API (I use [Strapi](https://strapi.io/))
 
@@ -41,3 +41,15 @@
 pnpm build
 pnpm start
 ```
+
+## Kawaii Mode (可愛いモード)
+
+### Activate Kawaii Mode
+
+To activate Kawaii Mode, add `?kawaii=true` to the URL.
+`https://rezaa.me/?kawaii=true` Or click [here](https://rezaa.me/?kawaii=true)
+
+### Deactivate Kawaii Mode
+
+To deactivate Kawaii Mode, add `?kawaii=false` to the URL.
+`https://rezaa.me/?kawaii=false` Or click [here](https://rezaa.me/?kawaii=false)
diff --git a/public/assets/images/rezaa-kawaii.png b/public/assets/images/rezaa-kawaii.png
diff --git a/src/__tests__/components/home/HomeIntro.test.tsx b/src/__tests__/components/home/HomeIntro.test.tsx
@@ -4,6 +4,12 @@ import { render, screen, waitFor } from '@testing-library/react'
 import '@/__mocks__/intersectionObserverMock'
 import HomeIntro from '@/components/home/HomeIntro'
 
+jest.mock('next/navigation', () => ({
+  useSearchParams: () => ({
+    get: () => 'false'
+  })
+}))
+
 test('should render title', () => {
   render(<HomeIntro data={homeRes.data} />)
 

diff --git a/src/__tests__/components/home/HomeMain.test.tsx b/src/__tests__/components/home/HomeMain.test.tsx
@@ -4,6 +4,12 @@ import HomeMain from '@/components/home/HomeMain'
 import { render, screen } from '@testing-library/react'
 import '@/__mocks__/intersectionObserverMock'
 
+jest.mock('next/navigation', () => ({
+  useSearchParams: () => ({
+    get: () => 'false'
+  })
+}))
+
 test('should render background', () => {
   render(<HomeMain data={homeRes.data} />)
 

diff --git a/src/components/home/HomeIntro.tsx b/src/components/home/HomeIntro.tsx
@@ -8,11 +8,21 @@ import {
   motion,
   useInView
 } from 'framer-motion'
-import { useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import Terminal from '../terminal/Terminal'
+import { useKawaiiStore } from '@/stores/kawaii-store'
+import { useSearchParams } from 'next/navigation'
+import Image from 'next/image'
 
 const HomeIntro = ({ data }: { data: HomeResponse['data'] }): JSX.Element => {
   // * hooks
+  const [kawaii, setKawaii] = useKawaiiStore((state) => [
+    state.kawaii,
+    state.setKawaii
+  ])
+
+  const isKawaii = useSearchParams().get('kawaii')
+
   const ref = useRef<HTMLDivElement>(null)
   const isInView = useInView(ref)
 
@@ -35,6 +45,14 @@ const HomeIntro = ({ data }: { data: HomeResponse['data'] }): JSX.Element => {
     rotateX: useSmooth(scrollYProgress, [0, 0.2], [3, 0]),
     scale: useSmooth(scrollYProgress, [0, 0.2], [0.8, 1])
   }
+
+  // * lifecycle
+  useEffect(() => {
+    if (isKawaii !== 'true' && isKawaii !== 'false') return
+
+    setKawaii(isKawaii === 'true')
+  }, [isKawaii, setKawaii])
+
   return (
     <section
       ref={ref}
@@ -50,24 +68,43 @@ const HomeIntro = ({ data }: { data: HomeResponse['data'] }): JSX.Element => {
             }}
             className="fixed flex flex-col justify-center gap-2 px-6 py-4 sm:max-w-md lg:max-w-2xl"
           >
-            <motion.h1
-              initial={initial}
-              animate={animate}
-              transition={transition}
-              data-testid="home-title"
-              className="w-auto text-6xl font-bold lg:text-9xl"
-            >
-              {data?.attributes.title}
-            </motion.h1>
-            <motion.h2
-              initial={initial}
-              animate={animate}
-              transition={{ ...transition, delay: 0.2 }}
-              data-testid="home-subtitle"
-              className="font-light text-white/75 lg:text-2xl"
-            >
-              {data?.attributes.subtitle}
-            </motion.h2>
+            {kawaii ? (
+              <motion.div
+                initial={{ ...initial, scale: 0 }}
+                animate={{ ...animate, scale: 1 }}
+                transition={{ delay: 0.2 }}
+                className="px-8"
+              >
+                <Image
+                  src="/assets/images/rezaa-kawaii.png"
+                  alt="kawaii logo"
+                  priority
+                  width={4057}
+                  height={2159}
+                />
+              </motion.div>
+            ) : (
+              <>
+                <motion.h1
+                  initial={initial}
+                  animate={animate}
+                  transition={transition}
+                  data-testid="home-title"
+                  className="w-auto text-6xl font-bold lg:text-9xl"
+                >
+                  {data?.attributes.title}
+                </motion.h1>
+                <motion.h2
+                  initial={initial}
+                  animate={animate}
+                  transition={{ ...transition, delay: 0.2 }}
+                  data-testid="home-subtitle"
+                  className="font-light text-white/75 lg:text-2xl"
+                >
+                  {data?.attributes.subtitle}
+                </motion.h2>
+              </>
+            )}
           </motion.div>
         </div>
         <div style={{ perspective: '20rem' }}>

diff --git a/src/stores/kawaii-store.tsx b/src/stores/kawaii-store.tsx
@@ -0,0 +1,21 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+interface KawaiiState {
+  kawaii: boolean
+  setKawaii: (kawaii: boolean) => void
+}
+
+export const useKawaiiStore = create<KawaiiState>()(
+  persist(
+    (set) => ({
+      kawaii: false,
+      setKawaii: (kawaii) => {
+        set({ kawaii })
+      }
+    }),
+    {
+      name: 'kawaii-storage'
+    }
+  )
+)