diff --git a/components/landing/about.tsx b/components/landing/about.tsx index 9b5aeb3..0e5fbf7 100644 --- 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 ( - + - + ); } diff --git a/components/landing/contact.tsx b/components/landing/contact.tsx index 252c1e9..036d348 100644 --- 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 ( - + - + ); } diff --git a/components/landing/experience.tsx b/components/landing/experience.tsx index 1cd4bd6..efe9d45 100644 --- 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 ( - + - + ); } diff --git a/components/landing/expertise.tsx b/components/landing/expertise.tsx index 67cdf17..80c968a 100644 --- 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 ( - + - + ); } diff --git a/components/landing/header.tsx b/components/landing/header.tsx index 29722f4..4dd5f57 100644 --- 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 ( - + - + ); } diff --git a/components/landing/nav.tsx b/components/landing/nav.tsx index 6d86e00..2e2a265 100644 --- 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 ( ); } diff --git a/components/landing/portfolio-card.tsx b/components/landing/portfolio-card.tsx index 60b1f4d..44dccd9 100644 --- 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 ( - - -
- {portfolio.image && portfolio.blurredDataUrl && ( - portfolio - )} -
-
-

- {portfolio.title} -

-
- {portfolio.tags.map((tag, index) => ( - - {tag.name} - - ))} -
-

- {portfolio.description} -

-
- - + -
+ Live Demo + +
- - + + ); } diff --git a/components/landing/portfolio.tsx b/components/landing/portfolio.tsx index ead00a4..d306a86 100644 --- 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 ( - + )} - + ); } diff --git a/components/landing/qualification.tsx b/components/landing/qualification.tsx index 1e9e411..8853cbd 100644 --- a/components/landing/qualification.tsx +++ b/components/landing/qualification.tsx @@ -1,10 +1,11 @@ 'use client'; import { useRef } from 'react'; +import { m, useInView } from 'framer-motion'; import { Briefcase, GraduationCap } from 'lucide-react'; -import { LazyMotion, domAnimation, m, useInView } from 'framer-motion'; import type getInformation from '@/data/information'; +import LazyMotionLayout from '@/components/ui/lazy-motion'; import { slideInFromRight, slideInFromTop } from '@/lib/motion'; import QualificationCard from '@/components/landing/qualification-card'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; @@ -22,7 +23,7 @@ export default function Qualification({ const isInView = useInView(ref, { once: true }); return ( - + - + ); } diff --git a/components/landing/tool.tsx b/components/landing/tool.tsx index 2249feb..f3b0c7e 100644 --- a/components/landing/tool.tsx +++ b/components/landing/tool.tsx @@ -2,10 +2,11 @@ import { useRef } from 'react'; import Image from 'next/image'; -import { LazyMotion, domAnimation, m, useInView } from 'framer-motion'; +import { m, useInView } from 'framer-motion'; import { cn } from '@/lib/utils'; import type getInformation from '@/data/information'; +import LazyMotionLayout from '@/components/ui/lazy-motion'; import { slideInFromRight, slideInFromTop } from '@/lib/motion'; type ToolProps = Pick>, 'tool'>; @@ -15,7 +16,7 @@ export default function Tool({ tool }: ToolProps) { const isInView = useInView(ref, { once: true }); return ( - + - + ); } diff --git a/components/main/footer.tsx b/components/main/footer.tsx index ac0ec08..c8235f7 100644 --- a/components/main/footer.tsx +++ b/components/main/footer.tsx @@ -2,11 +2,12 @@ import Link from 'next/link'; import { useRef } from 'react'; +import { m, useInView } from 'framer-motion'; import type { Miscellaneous } from '@prisma/client'; import { Facebook, Instagram, Linkedin, Twitter } from 'lucide-react'; -import { LazyMotion, domAnimation, m, useInView } from 'framer-motion'; import { Button } from '@/components/ui/button'; +import LazyMotionLayout from '@/components/ui/lazy-motion'; import { slideInFromLeft, slideInFromRight } from '@/lib/motion'; interface FooterProps { @@ -18,7 +19,7 @@ export default function Footer({ miscellaneous }: FooterProps) { const isInView = useInView(ref, { once: true }); return ( - + - + ); } diff --git a/components/ui/lazy-motion.tsx b/components/ui/lazy-motion.tsx new file mode 100644 index 0000000..338139c --- /dev/null +++ b/components/ui/lazy-motion.tsx @@ -0,0 +1,9 @@ +import { LazyMotion, domAnimation } from 'framer-motion'; + +export default function LazyMotionLayout({ + children +}: { + children: React.ReactNode; +}) { + return {children}; +}