Magdalena Inalaf

Sobre Mí

Soy Magdalena, desarrolladora fullstack chilena y programadora analista con formación en pedagogía. Me adentré en la tecnología a través de bootcamps intensivos y certificaciones, incluyendo un programa reciente en Fundamentos de Gestión y Control de Ciberseguridad en USACH.

Me especializo en desarrollo frontend y backend, creando aplicaciones responsivas centradas en el usuario utilizando tecnologías JavaScript modernas. Mi trayectoria académica también incluye UX/UI, Metodologías Ágiles y desarrollo Fullstack JavaScript.

Propósito de este Portafolio

Este portafolio fue creado durante mi Bootcamp de JavaScript para documentar mi crecimiento técnico. Desde aprender los fundamentos de HTML y CSS, progresé hacia la creación de aplicaciones dinámicas con JavaScript, jQuery y Bootstrap.

Here I showcase classwork, mini-projects, and hands-on exercises that reflect the skills I’ve developed and my passion for continuous learning.

Propósito del Portafolio

Lo que He Aprendido en JavaScript

Un resumen de las tecnologías y conceptos que he dominado en JavaScript durante mi desarrollo profesional.

Estas habilidades han sido aplicadas en proyectos reales como App Gestor de Usuarios, Gestor de Contactos, Gestor de Productos y Sistema Kanban, demostrando mi capacidad para crear aplicaciones web completas y funcionales.

Frontend Development

Manipulación del DOM

Aprendí cómo acceder y modificar elementos HTML usando JavaScript y jQuery. Por ejemplo, actualizar dinámicamente tarjetas de libros o establecer valores de formularios.

Se aplicó en: LibroLibre, Cute Shop, Gestión de Tareas 
document.getElementById("title").textContent = "¡Actualizado!"
Manejo de Eventos

Usé event listeners para detectar acciones del usuario como clics y envíos de formularios, creando interfaces interactivas y responsivas.

Se aplicó en: Todos los proyectos frontend 
$('.btn').click(() => alert("¡Clickeado!"))
Integración Bootstrap + JS

Usé modales de Bootstrap y controlé dinámicamente su visibilidad con JavaScript para simular flujos de aplicación profesionales.

Se aplicó en: CineFlash, Gestión de Tareas, Portafolio 
const modal = new bootstrap.Modal(...)
Filtrado y Búsqueda

Creé sistemas de filtrado dinámico para productos y búsqueda en tiempo real, mejorando la experiencia de navegación del usuario.

Se aplicó en: LibroLibre, Cute Shop, Gestor de Productos 
products.filter(p => p.name.includes(searchTerm))

User Experience & Interaction

Drag & Drop API

Desarrollé funcionalidad de arrastrar y soltar para mover tareas entre columnas en el sistema Kanban, creando una experiencia interactiva moderna.

Se aplicó en: Sistema Kanban de Gestión de Tareas 
element.addEventListener('dragstart', handleDragStart)
Retroalimentación Dinámica

Apliqué setTimeout para efectos de temporización como mostrar mensajes de confirmación o transiciones después de acciones del usuario.

Se aplicó en: CineFlash, Gestión de Tareas 
setTimeout(() => modal.show(), 500)
Interfaz Kanban

Desarrollé una interfaz tipo Kanban completa con columnas dinámicas, permitiendo organizar y gestionar tareas de forma visual e intuitiva.

Se aplicó en: Sistema de Gestión de Tareas 
createKanbanColumn(status)
Validación de Formularios

Validé formularios manualmente antes de enviar o actualizar la interfaz, como verificar si todos los campos fueron llenados correctamente.

Se aplicó en: Todos los formularios de los proyectos 
if (input.value.trim() === "") alert("¡Requerido!")

Data Management

LocalStorage & Persistencia

Implementé almacenamiento local para guardar datos del usuario como carrito de compras y tareas, manteniendo la información entre sesiones.

Se aplicó en: Cute Shop, Gestión de Tareas 
localStorage.setItem('cart', JSON.stringify(cart))
Gestión de Estado

Manejé estados complejos de aplicaciones como el carrito de compras y el sistema de tareas, manteniendo la sincronización entre componentes.

Se aplicó en: Cute Shop, Gestión de Tareas 
updateCartState(newItem)
Atributos de Datos

Capturé valores personalizados de HTML usando atributos data-* para pre-llenar formularios o rastrear selecciones del usuario.

Se aplicó en: CineFlash, LibroLibre 
const peli = $(this).data('pelicula')
Autenticación Simulada

Implementé sistemas de autenticación básicos con validación de credenciales y gestión de sesiones de usuario.

Se aplicó en: Gestión de Tareas, Gestor de Contactos 
if (user.email && user.password) login()

Mi Viaje Web

Portafolio HTML/CSS
2023 – Primer Portafolio en HTML/CSS

Creé mi primer portafolio estático enfocado en productos artesanales usando HTML, CSS y un poco de JavaScript.

Ver proyecto →
Portafolio Vue
2024 – Portafolio Vue

Desarrollé un portafolio más dinámico y modular usando Vue.js. Practiqué arquitectura basada en componentes y enrutamiento.

Ver portafolio Vue →
Portafolio Next.js
2025 – Portafolio Actual con Next.js

Este portafolio es el resultado de mi viaje en el Bootcamp de JavaScript. Construido con Next.js, responsivo y dinámico.

Visitar inalaf.ca →

Proyectos de Portafolio

