82 lines
2.9 KiB
JavaScript
82 lines
2.9 KiB
JavaScript
//============================================================
|
|
// Essential Imports
|
|
//============================================================
|
|
|
|
import React from 'react';
|
|
|
|
//============================================================
|
|
// Imported Components
|
|
//============================================================
|
|
|
|
import AppearText from '../text/AppearText';
|
|
import Cdiv from '../core/Cdiv';
|
|
import FadeComponent from '../core/FadeComponent';
|
|
import Introduction from '../sections/Introduction';
|
|
import Skills from '../sections/Skills';
|
|
|
|
//============================================================
|
|
// Component
|
|
//============================================================
|
|
|
|
const DELAY = 1000;
|
|
|
|
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-display text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
|
|
text="Option #1"
|
|
delay={DELAY * 2.5}
|
|
/>
|
|
</Cdiv>
|
|
<Cdiv className="flex-1 h-full">
|
|
<AppearText
|
|
className="font-display text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
|
|
text="Option #2"
|
|
delay={DELAY * 2.5}
|
|
/>
|
|
</Cdiv>
|
|
<Cdiv className="flex-1 h-full">
|
|
<AppearText
|
|
className="font-display text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
|
|
text="Option #3"
|
|
delay={DELAY * 2.5}
|
|
/>
|
|
</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-display font-bold text-7xl text-frost-400"
|
|
text="JOHN COSTA"
|
|
delay={DELAY}
|
|
/>
|
|
<AppearText
|
|
className="font-display font-bold text-5xl text-frost-200"
|
|
text="DEVELOPER"
|
|
delay={DELAY * 2}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<FadeComponent delay={DELAY * 2.5}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
|
|
<path
|
|
className="fill-frost-200"
|
|
d="M0,192L120,202.7C240,213,480,235,720,240C960,245,1200,235,1320,229.3L1440,224L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"></path>
|
|
</svg>
|
|
</FadeComponent>
|
|
<FadeComponent delay={DELAY * 2.5}>
|
|
<Introduction />
|
|
<Skills />
|
|
</FadeComponent>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
export default FrontPage;
|