Untitled

<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>