JohnCosta27/JohnTech
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added frontend wave and FadeComponent

Browse Source
This commit is contained in:
John Costa
2022-01-03 01:06:40 +00:00
parent 173940d939
commit a953517c10
2 changed files with 82 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/core/FadeComponent.js Normal file
View File

@ -0,0 +1,33 @@
//============================================================
// Essential Imports
//============================================================
import clsx from 'clsx';
import React, { useEffect, useState } from 'react';
//============================================================
// Component
//============================================================
const FadeComponent = ({ delay, children }) => {
const [showComponent, setShowComponent] = useState('opacity-0');
useEffect(() => {
const timer = setTimeout(() => {
setShowComponent('opacity-100');
}, delay);
return () => {
clearTimeout(timer);
};
}, []);
return (
<div className="w-full bg-polar-night-400">
<div className={clsx('w-full transition-all ease-in-out duration-500 ', showComponent)}>
{children}
</div>
</div>
);
};
export default FadeComponent;

78
src/components/pages/Front.page.js
View File

@ -10,6 +10,7 @@ import React from 'react';
import AppearText from '../text/AppearText';
import Cdiv from '../core/Cdiv';
import FadeComponent from '../core/FadeComponent';
//============================================================
// Component
@ -17,39 +18,58 @@ import Cdiv from '../core/Cdiv';
const FrontPage = () => {
return (
<div className="w-full h-screen bg-polar-night-400">
<Cdiv className="w-full h-32 py-6 px-24">
<Cdiv className="w-full h-full gap-2">
<Cdiv className="flex-1 h-full">
<AppearText
className="font-mono text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
text="Option #1"
delay={2500}
/>
</Cdiv>
<Cdiv className="flex-1 h-full">
<AppearText
className="font-mono text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
text="Option #2"
delay={2500}
/>
</Cdiv>
<Cdiv className="flex-1 h-full">
<AppearText
className="font-mono text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
text="Option #3"
delay={2500}
/>
<>
<div className="w-full h-screen bg-polar-night-400">
<Cdiv className="w-full h-32 py-6 px-24">
<Cdiv className="w-full h-full gap-2">
<Cdiv className="flex-1 h-full">
<AppearText
className="font-mono text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
text="Option #1"
delay={2500}
/>
</Cdiv>
<Cdiv className="flex-1 h-full">
<AppearText
className="font-mono text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
text="Option #2"
delay={2500}
/>
</Cdiv>
<Cdiv className="flex-1 h-full">
<AppearText
className="font-mono text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
text="Option #3"
delay={2500}
/>
</Cdiv>
</Cdiv>
</Cdiv>
</Cdiv>
<div className="w-full h-3/5 flex justify-center items-center">
<div className="flex flex-col gap-4 justify-center items-center">
<AppearText className="font-mono text-7xl text-frost-400" text="JOHN COSTA" delay={750} />
<AppearText className="font-mono text-5xl text-frost-200" text="DEVELOPER" delay={1500} />
<div className="w-full h-3/5 flex justify-center items-center">
<div className="flex flex-col gap-4 justify-center items-center">
<AppearText
className="font-mono text-7xl text-frost-400"
text="JOHN COSTA"
delay={750}
/>
<AppearText
className="font-mono text-5xl text-frost-200"
text="DEVELOPER"
delay={1500}
/>
</div>
</div>
<FadeComponent delay={2500}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path
className="fill-frost-200"
fill-opacity="1"
d="M0,96L80,85.3C160,75,320,53,480,58.7C640,64,800,96,960,101.3C1120,107,1280,85,1360,74.7L1440,64L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
</svg>
</FadeComponent>
</div>
</div>
<Cdiv className="bg-frost-200"></Cdiv>
</>
);
};
export default FrontPage;