Magdalena Inalaf

About Me

I'm Magdalena, a Chilean fullstack developer and analyst programmer with a background in pedagogy. I transitioned into tech through intensive bootcamps and certifications, including a recent program in Cybersecurity Management and Control Fundamentals at USACH.

I specialize in frontend and backend development, creating responsive, user-centered applications using modern JavaScript technologies. My academic path also includes UX/UI, Agile Methodologies, and Fullstack JavaScript development.

Purpose of this Portfolio

This portfolio was created during my JavaScript Bootcamp to document my technical growth. From learning the foundations of HTML and CSS, I progressed into creating dynamic applications with JavaScript, jQuery, and Bootstrap.

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

Portfolio Purpose

Bootcamp Projects

In this section, you'll find all the projects I created during the JavaScript Bootcamp. We'll take a closer look at each one, exploring how they were built, what technologies were used, and what functionality they include. Each project reflects a specific learning milestone, combining code, design, and interactivity.

CineFlash

Movie booking simulation using jQuery and Bootstrap. Form validation and modal confirmation.

What this code does:

  • Captures the selected movie from a button using data-pelicula.
  • Fills the modal input with the movie name and shows the reservation modal.
  • When the form is submitted, the name is transferred to a second modal and confirmed.
  • Resets the form and displays a confirmation after 0.5s.
Technologies & Concepts Used
  • jQuery: To simplify DOM manipulation and handle events.
  • Bootstrap: For modals, buttons, and responsive layout.
  • JavaScript: To control modal flow and form behavior.
Functionality

This mini app allows users to select a movie, fill in a form, and receive a confirmation. All done interactively with modals.

Why it's useful

It teaches how to combine JavaScript logic with Bootstrap UI elements to build interactive, user-friendly features like real reservation systems.

View CineFlash →
CineFlash JavaScript code

LibroLibre

A digital library built with HTML, CSS, JS & Bootstrap. Searchable by title, author, or genre.

What this code does:

  • Checks if there are filtered books. If none, displays a message.
  • If there are results, creates a Bootstrap card dynamically for each book.
  • Displays book image, title, author, genre, and synopsis.
  • 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

What I’ve Learned in JavaScript

A summary of everything I’ve learned so far in JavaScript throughout this bootcamp — from DOM manipulation to working with Bootstrap and jQuery to build interactive projects.

DOM Manipulation

Learned how to access and modify HTML elements using JavaScript and jQuery. For example, dynamically updating book cards or setting form values.

document.getElementById("title").textContent = "Updated!"
Event Handling

Used event listeners to detect user actions such as clicks and form submissions, like reserving a movie in CineFlash.

$('.btn').click(() => alert("Clicked!"))
Data Attributes

Captured custom values from HTML using data-* attributes to pre-fill forms or track user selections.

const peli = $(this).data('pelicula')
Form Validation

Validated forms manually before submitting or updating the interface, such as checking if all fields were filled correctly.

if (input.value.trim() === "") alert("Required!")
Bootstrap + JS Integration

Used Bootstrap modals and dynamically controlled their visibility with JavaScript to simulate app flows.

const modal = new bootstrap.Modal(...)
Dynamic Feedback

Applied setTimeout for timing effects like showing confirmation messages or transitions after user actions.

setTimeout(() => modal.show(), 500)

My Web Journey

HTML/CSS Portfolio
2023 – First Portfolio in HTML/CSS

Created my first static portfolio focused on handmade products using HTML, CSS and a bit of JavaScript.

View project →
Vue Portfolio
2024 – Vue Portfolio

Developed a more dynamic and modular portfolio using Vue.js. Practiced component-based architecture and routing.

View Vue portfolio →
Next.js Portfolio
2025 – Current Portfolio with Next.js

This portfolio is the result of my JavaScript Bootcamp journey. Built with Next.js, responsive and dynamic.

Visit inalaf.ca →

Connect with Me

GitHub Repositories LinkedIn Download CV
Bootcamp Task Tracker
Track daily tasks & progress
3 tasks 31/7/2025
Learning Roadmap
Track your curriculum milestones
  • Create portfolio in HTML/CSS
  • Develop CineFlash with Bootstrap & jQuery
  • Implement To-Do List app