oonyeje-portfolio/pages/index.tsx

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'
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?: string | React.JSX.Element | null}>({
    name: '',
    url: '',
    content: ''
  });

  const renderNav = (navData: Array<{name: string, url: string, content: (string | React.JSX.Element | 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>
    ));
  };

  return (
    <div className='relative h-full w-full flex-row justify-center'>
      {!showModal && <div className='tablet:w-full flex flex-row justify-center h-full bg-cover bg-black bg-opacity-30'>
        {/* <Image src={backgroundPic} alt="record background"/> */}
        <div className='w-1/2 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-col text-white border-white border-y-2 border-solid">
            <div className='text-2xl'><h2>Okechi Onyeje</h2></div>
            <div className='flex flex-row justify-center space-x-2'>
              <span>Software Professional</span>
              <span>|</span>
              <span>
                Application Artisan
              </span>
              <span>|</span>
              <span>
                Creative & Technology Evangilist
              </span>
            </div>
          </div>
          <div className='flex flex-row justify-center'>
            <div className='flex flex-col'>
              <div className='flex flex-row'>
                {renderNav(navigationContent)}
              </div>
            </div>
          </div>
        </div>
      </div>}
      {showModal && (
        <div className='justify-center flex flex-row bg-black bg-opacity-40'>
          <div style={{height: '100%'}} className="laptop:px-24 absolute z-10 p-10 overflow-y-auto">
            <div className='flex flex-row justify-center'>
              <div className="h-min z-20 bg-black bg-opacity-90 text-white rounded overflow-clip">
                <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>
  )
}