Skip to content

Portafolio 3D desarrollado con React y Next.js, diseñado para presentar mi perfil como desarrolladora web de forma creativa e interactiva. Utiliza animaciones Lottie, un avatar 3D animado, efectos personalizados, transiciones suaves y un diseño responsivo con Tailwind CSS.

Notifications You must be signed in to change notification settings

MagdaIG/Portafolio-react

Repository files navigation

Magdalena Inalaf - Software Developer Portfolio

A modern, responsive portfolio website showcasing my expertise in React, Vue.js, Next.js, and Node.js development. Built with Next.js and deployed on GitHub Pages.

About

I am a Software Developer specialized in building scalable, responsive, and interactive applications with React, Vue.js, and Next.js. Experienced in GitHub workflows, CI/CD pipelines, and agile methodologies. Based in Vancouver, BC, Canada, I bring a unique perspective combining technical expertise with user-centered design principles.

Professional Experience

Software Developer at IVI SpA (Nov 2023 – Present)

  • Developed and deployed an order and product unifier using Next.js, improving data consistency and reducing manual processing by 25%
  • Implemented CI/CD pipelines with GitHub Actions, cutting deployment time from 1h to 10min
  • Introduced Docker for local development, ensuring environment consistency across the team
  • Collaborated in a cross-functional agile team (Kanban), increasing delivery efficiency by 30%

Technical Skills

Frontend Development

  • React - Component-based UI development
  • Vue.js - Progressive JavaScript framework
  • Next.js - Full-stack React framework
  • HTML5, CSS3, JavaScript - Core web technologies
  • Tailwind CSS - Utility-first CSS framework
  • Bootstrap - Responsive design framework

Backend Development

  • Node.js - Server-side JavaScript runtime
  • Express.js - Web application framework
  • Laravel - PHP web framework
  • NestJS - Progressive Node.js framework

Database Technologies

  • PostgreSQL - Relational database management
  • Oracle - Enterprise database systems
  • SQL - Database query language
  • Database Design - ERD modeling and normalization

DevOps & Tools

  • Git & GitHub - Version control and collaboration
  • Docker - Containerization
  • Kubernetes - Container orchestration
  • AWS - Cloud computing services
  • CI/CD Pipelines - Continuous integration and deployment

Testing & Quality Assurance

  • Jest - JavaScript testing framework
  • Cypress - End-to-end testing
  • Testing methodologies - Unit, integration, and E2E testing

Design & UX

  • Figma - UI/UX design and prototyping
  • User-centered design - Design thinking principles
  • Responsive design - Mobile-first approach

Featured Projects

1. PortafolioJS - Educational Portfolio

Educational portfolio documenting my JavaScript Bootcamp journey with detailed project breakdowns, technical solutions, and learning milestones. Features interactive demonstrations of complex projects like Kanban boards, e-commerce systems, and PostgreSQL database management.

2. App Productos - Backend Management

Complete backend web application for product management built with Node.js and Express.js. Features data persistence with JSON files, file handling with Multer, dynamic routes, CRUD operations, and comprehensive error handling. Demonstrates Node.js bootcamp skills in server-side development.

3. Inventory System - PostgreSQL

Complete inventory management system built with PostgreSQL relational database. Features ERD design, normalization to 3NF, complex SQL queries with JOINs, triggers for automatic stock updates, and transaction management.

4. Task Management - Kanban Board

Complete task management system with Kanban board interface built with JavaScript and Supabase. Features drag & drop functionality, user authentication, real-time data synchronization, task CRUD operations, and responsive design.

5. Inventory System v2.0 - Enhanced

Advanced inventory management system v2.0 with PostgreSQL and PL/pgSQL. Features advanced validations, custom SQL functions, modular architecture, comprehensive documentation, Git submodules for version control, and automated testing scripts.

6. Contact List - Contact Manager

Complete contact management system with modern UI/UX built with JavaScript. Features contact CRUD operations, search functionality, favorites system, birthday tracking, and responsive grid layout.

Education

  • Diploma in Programming and Systems Analysis - Instituto Profesional San Sebastián (2023-2025)
  • Fundamentals of Control and Management in Cybersecurity - USACH (2025)
  • UX/UI Design with Figma - SENCE (2025)
  • Agile Methodologies: Scrum - SENCE (2024)
  • Database Design and SQL Programming - Instituto Profesional San Sebastián (2024)
  • Frontend Bootcamp – Vue.js - SENCE / Talento Digital (2023)
  • Full-Stack Development with Next.js - Udemy (2023)

Portfolio Features

  • Modern and responsive design with mobile-first approach
  • Interactive 3D elements with Three.js
  • Fast performance with Next.js optimization
  • SEO optimized for better visibility
  • Contact form integration with Formspree
  • Smooth animations with Framer Motion
  • Automatic deployment with GitHub Actions

Technologies Used

  • Next.js 15 - React framework with static export
  • React 19 - UI library
  • Tailwind CSS - Utility-first styling
  • Three.js - 3D graphics and animations
  • Framer Motion - Animation library
  • React Icons - Comprehensive icon library
  • Formspree - Contact form handling

Quick Start

Installation

git clone https://github.com/MagdaIG/Portafolio-react.git
cd Portafolio-react
npm install

Development

npm run dev

Production Build

npm run build

Deployment

This portfolio is configured for automatic deployment to GitHub Pages using GitHub Actions. The site is automatically deployed when changes are pushed to the main branch.

Live Site: https://magdaig.github.io/Portafolio-react/

Contact

License

MIT License - This portfolio template is available for educational and personal use.

About

Portafolio 3D desarrollado con React y Next.js, diseñado para presentar mi perfil como desarrolladora web de forma creativa e interactiva. Utiliza animaciones Lottie, un avatar 3D animado, efectos personalizados, transiciones suaves y un diseño responsivo con Tailwind CSS.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published