Álvaro Ortega Hamel
Este portafolio está construido en HTML, CSS y JavaScript puro, utilizando como base la plantilla profesional Impact de BootstrapMade. Desde el inicio definí una estructura limpia y modular: los archivos HTML en la raíz del proyecto, los estilos en assets/css, los scripts en assets/js y todas las librerías externas organizadas dentro de assets/vendor.
Para dar forma a la interfaz e interacción del sitio, integré diversas tecnologías: Bootstrap 5 para la estructura visual, AOS para animaciones al hacer scroll, Swiper para sliders, Glightbox para la galería del portafolio, PureCounter para animaciones numéricas y Bootstrap Icons para la iconografía.
El archivo principal, index.html, contiene todas las secciones del sitio: Hero, Sobre mí, Servicios, Portafolio y Contacto. El archivo main.css concentra las reglas visuales, incluyendo tipografías, colores, layouts en Flex y Grid, además de ajustes personalizados para el template. En main.js se inicializan las librerías mencionadas: animaciones, sliders, el lightbox del portafolio y la lógica del menú móvil.
La sección Hero funciona como carta de presentación, con una imagen de fondo personalizada y un efecto de texto tipeado que destaca mis principales áreas de especialización, creando una primera impresión dinámica y moderna. En la sección de Experiencia, presento mi trayectoria audiovisual y mi transición hacia el desarrollo, integrando ambas áreas.
En la sección de Habilidades, utilizo barras de progreso animadas para representar distintos niveles tecnológicos. Para personalizarlas visualmente, asigné colores mediante clases de Bootstrap como bg-danger, bg-primary o bg-success, lo que añade identidad y facilita la lectura.
La galería del portafolio incluye tarjetas interactivas que muestran mis proyectos y permiten explorarlos mediante un visor tipo lightbox gracias a Glightbox. Además, incorpora filtros dinámicos que funcionan como pestañas, permitiendo separar los proyectos desarrollados en Python o JavaScript. Las imágenes se reorganizan dependiendo de la categoría seleccionada. Esta fue la sección con mayor grado de personalización, especialmente en la forma de organizar la información de cada proyecto.
Por último, la sección de Contacto utiliza los protocolos tel: y mailto: para permitir llamadas directas desde móviles y para abrir el cliente de correo predeterminado del usuario.
Este proyecto me permitió trabajar con una arquitectura ordenada, integrar múltiples librerías JavaScript y adaptar un template profesional a las necesidades reales de un portafolio técnico. Refleja mi transición desde una sólida trayectoria en producción audiovisual —más de 20 años de experiencia— hacia el desarrollo FullStack en Python/Django y JavaScript.
🔗 Sitio en línea: https://ortegahamel.github.io/Portfolio/
💻 Repositorio GitHub: https://github.com/OrtegaHamel/Portfolio
Video técnico donde se describe el proyecto y su funcionamiento
Soy Álvaro Ortega Hamel, desarrollador FullStack con experiencia en Python/Django y JavaScript, formado en dos bootcamps intensivos donde desarrollé proyectos aplicando metodologías ágiles, control de versiones con Git/GitHub y despliegue web con GitHub Pages.
Durante más de 20 años trabajé en el ámbito audiovisual, lo que me permitió fortalecer habilidades como la creatividad, resolución de problemas, liderazgo y trabajo en equipo. Actualmente, aplico esta experiencia en el desarrollo de soluciones web funcionales y bien estructuradas.
-
API Star Wars
página web interactiva desarrollada con HTML, CSS y JavaScript, que muestra información de personajes del universo Star Wars utilizando datos obtenidos desde la API pública SWAPI. -
Aplicación web para administrar música en vivo
Aplicación con backend Django que permite administrar música en vivo de forma eficiente mediante la creación, visualización, actualización y eliminación de eventos según los permisos del usuario. Además, ofrece un home público diseñado para mostrar la cartelera de manera atractiva. -
Aplicación web con Django
Aplicación diseñada para gestionar productos y usuarios. Incluye funcionalidades como autenticación, autorización, gestión de productos, y un panel de administración personalizado para gestionar usuarios y permisos. -
Aplicación web para gestionar tareas
Proyecto que integra conocimientos de desarrollo Frontend con validación de formularios, interacción con el DOM y diseño responsivo.
- HTML5
- CSS3
- JavaScript (Vanilla JS)
- Bootstrap 5
- AOS (Animate On Scroll)
- Swiper.js
- Glightbox
- PureCounter
- Bootstrap Icons
El portafolio actual no utiliza backend, pero estas son tecnologías que manejo en mi proceso como desarrollador FullStack:
- Python / Django
- Node.js / Express
- PostgreSQL
- MySQL
- SQLite
- Git & GitHub
- Visual Studio Code
- GitHub Pages (portafolio)
- Render (para proyectos backend)
Template Name: iPortfolio
Template URL: https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/
Author: BootstrapMade.com
License: https://bootstrapmade.com/license/