Mi proyecto #222
Description
Mi primer proyecto ```jsx
import React, { useState } from 'react';
const App = () => {
const [activeSection, setActiveSection] = useState('home');
const scrollToSection = (sectionId) => {
setActiveSection(sectionId);
document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' });
};
return (
{/* Navigation */}
Carlos Rodríguez
{['home', 'about', 'education', 'experience', 'projects', 'contact'].map((section) => (
<button
key={section}
onClick={() => scrollToSection(section)}
className={
capitalize font-medium transition-colors duration-200 ${ activeSection === section ? 'text-indigo-600' : 'text-gray-700 hover:text-indigo-500' }}>
{section === 'home' ? 'Inicio' : section === 'about' ? 'Sobre mí' : section === 'education' ? 'Educación' : section === 'experience' ? 'Experiencia' : section === 'projects' ? 'Proyectos' : 'Contacto'}
))}
{/* Hero Section */}
<section id="home" className="pt-24 pb-20 bg-gradient-to-r from-indigo-600 to-purple-600 text-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex flex-col md:flex-row items-center">
<div className="md:w-1/2 mb-10 md:mb-0">
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
Ingeniero de Software
</h1>
<p className="text-xl md:text-2xl mb-8 opacity-90">
Transformando ideas en soluciones digitales innovadoras
</p>
<div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<button
onClick={() => scrollToSection('projects')}
className="bg-white text-indigo-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-300"
>
Ver Proyectos
</button>
<button
onClick={() => scrollToSection('contact')}
className="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-indigo-600 transition duration-300"
>
Contacto
</button>
</div>
</div>
<div className="md:w-1/2 flex justify-center">
<div className="relative">
<div className="w-64 h-64 md:w-80 md:h-80 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
<img
src="https://placehold.co/300x300/indigo/white?text=CR"
alt="Carlos Rodríguez"
className="w-56 h-56 md:w-72 md:h-72 rounded-full object-cover border-4 border-white"
/>
</div>
<div className="absolute -bottom-6 -right-6 bg-indigo-500 px-4 py-2 rounded-lg">
<span className="font-semibold">React • Node.js • Python</span>
</div>
</div>
</div>
</div>
</div>
</section>
{/* About Section */}
<section id="about" className="py-20 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Sobre Mí</h2>
<div className="w-24 h-1 bg-indigo-600 mx-auto"></div>
</div>
<div className="flex flex-col md:flex-row items-center gap-12">
<div className="md:w-1/3">
<img
src="https://placehold.co/400x500/indigo/white?text=Perfil"
alt="Perfil profesional"
className="rounded-lg shadow-lg"
/>
</div>
<div className="md:w-2/3">
<h3 className="text-2xl font-bold text-gray-900 mb-6">Ingeniero Apasionado por la Tecnología</h3>
<p className="text-lg text-gray-700 mb-6 leading-relaxed">
Soy un ingeniero de software con más de 5 años de experiencia en el desarrollo de aplicaciones web y móviles.
Mi enfoque se centra en crear soluciones escalables, eficientes y centradas en el usuario que resuelven problemas
reales del mundo empresarial.
</p>
<p className="text-lg text-gray-700 mb-8 leading-relaxed">
Me especializo en tecnologías modernas como React, Node.js y Python, con un fuerte compromiso con las mejores
prácticas de desarrollo, pruebas automatizadas y metodologías ágiles. Siempre estoy buscando nuevos desafíos
que me permitan crecer profesionalmente y aportar valor a los proyectos en los que participo.
</p>
<div className="grid grid-cols-2 gap-6">
<div className="bg-gray-50 p-6 rounded-lg">
<h4 className="font-bold text-indigo-600 mb-2">Habilidades Técnicas</h4>
<ul className="text-gray-700 space-y-1">
<li>• React & React Native</li>
<li>• Node.js & Express</li>
<li>• Python & Django</li>
<li>• MongoDB & PostgreSQL</li>
</ul>
</div>
<div className="bg-gray-50 p-6 rounded-lg">
<h4 className="font-bold text-indigo-600 mb-2">Habilidades Blandas</h4>
<ul className="text-gray-700 space-y-1">
<li>• Trabajo en equipo</li>
<li>• Comunicación efectiva</li>
<li>• Resolución de problemas</li>
<li>• Gestión de proyectos</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
{/* Education Section */}
<section id="education" className="py-20 bg-gray-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Formación Académica</h2>
<div className="w-24 h-1 bg-indigo-600 mx-auto"></div>
</div>
<div className="space-y-12">
<div className="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
<div className="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
<h3 className="text-2xl font-bold text-gray-900">Ingeniería en Sistemas Computacionales</h3>
<span className="text-indigo-600 font-semibold">2015 - 2020</span>
</div>
<p className="text-xl text-indigo-600 mb-4">Universidad Tecnológica de México</p>
<p className="text-gray-700 mb-4">
Tesis: "Desarrollo de un sistema de recomendación basado en inteligencia artificial para plataformas educativas"
</p>
<div className="flex flex-wrap gap-2">
<span className="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Python</span>
<span className="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Machine Learning</span>
<span className="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Django</span>
<span className="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">PostgreSQL</span>
</div>
</div>
<div className="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
<div className="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
<h3 className="text-2xl font-bold text-gray-900">Maestría en Ciencias de la Computación</h3>
<span className="text-indigo-600 font-semibold">2020 - 2022</span>
</div>
<p className="text-xl text-indigo-600 mb-4">Instituto Tecnológico de Estudios Superiores</p>
<p className="text-gray-700 mb-4">
Especialización en Arquitecturas de Software Distribuidas y Microservicios
</p>
<div className="flex flex-wrap gap-2">
<span className="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Docker</span>
<span className="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Kubernetes</span>
<span className="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">AWS</span>
<span className="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Node.js</span>
<span className="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">React</span>
</div>
</div>
<div className="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
<div className="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
<h3 className="text-2xl font-bold text-gray-900">Certificación AWS Solutions Architect</h3>
<span className="text-indigo-600 font-semibold">2023</span>
</div>
<p className="text-xl text-indigo-600 mb-4">Amazon Web Services</p>
<p className="text-gray-700">
Certificación profesional que valida mis habilidades en el diseño de sistemas escalables y seguros en la nube de AWS.
</p>
</div>
</div>
</div>
</section>
{/* Experience Section */}
<section id="experience" className="py-20 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Experiencia Profesional</h2>
<div className="w-24 h-1 bg-indigo-600 mx-auto"></div>
</div>
<div className="space-y-12">
<div className="bg-gray-50 p-8 rounded-lg shadow-md">
<div className="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
<div>
<h3 className="text-2xl font-bold text-gray-900">Senior Software Engineer</h3>
<p className="text-xl text-indigo-600">TechCorp Solutions • 2021 - Presente</p>
</div>
<span className="bg-indigo-600 text-white px-4 py-2 rounded-full">Actual</span>
</div>
<p className="text-gray-700 mb-6">
Lidero un equipo de 5 desarrolladores en la creación de aplicaciones web empresariales utilizando React, Node.js y MongoDB.
</p>
<ul className="text-gray-700 space-y-2 ml-6 list-disc">
<li>Arquitectura e implementación de microservicios para mejorar la escalabilidad del sistema</li>
<li>Optimización del rendimiento de aplicaciones, reduciendo tiempos de carga en un 40%</li>
<li>Mentoría de desarrolladores junior y establecimiento de mejores prácticas de código</li>
<li>Implementación de CI/CD con GitHub Actions y Docker</li>
</ul>
</div>
<div className="bg-gray-50 p-8 rounded-lg shadow-md">
<div className="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
<div>
<h3 className="text-2xl font-bold text-gray-900">Software Developer</h3>
<p className="text-xl text-indigo-600">Innovatech • 2019 - 2021</p>
</div>
</div>
<p className="text-gray-700 mb-6">
Desarrollo de aplicaciones móviles y web para clientes en sectores financieros y educativos.
</p>
<ul className="text-gray-700 space-y-2 ml-6 list-disc">
<li>Desarrollo de una aplicación móvil para gestión financiera con React Native</li>
<li>Implementación de APIs RESTful con Node.js y Express</li>
<li>Integración con sistemas de pago y autenticación de terceros</li>
<li>Participación en metodologías ágiles (Scrum) con entregas quincenales</li>
</ul>
</div>
<div className="bg-gray-50 p-8 rounded-lg shadow-md">
<div className="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
<div>
<h3 className="text-2xl font-bold text-gray-900">Desarrollador Web Freelance</h3>
<p className="text-xl text-indigo-600">Proyectos Independientes • 2017 - 2019</p>
</div>
</div>
<p className="text-gray-700 mb-6">
Creación de sitios web y aplicaciones para pequeñas empresas y emprendedores.
</p>
<ul className="text-gray-700 space-y-2 ml-6 list-disc">
<li>Desarrollo de tiendas en línea con WordPress y WooCommerce</li>
<li>Creación de portales informativos con HTML, CSS y JavaScript</li>
<li>Optimización SEO y mejora de experiencia de usuario</li>
<li>Gestión de hosting y dominios para clientes</li>
</ul>
</div>
</div>
</div>
</section>
{/* Projects Section */}
<section id="projects" className="py-20 bg-gray-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Proyectos Destacados</h2>
<div className="w-24 h-1 bg-indigo-600 mx-auto"></div>
<p className="mt-4 text-xl text-gray-600 max-w-3xl mx-auto">
Algunos de los proyectos más significativos en los que he trabajado, demostrando mi capacidad técnica y creatividad
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
<img
src="https://placehold.co/600x400/indigo/white?text=EduPlatform"
alt="Plataforma Educativa"
className="w-full h-48 object-cover"
/>
<div className="p-6">
<h3 className="text-xl font-bold text-gray-900 mb-2">Plataforma Educativa Inteligente</h3>
<p className="text-gray-700 mb-4">
Sistema de aprendizaje adaptativo que personaliza el contenido según el progreso del estudiante.
</p>
<div className="flex flex-wrap gap-2 mb-4">
<span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs">React</span>
<span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs">Node.js</span>
<span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs">MongoDB</span>
<span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs">ML</span>
</div>
<div className="flex justify-between items-center">
<span className="text-sm text-gray-500">2022</span>
<button className="text-indigo-600 hover:text-indigo-800 font-medium">Ver detalles →</button>
</div>
</div>
</div>
<div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
<img
src="https://placehold.co/600x400/purple/white?text=FinApp"
alt="Aplicación Financiera"
className="w-full h-48 object-cover"
/>
<div className="p-6">
<h3 className="text-xl font-bold text-gray-900 mb-2">Aplicación de Gestión Financiera</h3>
<p className="text-gray-700 mb-4">
App móvil para el seguimiento de gastos, presupuestos y metas financieras personales.
</p>
<div className="flex flex-wrap gap-2 mb-4">
<span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs">React Native</span>
<span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs">Firebase</span>
<span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs">Charts</span>
</div>
<div className="flex justify-between items-center">
<span className="text-sm text-gray-500">2021</span>
<button className="text-indigo-600 hover:text-indigo-800 font-medium">Ver detalles →</button>
</div>
</div>
</div>
<div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
<img
src="https://placehold.co/600x400/blue/white?text=HealthTrack"
alt="Sistema de Salud"
className="w-full h-48 object-cover"
/>
<div className="p-6">
<h3 className="text-xl font-bold text-gray-900 mb-2">Sistema de Seguimiento Médico</h3>
<p className="text-gray-700 mb-4">
Plataforma web para clínicas que permite gestionar pacientes, citas y historiales médicos.
</p>
<div className="flex flex-wrap gap-2 mb-4">
<span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs">Vue.js</span>
<span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs">Django</span>
<span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs">PostgreSQL</span>
</div>
<div className="flex justify-between items-center">
<span className="text-sm text-gray-500">2020</span>
<button className="text-indigo-600 hover:text-indigo-800 font-medium">Ver detalles →</button>
</div>
</div>
</div>
<div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
<img
src="https://placehold.co/600x400/green/white?text=EcoDelivery"
alt="Sistema de Logística"
className="w-full h-48 object-cover"
/>
<div className="p-6">
<h3 className="text-xl font-bold text-gray-900 mb-2">Sistema de Logística Sostenible</h3>
<p className="text-gray-700 mb-4">
Plataforma para optimizar rutas de entrega considerando factores ecológicos y de eficiencia.
</p>
<div className="flex flex-wrap gap-2 mb-4">
<span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs">Python</span>
<span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs">Flask</span>
<span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs">Google Maps API</span>
</div>
<div className="flex justify-between items-center">
<span className="text-sm text-gray-500">2019</span>
<button className="text-indigo-600 hover:text-indigo-800 font-medium">Ver detalles →</button>
</div>
</div>
</div>
<div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
<img
src="https://placehold.co/600x400/orange/white?text=EventPro"
alt="Gestión de Eventos"
className="w-full h-48 object-cover"
/>
<div className="p-6">
<h3 className="text-xl font-bold text-gray-900 mb-2">Plataforma de Gestión de Eventos</h3>
<p className="text-gray-700 mb-4">
Sistema completo para la organización, promoción y gestión de eventos corporativos y sociales.
</p>
<div className="flex flex-wrap gap-2 mb-4">
<span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs">React</span>
<span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs">Node.js</span>
<span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs">Stripe API</span>
</div>
<div className="flex justify-between items-center">
<span className="text-sm text-gray-500">2018</span>
<button className="text-indigo-600 hover:text-indigo-800 font-medium">Ver detalles →</button>
</div>
</div>
</div>
<div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
<img
src="https://placehold.co/600x400/red/white?text=SmartHome"
alt="Automatización Doméstica"
className="w-full h-48 object-cover"
/>
<div className="p-6">
<h3 className="text-xl font-bold text-gray-900 mb-2">Sistema de Automatización Doméstica</h3>
<p className="text-gray-700 mb-4">
Aplicación IoT para controlar dispositivos del hogar mediante una interfaz web intuitiva.
</p>
<div className="flex flex-wrap gap-2 mb-4">
<span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs">JavaScript</span>
<span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs">MQTT</span>
<span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs">Raspberry Pi</span>
</div>
<div className="flex justify-between items-center">
<span className="text-sm text-gray-500">2017</span>
<button className="text-indigo-600 hover:text-indigo-800 font-medium">Ver detalles →</button>
</div>
</div>
</div>
</div>
</div>
</section>
{/* Contact Section */}
<section id="contact" className="py-20 bg-indigo-600 text-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16">
<h2 className="text-3xl md:text-4xl font-bold mb-4">¿Trabajamos Juntos?</h2>
<p className="text-xl max-w-3xl mx-auto">
Estoy siempre interesado en nuevos desafíos y oportunidades para aplicar mis habilidades.
No dudes en contactarme para discutir cómo puedo contribuir a tu próximo proyecto.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
<div>
<h3 className="text-2xl font-bold mb-6">Información de Contacto</h3>
<div className="space-y-6">
<div className="flex items-center">
<div className="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-4">
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<div>
<p className="font-semibold">Email</p>
<p>[email protected]</p>
</div>
</div>
<div className="flex items-center">
<div className="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-4">
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
</div>
<div>
<p className="font-semibold">Teléfono</p>
<p>+52 55 1234 5678</p>
</div>
</div>
<div className="flex items-center">
<div className="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-4">
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<div>
<p className="font-semibold">Ubicación</p>
<p>Ciudad de México, México</p>
</div>
</div>
</div>
<div className="mt-10">
<h3 className="text-2xl font-bold mb-6">Redes Sociales</h3>
<div className="flex space-x-4">
<a href="#" className="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center hover:bg-opacity-30 transition duration-300">
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
</svg>
</a>
<a href="#" className="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center hover:bg-opacity-30 transition duration-300">
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
<a href="#" className="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center hover:bg-opacity-30 transition duration-300">
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
</a>
</div>
</div>
</div>
<div>
<h3 className="text-2xl font-bold mb-6">Envíame un Mensaje</h3>
<form className="space-y-6">
<div>
<label className="block text-sm font-medium mb-2">Nombre</label>
<input
type="text"
className="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white"
placeholder="Tu nombre"
/>
</div>
<div>
<label className="block text-sm font-medium mb-2">Email</label>
<input
type="email"
className="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white"
placeholder="[email protected]"
/>
</div>
<div>
<label className="block text-sm font-medium mb-2">Asunto</label>
<input
type="text"
className="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white"
placeholder="Asunto del mensaje"
/>
</div>
<div>
<label className="block text-sm font-medium mb-2">Mensaje</label>
<textarea
rows="5"
className="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white resize-none"
placeholder="Escribe tu mensaje aquí..."
></textarea>
</div>
<button
type="submit"
className="w-full bg-white text-indigo-600 font-bold py-3 rounded-lg hover:bg-gray-100 transition duration-300"
>
Enviar Mensaje
</button>
</form>
</div>
</div>
</div>
</section>
{/* Footer */}
<footer className="bg-gray-900 text-white py-12">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center">
<div className="text-2xl font-bold text-indigo-400 mb-4">Carlos Rodríguez</div>
<p className="text-gray-400 mb-6">Ingeniero de Software • Transformando ideas en realidad digital</p>
<div className="flex justify-center space-x-6 mb-8">
<a href="#" className="text-gray-400 hover:text-white transition duration-300">Inicio</a>
<a href="#" className="text-gray-400 hover:text-white transition duration-300">Sobre mí</a>
<a href="#" className="text-gray-400 hover:text-white transition duration-300">Proyectos</a>
<a href="#" className="text-gray-400 hover:text-white transition duration-300">Contacto</a>
</div>
<div className="border-t border-gray-800 pt-8">
<p className="text-gray-500">
© 2023 Carlos Rodríguez. Todos los derechos reservados.
</p>
</div>
</div>
</div>
</footer>
</div>
);
};
export default App;