From 08c1a865c2b13c1c448c8918564a75fe3761b884 Mon Sep 17 00:00:00 2001
From: Aeonoi <dzhou527@gmail.com>
Date: Thu, 31 Oct 2024 16:54:59 -0400
Subject: [PATCH] fix(transition): fix issue with transition on smaller devices

Show animation when 30% of component is shown instead of 50%
---
 components/project-card.tsx | 2 +-
 components/transition.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/project-card.tsx b/components/project-card.tsx
index c338c11..4f3ac8e 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -45,7 +45,7 @@ const ProjectCard: React.FC<Props> = ({
           {/* </motion.div> */}
         </div>
         <div className="p-8">
-          <p className="mt-2 text-sm text-catppuccin_teal font-semibold">
+          <p className="mt-2 text-md text-catppuccin_teal font-semibold">
             {description}
           </p>
         </div>
diff --git a/components/transition.tsx b/components/transition.tsx
index 8b0c086..cf60974 100644
--- a/components/transition.tsx
+++ b/components/transition.tsx
@@ -13,7 +13,7 @@ const Transition: React.FC<Props> = ({ children }) => {
       whileInView={{ opacity: 1 }}
       exit={{ opacity: 0 }}
       transition={{ duration: 0.5, ease: "easeInOut", delay: 0.2 }}
-      viewport={{ once: false, amount: 0.5 }}
+      viewport={{ once: false, amount: 0.3 }}
       className="pt-14"
     >
       {children}