🎥 Video de Implementación: YouTube
🌎 Visita mi Portafolio: GitHub Pages
Este proyecto es mi portafolio personal que muestra mis habilidades y proyectos como desarrollador web Fullstack. Está construido con tecnologias modernas para presentar de manera profesional y atractiva mi trabajo y trayectoria profesional.
- Diseño responsivo: Adaptado para dispositivos móviles, tablets y desktops.
- Cambio de tema: Modo oscuro (predeterminado) y claro con animación (aun no).
- Secciones dinámicas: Proyectos y blogs generados desde datos en JavaScript.
- Modal de blogs: Vista detallada de artículos/blogs con imágenes y contenido completo.
- Optimización: Carga rápida con JavaScript crítico inline y lazy loading de imágenes.
HTML5
, CSS3
, Javascript(ES6+)
, Responsive Design
, BEM Notation
- Frontend: HTML5, CSS3, JavaScript (ES6 Modules)
- Estilos: BEM Notation, CSS Variables, animaciones personalizadas
- Despliegue: GitHub Pages
- Fuentes/Icons: Google Fonts (Poppins, Black Han Sans), Font Awesome
popehiflo.github.io/
├── public/
│ └── assets/
│ └── imgs/ # Imágenes estáticas
├── src/
│ ├── data/ # Datos de proyectos y blogs (MOCKDATA.js)
│ ├── styles/ # Estilos globales (index.css)
│ ├── utils/ # Lógica JS modular (secciones, tema, etc.)
│ └── index.js # Punto de entrada JS
├── index.html # Estructura principal
├── logo.svg # Logo personal
├── LICENSE # Licencia MIT
└── README.md # Este archivo
- Explorar localmente:
- Clona el repositorio:
git clone https://github.com/popehiflo/popehiflo.github.io.git
- Abre
index.html
en un navegador.
- Clona el repositorio:
- Ver en vivo:
- Visita popehiflo.github.io.
- Requisitos: Solo un navegador moderno (no se necesitan dependencias adicionales).
- Modificar contenido: Edita
src/data/MOCKDATA.js
para añadir proyectos o blogs. - Estilos: Personaliza
src/styles/index.css
según tus necesidades.
Este proyecto está bajo la Licencia MIT.
¡Gracias por visitar mi portafolio! Si tienes sugerencias o quieres colaborar, no dudes en contactarme.
⌨️ con ❤️ por popehiflo