Add Chatbot IA

Author: willydavid1

src/components/biography/biography.tsx

@@ -10,17 +10,26 @@ const Biography = () => {
 
       <div className="px-4">
         <p className="mb-5">
-          Willy David Da Conceicao Nacio en Venezuela justo cuando ocurria el
-          crash de la
+          ¡Hola! Soy Willy David Da Conceicao, desarrollador frontend y
+          apasionado por la tecnología. Nací en Venezuela durante la ocurrencia
+          de la
           <a
             href="https://chat.openai.com/share/ec8c0a55-2990-4f0a-97d9-743916d87af1"
             rel="noopener noreferrer"
             target="_blank"
             className="pl-1 text-blue-300 underline items-center justify-center inline-flex"
           >
             burbuja puntocom <HiOutlineExternalLink className="ml-1" />
-          </a>{" "}
-          Hoy vive en Bogotá, Colombia, como nómada digital.{" "}
+          </a>
+          . Soy un autodidacta comprometido con el aprendizaje continuo y me
+          encanta leer sobre una variedad de temas. Tengo experiencia en
+          desarrollo web, construyendo software con React y otras tecnologías.
+          Aunque mi especialidad es el frontend, también tengo habilidades en
+          backend y en el desarrollo de aplicaciones móviles híbridas. Me
+          interesa el modelado 3D y actualmente estoy incursionando en el
+          desarrollo de videojuegos. Siempre busco aprender nuevas cosas que me
+          apasionan. Me encantan los desafíos y disfruto creando código
+          escalable.
         </p>
 
         <div className="grid gap-4 mx-4 sm:grid-cols-12">

src/components/hero/hero.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import Image from "next/image";
 import Typewriter from "typewriter-effect";
 import { HiOutlineArrowNarrowRight } from "react-icons/hi";
+import { FaInfoCircle } from "react-icons/fa";
 import { Animation } from "../animations/animation";
 
 const Hero = () => {
@@ -46,12 +47,35 @@ const Hero = () => {
           <a
             href="#projects"
             type="button"
-            className="text-white mt-4 flex items-center justify-center w-full border focus:ring-4 focus:outline-none focus:ring-white font-medium rounded-xl text-sm px-5 py-2.5 text-center mr-2 mb-2"
+            className="hover:bg-white hover:text-main transition-colors text-white mt-4 flex items-center justify-center w-full border focus:ring-4 focus:outline-none focus:ring-white font-medium rounded-xl text-sm px-5 py-2.5 text-center mr-2 mb-2"
           >
             Ver proyectos
             <HiOutlineArrowNarrowRight className="ml-3 text-lg" />
           </a>
         </Animation>
+        <Animation
+          in
+          delay={900}
+          from={{
+            transform: "translateY(50px)",
+          }}
+          to={{
+            transform: "translateY(0px)",
+          }}
+        >
+          <a
+            href="#iframeChatbotPicassoia"
+            type="button"
+            className="hover:bg-white hover:text-main transition-colors text-white mt-4 flex items-center justify-center w-full border focus:ring-4 focus:outline-none focus:ring-white font-medium rounded-xl text-sm px-5 py-2.5 text-center mr-2 mb-2"
+          >
+            Chatbot IA con datos de Willy
+            <HiOutlineArrowNarrowRight className="ml-3 text-lg" />
+          </a>
+          <p className="text-xs flex items-center text-gray-400">
+            <FaInfoCircle className="mr-2" />
+            Chatbot IA entrenado con datos de Willy de este portafolio.
+          </p>
+        </Animation>
       </div>
 
       <Animation

src/pages/index.tsx

@@ -42,6 +42,24 @@ export default function Home() {
         <Biography />
         <Projects />
         <Experience />
+        <div className="mb-12 scroll-m-12" id="iframeChatbotPicassoia">
+          <h2 className="text-3xl mb-6 font-semibold text-center px-4 md:text-left">
+            Chatea conmigo
+          </h2>
+
+          <div
+            id="iframeChatbotPicassoia"
+            className="rounded-3xl overflow-hidden"
+          >
+            <iframe
+              src="https://picassoia.com/chatbot-iframe?uid=yxbtT8Bq6neUZwO1NxwUz5ADx8q2&chatbot_id=13360cf7-351d-4427-87f4-0644de85c88f"
+              width="100%"
+              style={{ height: "100%", minHeight: 700 }}
+              frameBorder={0}
+            />
+          </div>
+        </div>
+
         <Skills />
       </main>
       <Footer />