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

Added front page menu and Cdiv component as a centered div component

Browse Source
This commit is contained in:
John Costa
2021-12-14 23:04:12 +00:00
parent b6acbc8e67
commit 173940d939
3 changed files with 49 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/core/Cdiv.js Normal file
View File

@ -0,0 +1,15 @@
//============================================================
// Essential Imports
//============================================================
import React from 'react';
import clsx from 'clsx';
//============================================================
// Component
//============================================================
const Cdiv = ({ className, children }) => {
return <div className={clsx('flex justify-center items-center', className)}>{children}</div>;
};
export default Cdiv;

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

@ -9,6 +9,7 @@ import React from 'react';
//============================================================ //============================================================
import AppearText from '../text/AppearText'; import AppearText from '../text/AppearText';
import Cdiv from '../core/Cdiv';
//============================================================ //============================================================
// Component // Component
@ -16,10 +17,37 @@ import AppearText from '../text/AppearText';
const FrontPage = () => { const FrontPage = () => {
return ( return (
<div className="w-full h-screen flex justify-center items-center bg-polar-night-400"> <div className="w-full h-screen bg-polar-night-400">
<div className="flex flex-col justify-center items-center"> <Cdiv className="w-full h-32 py-6 px-24">
<AppearText className="font-mono text-7xl text-frost-400" text="JOHN COSTA" delay={100} /> <Cdiv className="w-full h-full gap-2">
<AppearText className="font-mono text-5xl text-frost-200" text="DEVELOPER" delay={1200} /> <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>
<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> </div>
</div> </div>
); );

4
src/components/text/AppearText.js
View File

@ -10,7 +10,7 @@ import clsx from 'clsx';
//============================================================ //============================================================
const AppearText = ({ text, delay, className }) => { const AppearText = ({ text, delay, className }) => {
const [showText, setShowText] = useState(''); const [showText, setShowText] = useState('opacity-0');
useEffect(() => { useEffect(() => {
const timer = setTimeout(() => { const timer = setTimeout(() => {
@ -24,7 +24,7 @@ const AppearText = ({ text, delay, className }) => {
return ( return (
<> <>
<h1 className={clsx('transition-all ease-in-out delay-1000 opacity-0', className, showText)}> <h1 className={clsx('transition-all ease-in-out duration-500', className, showText)}>
{text} {text}
</h1> </h1>
</> </>