🚀 Proyecto Integrador M1 - Página Web de Presentación

📋 Descripción del Proyecto

Este es un proyecto web personal desarrollado como parte del Módulo 1 del bootcamp de SoyHenry. Es una página de presentación personal que incluye información sobre mí, mis tecnologías favoritas y un sistema de gestión de actividades favoritas.

🎯 Características Principales

• Página de presentación personal con información sobre mí
• Sección de tecnologías con barras de progreso animadas
• Sistema CRUD completo para gestión de actividades
• Persistencia de datos con localStorage
• Diseño responsive y moderno
• Animaciones fluidas y efectos interactivos

✨ Funcionalidades Implementadas

🏠 Sección "Sobre Mí"

• Presentación personal con emojis
• Diseño atractivo con gradientes
• Animaciones de entrada

🛠️ Sección de Tecnologías

• Cards individuales para cada tecnología (HTML5, CSS3, JavaScript)
• Barras de progreso animadas que muestran el nivel de habilidad
• Efectos hover interactivos con transformaciones 3D
• Animaciones de entrada escalonadas
• Diseño completamente responsivo

📝 Sistema de Gestión de Actividades

• ✅ Agregar actividades con validación completa
• ✏️ Editar actividades existentes
• 🗑️ Eliminar actividades con confirmación
• 💾 Persistencia automática con localStorage
• 🔔 Notificaciones elegantes para feedback del usuario
• 🎨 Cards visuales con imágenes y descripciones

🎨 Mejoras de UX/UI

• Mensajes toast para notificaciones
• Validación mejorada de formularios
• Efectos visuales y transiciones suaves
• Diseño responsive para todos los dispositivos
• Animaciones de carga para barras de progreso

🚀 Tecnologías Utilizadas

• HTML5 - Estructura semántica
• CSS3 - Estilos modernos con gradientes y animaciones
• JavaScript ES6+ - Lógica de la aplicación
• LocalStorage - Persistencia de datos
• Git & GitHub - Control de versiones

📦 Instalación y Uso

Prerrequisitos

• Node.js (versión 14 o superior)
• npm (incluido con Node.js)

Pasos para ejecutar el proyecto

1. Clonar el repositorio

   git clone https://github.com/FLAranoHerrera/PM1-FLAranoHerrera.git
   cd PM1-FLAranoHerrera
   

2. Instalar dependencias

   npm install
   

3. Ejecutar el servidor de desarrollo

   npm start
   

4. Abrir en el navegador

   • El servidor se ejecutará en http://localhost:8080
   • Se abrirá automáticamente en tu navegador

Scripts Disponibles

npm start    # Ejecuta el servidor de desarrollo
npm test     # Ejecuta las pruebas con Jasmine

🎨 Capturas de Pantalla

Sección de Tecnologías

• Cards individuales con barras de progreso animadas
• Efectos hover con transformaciones 3D
• Diseño responsive y moderno

Sistema de Actividades

• Formulario intuitivo para agregar actividades
• Cards visuales con botones de editar y eliminar
• Persistencia automática de datos

🔧 Estructura del Proyecto

PM1-FLAranoHerrera/
├── assets/
│   └── img/                    # Imágenes y logos
├── scripts/
│   └── index.js               # Lógica principal de la aplicación
├── styles/
│   ├── reset.css              # Reset de estilos
│   └── styles.css             # Estilos principales
├── spec/
│   └── prueba.spec.js         # Pruebas con Jasmine
├── index.html                 # Página principal
├── package.json               # Configuración del proyecto
└── README.md                  # Este archivo

🚀 Funcionalidades Técnicas

Clases JavaScript

• Activity - Modelo de datos para actividades
• Repository - Patrón Repository para gestión de datos

Métodos Principales

• createActivity() - Crear nueva actividad
• updateActivity() - Actualizar actividad existente
• deleteActivity() - Eliminar actividad
• saveToStorage() - Guardar en localStorage
• loadFromStorage() - Cargar desde localStorage

Validaciones Implementadas

• Longitud mínima para títulos y descripciones
• Validación de URLs para imágenes
• Mensajes de error específicos y claros

🎯 Mejoras Futuras

• Implementar búsqueda y filtrado de actividades
• Agregar categorías para las actividades
• Implementar drag & drop para reordenar
• Agregar modo oscuro
• Implementar PWA (Progressive Web App)

👨‍💻 Autor

Francisco L. Arano Herrera

• 🎓 Estudiante de SoyHenry Bootcamp
• 🚀 Aspirante a Full Stack Developer
• 💻 Enfocado en tecnologías web modernas

📄 Licencia

Este proyecto está bajo la Licencia ISC. Ver el archivo package.json para más detalles.

🤝 Contribuciones

Las contribuciones son bienvenidas. Para cambios importantes:

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

📞 Contacto

Si tienes preguntas o sugerencias, no dudes en contactarme a través de GitHub.

---