diff --git a/README.md b/README.md index a1c1d4a..8b17c81 100644 --- a/README.md +++ b/README.md @@ -17,6 +17,15 @@ Este repositorio agrupa varios ejemplos y ejercicios prácticos organizados por - 🌐 `index.html` — Página HTML que sirve de contenedor para ejemplos que usan el navegador. - 📁 `tutoria3/` - 📄 `index.js` — Ejemplo o ejercicio de la tutoría 3. +- 📁 `Tutoria4/` + - 🌐 `index.html` — Ejemplo de blog personal con Flexbox y Grid. + - 🎨 `style.css` — Estilos CSS para el blog. +- 📁 `Vale2029/` + - 🌟 **Portafolio Personal** — Proyecto completo de portafolio web personal. + - 🌐 `index.html` — Estructura completa del portafolio. + - 🎨 `style.css` — Diseño responsive y moderno. + - ⚡ `script.js` — Interactividad y animaciones. + - 📖 `README.md` — Documentación completa y guía de despliegue. > Nota: la estructura puede crecer según se añadan nuevas tutorías o clases. diff --git a/Vale2029/README.md b/Vale2029/README.md new file mode 100644 index 0000000..46de8da --- /dev/null +++ b/Vale2029/README.md @@ -0,0 +1,173 @@ +# 🌟 Portafolio Personal - Vale2029 + +Portafolio web personal creado como parte de la tarea del Módulo 1 de JavaScript Cohorte 5. + +## 🔗 Demo en Vivo + +Una vez desplegado en GitHub Pages, el portafolio estará disponible en: +**https://thejsarchitects.github.io/ModuloOneJavascriptCohorte5/Vale2029/** + +> **Nota:** El portafolio debe ser desplegado siguiendo las instrucciones de la sección "Publicación en GitHub Pages" más abajo. + +## 📋 Descripción + +Este es mi portafolio web personal donde muestro mis habilidades, proyectos y forma de contacto como desarrolladora web en formación. + +## ✨ Características + +### Estructura HTML +- ✅ Encabezado con nombre/logo (Vale2029) +- ✅ Sección "Sobre mí" con información personal y habilidades +- ✅ Sección "Proyectos" con 3 ejemplos de proyectos +- ✅ Sección "Contacto" con formulario y métodos de contacto + +### Diseño CSS +- 🎨 Paleta de colores coherente (púrpura/rosa) +- 📱 Diseño responsive para móviles y tablets +- 🖋️ Tipografía legible y moderna +- 🎯 Estructura limpia y profesional +- ✨ Animaciones y efectos visuales + +### Interactividad JavaScript +- 🔘 Botones "Ver más" en cada proyecto +- 📜 Animaciones al hacer scroll +- ⬆️ Botón "Volver arriba" dinámico +- ⌨️ Efecto de escritura en el título +- 📧 Formulario de contacto funcional +- 🎭 Animaciones en badges de habilidades + +## 🚀 Cómo visualizar el proyecto + +### Opción 1: Abrir localmente +1. Descarga o clona este repositorio +2. Navega a la carpeta `Vale2029` +3. Abre el archivo `index.html` en tu navegador + +### Opción 2: Servidor local +```bash +# Si tienes Python instalado +cd Vale2029 +python -m http.server 8000 + +# Si tienes Node.js y http-server +npx http-server Vale2029 -o + +# Si usas VS Code +# Instala la extensión "Live Server" y haz clic derecho en index.html > "Open with Live Server" +``` + +## 📦 Publicación en GitHub Pages + +### Pasos para publicar: + +1. **Asegúrate de que tu código esté en GitHub:** + ```bash + git add . + git commit -m "Añadir portafolio personal Vale2029" + git push origin main + ``` + +2. **Activar GitHub Pages:** + - Ve a tu repositorio en GitHub + - Click en "Settings" (Configuración) + - Navega a "Pages" en el menú lateral + - En "Source", selecciona la rama principal + - En la carpeta, selecciona "/root" + - Click en "Save" + - Espera unos minutos y tu sitio estará disponible en: + `https://thejsarchitects.github.io/ModuloOneJavascriptCohorte5/Vale2029/` + +### Configuración alternativa (si quieres que sea la página principal): +Si quieres que el portafolio sea accesible directamente en `https://[tu-usuario].github.io/[nombre-repositorio]/`: + +1. Mueve los archivos `index.html`, `style.css` y `script.js` a la raíz del repositorio +2. Sigue los pasos anteriores pero selecciona "/root" + +## 🌐 Publicación en Netlify + +### Opción 1: Desde GitHub (Recomendada) + +1. Ve a [netlify.com](https://netlify.com) y crea una cuenta +2. Click en "New site from Git" +3. Conecta tu repositorio de GitHub +4. Configura: + - **Base directory**: `Vale2029` + - **Build command**: (dejar vacío) + - **Publish directory**: `Vale2029` +5. Click en "Deploy site" +6. Tu sitio estará disponible en un dominio como: `https://random-name-123456.netlify.app` + +### Opción 2: Drag & Drop + +1. Ve a [netlify.com](https://netlify.com) +2. Arrastra la carpeta `Vale2029` directamente a Netlify +3. ¡Listo! Tu sitio estará publicado instantáneamente + +### Personalizar el dominio en Netlify +- En el dashboard de Netlify, click en "Domain settings" +- Click en "Options" > "Edit site name" +- Cambia el nombre a algo como `vale2029-portfolio` +- Tu sitio será: `https://vale2029-portfolio.netlify.app` + +## 📁 Estructura de archivos + +``` +Vale2029/ +│ +├── index.html # Estructura principal del sitio +├── style.css # Estilos y diseño +├── script.js # Interactividad y animaciones +└── README.md # Este archivo +``` + +## 🛠️ Tecnologías utilizadas + +- **HTML5**: Estructura semántica y accesible +- **CSS3**: Diseño, animaciones y responsive design + - Variables CSS + - Flexbox y Grid + - Animaciones y transiciones + - Media queries +- **JavaScript (Vanilla)**: Interactividad + - Manipulación del DOM + - Event Listeners + - Intersection Observer API + - Animaciones dinámicas + +## 📝 Notas de desarrollo + +- El formulario de contacto actualmente muestra una alerta. En producción, necesitarías conectarlo con un servicio backend o usar servicios como Formspree, EmailJS, o Netlify Forms. +- Los enlaces de proyectos son demostrativos. Reemplázalos con tus proyectos reales. +- Las imágenes de proyectos usan emojis como placeholders. Puedes reemplazarlos con imágenes reales. + +## 🎨 Personalización + +Para personalizar este portafolio: + +1. **Colores**: Modifica las variables CSS en `style.css`: + ```css + :root { + --primary-color: #6366f1; /* Cambia este color */ + --secondary-color: #ec4899; /* Y este también */ + } + ``` + +2. **Contenido**: Edita el texto en `index.html` con tu información personal + +3. **Proyectos**: Actualiza la sección de proyectos con tus propios trabajos + +4. **Imágenes**: Añade imágenes reales en la carpeta y actualiza las referencias + +## 📧 Contacto + +- **Email**: vale2029@example.com +- **GitHub**: [github.com/vale2029](https://github.com/vale2029) +- **LinkedIn**: [linkedin.com/in/vale2029](https://linkedin.com/in/vale2029) + +## 📄 Licencia + +Este proyecto fue creado con fines educativos como parte del curso de JavaScript. + +--- + +💜 Hecho con amor y mucho café ☕ por Vale2029 diff --git a/Vale2029/index.html b/Vale2029/index.html new file mode 100644 index 0000000..aa86d6a --- /dev/null +++ b/Vale2029/index.html @@ -0,0 +1,205 @@ + + + + + + + Vale2029 - Portafolio Personal + + + + +
+ + +
+ + +
+
+

