91 lines
3.2 KiB
TypeScript
Executable File
91 lines
3.2 KiB
TypeScript
Executable File
import React, {useState} from 'react'
|
|
import Image from 'next/image'
|
|
import backgroundPic from '../public/unspash_image.jpg'
|
|
import { Inter } from 'next/font/google'
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faGem } from "@fortawesome/free-solid-svg-icons";
|
|
import navigationContent from '../lib/navigationContent'
|
|
import Modal from 'react-modal';
|
|
const inter = Inter({ subsets: ['latin'] })
|
|
|
|
export default function Home() {
|
|
const customStyles = {
|
|
overlay: {
|
|
backgroundColor: 'rgba(0, 0, 0, 0.6)'
|
|
},
|
|
content: {
|
|
top: '50%',
|
|
left: '50%',
|
|
right: 'auto',
|
|
bottom: 'auto',
|
|
marginRight: '-50%',
|
|
transform: 'translate(-50%, -50%)',
|
|
backgroundColor: 'gray',
|
|
width: '75vw'
|
|
}
|
|
}
|
|
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [modalData, setModalData] = useState<{name: string, url: string, content?: any}>({
|
|
name: '',
|
|
url: '',
|
|
content: ''
|
|
});
|
|
|
|
const renderNav = (navData: Array<{name: string, url: string, content: (string | React.ElementType | null)}>) => {
|
|
return navData.map((data, idx) => (
|
|
<span
|
|
onClick={() => {
|
|
setShowModal(true)
|
|
setModalData(data);
|
|
}}
|
|
key={idx}
|
|
className='p-4 border-white text-white border-2 hover:cursor-pointer hover:bg-white hover:bg-opacity-10'
|
|
>
|
|
<a href={data.url}>{data.name}</a>
|
|
</span>
|
|
));
|
|
};
|
|
Modal.setAppElement('#info-anchor');
|
|
|
|
return (
|
|
<div id="info-anchor" className='relative w-full flex-row justify-center'>
|
|
{!showModal && <div className='tablet:w-full h-full bg-cover'>
|
|
{/* <Image src={backgroundPic} alt="record background"/> */}
|
|
<div className='w-1/2 mt-24 flex flex-col justify-center text-center'>
|
|
{/* <FontAwesomeIcon width={25} height={50} icon={faGem} className="fas fa-gem" style={{ color: "red" }} /> */}
|
|
<div className="py-20 flex flex-row text-white border-white border-y-2 border-solid">
|
|
<h2>Okechi Onyeje</h2>
|
|
<div>
|
|
<span>Software Professional</span>
|
|
<span>
|
|
Application Artisan
|
|
</span>
|
|
<span>
|
|
Creative & Technology Evangilist
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className='flex flex-row justify-center'>
|
|
{renderNav(navigationContent)}
|
|
</div>
|
|
</div>
|
|
</div>}
|
|
{showModal && (
|
|
<div style={{height: '100vh', width: '100vw'}} className='justify-center flex flex-row bg-black bg-opacity-40'>
|
|
<div style={{height: '100vh'}} className="laptop:px-24 absolute z-10 p-10 overflow-y-auto flex flex-row justify-center">
|
|
<div className='flex flex-row justify-center'>
|
|
<div className=" laptop:w-1/2 h-min z-20 bg-black bg-opacity-90 text-white rounded">
|
|
<div className="w-full flex flex-row justify-end p-4">
|
|
<span className="cursor-pointer" onClick={() => setShowModal(false)}>X</span>
|
|
</div>
|
|
{modalData.content}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|