🤖 AI Portfolio Chat

Un portfolio tecnológico innovador que simula una conversación con inteligencia artificial, pero funciona completamente offline con respuestas pre-programadas. Perfecto para impresionar a reclutadores y demostrar habilidades técnicas.

🚀 Características

• Chat Interactivo: Simula conversaciones naturales con IA
• Respuestas Inteligentes: Base de conocimiento contextual pre-programada
• Diseño Moderno: Interfaz atractiva con Tailwind CSS
• Responsive: Funciona perfectamente en móviles y desktop
• Sin Dependencias Externas: No requiere APIs ni servicios externos
• Fácil Despliegue: Listo para GitHub Pages
• SEO Optimizado: Metadatos y estructura optimizada

🛠️ Stack Tecnológico

• Frontend: Vue.js 3 (Composition API)
• Styling: Tailwind CSS
• Icons: Lucide Vue Next
• Build Tool: Vite
• Deployment: GitHub Pages
• Node.js: 18+

📦 Instalación

Prerrequisitos

• Node.js 18 o superior
• npm o yarn

Pasos de instalación

1. Clonar el repositorio ```bash git clone https://github.com/tu-usuario/ai-portfolio-chat.git cd ai-portfolio-chat ```

2. Instalar dependencias ```bash npm install ```

3. Ejecutar en desarrollo ```bash npm run dev ```

4. Construir para producción ```bash npm run build ```

🚀 Despliegue

GitHub Pages (Automático)

1. Configurar el repositorio:

   • Ve a Settings > Pages
   • Selecciona "GitHub Actions" como source

2. Push a main: ```bash git add . git commit -m "Deploy portfolio" git push origin main ```

3. El sitio estará disponible en: https://tu-usuario.github.io/ai-portfolio-chat/

Despliegue Manual

```bash npm run build npm run deploy ```

⚙️ Personalización

1. Información Personal

Edita src/composables/useKnowledgeBase.js:

```javascript const knowledgeBase = ref({ experiencia: { keywords: ['experiencia', 'trabajo', 'laboral'], response: Tu experiencia aquí... }, // ... más categorías }) ```

2. Stack Tecnológico

Modifica el array en src/App.vue:

```javascript const techStack = [ 'Tu', 'Stack', 'Tecnológico', 'Aquí' ] ```

3. Información de Contacto

Actualiza los enlaces en src/components/AppFooter.vue:

```vue ```

4. Metadatos SEO

Edita index.html:

```html

\`\`\`

🎯 Características para Reclutadores

Para RRHH:

• ✅ Interfaz intuitiva y profesional
• ✅ Información estructurada sobre experiencia
• ✅ Respuestas sobre expectativas salariales
• ✅ Datos de contacto fácilmente accesibles

Para Líderes Técnicos:

• ✅ Demostración práctica de habilidades
• ✅ Código limpio y bien estructurado
• ✅ Arquitectura escalable con composables
• ✅ Implementación de mejores prácticas

📁 Estructura del Proyecto

``` ai-portfolio-chat/ ├── src/ │ ├── components/ # Componentes Vue │ │ ├── AppHeader.vue │ │ ├── WelcomeSection.vue │ │ ├── ChatMessages.vue │ │ ├── ChatInput.vue │ │ ├── TechStack.vue │ │ └── AppFooter.vue │ ├── composables/ # Lógica reutilizable │ │ ├── useKnowledgeBase.js │ │ └── useChat.js │ ├── App.vue # Componente principal │ ├── main.js # Punto de entrada │ └── style.css # Estilos globales ├── public/ # Archivos estáticos ├── .github/workflows/ # GitHub Actions ├── package.json ├── vite.config.js ├── tailwind.config.js └── README.md ```

🔧 Scripts Disponibles

```bash npm run dev # Servidor de desarrollo npm run build # Build para producción npm run preview # Preview del build npm run deploy # Deploy a GitHub Pages ```

🎨 Personalización de Estilos

El proyecto usa Tailwind CSS con configuración personalizada:

• Colores: Gradientes purple/pink para el tema principal
• Animaciones: Efectos suaves y profesionales
• Responsive: Mobile-first design
• Dark Mode: Soporte completo para tema oscuro

📱 Responsive Design

• Mobile: Optimizado para pantallas pequeñas
• Tablet: Layout adaptativo
• Desktop: Experiencia completa

🔍 SEO y Performance

• Meta Tags: Optimizados para redes sociales
• Performance: Lazy loading y code splitting
• Accessibility: ARIA labels y navegación por teclado
• Core Web Vitals: Optimizado para métricas de Google

🤝 Contribuciones

¡Las contribuciones son bienvenidas! Por favor:

1. Fork el proyecto
2. Crea una rama para tu feature
3. Commit tus cambios
4. Push a la rama
5. Abre un Pull Request

📄 Licencia

Este proyecto está bajo la Licencia MIT. Ver LICENSE para más detalles.

📞 Contacto

• Email: tu.email@ejemplo.com
• LinkedIn: tu-perfil
• GitHub: tu-usuario

---

⭐ ¡Si te gusta este proyecto, dale una estrella en GitHub! ```

Archivo de licencia:

MIT License

Copyright (c) 2024 Tu Nombre

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.