Sitio Web IE - Matilde Orellana
| Título | Sitio Web IE - Matilde Orellana |
|---|---|
| Tipo de Proyecto | Proyecto de Curso |
| Palabras Clave | sitioweb |
| Período | 2025-2025 |
| Asignatura | Imagen Escrita |
| Del Curso | Imagen Escrita 2025 |
| Carreras | Diseño |
| Alumno(s) | Matilde Orellana |
| Profesor | Javiera Ruiz |
| URL | https://matildeorellana.github.io/Sitio-Web-Matilde-IE/ |
Sitio web IE 2025
_12.56.20.png)
Introducción
El proyecto consiste en la creación de un sitio web personal desarrollado en el contexto del curso "Imagen Escrita 2025". El objetivo fue concentrar en un solo lugar los ejercicios de p5.js, acompañarlos con una breve presentación y ofrecer accesos directos a recursos y wikis de proceso. La estructura privilegia una navegación simple y clara, pensada para publicarse en GitHub Pages y funcionar bien tanto en escritorio como en móvil.
_13.30.17.png)
La propuesta visual busca una mirada juvenil y enérgica, fondo oscuro con acentos en azules profundos, tipografía contundente y microinteracciones que aportan ritmo sin distraer. El hero combina dos animaciones canvas que dialogan con formas geométricas simples del mismo layout. La galería integra un visor 1:1 para respetar la lectura de cada pieza, mientras los paneles informativos y el sistema de botones mantienen el equilibrio entre lo estructural y lo lúdico.
Repositorio Sitio Web
El repositorio concentra el código fuente del sitio (HTML, CSS y JavaScript), los assets (íconos e imágenes) y la integración de los sketches de p5.js. Desde allí se puede clonar, revisar el historial de cambios, abrir issues y ver la configuración de GitHub Pages usada para la publicación.
Wireframe
El wireframe final organiza el sitio en una columna central con módulos claros: encabezado con título centrado "Portafolio Imagen Escrita 2025" y barra de navegación compacta (abre para mostrar opciones), dos “hero slots” interactivos, sección "Sobre mí" con texto en el canal central y semicírculos laterales, Galería de los proyectos con miniaturas y visor 1:1 para cada proyecto, bloque "Del curso" y "Wiki" en paneles plegables del mismo ancho que el visor, y footer con iconos de contacto que aparecen al activar “Contacto”.
A nivel visual se utiliza una grilla simple, paleta azul/navy sobre fondo negro, tipografía Ramabhadra para el título y una sans para textos. Se priorizan jerarquía y contraste, micro-interacciones (hover/focus, pill buttons) y accesibilidad (hitbox generosa en la barra, navegación con teclado). En móvil la barra pasa a 2 columnas, se reduce el tamaño de los círculos y el texto se alinea a la izquierda para legibilidad. El uso de variables CSS y canvas DPR-aware mantiene consistencia y rendimiento.
Propuesta del código
A grandes rasgos, este sitio consiste de tres capas que trabajan juntas: HTML para la estructura, CSS para el look & feel y JavaScript para las interacciones. La idea fue mantener una base simple y clara, pero con pequeños detalles que le dan personalidad: una barra superior que se expande, dos heros animados, una sección Sobre mí con formas redondas, una Galería con visor cuadrado (hasta 600×600 px) y un footer con íconos que aparecen al pedir contacto.
- ACCESIBILIDAD Y MICRO-INTERACCIÓN: barra con área de activación generosa (hitbox) y apertura controlada por hover/focus/JS con histéresis para evitar “saltos”. Elementos clicables con feedback inmediato (opacidad y leves transformaciones) y navegación por teclado.
- RESPONSIVIDAD: diseño que fluye de 2 a 1 columna según ancho; en móvil, el menú se organiza en dos columnas al abrirse. Los círculos decorativos escalan para no invadir el texto y la tipografía/ancho de lectura se ajustan para que el párrafo sea cómodo (alineado a la izquierda en pantallas pequeñas).
- RENDIMIENTO: animaciones en canvas DPR-aware (nítidas en pantallas de alta densidad), bucles con requestAnimationFrame y limpieza eficiente; uso de CSS custom properties para colores/espaciados y JS modular sin dependencias pesadas.
Html
La estructura está pensada para que cada bloque haga una cosa y nada más:
- Barra de navegación (top-rail): contiene la etiqueta de inicio, el menú y los tres puntitos.
- Hero doble: dos contenedores donde se dibujan las animaciones.
- Sobre mí: texto centrado entre dos conjuntos de círculos decorativos.
- Proyectos: un visor cuadrado y abajo la galería de miniaturas que lo alimenta.
- Del curso / Wiki del proyecto: dos paneles plegables, cada uno con su botón.
- Footer: botón Contacto y los íconos de mail y sitio.
Datos extra:
Las tarjetas de galería guardan el título y el enlace como atributos (data-title, data-link) para que el visor tome de ahí la info. El visor muestra la imagen centrada y el título como un botón que abre el sketch en p5.js.
CSS
El estilo apuesta por contraste alto y formas suaves:
- Paleta manejada con custom properties (por ejemplo: --blue, --navy, --panel).
- Barra superior que parte cerrada, se expande con hover/focus o por JS; en móvil pasa a dos columnas para que todo quepa.
- Hero con tarjetas de borde redondeado y sombras sutiles; el lienzo ocupa todo el slot.
- Sobre mí ajusta el tamaño de los círculos según el alto disponible; en móvil se reduce y el texto se alinea a la izquierda para mejor lectura.
- Visor 1:1 con tope de 600 px de lado y la imagen en object-fit: contain.
- Galería en grilla de thumbs cuadrados (se ven ordenados siempre).
- Microinteracciones: ligera subida de opacidad al pasar el mouse y sombras/transformaciones suaves (hover).
JavaScript
El JS está organizado en módulos independientes (IIFE) para aislar responsabilidades:
- Casita + parallax: al hacer clic te lleva arriba con desplazamiento suave; el botón baja un poco mientras navegas (parallax).
- Barra con histéresis: evita que sea “nerviosa”; se abre con una pequeña demora al entrar y se cierra con otra al salir. También responde al enfoque con teclado.
- Paneles plegables (Del curso y Wiki del proyecto): cada botón abre/cierra su propio panel sin afectar al otro.
- Galería → Visor: al clicar un proyecto, se abre el visor, muestra la imagen centrada (hasta 600×600) y el título se vuelve un botón que te lleva al sketch de p5.js.
- Hero izquierdo: explosiones en tonos azul/navy con un brillo mate, optimizadas para pantallas de alta densidad.
- Hero derecho: columnas de círculos blancos que caen; la columna más cercana al mouse crece un poco (interacción sutil).
- Footer: el botón Contacto muestra/oculta los íconos con una transición breve.
Encargos
Serie de cuatro ejercicios que exploran distintas ideas de programación creativa: composición gráfica (portada de disco), animación en bucle, generación de patrones y recursión.
Reflexiones
Este sitio fue un ejercicio completo de diseño + código, pasando de un wireframe claro a una interfaz interactiva, manteniendo una identidad simple, juvenil y funcional. La idea fue sostener una experiencia fluida (sin sobrecargar) y, a la vez, mostrar la identidad propia dentro de los experimentos con p5.js de forma cuidada.
Durante el proceso costó y enseñó mucho la barra de navegación: hacerla “tolerante” (hitbox amplio e histéresis) para que tenga margen de error, reorganizarla en dos columnas en móvil y, de paso, descubrir cómo pequeños cambios de CSS pueden romper (y luego arreglar) interacciones de JS.
En la galería, lograr el visor cuadrado 600×600 con imagen centrada y el salto limpio al sketch de p5 fue super importante para la lectura del portafolio. A nivel de sistema, las variables CSS dieron coherencia y velocidad para ajustar color y espaciados. En general fue un buen ejercicio para aprender distintas maneras de llegar a resultados, utilizar IA para lograr llegar a lo pensado, ajustarlo, recomponerlo. Quede satisfecha con el resultado final.