Added more FadeIn delay options (for ExperienceCards)

raphaeling · Oct 27, 2023 · 5d08d14 · 5d08d14
1 parent 750287c
commit 5d08d14
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 15 deletions.
diff --git a/src/app/(pages)/experience/page.tsx b/src/app/(pages)/experience/page.tsx
@@ -2,6 +2,7 @@ import PageHeading from '@/components/root/PageHeading';
 import PageBody from '@/components/root/PageBody';
 import ExperienceCard from '@/components/experience/ExperienceCard';
 import experienceItems from '@/content/experienceItems';
+import FadeIn from '@/components/root/FadeIn';
 
 export default function Experience(): JSX.Element {
   return (
@@ -12,23 +13,24 @@ export default function Experience(): JSX.Element {
         </h2>
       </PageHeading>
       <PageBody className=''>
-        {experienceItems.map((exp) => {
+        {experienceItems.map((exp, index) => {
           return (
-            <>
-              <ExperienceCard
-                workplace={exp.workplace}
-                title={exp.title}
-                startDate={exp.startDate}
-                endDate={exp.endDate}
-                description={exp.description}
-                skills={exp.skills}
-              />
-            </>
+            <div key={index}>
+              <FadeIn order={index+2}>
+                <ExperienceCard
+                  workplace={exp.workplace}
+                  title={exp.title}
+                  startDate={exp.startDate}
+                  endDate={exp.endDate}
+                  description={exp.description}
+                  skills={exp.skills}
+                />
+              </FadeIn>
+            </div>
           );
         })}
-        {/* <ExperienceCard />
-        <ExperienceCard /> */}
       </PageBody>
     </div>
   );
 }
+
diff --git a/src/components/root/FadeIn.tsx b/src/components/root/FadeIn.tsx
@@ -23,11 +23,13 @@ export default function FadeIn({
     case 2:
       delay = 'delay-200';
       break;
+    case 3:
+      delay = 'delay-300';
     case -1:
-      delay = 'delay-400';
+      delay = 'delay-500';
       break;
     default:
-      delay = 'delay-300';
+      delay = 'delay-400';
   }
 
   useEffect(() => {