Volver a proyectos
Ingeniería de software · Web interactivaEn progreso

Trilinea Arquitectura

Explorar un espacio. Hacerlo propio.

Web para un estudio de arquitectura con configurador interactivo de materiales, recorrido 360° y formularios protegidos. En desarrollo local.

Mi contribución

Desarrollo web y diseño de interacción

Tecnologías

Astro / TypeScript / SVG / Cloudflare

Render de sala de Trilinea utilizado en el configurador de materiales
Imagen del configurador · Trilinea Arquitectura
X

El resultado

Hice posible explorar combinaciones de materiales en tres ambientes configurables.

Y

La evidencia

Tres ambientes con estado independiente, comparación con el original y verificaciones de navegador documentadas en escritorio y móvil.

Z

El enfoque

Combiné capas de imágenes alineadas, máscaras SVG, carga diferida y un controlador de ambientes reutilizable.

Dentro del proyecto

Explorar el sistema

Abre una etapa para conocer cómo funciona y por qué se diseñó así.

01PrepararWebP · SVG masks

Los renders se alinean y dividen en capas de materiales, con máscaras para preservar muebles y objetos.

Decisión de ingeniería

Usar alineación de perspectiva cuando las cámaras difieren. Separar fuentes de recursos generados.

02ComponerAstro · SVG

El visitante elige un ambiente y cambia materiales por zona. Cada ambiente conserva sus selecciones.

Decisión de ingeniería

Una composición 2D de cámara fija basta para elegir materiales. No simula nueva iluminación ni reflejos.

03Cargar a demandaTypeScript

Las capas se cargan al elegir el ambiente, con solicitudes pendientes aisladas y reintento si fallan.

Decisión de ingeniería

Conservar el ambiente anterior ante un fallo de carga en lugar de mostrar una vista vacía.

04VerificarBrowser checks

Las verificaciones documentadas cubren navegación, estado por ambiente, reinicio, teclado y bordes de máscaras.

Decisión de ingeniería

Verificar resultados visibles y recuperación ante fallos. El hosting de producción y los límites globales de formularios siguen pendientes.

Recorrido de implementación · no es una demo de inferencia

El problema

Un estudio de arquitectura necesita más que una galería: el visitante debe poder explorar un espacio y entender cómo lo transforman los materiales. Los recursos disponibles eran renders de cámara fija, no un modelo 3D completo en tiempo real.

Construí el sitio y su configurador interactivo considerando esas restricciones. Los renders arquitectónicos pertenecen al estudio; mi contribución es el software, la preparación de capas y el diseño de interacción.

Elegir el nivel adecuado de interacción

Componer recursos existentes

El configurador usa capas alineadas y máscaras SVG por superficie. Las diferencias de cámara del comedor requirieron alineación de perspectiva. Las máscaras de primer plano preservan espejos, plantas y muebles.

Es una simulación 2D de cámara fija. Cambia materiales visibles sin recalcular iluminación ni reflejos. Esta decisión permite aprovechar los renders entregados sin necesitar un nuevo proceso de producción 3D.

Compartir comportamiento, aislar estado

Sala de TV, comedor y sala de estar usan el mismo controlador. Las selecciones se conservan por separado al cambiar de ambiente. El visitante puede comparar con el original y restablecer el ambiente seleccionado.

Tratar la carga como parte del producto

Los recursos de otros ambientes se cargan a demanda. Las solicitudes pendientes se aíslan; si un ambiente falla, el anterior permanece visible y se puede reintentar. Es parte de la experiencia, no solamente un detalle interno.

Verificar lo que ve el visitante

El proyecto documenta 32 verificaciones de navegador aprobadas para el configurador de tres ambientes. Cubren navegación, estado independiente, reinicio, comparación, teclado y fallos de carga en escritorio y móvil.

Las comprobaciones visuales revisan los bordes de las máscaras y la preservación de objetos. El sitio también integra un recorrido 360° y formularios de contacto. No se han medido mejoras de conversión ni impacto comercial.

De la validación local a la publicación

El proyecto sigue en desarrollo, sin demo ni repositorio públicos. Están pendientes la publicación y los límites globales de solicitudes de formularios. La vista previa del portfolio es una imagen del configurador, no una afirmación de que la web del estudio ya esté publicada.

Construir / Verificar / Aprender

Evidencia, más que adjetivos.

Configurador de tres ambientes

Sala de TV, comedor y sala de estar comparten controlador y mantienen selecciones de materiales independientes.

Validación local

El proyecto documenta 32 verificaciones de navegador aprobadas para el configurador. La publicación continúa pendiente.

Siguiente caso

API RAG financiera