¡Hola! Soy Valentina

+

Desarrolladora Web Full Stack en formación

+

Apasionada por crear experiencias web increíbles y funcionales

+ Ver mis proyectos +
+
+ + +
+
+

Sobre mí

+
+
+

Soy una estudiante de desarrollo web con gran pasión por la tecnología y el aprendizaje continuo. Me encanta enfrentar nuevos desafíos y buscar soluciones creativas a problemas complejos.

+

Actualmente estoy profundizando mis conocimientos en HTML, CSS y JavaScript, construyendo una base sólida para convertirme en una desarrolladora web profesional.

+
+

Habilidades técnicas:

+
+ HTML5 + CSS3 + JavaScript + Responsive Design + Git & GitHub +
+
+
+
+
+
+ + +
+
+

Mis Proyectos

+
+ +
+
+
📱
+
+
+

Aplicación de Tareas

+

Una aplicación web interactiva para gestionar tareas diarias con funcionalidad de agregar, editar y eliminar tareas.

+
+ HTML + CSS + JavaScript +
+ + +
+
+ + +
+
+
🎨
+
+
+

Landing Page Creativa

+

Diseño moderno y atractivo de una landing page para un negocio ficticio con animaciones y efectos visuales.

+
+ HTML + CSS + Flexbox/Grid +
+ + +
+
+ + +
+
+
🌤️
+
+
+

