🇪🇸 Versión en Español

🏢 Sitio Institucional – HTML, CSS & JavaScript

Plantilla institucional premium con patrones de diseño modernos, estructura modular y arquitectura sin backend.

A premium institutional website template featuring modern design patterns, modular structure, and zero-backend architecture.

🚀 Demo en Vivo • 📖 Documentación • 🐛 Reportar Error • 💡 Sugerir Mejora

---

🌟 Resumen del Proyecto

Este template de sitio web institucional combina tecnologías web modernas con patrones de diseño profesionales para crear una presencia corporativa escalable, mantenible y visualmente atractiva. Construido con HTML5, CSS3 y JavaScript vanilla puro, no requiere infraestructura backend mientras proporciona funcionalidad completa a través de integraciones de terceros.

✨ Características Principales

• 🎨 UI/UX Moderno: Efectos glassmorphism, animaciones suaves y jerarquía visual premium
• 📱 Mobile-First: Diseño responsivo con mejora progresiva
• ⚡ Alto Rendimiento: Ligero, carga rápida con assets optimizados
• 🛠 Sin Backend: Arquitectura serverless usando EmailJS y GitHub Pages
• 🔧 Modular: Código limpio y organizado para fácil personalización
• ♿ Accesible: Diseño compatible con WCAG y HTML semántico

---

🏗 Arquitectura y Funcionalidades

🎨 Excelencia Frontend ✅ Sistema de Grid Responsivo ✅ Propiedades Personalizadas CSS ✅ Navegación Smooth Scroll ✅ Animaciones Interactivas ✅ Carga Progresiva de Imágenes ✅ Compatibilidad Cross-browser

🔧 Características Técnicas ✅ Arquitectura CSS Modular ✅ JavaScript Vanilla (ES6+) ✅ Integración EmailJS ✅ Optimizado para SEO ✅ Manejo de Errores y Fallbacks ✅ Listo para GitHub Pages

---

🛠 Stack Tecnológico

Tecnología	Versión	Propósito	Documentación
	5.0	Estructura y marcado semántico	MDN HTML
	3.0	Estilos y diseño responsivo	MDN CSS
	ES2020+	Lógica del lado cliente	MDN JavaScript
	3.x	Envío de formularios sin backend	EmailJS Docs

---

📁 Estructura del Proyecto

modular-web-base/
├── 📄 index.html                 # Página principal
├── 📄 servicios.html            # Página de servicios
├── 📄 blog.html                 # Sección blog
├── 📄 blog-certificaciones.html # Blog - certificaciones
├── 📄 blog-mantenimiento.html   # Blog - mantenimiento
├── 📄 blog-tendencias.html      # Blog - tendencias
├── 📄 contacto.html             # Formulario de contacto
├── 📄 faq.html                  # Preguntas frecuentes
├── 📄 nosotros.html             # Página nosotros
├── 📄 proyectos.html            # Página de proyectos
├── 📄 testimonios.html          # Testimonios de clientes
├── 📂 .vscode/                  # Configuración VS Code
├── 📂 img/                      # Imágenes optimizadas
├── 📂 scripts/                  # Archivos JavaScript
├── 📄 style.css                 # Hoja de estilos principal
└── 📄 README.md                 # Documentación del proyecto

---

🚀 Inicio Rápido

Prerrequisitos

• Navegador web moderno (Chrome 90+, Firefox 88+, Safari 14+)
• Git para control de versiones
• Conocimientos básicos de HTML/CSS/JavaScript

Instalación

1. Clonar el repositorio

   git clone https://github.com/Reverse07/modular-web-base.git
   cd modular-web-base

2. Abrir localmente

   # Usando Python (si está instalado)
   python -m http.server 8000
   
   # Usando Node.js (si está instalado)
   npx serve .
   
   # O simplemente abrir index.html en tu navegador

3. Personalizar contenido

   • Editar archivos HTML para el contenido
   • Modificar style.css para los estilos
   • Actualizar scripts/ para la funcionalidad

---

⚙️ Configuración

Configuración de EmailJS

1. Crear una cuenta en EmailJS
2. Configurar tu servicio de email
3. Crear una plantilla de email
4. Actualizar la configuración en los scripts JavaScript:

// Configuración EmailJS
const emailjsConfig = {
    serviceID: 'tu_service_id',
    templateID: 'tu_template_id',
    userID: 'tu_user_id'
};

Opciones de Personalización

• Colores: Modificar propiedades personalizadas CSS en :root
• Fuentes: Actualizar importaciones de fuentes en style.css
• Layout: Ajustar configuraciones de grid y breakpoints
• Contenido: Editar archivos HTML directamente

---

🌐 Despliegue

GitHub Pages (Recomendado)

1. Subir tu código a un repositorio de GitHub
2. Ir a Settings → Pages
3. Seleccionar fuente: Deploy from a branch
4. Elegir rama: main y carpeta: / (root)
5. Tu sitio estará disponible en: https://username.github.io/repository-name

Opciones Alternativas de Hosting

• Netlify: Despliegue drag and drop
• Vercel: Integración Git con despliegues automáticos
• Firebase Hosting: Solución de hosting de Google
• Surge.sh: Hosting simple para sitios estáticos

---

📊 Métricas de Rendimiento

---

🧪 Compatibilidad de Navegadores

Navegador	Versión	Estado
Chrome	90+	✅ Totalmente Soportado
Firefox	88+	✅ Totalmente Soportado
Safari	14+	✅ Totalmente Soportado
Edge	90+	✅ Totalmente Soportado
Opera	76+	✅ Totalmente Soportado

---

🤝 Contribuciones

¡Las contribuciones son bienvenidas! Por favor sigue estos pasos:

1. Fork el repositorio
2. Crear una rama de feature (git checkout -b feature/nueva-funcionalidad)
3. Commit tus cambios (git commit -m 'Agregar nueva funcionalidad')
4. Push a la rama (git push origin feature/nueva-funcionalidad)
5. Abrir un Pull Request

---

📝 Licencia

Este proyecto está licenciado bajo la Licencia MIT - ver el archivo LICENSE para más detalles.

---

👨‍💻 Autor y Soporte

Diego Arroyo Zuasnabar
Desarrollador Full Stack | Mentor Técnico

---

⭐ ¡Si este proyecto te ayudó, considera darle una estrella en GitHub! ⭐