# 🤖 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 Profile

Edita `src/composables/useKnowledgeBase.ts`:

\`\`\`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
<a href="https://github.com/tu-usuario" target="_blank">
<a href="https://linkedin.com/in/tu-perfil" target="_blank">
<a href="mailto:tu.email@ejemplo.com">
\`\`\`

### 4. Metadatos SEO

Edita `index.html`:

\`\`\`html
<meta name="description" content="Tu descripción personalizada" />
<meta name="author" content="Tu Nombre" />
<meta property="og:title" content="Tu Título" />
\`\`\`

## 🎯 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.ts
│ │ └── useChat.ts
│   ├── App.vue             # Componente principal
│ ├── main.ts # 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](https://linkedin.com/in/tu-perfil)
- **GitHub**: [tu-usuario](https://github.com/tu-usuario)

---

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

Archivo de licencia:

```text file="LICENSE"
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.