Portafolio Bootcamp de JavaScript
Implementé una barra de navegación fija con scroll suave, enlaces a todas las secciones del portafolio, y navegación responsive con menú hamburguesa para dispositivos móviles.
Desarrollé una galería de proyectos con efectos hover, overlays informativos, y enlaces directos a cada proyecto. Incluye proyectos frontend (Gestión de Tareas, Cute Shop) y fullstack (App Gestor de Usuarios, Sistema de Inventario).
Creé tarjetas interactivas que muestran mis habilidades en Frontend (HTML, CSS, JavaScript, Bootstrap), Backend (Node.js, Express, PostgreSQL), y herramientas (Git, GitHub). Cada tarjeta incluye contexto de uso y ejemplos.
Todo el portafolio está completamente optimizado para dispositivos móviles, tablets y desktop usando Bootstrap 5 y CSS Grid/Flexbox.
Integré la librería AOS (Animate On Scroll) para crear transiciones suaves y profesionales al hacer scroll por las secciones.
Creé páginas detalladas para cada proyecto principal con explicaciones técnicas, diagramas, capturas de pantalla y documentación del código.
El portafolio está completamente desplegado y funcionando en GitHub Pages, accesible públicamente en magdaig.github.io/portafoliojs/
Algunas imágenes podrían optimizarse mejor para reducir el tiempo de carga. Podría implementar lazy loading y formatos WebP para mejorar el rendimiento.
Agregar una funcionalidad de búsqueda para filtrar proyectos por tecnología o palabra clave mejoraría la experiencia del usuario.
Implementar un toggle para modo oscuro/claro sería una mejora significativa en la experiencia de usuario y accesibilidad.
Actualmente el formulario de contacto es estático. Podría integrarlo con un servicio como Formspree o EmailJS para hacerlo funcional.
Agregar soporte para múltiples idiomas (español/inglés) mejoraría el alcance del portafolio.
Una sección de blog donde pueda compartir aprendizajes, tutoriales y reflexiones técnicas añadiría valor educativo al portafolio.
Descripción: En algunos dispositivos móviles antiguos, las animaciones AOS pueden causar un pequeño retraso en la carga inicial.
Solución aplicada: Agregué un fallback para deshabilitar animaciones en dispositivos con bajo rendimiento usando media queries y detección de capacidad del dispositivo.
Descripción: Algunos enlaces en el README.md apuntaban a rutas incorrectas después de reorganizar la estructura del proyecto.
Solución aplicada: Actualicé todos los enlaces relativos y absolutos en el README para que apunten correctamente a los archivos HTML.
Descripción: Algunos elementos interactivos no tenían suficiente contraste de color y faltaban etiquetas ARIA para lectores de pantalla.
Solución aplicada: Mejoré el contraste de colores según WCAG 2.1 y agregué atributos ARIA donde era necesario.
Reorganicé el archivo CSS en secciones lógicas (variables, reset, layout, componentes, utilidades) y eliminé código duplicado. Esto mejoró la mantenibilidad del código.
Consolidé múltiples scripts en funciones reutilizables, eliminé código muerto y mejoré el manejo de eventos para evitar memory leaks.
Reemplacé divs genéricos por elementos semánticos (section, article, nav, header, footer) para mejorar SEO y accesibilidad.
Corregí todos los errores de validación HTML5 usando el validador W3C, incluyendo atributos faltantes y etiquetas mal cerradas.
Mejoras de Legibilidad:
Mejoras de Eficiencia:
Creé un README.md exhaustivo que incluye:
Agregué comentarios explicativos en secciones clave del código HTML, CSS y JavaScript para facilitar el mantenimiento futuro y ayudar a otros desarrolladores a entender la lógica.
Cada proyecto principal tiene su propia página HTML con documentación detallada que incluye:
Compartí mi proyecto con compañeros del bootcamp, instructores y desarrolladores de la comunidad. A continuación, registro los puntos de mejora más relevantes:
Feedback: "La sección 'Sobre Mí' es informativa pero podría ser más personal y visual. Considera agregar una foto profesional y una historia más narrativa de tu trayectoria."
Fuente: Instructor del Bootcamp
Feedback: "Los proyectos están bien presentados, pero sería más impactante si incluyeras métricas concretas (por ejemplo: 'Aplicación utilizada por X usuarios', 'Mejoró el tiempo de carga en Y%'). Esto demuestra el impacto real de tu trabajo."
Fuente: Desarrollador Senior (Mentor)
Feedback: "Aunque el sitio es responsive, algunos elementos interactivos (como los overlays de proyectos) podrían tener mejor feedback táctil en dispositivos móviles. Considera agregar animaciones más suaves y áreas de toque más grandes."
Fuente: Compañero del Bootcamp (UX Designer)
Agregaré una foto profesional en la sección "Sobre Mí" y reescribiré el contenido con un enfoque más narrativo que cuente mi historia de transición a la programación, destacando mi formación pedagógica y cómo se conecta con mi pasión por el desarrollo.
Estado: Completado - Foto agregada y contenido reescrito
Agregaré una sección de "Logros y Métricas" en cada proyecto principal. Incluiré información como: número de commits, tecnologías dominadas, tiempo de desarrollo, y cualquier métrica relevante que pueda obtener de GitHub Analytics.
Estado: En progreso - Agregando métricas de GitHub a proyectos principales
Mejoraré la experiencia táctil agregando:
Estado: Completado - Mejoras de UX móvil implementadas
Pruebas Realizadas:
Código HTML semántico y validado
CSS organizado con variables y comentarios
JavaScript modular y comentado
Estructura de carpetas lógica
README.md detallado
Comentarios en código
Documentación de proyectos individuales
Instrucciones de uso
Capturas de pantalla de todas las secciones
Screenshots de proyectos individuales
Diagramas y esquemas técnicos
Mockups y wireframes
Repositorio GitHub público
Sitio desplegado en GitHub Pages
Enlaces a proyectos individuales
Enlaces a demos en vivo
Mi portafolio web es una aplicación frontend completa desarrollada durante el Bootcamp de JavaScript. Es una vitrina digital profesional que presenta mis proyectos, habilidades técnicas y experiencia de aprendizaje de manera didáctica y accesible.
Características Principales:
Stack Tecnológico:
Desarrollar este portafolio ha sido una experiencia transformadora que va mucho más allá de simplemente crear un sitio web. Ha sido un viaje de autoconocimiento profesional, crecimiento técnico y consolidación de mi identidad como desarrolladora.
Al inicio del bootcamp, crear un portafolio completo parecía un desafío abrumador. Sin embargo, cada línea de código, cada decisión de diseño y cada proyecto agregado me enseñó algo nuevo. Lo que comenzó como una tarea académica se convirtió en una herramienta profesional real que ahora uso para presentarme al mundo.
Uno de los aprendizajes más valiosos fue entender la importancia de la documentación. Inicialmente, me enfoqué solo en hacer que el código funcionara, pero al revisar y mejorar el proyecto, me di cuenta de que la documentación es tan importante como el código mismo. Ahora, cada proyecto que creo incluye documentación detallada, no solo para otros, sino para mi yo futuro que necesitará entender decisiones pasadas.
El proceso de recibir feedback y aplicar mejoras fue especialmente enriquecedor. Aprendí que el código nunca está "terminado" y que siempre hay oportunidades de mejora. La humildad para aceptar críticas constructivas y la disciplina para implementar cambios son habilidades que trascienden la programación.
Como desarrolladora con formación pedagógica, este portafolio también representa mi compromiso con la educación. Cada proyecto está documentado de manera que otros estudiantes puedan aprender de él. Esta perspectiva educativa no solo beneficia a otros, sino que también profundiza mi propio entendimiento de los conceptos.
Finalmente, este proyecto me enseñó que la programación es tanto arte como ciencia. La atención al detalle, la búsqueda de la elegancia en el código, y la creación de experiencias de usuario significativas requieren creatividad, paciencia y pasión. Estoy orgullosa del resultado final, pero más importante aún, estoy emocionada por las mejoras futuras que continuaré implementando.
Este portafolio no es solo un proyecto del bootcamp; es un espacio de crecimiento pedagógico donde puedo documentar mi aprendizaje, compartir conocimiento y continuar desarrollándome tanto como desarrolladora como educadora.
Repositorio GitHub: github.com/MagdaIG/portafoliojs
Sitio en Línea: magdaig.github.io/portafoliojs/
Documento generado el