244 lines
6.4 KiB
Markdown
244 lines
6.4 KiB
Markdown
# 🤖 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.
|