Encargo 2/ Fernanda Cortés/Dis. Desde el código 2026
| Título | Encargo 2/ Fernanda Cortés/Dis. Desde el código 2026 |
|---|---|
| Asignatura | Diseño desde el Código |
| Del Curso | Diseño desde el Código 2026 |
| Carreras | Diseño |
| Nº | 2 |
| Alumno(s) | Fernanda Cortés |
| URL | https://cortesfernanda.github.io/web 2026/ |
| Declaración uso de IA: Para el desarrollo de la interfaz, se utilizó Google Antigravity, una plataforma de desarrollo basada en inteligencia artificial.La herramienta asistió en la generación y validación de código. |
Diseño
Prompts
1. Arquitectura del Proyecto
Estructura modular compuesta por 4 vistas HTML que comparten una única hoja de estilos y un archivo de interacción:
index.html: Vista de inicio (Hero y bienvenida).
proyectos.html: Portafolio interactivo con morfología orgánica.
sobre-mi.html: Perfil profesional y badges de habilidades.
contacto.html: Vías de comunicación y figura interactiva CSS.
styles.css: Estilos globales, variables CSS y animaciones.
script.js: Menú responsive y motor de partículas en <canvas>.
assets/: Recursos multimedia (fotografías, isotipos y gráficos).
2. Estructura y Componentes Comunes (HTML5)
Navbar Glassmorphism: Menú de navegación global fijo con botón hamburguesa accesible (aria-expanded) para vistas móviles.
Canvas de fondo: Elemento <canvas id="hero-canvas"> presente en todas las páginas para desplegar la atmósfera interactiva sin interferir en los eventos del puntero.
3.Sistema de Diseño y Estilos (CSS3)
Colores abisales y bioluminiscencia: Fondos oscuros (#030a13, #01050a) contrastados con cian y azules eléctricos (#00b4d8, #90e0ef).
Glassmorphism: Uso de transparencias (rgba) combinadas con la propiedad backdrop-filter: blur(18px) en la barra de navegación para difuminar el contenido en desplazamiento (scroll).
4. Lógica e Interacción (JavaScript Vanilla)
Navegación Móvil: Control de clases activas en el botón hamburguesa y cierre automático al interactuar fuera del menú.
Sistema de Partículas Bioluminiscentes:
Renderizado continuo mediante requestAnimationFrame a 60 FPS.
Programación Orientada a Objetos (clase Particle) para simular burbujas con posición, opacidad, velocidad ascendente y brillo difuminado (shadowBlur) aleatorios.
5.Diseño de Secciones Clave
Grilla de Proyectos y Efecto Morphing (proyectos.html): Grilla adaptativa (CSS Grid de 3 a 1 columna) con animación de bordes asimétricos (border-radius cíclico) que emula la oscilación fluida de una medusa.
Badges de Habilidades (sobre-mi.html): Elementos traslúcidos con bordes redondeados y microinteracciones de escala y cambio de tono al cursor (hover).
Figura Orgánica en Contacto (contacto.html): Ilustración en HTML/CSS compuesta por tentáculos animados mediante @keyframes y traslaciones oscilatorias horizontales.