Untitled

import React from 'react'
import 'animate.css';

import { TypeAnimation } from 'react-type-animation'
import {FaCss3Alt, FaBootstrap, FaReact, FaTwitter, FaFacebook, FaInstagram, FaLinkedinIn } from 'react-icons/fa'
import { AiOutlineHtml5 } from 'react-icons/ai'
import { BiLogoTailwindCss, BiLogoPhp, BiLogoGraphql } from 'react-icons/bi'
import { RiJavascriptFill } from 'react-icons/ri' 
import { SiExpo, SiExpress } from 'react-icons/si' 
import { GrNode } from 'react-icons/gr'


import Profilecartoon from '../assets/Profilecartoon.jpg'
import Descargas from '../assets/descargas.png'


export const Main = () => {
  return (
    <div id='main' className="relative h-screen flex flex-col lg:flex-row">
            
            <div className='w-full lg:w-1/2 h-1/2 lg:h-full p-2 sm:p-4 lg:p-8 flex justify-center items-center'>
                <img 
                    className='animate__animated animate__rotateInDownLeft object-contain w-full md:w-auto h-full ' 
                    src={ Profilecartoon } 
                    alt='/'
                    />
            </div>

            <div className=" w-full lg:w-1/2 h-1/2 lg:h-full sm:p-8 flex flex-col justify-center items-center">
                <h1 className="animate__animated animate__slideInDown text-4xl text-3x1 font-bold text-gray-800 mt-2 sm:mt-4 lg:mt-0 text-center">
                    Hi, my name is José Goncalves,
                </h1>

                <h2 className='flex text-3xl text-2x1 pt-2 sm:pt-4 '>
                    I'm a
                    <TypeAnimation 
                        sequence={[
                            'FullStack',
                            2000,
                            'UX',
                            2000,
                            'Project Manager',
                            2000,
                        ]}
                        wrapper='div'
                        repeat={ Infinity }
                        cursor={true}
                        style={{fontSize: '0.9em', paddingLeft: '5px' }}
                    />
                </h2>

                <div className='grid grid-flow-col grid-cols-3 gap-2 auto-rows-max col-span-2 mb-0'>

                    <a href="#" className="w-full mb-0 mt-8 w-24 bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700">
                        <AiOutlineHtml5 />
                        <div class="text-left">
                            <div class="ml-2 font-sans text-sm font-semibold">HTML</div>
                        </div>
                    </a>

                    <a href="#" className="w-full mb-0 mt-8 w-24 bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700">
                        <FaCss3Alt />
                        <div class="text-left">
                            <div className="ml-2 font-sans text-sm font-semibold">CSS</div>
                        </div>
                    </a>

                    <a href="#" className="w-full mb-0 mt-8 w-24 bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700">
                        <RiJavascriptFill />
                        <div className="text-left">
                            <div className="ml-2 font-sans text-sm font-semibold">Javascript</div>
                        </div>
                    </a>

                    <a href="#" className="w-full mb-0 mt- w-24 bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700">
                        <FaBootstrap />
                        <div className="text-left">
                            <div className="ml-2 font-sans text-sm font-semibold">Bootstrap</div>
                        </div>
                    </a>

                    <a href="#" className="w-full mb-8 mt-8 w-24 bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700">
                        <BiLogoTailwindCss />
                        <div class="text-left">
                            <div class="ml-2 font-sans text-sm font-semibold">TailWind</div>
                        </div>
                    </a>

                    <a href="#" className="w-full mb-8 mt-8 w-24 bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700">
                        <BiLogoPhp />
                        <div class="text-left">
                            <div className="ml-2 font-sans text-sm font-semibold">PHP</div>
                        </div>
                    </a>

                    

                </div>

                <div className='grid grid-flow-col grid-cols-3 gap-2 auto-rows-max col-span-2 mt-0'>

                    <a href="#" className="w-full mb-0 mt-8 w-24 bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700">
                        <FaReact />
                        <div className="text-left">
                            <div className="ml-2 font-sans text-sm font-semibold">React</div>
                        </div>
                    </a>

                    <a href="#" className="w-full mb-0 mt-8 w-24 bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700">
                        <FaReact />
                        <div className="text-left">
                            <div className="ml-2 font-sans text-sm font-semibold">React Native</div>
                        </div>
                    </a>

                    <a href="#" className="w-full mb-8 mt-8 w-24 bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700">
                        <BiLogoGraphql />
                        <div className="text-left">
                            <div className="ml-2 font-sans text-sm font-semibold">Graphql</div>
                        </div>
                    </a>

                    <a href="#" className="w-full mb-8 mt-8 w-24 bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700">
                        <SiExpo />
                        <div className="text-left">
                            <div className="ml-2 font-sans text-sm font-semibold">Expo</div>
                        </div>
                    </a>

                    <a href="#" className="w-full mb-8 mt-8 w-24 bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700">
                        <GrNode />
                        <div className="text-left">
                            <div className="ml-2 font-sans text-sm font-semibold">Node</div>
                        </div>
                    </a>

                    <a href="#" className="w-full mb-8 mt-8 w-24 bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700">
                        <SiExpress />
                        <div className="text-left">
                            <div className="ml-2 font-sans text-sm font-semibold">Express</div>
                        </div>
                    </a>

                </div>
                

                <p className="flex mt-0 mb-8 text-lg sm:mb-12 pt-4 items-justify">
                    Full Stack Web Developer with a Passion for creating Engage and User Experiences. Let's JOIN forces and bring your digital
                    dreams to frution, get in touch, and let's embark on this exciting journey together.
                </p>

                <div className='flex items-center sm:flex-row justify-center justify-between space-x-4 sm:space-x-6'>
                    <button className='flex bg-[#040404] text-white w-full sm:w-auto px-6 py-3 rounded-lg transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-700'>
                        Resume
                        <img className="ml-2 mt-1 animate-bounce" src={Descargas} />
                    </button>
                    <button className='text-black outline outline-[#040404] w-full sm:w-auto px-6 py-3 rounded-lg'>
                        Contact
                    </button>
                </div>

            </div>

            
            
            
        </div>
  )
}