Add lazy motion layout

salimi-my · Feb 9, 2024 · 76dab79 · 76dab79
1 parent 5a361fc
commit 76dab79
Show file tree

Hide file tree

Showing 12 changed files with 119 additions and 102 deletions.
diff --git a/components/landing/about.tsx b/components/landing/about.tsx
@@ -3,12 +3,13 @@
 import Link from 'next/link';
 import Image from 'next/image';
 import { useRef } from 'react';
-import { LazyMotion, domAnimation, m, useInView } from 'framer-motion';
+import { m, useInView } from 'framer-motion';
 import { Briefcase, FolderGit2, Laptop } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
 import type getInformation from '@/data/information';
 import tilted from '@/public/web-developer-tilted.webp';
+import LazyMotionLayout from '@/components/ui/lazy-motion';
 import {
   slideInFromLeft,
   slideInFromRight,
@@ -22,7 +23,7 @@ export default function About({ about }: AboutProps) {
   const isInView = useInView(ref, { once: true });
 
   return (
-    <LazyMotion features={domAnimation}>
+    <LazyMotionLayout>
       <m.section
         ref={ref}
         initial='hidden'
@@ -106,6 +107,6 @@ export default function About({ about }: AboutProps) {
           </div>
         </div>
       </m.section>
-    </LazyMotion>
+    </LazyMotionLayout>
   );
 }
diff --git a/components/landing/contact.tsx b/components/landing/contact.tsx
@@ -2,12 +2,13 @@
 
 import Link from 'next/link';
 import { useRef } from 'react';
-import { LazyMotion, domAnimation, m, useInView } from 'framer-motion';
+import { m, useInView } from 'framer-motion';
 
-import type getInformation from '@/data/information';
 import { Button } from '@/components/ui/button';
 import { Icons } from '@/components/landing/icons';
+import type getInformation from '@/data/information';
 import ContactForm from '@/components/landing/contact-form';
+import LazyMotionLayout from '@/components/ui/lazy-motion';
 import {
   slideInFromLeft,
   slideInFromRight,
@@ -24,7 +25,7 @@ export default function Contact({ miscellaneous }: ContactProps) {
   const isInView = useInView(ref, { once: true });
 
   return (
-    <LazyMotion features={domAnimation}>
+    <LazyMotionLayout>
       <m.section
         ref={ref}
         initial='hidden'
@@ -130,6 +131,6 @@ export default function Contact({ miscellaneous }: ContactProps) {
           </m.div>
         </div>
       </m.section>
-    </LazyMotion>
+    </LazyMotionLayout>
   );
 }
diff --git a/components/landing/experience.tsx b/components/landing/experience.tsx
@@ -2,9 +2,10 @@
 
 import { useRef } from 'react';
 import { BadgeCheck } from 'lucide-react';
-import { LazyMotion, domAnimation, m, useInView } from 'framer-motion';
+import { m, useInView } from 'framer-motion';
 
 import type getInformation from '@/data/information';
+import LazyMotionLayout from '@/components/ui/lazy-motion';
 import {
   slideInFromLeft,
   slideInFromRight,
@@ -21,7 +22,7 @@ export default function Experience({ frontend, backend }: ExperienceProps) {
   const isInView = useInView(ref, { once: true });
 
   return (
-    <LazyMotion features={domAnimation}>
+    <LazyMotionLayout>
       <m.section
         ref={ref}
         initial='hidden'
@@ -92,6 +93,6 @@ export default function Experience({ frontend, backend }: ExperienceProps) {
           </m.div>
         </div>
       </m.section>
-    </LazyMotion>
+    </LazyMotionLayout>
   );
 }
diff --git a/components/landing/expertise.tsx b/components/landing/expertise.tsx
@@ -2,9 +2,10 @@
 
 import { useRef } from 'react';
 import { Check } from 'lucide-react';
-import { LazyMotion, domAnimation, m, useInView } from 'framer-motion';
+import { m, useInView } from 'framer-motion';
 
 import type getInformation from '@/data/information';
+import LazyMotionLayout from '@/components/ui/lazy-motion';
 import { slideInFromLeft, slideInFromTop } from '@/lib/motion';
 
 type ExpertiseProps = Pick<
@@ -21,7 +22,7 @@ export default function Expertise({
   const isInView = useInView(ref, { once: true });
 
   return (
-    <LazyMotion features={domAnimation}>
+    <LazyMotionLayout>
       <m.section
         ref={ref}
         initial='hidden'
@@ -106,6 +107,6 @@ export default function Expertise({
           </m.article>
         </div>
       </m.section>
-    </LazyMotion>
+    </LazyMotionLayout>
   );
 }
diff --git a/components/landing/header.tsx b/components/landing/header.tsx
@@ -2,13 +2,14 @@
 
 import Link from 'next/link';
 import Image from 'next/image';
-import { LazyMotion, domAnimation, m } from 'framer-motion';
+import { m } from 'framer-motion';
 import { useTypewriter, Cursor } from 'react-simple-typewriter';
 import { MessageCircle, Facebook, Linkedin, Github } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
 import profile from '@/public/web-developer.webp';
 import type getInformation from '@/data/information';
+import LazyMotionLayout from '@/components/ui/lazy-motion';
 import { slideInFromLeft, slideInFromRight } from '@/lib/motion';
 import DownloadCvButton from '@/components/landing/download-cv-button';
 
@@ -24,7 +25,7 @@ export default function Header({ miscellaneous }: HeaderProps) {
   });
 
   return (
-    <LazyMotion features={domAnimation}>
+    <LazyMotionLayout>
       <m.header
         initial='hidden'
         animate='visible'
@@ -127,6 +128,6 @@ export default function Header({ miscellaneous }: HeaderProps) {
           </div>
         </div>
       </m.header>
-    </LazyMotion>
+    </LazyMotionLayout>
   );
 }
diff --git a/components/landing/nav.tsx b/components/landing/nav.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { LazyMotion, domAnimation, m } from 'framer-motion';
+import { m } from 'framer-motion';
 import {
   Book,
   ClipboardCheck,
@@ -14,13 +14,14 @@ import {
 import { useAnchor } from '@/hooks/use-anchor';
 import { slideInFromBottom } from '@/lib/motion';
 import NavButton from '@/components/landing/nav-button';
+import LazyMotionLayout from '@/components/ui/lazy-motion';
 
 export default function Nav() {
   const currentAnchor = useAnchor();
 
   return (
     <nav className='w-screen flex justify-center fixed bottom-8 z-30'>
-      <LazyMotion features={domAnimation}>
+      <LazyMotionLayout>
         <m.div
           initial='hidden'
           animate='visible'
@@ -73,7 +74,7 @@ export default function Nav() {
             active={currentAnchor === '#contact' ? true : false}
           />
         </m.div>
-      </LazyMotion>
+      </LazyMotionLayout>
     </nav>
   );
 }
diff --git a/components/landing/portfolio-card.tsx b/components/landing/portfolio-card.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { useRef } from 'react';
 import type { Prisma } from '@prisma/client';
-import { LazyMotion, domAnimation, m, useInView } from 'framer-motion';
+import { m, useInView } from 'framer-motion';
 
 import { fadeIn } from '@/lib/motion';
 import { Badge } from '@/components/ui/badge';
@@ -31,78 +31,76 @@ export default function PortfolioCard({
   const isInView = useInView(ref, { once: true });
 
   return (
-    <LazyMotion features={domAnimation}>
-      <m.article
-        ref={ref}
-        initial='hidden'
-        animate={isInView ? 'visible' : 'hidden'}
-        custom={index}
-        variants={fadeIn((((index - 1) % 3) + 3) / 10)}
-        className='relative w-full h-min rounded-2xl flex flex-col group'
-      >
-        <div className='relative w-full h-[250px] lg:h-[300px] overflow-hidden'>
-          {portfolio.image && portfolio.blurredDataUrl && (
-            <Image
-              src={portfolio.image}
-              alt='portfolio'
-              fill
-              placeholder='blur'
-              blurDataURL={portfolio.blurredDataUrl}
-              sizes='(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw'
-              className='object-cover object-top group-hover:object-bottom transition-all duration-6000 ease-in-out rounded-t-2xl border-t border-x'
-            />
-          )}
-        </div>
-        <div className='flex flex-col gap-4 rounded-b-2xl py-9 px-6 md:px-6 border border-t-primary dark:border-t-zinc-100 group-hover:border-t-zinc-200 dark:group-hover:border-t-zinc-800 bg-primary group-hover:bg-primary-foreground transition-colors duration-300 ease-in-out'>
-          <h3 className='text-base lg:text-[1.2rem] font-medium text-primary-foreground group-hover:text-primary'>
-            {portfolio.title}
-          </h3>
-          <div className='flex gap-3'>
-            {portfolio.tags.map((tag, index) => (
-              <Badge
-                key={index}
-                variant='outline'
-                className='rounded-full border-primary-foreground group-hover:border-primary text-primary-foreground group-hover:text-primary font-medium'
-              >
-                {tag.name}
-              </Badge>
-            ))}
-          </div>
-          <p className='text-xs lg:text-sm text-primary-foreground group-hover:text-primary'>
-            {portfolio.description}
-          </p>
-          <div className='pt-2 flex gap-4 items-center'>
-            <Button
+    <m.article
+      ref={ref}
+      initial='hidden'
+      animate={isInView ? 'visible' : 'hidden'}
+      custom={index}
+      variants={fadeIn((((index - 1) % 3) + 3) / 10)}
+      className='relative w-full h-min rounded-2xl flex flex-col group'
+    >
+      <div className='relative w-full h-[250px] lg:h-[300px] overflow-hidden'>
+        {portfolio.image && portfolio.blurredDataUrl && (
+          <Image
+            src={portfolio.image}
+            alt='portfolio'
+            fill
+            placeholder='blur'
+            blurDataURL={portfolio.blurredDataUrl}
+            sizes='(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw'
+            className='object-cover object-top group-hover:object-bottom transition-all duration-6000 ease-in-out rounded-t-2xl border-t border-x'
+          />
+        )}
+      </div>
+      <div className='flex flex-col gap-4 rounded-b-2xl py-9 px-6 md:px-6 border border-t-primary dark:border-t-zinc-100 group-hover:border-t-zinc-200 dark:group-hover:border-t-zinc-800 bg-primary group-hover:bg-primary-foreground transition-colors duration-300 ease-in-out'>
+        <h3 className='text-base lg:text-[1.2rem] font-medium text-primary-foreground group-hover:text-primary'>
+          {portfolio.title}
+        </h3>
+        <div className='flex gap-3'>
+          {portfolio.tags.map((tag, index) => (
+            <Badge
+              key={index}
               variant='outline'
-              className='text-primary-foreground group-hover:text-primary group-hover:border-primary'
-              asChild
+              className='rounded-full border-primary-foreground group-hover:border-primary text-primary-foreground group-hover:text-primary font-medium'
+            >
+              {tag.name}
+            </Badge>
+          ))}
+        </div>
+        <p className='text-xs lg:text-sm text-primary-foreground group-hover:text-primary'>
+          {portfolio.description}
+        </p>
+        <div className='pt-2 flex gap-4 items-center'>
+          <Button
+            variant='outline'
+            className='text-primary-foreground group-hover:text-primary group-hover:border-primary'
+            asChild
+          >
+            <Link
+              href={portfolio.githubUrl}
+              target='_blank'
+              title='Github'
+              rel='noopener noreferrer'
             >
-              <Link
-                href={portfolio.githubUrl}
-                target='_blank'
-                title='Github'
-                rel='noopener noreferrer'
-              >
-                GitHub
-              </Link>
-            </Button>
-            <Button
-              variant='secondary'
-              className='group-hover:bg-primary hover:opacity-90 transition-opacity duration-100 ease-in-out group-hover:text-primary-foreground'
-              asChild
+              GitHub
+            </Link>
+          </Button>
+          <Button
+            variant='secondary'
+            className='group-hover:bg-primary hover:opacity-90 transition-opacity duration-100 ease-in-out group-hover:text-primary-foreground'
+            asChild
+          >
+            <Link
+              href={portfolio.demoUrl}
+              target='_blank'
+              title='Live Demo'
+              rel='noopener noreferrer'
             >
-              <Link
-                href={portfolio.demoUrl}
-                target='_blank'
-                title='Live Demo'
-                rel='noopener noreferrer'
-              >
-                Live Demo
-              </Link>
-            </Button>
-          </div>
+              Live Demo
+            </Link>
+          </Button>
         </div>
-      </m.article>
-    </LazyMotion>
+      </div>
+    </m.article>
   );
 }
diff --git a/components/landing/portfolio.tsx b/components/landing/portfolio.tsx
@@ -2,13 +2,14 @@
 
 import axios from 'axios';
 import { useRef, useState } from 'react';
+import { m, useInView } from 'framer-motion';
 import { CopyPlus, Loader2 } from 'lucide-react';
-import { LazyMotion, domAnimation, m, useInView } from 'framer-motion';
 
-import type getInformation from '@/data/information';
 import { slideInFromTop } from '@/lib/motion';
 import { Button } from '@/components/ui/button';
+import type getInformation from '@/data/information';
 import { useToast } from '@/components/ui/use-toast';
+import LazyMotionLayout from '@/components/ui/lazy-motion';
 import PortfolioCard from '@/components/landing/portfolio-card';
 
 type PortfolioProps = Pick<
@@ -54,7 +55,7 @@ export default function Portfolio({ portfolioWithBlur }: PortfolioProps) {
   };
 
   return (
-    <LazyMotion features={domAnimation}>
+    <LazyMotionLayout>
       <m.section
         ref={ref}
         initial='hidden'
@@ -102,6 +103,6 @@ export default function Portfolio({ portfolioWithBlur }: PortfolioProps) {
           </div>
         )}
       </m.section>
-    </LazyMotion>
+    </LazyMotionLayout>
   );
 }