chore: remove path animation on mobile screen

- move className into component
yogyy · Nov 19, 2024 · 269e645 · 269e645
1 parent 09cb27f
commit 269e645
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 54 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "portofolio",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -19,7 +19,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.5",
     "@t3-oss/env-nextjs": "^0.9.2",
-    "axios": "^1.3.4",
+    "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",
     "cloudinary-build-url": "^0.2.4",
     "clsx": "^1.2.1",
@@ -48,6 +48,7 @@
     "shiki": "^0.14.3",
     "swr": "^2.1.0",
     "tailwind-merge": "^1.14.0",
+    "usehooks-ts": "^3.1.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {
@@ -58,7 +59,7 @@
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.6.0",
     "@typescript-eslint/parser": "^7.2.0",
-    "autoprefixer": "^10.4.17",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
     "eslint-config-next": "^14.1.3",
     "eslint-config-prettier": "^9.1.0",

diff --git a/src/components/grid-pattern.tsx b/src/components/grid-pattern.tsx
@@ -1,21 +1,23 @@
 import { m } from 'framer-motion';
 import { useId, useRef } from 'react';
-
+import { useMediaQuery } from 'usehooks-ts';
 interface BlockProps extends Omit<React.ComponentPropsWithoutRef<typeof m.path>, 'x' | 'y'> {
   x: number;
   y: number;
 }
 
 const Block = ({ x, y, ...props }: BlockProps) => {
-  return (
+  const notMobileScreen = useMediaQuery('(min-width: 768px)');
+
+  return notMobileScreen ? (
     <m.path
       animate={{ opacity: [0, 1, 0.25] }}
       transition={{ ease: 'easeIn', duration: 0.5 * x + y / 10 }}
       transform={`translate(${-32 * y + 96 * x} ${160 * y})`}
       d="M45.119 4.5a11.5 11.5 0 0 0-11.277 9.245l-25.6 128C6.82 148.861 12.262 155.5 19.52 155.5h63.366a11.5 11.5 0 0 0 11.277-9.245l25.6-128c1.423-7.116-4.02-13.755-11.277-13.755H45.119Z"
       {...props}
     />
-  );
+  ) : null;
 };
 
 export const GridPattern = ({ yOffset = 0, ...props }) => {
@@ -35,15 +37,16 @@ export const GridPattern = ({ yOffset = 0, ...props }) => {
     <m.svg
       ref={ref}
       aria-hidden="true"
-      {...props}
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
+      className="fixed inset-x-0 -z-10 h-full w-full fill-primary/20 stroke-accent/5 md:[mask-image:linear-gradient(to_top_left,white_60%,transparent_60%)]"
+      {...props}
     >
       <rect width="100%" height="100%" fill={`url(#${id})`} strokeWidth="0" />
       <svg x="50%" y={yOffset} strokeWidth="0" className="overflow-visible">
-        {staticBlocks.map((block, i) => (
-          <Block key={`Key_${i}`} x={block[0]} y={block[1]} />
+        {staticBlocks.map(block => (
+          <Block key={`block:${block[0]}-${block[1]}`} x={block[0]} y={block[1]} />
         ))}
       </svg>
       <defs>

diff --git a/src/components/layouts/root-layout.tsx b/src/components/layouts/root-layout.tsx
@@ -32,10 +32,7 @@ export const RootLayout = ({ children, title, desc }: SeoProps) => {
         defaultTitle={SEO.openGraph?.title}
       />
       <Navbar />
-      <GridPattern
-        className="fixed inset-x-0 -z-10 h-full w-full fill-primary/20 stroke-accent/5 [mask-image:linear-gradient(to_top_left,white_60%,transparent_60%)]"
-        yOffset={-96}
-      />
+      <GridPattern yOffset={-96} />
       <main id="skip-nav" className={`${GeistSans.variable} ${GeistMono.variable} font-sans`}>
         {children}
       </main>