From d259b9642c4ada9066ccd55c5967c25fd638d7ff Mon Sep 17 00:00:00 2001
From: Raphael Gatchalian <rlgatchalian@gmail.com>
Date: Sun, 22 Oct 2023 05:48:14 -0700
Subject: [PATCH] Enhanced FadeIn functionally to accept more orders

---
 .eslintrc.json                  |  2 +-
 src/components/home/hero.tsx    | 12 +++++++-----
 src/components/root/fade-in.tsx | 21 +++++++++++++++++----
 tailwind.config.ts              |  6 +++---
 4 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 6602173..80ce907 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -15,7 +15,7 @@
 
     // 2 space indentation
     "@typescript-eslint/indent": [ "error", 2 ],
-    "indent": [ "error", 2 ],
+    "indent": [ "error", 2, { "SwitchCase": 1 }],
 
     // Always use single quotes except to escape.
     "quotes": ["error", "single", { "avoidEscape": true, "allowTemplateLiterals": true }],
diff --git a/src/components/home/hero.tsx b/src/components/home/hero.tsx
index dccdb61..a42bbcc 100644
--- a/src/components/home/hero.tsx
+++ b/src/components/home/hero.tsx
@@ -5,9 +5,11 @@ import { FaGithub, FaLinkedin } from 'react-icons/fa';
 export default function Hero(): JSX.Element {
   return (
     <div className='max-w-2xl'>
-      <FadeIn>
-        <div className='font-display'>
+      <div className='font-display'>
+        <FadeIn>
           <h1 className='text-4xl pb-2'>Hi, I’m Raphael Gatchalian.</h1>
+        </FadeIn>
+        <FadeIn order={1}>
           <h2 className='flex text-2xl text-light font-thin pb-8'>
             he/him/
             <ExternalLink href='https://en.wiktionary.org/wiki/siya#Tagalog' className='hover:text-lighter'>
@@ -23,9 +25,9 @@ export default function Hero(): JSX.Element {
               </ExternalLink>
             </span>
           </h2>
-        </div>
-      </FadeIn>
-      <FadeIn order={1}>
+        </FadeIn>
+      </div>
+      <FadeIn order={2}>
         <div className='font-thin text-lg leading-6'>
           <p>
             I’m a lover of software engineering, design, community, and paving intersections in between.
diff --git a/src/components/root/fade-in.tsx b/src/components/root/fade-in.tsx
index 4e7f79c..3896aac 100644
--- a/src/components/root/fade-in.tsx
+++ b/src/components/root/fade-in.tsx
@@ -2,17 +2,30 @@
 
 import React, { useEffect, useState } from 'react';
 
-// Wrapper component that takes in an input order to decide the amount of delay. Currently set to just either 0 or 200
-// delay to maximize user experience
+// Wrapper component that takes in an input order to decide the amount of delay.
+// Currently accepts up to 4 different delay levels but we'll see if we need more... 
 export default function FadeIn({
   children,
   order = 0,
 }: {
-  children: JSX.Element,
+  children: JSX.Element | JSX.Element[],
   order?: number
 }) {
   const [animate, setAnimate] = useState('opacity-0 translate-y-10');
-  const delay = (order === 0) ? 'delay-0' : 'delay-200';
+  
+  let delay = 'delay-0';
+  switch (order) {
+    case 0:
+      break;
+    case 1:
+      delay = 'delay-100';
+      break;
+    case 2:
+      delay = 'delay-200';
+      break;
+    default:
+      delay = 'delay-300';
+  }
 
   useEffect(() => {
     setAnimate('opacity-100 translate-y-0');
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d669382..884af61 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -26,9 +26,9 @@ const config: Config = {
     },
     extend: {
       transitionDelay: {
-        '1250': '1500ms',
-        '1500': '1500ms',
-        '1750': '2000ms',
+        '400': '400ms',
+        '600': '800ms',
+        '900': '900ms',
       },
     },
   },