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

Proyectos del Bootcamp

En esta sección encontrarás todos los proyectos que creé durante el Bootcamp de JavaScript. Revisaremos cada uno en detalle, explorando cómo fueron construidos, qué tecnologías se utilizaron y qué funcionalidades incluyen. Cada proyecto refleja un hito de aprendizaje específico, combinando código, diseño e interactividad.

CineFlash

Simulación de reserva de películas usando jQuery y Bootstrap. Validación de formularios y confirmación modal.

Lo que hace este código:

  • Captura la película seleccionada desde un botón usando data-pelicula.
  • Llena el input del modal con el nombre de la película y muestra el modal de reserva.
  • Cuando se envía el formulario, el nombre se transfiere a un segundo modal y se confirma.
  • Reinicia el formulario y muestra una confirmación después de 0.5s.
Tecnologías y Conceptos Utilizados
  • jQuery: Para simplificar la manipulación del DOM y manejar eventos.
  • Bootstrap: Para modales, botones y diseño responsivo.
  • JavaScript: Para controlar el flujo de modales y comportamiento de formularios.
Funcionalidad

Esta mini aplicación permite a los usuarios seleccionar una película, llenar un formulario y recibir una confirmación. Todo hecho de forma interactiva con modales.

Por qué es útil

Enseña cómo combinar lógica JavaScript con elementos UI de Bootstrap para construir características interactivas y amigables como sistemas de reserva reales.

Ver CineFlash →
CineFlash JavaScript code

LibroLibre

Una biblioteca digital construida con HTML, CSS, JS y Bootstrap. Buscable por título, autor o género.

Lo que hace este código:

  • Verifica si hay libros filtrados. Si no hay ninguno, muestra un mensaje.
  • Si hay resultados, crea una tarjeta Bootstrap dinámicamente para cada libro.
  • Muestra imagen del libro, título, autor, género y sinopsis.
  • Includes buttons for “Read”, “Favorite” and “Loan” with icons.
Technologies & Concepts Used
  • HTML/CSS: To structure and style the layout and content.
  • JavaScript: To dynamically display books and handle user interactions.
  • Bootstrap: For responsive layout and styled components like cards and buttons.
Functionality

Users can search for books, mark them as favorites, open to read more, or request a loan—all in a responsive and dynamic interface.

Why it's useful

It demonstrates how to use JavaScript for rendering filtered data and enhancing interactivity in a user interface.

Explore LibroLibre →
LibroLibre code snippet

Lo que He Aprendido en JavaScript

Un resumen de todo lo que he aprendido hasta ahora en JavaScript durante este bootcamp — desde manipulación del DOM hasta trabajar con Bootstrap y jQuery para construir proyectos interactivos.

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.

document.getElementById("title").textContent = "¡Actualizado!"
Manejo de Eventos

Usé event listeners para detectar acciones del usuario como clics y envíos de formularios, como reservar una película en CineFlash.

$('.btn').click(() => alert("¡Clickeado!"))
Atributos de Datos

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

const peli = $(this).data('pelicula')
Validación de Formularios

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

if (input.value.trim() === "") alert("¡Requerido!")
Integración Bootstrap + JS

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

const modal = new bootstrap.Modal(...)
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.

setTimeout(() => modal.show(), 500)
LocalStorage & Persistencia

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

localStorage.setItem('cart', JSON.stringify(cart))
Drag & Drop API

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

element.addEventListener('dragstart', handleDragStart)
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.

products.filter(p => p.name.includes(searchTerm))
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.

updateCartState(newItem)
Autenticación Simulada

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

if (user.email && user.password) login()
Interfaz Kanban

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

createKanbanColumn(status)

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

Conéctate Conmigo

GitHub Repositorios LinkedIn Descargar CV