Portafolio personal responsive de Yared Henríquez (DevYHB) para presentar información profesional, servicios, certificaciones y un bloque de tecnologías con íconos (via Devicon). Incluye animaciones al hacer scroll, contadores, texto tipeado en el héroe, galería con lightbox, botón flotante de WhatsApp con modal y despliegue en GitHub Pages.
Sitio publicado: https://yared17.github.io/Responsive-PortfolioYHB/
- Características
- Stack y dependencias (CDN)
- Estructura del proyecto
- Secciones principales
- Cómo ejecutar en local
- Despliegue en GitHub Pages
- Rendimiento (cache busting)
- Solución de problemas
- Changelog 2025
- Autor
- ✅ Responsive (Bootstrap 5).
- 🌙 Modo oscuro básico mediante un botón
#bdarkque alterna la clasedarkmodeen<body>(persistencia enlocalStorage). - 🧭 Portafolio con filtros:
CertificacionesyTecnologías(dos categorías claras). - 🧩 Tecnologías con Devicon (CDN) → evita subir logos locales.
- 🖼️ Certificaciones con GLightbox (galería ampliable).
- ✨ AOS para animaciones al hacer scroll.
- ⌨️ Typed.js para el texto animado del héroe.
- 🔢 PureCounter para contadores del bloque “Facts”.
- 🧮 Isotope para el filtrado de elementos del portafolio.
- 💬 Botón flotante de WhatsApp con modal (abrir app/web, copiar número y QR).
- 🗺️ Mapa incrustado (Google Maps embed).
- 🚀 Despliegue estático en GitHub Pages (branch
main, carpeta raíz).
Nota: No se está usando internacionalización (ES/EN) en el código actual. Si se añade en el futuro, se puede documentar aquí.
- Bootstrap 5.3.3 (CSS/JS)
- Bootstrap Icons y Boxicons (iconografía)
- AOS 2.3.4 (animaciones on scroll)
- GLightbox 3.2.0 (lightbox galerías)
- Isotope 3 (filtrado del portafolio)
- PureCounter (contadores)
- Swiper 11 (incluido por plantilla; uso opcional)
- Typed.js 2.1.0 (texto “tipeado” en el héroe)
- Waypoints (dependencia para algunos efectos de scroll en plantillas)
- Devicon (íconos de tecnologías)
- php-email-form/validate.js (incluido por plantilla; actualmente no hay formulario de contacto)
Responsive-PortfolioYHB/
├─ assets/
│ ├─ css/
│ │ └─ style.css
│ ├─ img/
│ │ ├─ profile-img.jpg
│ │ └─ portfolio/
│ │ ├─ portfolio-1.jpg
│ │ ├─ portfolio-2.jpg
│ │ └─ ...
│ └─ js/
│ └─ main.js
├─ index.html
└─ README.md
Los vendors se cargan por CDN; no hay carpeta
assets/vendor/local.
- Header / Sidebar: foto, enlaces sociales, navegación y botón de modo oscuro (
#bdark). - Hero: nombre + rol con Typed.js (
data-typed-items="...") y animacióndata-aos="fade-in". - About: perfil, resumen, “Qué hago” y “Diferenciales”.
- Facts: métricas con PureCounter.
- Skills: barras de progreso (estáticas).
- Resume: educación y experiencia.
- Portfolio:
- Filtros (Isotope):
Todo,Certificaciones,Tecnologías. - Certificaciones: tarjetas
filter-certcon GLightbox. - Tecnologías: grilla
filter-techcon íconos Devicon (ej.:devicon-python-plain).
- Filtros (Isotope):
- Services: tarjetas de servicios; íconos con Bootstrap Icons.
- Contact: email y mapa embebido (Google Maps).
- Footer.
- Botones flotantes: WhatsApp (abre modal) y Back-to-top.
El modal de WhatsApp permite: abrir WhatsApp app/web, copiar el número y mostrar un QR (vía
api.qrserver.comcon la URL dewa.me).
- Clona el repo:
git clone https://github.com/yared17/Responsive-PortfolioYHB.git cd Responsive-PortfolioYHB - Abre
index.htmldirectamente en tu navegador o levanta un server local:# Python 3 python -m http.server 8080 # abre: http://localhost:8080
Configuración recomendada:
- Settings → Pages
- Build and deployment → Source: Deploy from a branch
- Branch:
main - Folder:
/ (root)
Cada commit en main dispara el workflow de Pages y publica el sitio en:
https://yared17.github.io/Responsive-PortfolioYHB/
Para evitar que el navegador muestre versiones antiguas de tus assets, puedes versionar las URLs:
<link rel="stylesheet" href="assets/css/style.css?v=2025">
<script src="assets/js/main.js?v=2025"></script>Asegúrate de no duplicar el CSS/JS principal (cargar una sola vez con la versión).
Para CDNs externos, no es necesario agregar?v=....
No aparecen los íconos de Tecnologías
- Verifica que el CDN de Devicon esté en
<head>:<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
- Confirma que las clases existen (p.ej.
devicon-flask-original).
Los filtros de portafolio no funcionan
- Asegura que cada tarjeta tenga
portfolio-itemy la clase de filtro correcta (filter-certofilter-tech). - Que Isotope esté cargado antes de la inicialización en
main.js.
El héroe no “tipea”
- Verifica Typed.js en el HTML.
- Confirma que el elemento tiene
class="typed"y el atributodata-typed-itemscon la lista separada por comas.
Contadores no suben
- Revisa PureCounter y que los
data-purecounter-*estén bien en cada<span>.
El modal de WhatsApp no abre / no reacciona
- Revisa que Bootstrap JS (bundle) esté cargado y que el
id="whatsappModal"exista. - Si el botón flotante no responde, asegúrate de no aplicar
transformglobales que rompan el hover/click (el CSS incluye correcciones para esto).
La página publicada no refleja cambios
- Verifica Actions → pages-build-deployment (debe estar en verde).
- Fuerza recarga: Ctrl+F5 o sube el número de versión en
?v=2025.
- Simplificación de filtros del portafolio a Certificaciones y Tecnologías.
- Bloque Tecnologías con Devicon via CDN (sin imágenes locales).
- Botón flotante de WhatsApp con modal (abrir app/web, copiar, QR).
- Integración de AOS, GLightbox, Isotope, Typed.js, PureCounter (vía CDN).
- Ajustes de estilo y mejoras de UX (hover, estabilidad de botones flotantes).
- Despliegue en GitHub Pages desde
main(carpeta raíz). - Opción de cache busting en CSS/JS (
?v=2025).
Yared Henríquez (DevYHB)
- GitHub: https://github.com/yared17
- Email: yared2017@gmail.com
- Sitio publicado: https://yared17.github.io/Responsive-PortfolioYHB/