Untitled
unknown
plain_text
a month ago
9.8 kB
2
Indexable
Never
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> ) }