<div id='main' className='relative h-screen flex'>
<img
className='object-cover w-1/2 h-full rounded-full mx-4 my-4'
src={devbanner}
alt='/'
/>
<div className='w-1/2 h-full bg-gray-900 text-white p-8 flex items-center'>
<div className='max-w-[700px] m-auto'>
<h1 className='sm:text-5xl text-4xl font-bold text-gray-800 text-white'>I'm José Goncalves</h1>
<h2 className='flex sm:text-3xl text-2xl pt-4 text-gray-800 text-white'>
I'm a
<TypeAnimation
sequence={[
'Developer',
2000,
'UX',
2000,
'Project Manager',
2000,
]}
wrapper='div'
cursor={true}
style={{ fontSize: '1em', paddingLeft: '5px' }}
/>
</h2>
<div className='flex justify-between pt-6 max-w-[200px] w-full'>
<FaTwitter className='cursor-pointer text-white' size={20} />
<FaFacebook className='cursor-pointer text-white' size={20} />
<FaInstagram className='cursor-pointer text-white' size={20} />
<FaLinkedinIn className='cursor-pointer text-white' size={20} />
</div>
</div>
</div>
</div>