Jay Patrick Cano - Web Developer & Designer

import React, { useEffect } from 'react'; import pfp from '../../../assets/images/Pat.png'; import { TypeAnimation } from 'react-type-animation'; import AOS from 'aos'; import 'aos/dist/aos.css'; import { FaRegHandshake } from 'react-icons/fa'; const animationSequence = [ 'Transforming Ideas into Reality', 2000, 'Crafting Exceptional User Experiences', 2000, 'Innovating Web Development', 2000, 'Building Responsive Web Applications', 2000, 'Designing Intuitive User Interfaces', 2000, 'Creating Scalable Web Solutions', 2000, ]; export default function Hero() { useEffect(() => { AOS.init({ duration: 2000, once: true }); }, []); return ( <div className="w-full max-w-7xl mx-auto px-6 py-8 flex flex-col lg:flex-row-reverse items-center" data-aos="fade-up"> <div className="relative w-64 h-64 mx-auto lg:mx-0 flex-shrink-0 lg:ml-12 lg:mr-12"> <div className="absolute inset-0 bg-primary rounded-lg transform translate-x-3 translate-y-3"></div> <img src={pfp} alt="Jay Patrick Cano" className="w-full h-full rounded-lg border-4 border-base-300 shadow-lg relative" /> </div> <div className="text-center lg:text-left mt-6 lg:mt-0 flex-grow lg:ml-12"> <h1 className="text-4xl md:text-5xl font-bold text-primary">Jay Patrick Cano</h1> <p className="py-2 text-lg font-semibold text-primary"> <TypeAnimation sequence={animationSequence} speed={50} repeat={Infinity} /> </p> <p className="py-2 text-base text-base-content"> I combine technology and creativity to build visually appealing and functional websites and apps. My goal is to create solutions that help you achieve your objectives. Let's bring your vision to life and make a lasting impact. </p> <div className="border-t-2 border-primary mt-4"></div> <div className="mt-4 flex flex-wrap items-center justify-center gap-2"> {/* Committers Top Badge */} <a href="https://user-badge.committers.top/philippines/0x3EF8" target="_blank" rel="noopener noreferrer"> <img src="https://user-badge.committers.top/philippines/0x3EF8.svg" alt="Committers Top Badge" /> </a> {/* Profile Views Badge */} <img src="https://komarev.com/ghpvc/?username=0x3EF8&label=Profile%20Views&color=blue" alt="Profile Views" /> {/* Contributions Badge */} <img src="https://img.shields.io/badge/Contributions-1000%2B-brightgreen" alt="Contributions" /> {/* Country Badge */} <img src="https://img.shields.io/badge/Country-Philippines-red" alt="Country" /> </div> </div> </div> ); }