Aquí encontrarás mis proyectos más recientes desarrollados con JavaScript moderno y PostgreSQL. Cada uno demuestra diferentes habilidades y tecnologías que he aprendido y aplicado en el desarrollo web.

Gestión de Tareas - Kanban Board
Gestión de Tareas

Sistema Kanban completo

Ver Proyecto

Gestión de Tareas

Sistema completo de gestión de tareas con interfaz tipo Kanban. Permite crear, editar, mover entre columnas y eliminar tareas de forma interactiva.

Características principales:

  • Interfaz tipo Kanban con columnas: Borrador, En progreso, Edición, Completada
  • Drag & drop para mover tareas entre columnas
  • Sistema de autenticación y gestión de usuarios
  • Persistencia de datos en localStorage
  • Diseño responsive y moderno
Cute Shop - E-commerce
Cute Shop

Tienda online de joyería

Ver Proyecto

Cute Shop - E-commerce

Tienda online de joyería con catálogo dinámico, carrito de compras y sistema de filtros por categorías. Interfaz moderna y funcional.

Características principales:

  • Catálogo de productos con filtros por categorías
  • Carrito de compras funcional con persistencia
  • Búsqueda de productos en tiempo real
  • Diseño responsive y atractivo
  • Sistema de notificaciones de stock
Gestión de Inventario - PostgreSQL
Gestión de Inventario

Sistema con base de datos relacional

Ver Proyecto

Gestión de Inventario - PostgreSQL

Sistema completo de gestión de inventario utilizando bases de datos relacionales en PostgreSQL y visualización en DBeaver.

Características principales:

  • Diseño de modelo entidad-relación (ERD) con DBeaver
  • Creación de tablas con relaciones y llaves foráneas
  • Consultas complejas, joins y subconsultas
  • Uso de funciones agregadas, filtros y triggers
  • Sistema de control de stock y proveedores
Gestión de Inventario v2.0 - Mejorado
Inventario v2.0

Versión mejorada con validaciones y funciones

Ver Proyecto

Gestión de Inventario v2.0 - Mejorado

Versión mejorada del sistema de inventario con validaciones avanzadas, funciones personalizadas y documentación completa.

Nuevas características:

  • Validaciones de integridad y consistencia de datos
  • Funciones SQL personalizadas para reportes
  • Triggers mejorados con validación de stock
  • Documentación completa por módulos
  • Scripts de validación automatizados
  • Normalización hasta 3FN explicada
PostgreSQL PL/pgSQL Validaciones Git Submodule
Gestión de Productos - Node.js
Gestión de Productos

Aplicación web completa con Node.js

Ver Proyecto

Gestión de Productos - Node.js

Aplicación web backend desarrollada con Node.js y Express para gestión de productos de tienda en línea. Implementa persistencia de datos, manejo de archivos y servidor web completo.

Características principales:

  • Servidor Express con rutas dinámicas y estáticas
  • Persistencia de datos en archivos JSON con fs
  • CRUD completo para gestión de productos
  • Manejo de formularios y subida de imágenes
  • Gestión de dependencias con npm
  • Manejo de errores y middleware personalizado
Node.js Express EJS fs Module npm
Gestor de Contactos - Aplicación web
Gestor de Contactos

Aplicación con enfoque UX/UI

Ver Proyecto

Gestor de Contactos - Node.js

Aplicación web moderna desarrollada con Node.js y Express para gestión completa de contactos. Implementa CRUD completo, persistencia en archivos de texto y enfoque en UX/UI.

Características principales:

  • Servidor Express con motor de plantillas EJS
  • Persistencia de datos en archivos de texto plano
  • CRUD completo para gestión de contactos
  • Búsqueda en tiempo real con debouncing
  • 15 colores pasteles personalizados
  • Navegación por teclado y accesibilidad completa
Node.js Express EJS UX/UI Accesibilidad
App Gestor de Usuarios - Node.js + PostgreSQL
App Gestor de Usuarios

Sistema completo con PostgreSQL y Sequelize

Ver Proyecto

App Gestor de Usuarios - Node.js + PostgreSQL

Sistema completo de gestión de usuarios y roles desarrollado con Node.js, Express, PostgreSQL y Sequelize ORM. Implementa relaciones complejas de base de datos y transacciones atómicas.

Características principales:

  • Servidor Express con APIs REST completas
  • Base de datos PostgreSQL con Sequelize ORM
  • Relaciones 1:1, 1:N y N:M entre entidades
  • Transacciones para operaciones atómicas
  • Frontend responsivo con Bootstrap 5
  • Validación robusta con Joi y hash seguro de contraseñas
Node.js PostgreSQL Sequelize Express Transacciones
Handmade Bags Store - Sistema de Gestión
Handmade Bags Store

Sistema de gestión de usuarios y pedidos

Ver Proyecto

Handmade Bags Store - Sistema de Gestión

Aplicación web completa desarrollada para gestionar usuarios y pedidos de una tienda de handmade bags artesanales. Implementa operaciones CRUD completas con transacciones y validaciones robustas.

Características principales:

  • CRUD completo para usuarios y pedidos
  • Base de datos PostgreSQL con Sequelize ORM
  • Transacciones para garantizar consistencia de datos
  • Interfaz web responsive con Bootstrap 5
  • API REST completa con documentación
  • Validaciones robustas en frontend y backend
  • Seguridad con hash de contraseñas bcrypt
Node.js PostgreSQL Sequelize Express Transacciones bcryptjs

Conéctate Conmigo

GitHub Repositorios LinkedIn Descargar CV