Skip to content

Commit

Permalink
Enhanced FadeIn functionally to accept more orders
Browse files Browse the repository at this point in the history
  • Loading branch information
raphaeling committed Oct 22, 2023
1 parent a958985 commit d259b96
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 13 deletions.
2 changes: 1 addition & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -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 }],
Expand Down
12 changes: 7 additions & 5 deletions src/components/home/hero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'>
Expand All @@ -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.
Expand Down
21 changes: 17 additions & 4 deletions src/components/root/fade-in.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
6 changes: 3 additions & 3 deletions tailwind.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@ const config: Config = {
},
extend: {
transitionDelay: {
'1250': '1500ms',
'1500': '1500ms',
'1750': '2000ms',
'400': '400ms',
'600': '800ms',
'900': '900ms',
},
},
},
Expand Down

0 comments on commit d259b96

Please sign in to comment.