App del Clima

+

Aplicación que muestra el clima actual utilizando una API externa con búsqueda por ciudad.

+
+ HTML + CSS + JavaScript + API +
+ + +
+
+
+
+
+ + +
+
+

Contacto

+
+
+

¿Tienes un proyecto en mente o quieres colaborar? ¡Me encantaría saber de ti!

+
+
+ 📧 +
+

Email

+ vale2029@example.com +
+
+
+ 💼 +
+

LinkedIn

+ linkedin.com/in/vale2029 +
+
+
+ 🐙 +
+

GitHub

+ github.com/vale2029 +
+
+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+
+ + + + + + + diff --git a/Vale2029/script.js b/Vale2029/script.js new file mode 100644 index 0000000..fc1ec8a --- /dev/null +++ b/Vale2029/script.js @@ -0,0 +1,221 @@ +// Esperar a que el DOM esté completamente cargado +document.addEventListener('DOMContentLoaded', function() { + + // ==================== + // Funcionalidad "Ver más" en proyectos + // ==================== + const botonesVerMas = document.querySelectorAll('.ver-mas'); + + botonesVerMas.forEach(boton => { + boton.addEventListener('click', function() { + const proyectoId = this.getAttribute('data-proyecto'); + const detalles = document.getElementById(`detalles-${proyectoId}`); + + if (detalles.style.display === 'none' || detalles.style.display === '') { + detalles.style.display = 'block'; + this.textContent = 'Ver menos'; + } else { + detalles.style.display = 'none'; + this.textContent = 'Ver más'; + } + }); + }); + + // ==================== + // Animación al hacer scroll + // ==================== + const sections = document.querySelectorAll('.section'); + + const observerOptions = { + threshold: 0.1, + rootMargin: '0px 0px -100px 0px' + }; + + const sectionObserver = new IntersectionObserver(function(entries) { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('fade-in', 'visible'); + } + }); + }, observerOptions); + + sections.forEach(section => { + section.classList.add('fade-in'); + sectionObserver.observe(section); + }); + + // ==================== + // Smooth scroll para los enlaces de navegación + // ==================== + const navLinks = document.querySelectorAll('.nav a'); + + navLinks.forEach(link => { + link.addEventListener('click', function(e) { + e.preventDefault(); + const targetId = this.getAttribute('href'); + const targetSection = document.querySelector(targetId); + + if (targetSection) { + targetSection.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } + }); + }); + + // ==================== + // Efecto de scroll en el header + // ==================== + const header = document.querySelector('.header'); + let lastScroll = 0; + + window.addEventListener('scroll', function() { + const currentScroll = window.pageYOffset; + + if (currentScroll > 100) { + header.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)'; + } else { + header.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)'; + } + + lastScroll = currentScroll; + }); + + // ==================== + // Animación de las tarjetas de proyecto al pasar el mouse + // ==================== + const proyectoCards = document.querySelectorAll('.proyecto-card'); + + proyectoCards.forEach(card => { + card.addEventListener('mouseenter', function() { + this.style.transform = 'translateY(-10px) scale(1.02)'; + }); + + card.addEventListener('mouseleave', function() { + this.style.transform = 'translateY(0) scale(1)'; + }); + }); + + // ==================== + // Manejo del formulario de contacto + // ==================== + const contactForm = document.getElementById('contact-form'); + + contactForm.addEventListener('submit', function(e) { + e.preventDefault(); + + const nombre = document.getElementById('nombre').value; + const email = document.getElementById('email').value; + const mensaje = document.getElementById('mensaje').value; + + // Simulación de envío (en producción conectarías con un backend) + console.log('Formulario enviado:', { nombre, email, mensaje }); + + // Mostrar mensaje de éxito + alert(`¡Gracias ${nombre}! Tu mensaje ha sido enviado con éxito. Te contactaré pronto.`); + + // Limpiar formulario + contactForm.reset(); + }); + + // ==================== + // Efecto de escritura en el hero (opcional) + // ==================== + const heroSubtitle = document.querySelector('.hero-subtitle'); + const originalText = heroSubtitle.textContent; + heroSubtitle.textContent = ''; + + let charIndex = 0; + function typeWriter() { + if (charIndex < originalText.length) { + heroSubtitle.textContent += originalText.charAt(charIndex); + charIndex++; + setTimeout(typeWriter, 80); + } + } + + // Iniciar el efecto de escritura después de un pequeño delay + setTimeout(typeWriter, 500); + + // ==================== + // Animación de los badges de habilidades + // ==================== + const skillBadges = document.querySelectorAll('.skill-badge'); + + skillBadges.forEach((badge, index) => { + setTimeout(() => { + badge.style.opacity = '0'; + badge.style.transform = 'scale(0)'; + + // Hacer visible con animación + setTimeout(() => { + badge.style.transition = 'all 0.4s ease'; + badge.style.opacity = '1'; + badge.style.transform = 'scale(1)'; + }, 100); + }, index * 100); + }); + + // ==================== + // Contador de scroll para botón "volver arriba" + // ==================== + // Crear botón de volver arriba dinámicamente + const backToTop = document.createElement('button'); + backToTop.innerHTML = '↑'; + backToTop.className = 'back-to-top'; + backToTop.style.cssText = ` + position: fixed; + bottom: 20px; + right: 20px; + background-color: var(--primary-color, #6366f1); + color: white; + border: none; + border-radius: 50%; + width: 50px; + height: 50px; + font-size: 24px; + cursor: pointer; + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; + z-index: 1000; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + `; + document.body.appendChild(backToTop); + + // Mostrar/ocultar botón según scroll + window.addEventListener('scroll', function() { + if (window.pageYOffset > 300) { + backToTop.style.opacity = '1'; + backToTop.style.visibility = 'visible'; + } else { + backToTop.style.opacity = '0'; + backToTop.style.visibility = 'hidden'; + } + }); + + // Funcionalidad del botón + backToTop.addEventListener('click', function() { + window.scrollTo({ + top: 0, + behavior: 'smooth' + }); + }); + + // Efecto hover del botón + backToTop.addEventListener('mouseenter', function() { + this.style.transform = 'scale(1.1)'; + }); + + backToTop.addEventListener('mouseleave', function() { + this.style.transform = 'scale(1)'; + }); + + // ==================== + // Mensaje de bienvenida en consola + // ==================== + console.log('%c¡Hola! 👋', 'color: #6366f1; font-size: 20px; font-weight: bold;'); + console.log('%cGracias por visitar mi portafolio', 'color: #ec4899; font-size: 14px;'); + console.log('%c¿Interesado en colaborar? ¡Contáctame!', 'color: #1f2937; font-size: 12px;'); +}); diff --git a/Vale2029/style.css b/Vale2029/style.css new file mode 100644 index 0000000..c73cb79 --- /dev/null +++ b/Vale2029/style.css @@ -0,0 +1,500 @@ +/* Variables CSS para colores coherentes */ +:root { + --primary-color: #6366f1; + --primary-dark: #4f46e5; + --secondary-color: #ec4899; + --dark-color: #1f2937; + --light-color: #f9fafb; + --gray-color: #6b7280; + --white: #ffffff; + --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); +} + +/* Reset y estilos base */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + line-height: 1.6; + color: var(--dark-color); + background-color: var(--light-color); + overflow-x: hidden; +} + +html { + scroll-behavior: smooth; +} + +/* Header */ +.header { + background-color: var(--white); + padding: 1.5rem 2rem; + box-shadow: var(--shadow); + position: sticky; + top: 0; + z-index: 1000; + animation: slideDown 0.5s ease-out; +} + +@keyframes slideDown { + from { + transform: translateY(-100%); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1200px; + margin: 0 auto; +} + +.logo h1 { + font-size: 1.8rem; + color: var(--dark-color); + font-weight: 700; +} + +.logo .highlight { + color: var(--primary-color); +} + +.nav { + display: flex; + gap: 2rem; +} + +.nav a { + text-decoration: none; + color: var(--gray-color); + font-weight: 500; + transition: color 0.3s ease; + position: relative; +} + +.nav a::after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 0; + height: 2px; + background-color: var(--primary-color); + transition: width 0.3s ease; +} + +.nav a:hover { + color: var(--primary-color); +} + +.nav a:hover::after { + width: 100%; +} + +/* Hero Section */ +.hero { + background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); + color: var(--white); + padding: 6rem 2rem; + text-align: center; + animation: fadeIn 1s ease-in; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.hero-content { + max-width: 800px; + margin: 0 auto; +} + +.hero-title { + font-size: 3rem; + margin-bottom: 1rem; + font-weight: 700; +} + +.hero-subtitle { + font-size: 1.5rem; + margin-bottom: 1rem; + opacity: 0.9; +} + +.hero-description { + font-size: 1.1rem; + margin-bottom: 2rem; + opacity: 0.8; +} + +/* Botones */ +.btn-primary, .btn-secondary { + padding: 0.8rem 2rem; + border: none; + border-radius: 5px; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + text-decoration: none; + display: inline-block; +} + +.btn-primary { + background-color: var(--white); + color: var(--primary-color); +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-lg); +} + +.btn-secondary { + background-color: var(--primary-color); + color: var(--white); +} + +.btn-secondary:hover { + background-color: var(--primary-dark); + transform: translateY(-2px); +} + +/* Container */ +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; +} + +/* Sections */ +.section { + padding: 5rem 0; +} + +.section-title { + font-size: 2.5rem; + text-align: center; + margin-bottom: 3rem; + color: var(--dark-color); + position: relative; +} + +.section-title::after { + content: ''; + display: block; + width: 80px; + height: 4px; + background-color: var(--primary-color); + margin: 1rem auto 0; + border-radius: 2px; +} + +/* Sobre mí */ +.sobre-mi { + background-color: var(--white); +} + +.sobre-mi-content { + max-width: 800px; + margin: 0 auto; +} + +.sobre-mi-text p { + font-size: 1.1rem; + margin-bottom: 1.5rem; + color: var(--gray-color); + line-height: 1.8; +} + +.skills { + margin-top: 2rem; +} + +.skills h3 { + font-size: 1.3rem; + margin-bottom: 1rem; + color: var(--dark-color); +} + +.skills-list { + display: flex; + flex-wrap: wrap; + gap: 1rem; +} + +.skill-badge { + background-color: var(--light-color); + color: var(--primary-color); + padding: 0.5rem 1.2rem; + border-radius: 25px; + font-weight: 600; + border: 2px solid var(--primary-color); + transition: all 0.3s ease; +} + +.skill-badge:hover { + background-color: var(--primary-color); + color: var(--white); + transform: scale(1.05); +} + +/* Proyectos */ +.proyectos { + background-color: var(--light-color); +} + +.proyectos-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.proyecto-card { + background-color: var(--white); + border-radius: 10px; + overflow: hidden; + box-shadow: var(--shadow); + transition: all 0.3s ease; +} + +.proyecto-card:hover { + transform: translateY(-10px); + box-shadow: var(--shadow-lg); +} + +.proyecto-image { + background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); + height: 200px; + display: flex; + align-items: center; + justify-content: center; +} + +.placeholder-image { + font-size: 4rem; +} + +.proyecto-content { + padding: 1.5rem; +} + +.proyecto-content h3 { + font-size: 1.5rem; + margin-bottom: 0.8rem; + color: var(--dark-color); +} + +.proyecto-content p { + color: var(--gray-color); + margin-bottom: 1rem; +} + +.proyecto-tech { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-bottom: 1rem; +} + +.tech-tag { + background-color: var(--light-color); + color: var(--gray-color); + padding: 0.3rem 0.8rem; + border-radius: 15px; + font-size: 0.85rem; + font-weight: 500; +} + +.proyecto-detalles { + margin-top: 1rem; + padding: 1rem; + background-color: var(--light-color); + border-radius: 5px; + animation: slideDown 0.3s ease-out; +} + +.proyecto-detalles ul { + margin-left: 1.5rem; + margin-top: 0.5rem; +} + +.proyecto-detalles li { + color: var(--gray-color); + margin-bottom: 0.3rem; +} + +/* Contacto */ +.contacto { + background-color: var(--white); +} + +.contacto-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 3rem; +} + +.contacto-info p { + font-size: 1.1rem; + color: var(--gray-color); + margin-bottom: 2rem; +} + +.contacto-methods { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.contacto-item { + display: flex; + align-items: center; + gap: 1rem; + padding: 1rem; + background-color: var(--light-color); + border-radius: 8px; + transition: all 0.3s ease; +} + +.contacto-item:hover { + transform: translateX(10px); + box-shadow: var(--shadow); +} + +.contacto-item .icon { + font-size: 2rem; +} + +.contacto-item h4 { + margin-bottom: 0.3rem; + color: var(--dark-color); +} + +.contacto-item a { + color: var(--primary-color); + text-decoration: none; + transition: color 0.3s ease; +} + +.contacto-item a:hover { + color: var(--primary-dark); +} + +/* Formulario */ +.contacto-form { + background-color: var(--light-color); + padding: 2rem; + border-radius: 10px; +} + +.form-group { + margin-bottom: 1.5rem; +} + +.form-group label { + display: block; + margin-bottom: 0.5rem; + font-weight: 600; + color: var(--dark-color); +} + +.form-group input, +.form-group textarea { + width: 100%; + padding: 0.8rem; + border: 2px solid #e5e7eb; + border-radius: 5px; + font-size: 1rem; + font-family: inherit; + transition: border-color 0.3s ease; +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--primary-color); +} + +.form-group textarea { + resize: vertical; +} + +/* Footer */ +.footer { + background-color: var(--dark-color); + color: var(--white); + text-align: center; + padding: 2rem; + margin-top: 3rem; +} + +.footer p { + margin-bottom: 0.5rem; + opacity: 0.8; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .header { + flex-direction: column; + gap: 1rem; + padding: 1rem; + } + + .nav { + flex-direction: column; + gap: 0.5rem; + text-align: center; + } + + .hero-title { + font-size: 2rem; + } + + .hero-subtitle { + font-size: 1.2rem; + } + + .section-title { + font-size: 2rem; + } + + .proyectos-grid { + grid-template-columns: 1fr; + } + + .contacto-content { + grid-template-columns: 1fr; + } +} + +/* Animaciones de scroll */ +.fade-in { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.6s ease, transform 0.6s ease; +} + +.fade-in.visible { + opacity: 1; + transform: translateY(0); +}