Una landing page moderna y profesional que implementa el wireframe y storytelling especificado para mostrar experiencia en ML, LLMs, Agentes, MCP, RAG e Infraestructura.
portafolio/
├── 📄 index.html # Página principal
├── 📄 package.json # Configuración del proyecto
├── 📄 .gitignore # Archivos a ignorar en Git
├── 📁 .github/
│ └── 📁 workflows/
│ └── 📄 deploy.yml # CI/CD para GitHub Pages
├── 📁 css/
│ ├── 📄 styles.css # Estilos principales
│ └── 📄 forms.css # Estilos para formularios
├── 📁 js/
│ ├── 📄 main.js # JavaScript principal
│ ├── 📄 projects.js # Gestión de proyectos
│ └── 📄 contact.js # Funcionalidad de contacto
├── 📁 pages/
│ ├── 📄 about.html # Página sobre mí
│ └── 📄 contact.html # Página de contacto
├── 📁 assets/
│ ├── 📁 images/
│ │ ├── 📄 logo.svg # Logo personalizado
│ │ ├── 📄 placeholder.svg # Imagen placeholder
│ │ ├── 📁 projects/ # Thumbnails de proyectos
│ │ │ ├── 📄 cmab-thumbnail.jpg
│ │ │ ├── 📄 llm-assistant-thumbnail.jpg
│ │ │ ├── 📄 whatsapp-agent-thumbnail.jpg
│ │ │ ├── 📄 mcp-coordination-thumbnail.jpg
│ │ │ ├── 📄 rag-docs-thumbnail.jpg
│ │ │ └── 📄 mlops-pipeline-thumbnail.jpg
│ │ └── 📁 tech/ # Logos de tecnologías
│ │ ├── 📄 databricks.svg
│ │ ├── 📄 mlflow.svg
│ │ ├── 📄 azure.svg
│ │ ├── 📄 docker.svg
│ │ ├── 📄 kubernetes.svg
│ │ ├── 📄 langchain.svg
│ │ ├── 📄 vowpalwabbit.svg
│ │ └── 📄 huggingface.svg
│ └── 📁 docs/
│ └── 📄 cv.pdf # CV en PDF
└── 📄 README.md # Documentación
- Grid: 12 columnas, contenedor máximo 1200px, gutters 24px
- Espaciado: Secciones (mt-24 mb-24), bloques (mt-8 mb-8), elementos (mt-4 mb-4)
- Colores: Turquesa
#06B6D4, Azul#3B82F6, Texto Navy#0F172A - Tipografía: Inter con pesos 700 (headings), 500 (subheads), 400 (body)
- Cards: Radio 16-20px, sombra suave, hover-lift 4px
- Botones: Primario turquesa, secundario contorno azul
- Hero: Título principal + subtítulo + CTAs
- Sobre mí: Avatar + badges + descripción profesional
- Proyectos: Hub con filtros por categoría (ML, LLMs, Agentes, MCP, RAG, Infra/Stack)
- Timeline: Camino de valor mostrando evolución ML → RAG → Agentes → MCP → Infra
- Spotlight: Proyecto destacado con demo y métricas
- Tech Stack: Logos de tecnologías
- CTA: Llamada a la acción final
- Footer: Enlaces sociales
- Filtros de proyectos: JavaScript para filtrar por categoría
- Navegación suave: Scroll suave entre secciones
- Responsive: Diseño adaptativo para móviles y tablets
- Animaciones: Efectos hover y transiciones suaves
- Accesibilidad: Contraste AAA, alt text, navegación por teclado
- Formulario de contacto: Validación y envío por email
- Páginas adicionales: About y Contact con contenido específico
ML (Predicción)
- Headline: "Predicción accionable para impacto inmediato"
- Problema: Bajo hit-rate en campañas crediticias
- Solución: Modelos de propensión y uplift con validación estricta
- Impacto: +12% conversión; ahorro 18% costo por adquisición
LLMs
- Headline: "Comprensión semántica y generación controlada"
- Problema: Textos de clientes dispersos (emails, tickets, notas)
- Solución: LLM con prompts evaluables y guardrails
- Impacto: -35% Tiempos de respuesta; +NPS
Agentes
- Headline: "De insights a acciones automáticas"
- Problema: Respuesta lenta a leads multicanal
- Solución: Agentes orquestados con herramientas y políticas
- Impacto: 24/7; +x% conversión inbound
MCP (Multi-Agent Coordination Protocol)
- Headline: "Coordinación fiable entre agentes"
- Problema: Agentes aislados, resultados inconsistentes
- Solución: MCP para negociación, asignación de tareas y trazabilidad
- Impacto: Menos errores, más throughput
RAG
- Headline: "Conocimiento propio, respuestas precisas"
- Problema: Hallucinations y falta de contexto
- Solución: RAG con indexación de documentos (chunking, reranking)
- Impacto: +Exactitud; -Costos por token
Infra/Stack
- Headline: "Listo para producción y escala"
- Problema: Prototipos que no llegan a prod
- Solución: Contenerización, CI/CD, despliegue K8s
- Impacto: Releases confiables; costos controlados
- Edita el archivo
js/projects.jscon los datos de tus proyectos - Agrega las imágenes en
assets/images/projects/ - Actualiza los enlaces de repositorios y demos
- Edita las variables CSS en
:rootencss/styles.css - Los colores principales son
--turquoise,--blue,--navy
- Sigue la estructura de las cards existentes
- Usa las clases CSS definidas para mantener consistencia
- Actualiza los filtros JavaScript si agregas nuevas categorías
- Desktop: Layout completo con grid de 12 columnas
- Tablet: Adaptación de columnas y espaciado
- Mobile: Stack vertical, navegación simplificada
- Sube los archivos a un repositorio de GitHub
- Habilita GitHub Pages en Settings > Pages
- Selecciona la rama main como fuente
- El workflow de GitHub Actions se ejecutará automáticamente
# Instalar dependencias
npm install
# Servidor de desarrollo
npm start
# Construir para producción
npm run build- Cualquier host estático (Netlify, Vercel, etc.)
- Solo necesitas los archivos HTML, CSS y JS
La landing page está diseñada para mostrar:
- Experiencia técnica: Stack moderno y proyectos diversos
- Impacto de negocio: Métricas claras en cada proyecto
- Evolución profesional: Timeline que conecta ML → Agentes
- Disponibilidad: CTAs claros para contacto
- Agregar proyectos reales: Reemplazar placeholders con proyectos actuales
- Optimizar imágenes: Agregar thumbnails y GIFs de demos reales
- SEO: Meta tags adicionales y structured data
- Analytics: Google Analytics o similar
- Formulario de contacto: Implementar backend para formulario
- Blog: Agregar sección de artículos técnicos
- Email: heligonzalespe@gmail.com
- LinkedIn: linkedin.com/in/heligonzalespe
- GitHub: github.com/heligonzalespe
MIT License - Ver archivo LICENSE para más detalles.