💻 Portafolio Profesional Web

Sitio web personal desarrollado para presentar mi trayectoria académica, habilidades técnicas y proyectos realizados en las áreas de Ingeniería en Sistemas y Ciberseguridad. 🚀

Hecho por Maria José Montepeque Zet ✨

📋 Tabla de contenido

• 📍 Introducción
• 🔍 ¿Qué hace este proyecto exactamente?
• 🛠️ Tecnologías utilizadas
• ⚠️ Antes de empezar
• ⚙️ Cómo ponerlo a andar (Paso a paso)
• 📂 Estructura del proyecto

---

📍 Introducción

Este proyecto es un portafolio web personal diseñado con un enfoque profesional y moderno. El objetivo principal es centralizar mi perfil como estudiante de Ingeniería en Ciencias y Sistemas de la USAC, destacando mis certificaciones en Ciberseguridad, Python e Inteligencia Artificial, así como mi experiencia en desarrollo de software. 🎓

[!NOTA] 🎨 El diseño utiliza un esquema de colores basado en tonalidades púrpuras y tipografías técnicas para reflejar una identidad profesional orientada al sector tecnológico y SOC.

---

🔍 ¿Qué hace este proyecto exactamente?

El portafolio está dividido en varias secciones estratégicas para facilitar la navegación y la lectura de información clave:

• ✨ Presentación Dinámica: Una página de inicio con tarjetas interactivas que incluyen efectos de bordes animados mediante CSS.
• 🎴 Sección Sobre Mí: Implementación de un sistema de tarjetas "flip" que permite visualizar información personal y profesional de forma compacta y creativa.
• 📊 Exhibición de Habilidades: Listado detallado de competencias técnicas en lenguajes de programación y herramientas de seguridad.
• 📱 Diseño Responsivo: El sitio está optimizado para visualizarse correctamente en dispositivos móviles y de escritorio mediante Media Queries.
• 🖱️ Interfaz Personalizada: Uso de cursores personalizados en SVG y efectos visuales avanzados para mejorar la experiencia de usuario.

---

🛠️ Tecnologías utilizadas

• HTML5 🏗️: Estructura semántica del contenido.
• CSS3 🎨: Estilos avanzados, animaciones, Flexbox y Grid Layout.
• Google Fonts 🔡: Integración de las familias tipográficas Raleway y Roboto.
• SVG 📐: Gráficos vectoriales para iconos y cursores.

---

⚠️ Antes de empezar

Para visualizar o modificar este proyecto, se requiere lo siguiente:

• 🌐 Navegador Web: Versión actualizada de Google Chrome, Firefox o Microsoft Edge.
• 📝 Editor de código: Se recomienda el uso de Visual Studio Code para la edición de los archivos .html y .css.
• 🖼️ Recursos: Asegurarse de mantener la estructura de carpetas para que las imágenes y los archivos CSS se vinculen correctamente.

---

⚙️ Cómo ponerlo a andar (Paso a paso)

1. Descarga el código: 📥 Clona el repositorio desde GitHub o descarga el archivo ZIP con todos los documentos del proyecto.

2. Organización de archivos: 📁 Asegúrate de que los archivos index.html, sobremi.html, style.css y sobremi.css estén en la misma carpeta raíz, junto con la carpeta de imagenes.

3. Ejecución: ⚡ Abre el archivo index.html en tu navegador preferido para visualizar el sitio completo.

---

📂 Estructura del proyecto

• /imagenes 🖼️: Contiene los logotipos, fotos de perfil e iconos utilizados.
• index.html 🏠: Página principal y presentación.
• sobremi.html 👤: Información detallada con tarjetas interactivas.
• style.css 🎨: Estilos generales, navegación y página de inicio.
• sobremi.css ✨: Estilos específicos para las animaciones flip de la sección personal.