✕
Dato curioso ✦
🌿

¿Sabías que también soy Naturópata? Esa formación me enseñó algo que aplico cada día en diseño: entender al ser humano antes de darle una solución.

Disponible para proyectos

Catalina Ríos.

Diseño que conecta — código que funciona.

Desarrolladora Front-End y Diseñadora UX/UI titulada de Duoc UC. Creo sitios web que realmente convierten para pymes y emprendedores en Santiago.

Ver mis proyectos →
Hablemos ✦ Ver mi stack
4+
Proyectos
3
Años exp.
15+
Tecnologías
Especialista en
Desarrollo Front-End
Lo que hago
WordPress a medida
Temas propios desde cero con PHP y ACF. Sin constructores ni plantillas.
WordPressPHPACF
Bases de datos
Conecto Excel/Sheets a MySQL y APIs REST. De datos crudos a sitio funcional.
MySQLphpMyAdminSheets
Front-End vanilla
HTML, CSS y JS sin dependencias. Rápido, limpio y fácil de mantener.
HTML5CSS3JS
Diseño UX/UI
De wireframe a producto final. Figma, guías de estilo y sistemas de diseño.
FigmaUXUI
✦
Proyectos

Lo quehe construido

Cada proyecto tiene un objetivo real detrás. Aquí muestro cómo combino diseño, código y estrategia para crear soluciones que funcionan.

Ver caso completo →
✦ Destacado
Una Gran Avenida

Sitio web institucional con foco en experiencia de usuario, arquitectura de información y diseño visual cuidado al detalle.

HTML5CSS3JSUXUI
Ver sitio →
Ver sitio →
E-commerce · WP
Púrpura Esencia

Sitio de aromaterapia con carrito de compras simulado, catálogo de productos via ACF y blog editorial.

WPPHPACF
↗
Ver sitio →
Fotografía · CMS
Blu Vaiú

Galería de fotografía análoga personal. WordPress custom theme, sistema de series con slideshow.

WPPHPACF
↗
Gladys
Ver case study →
Landing · Cursos
Gladys Espinoza

Landing page para coach de desarrollo personal. Sistema visual con paleta dorada/terracota, tipografía Playfair Display y sección de cursos con video.

HTMLCSSJS
¿Tienes un proyecto en mente? Hablemos →
+
Proceso

Cómotrabajo

01
Escucho y entiendo

Antes de una línea de código, entiendo tu negocio, tu audiencia y lo que quieres lograr realmente.

02
Diseño la solución

Wireframes y prototipado en Figma para visualizar antes de desarrollar. Cero sorpresas.

03
Desarrollo y pruebo

Código limpio, responsivo y optimizado para SEO. Pruebo en distintos dispositivos y navegadores.

04
Entrego y acompaño

Entrego el proyecto funcionando y te enseño a administrarlo. Comunicación clara en cada etapa.

Skills & Trayectoria

Herramientas& experiencia

Front-End
HTML5
CSS3
JS
PHP
WordPress
Git
Diseño & UX
Figma
UX Research
Wireframes
SEO
Datos & Hosting
MySQL
Relbase
Excel
JSON
cPanel
Hostinger
Perfil profesional completo
"Mi recorrido, experiencia y recomendaciones en un solo lugar."
Ver perfil en LinkedIn →
Trayectoria
2025 — Presente
Práctica Profesional
Empresa · Santiago
Diseño UX/UI, investigación con usuarios y desarrollo front-end para plataforma digital.
2023 — 2025
Gestión de Datos
MySQL · Relbase · Excel
Administración de bases de datos e integración con soluciones web y reportes.
2022 — Presente
Proyectos Freelance
Púrpura Esencia · Blog
Diseño y desarrollo de sitios para emprendimientos locales con WordPress y PHP.
Contacto

¿Tienes un proyectoen mente?

Respondo en menos de 24h
Hablemos de
tu proyecto

Trabajo con pymes, emprendedores y agencias que necesitan presencia digital con propósito. Cuéntame tu idea.

in
LinkedIn
catalina-21-ríos
Bē
Behance
catalinaros
@
Email
cata.rios.2@gmail.com
Una Gran Avenida — Case Study Ir al sitio ↗
Portafolio · Catalina Ríos Aguilera · 2025
Caso de estudio

Una Gran
Avenida

Directorio digital de negocios comunales para la Región Metropolitana. Diseño y desarrollo completo: desde el análisis de datos hasta la publicación en producción.

Tipo
Directorio web + identidad
Stack
HTML · CSS · JS · Google Sheets
Rol
Diseño + desarrollo + datos
Estado
En producción ↗
14.397
Negocios registrados
13
Rubros activos
81
Comunas cubiertas
100%
Código propio
UX/UI Front-End Data Cleaning Google Sheets API
unagranavenida.cl ↗
unagranavenida.cl
Descripción del proyecto

El barrio también
merece una vitrina digital

Una Gran Avenida necesitaba convertir un listado de miles de negocios locales en una experiencia de búsqueda real, rápida y accesible. El desafío fue doble: limpiar y normalizar una base de datos con errores estructurales masivos, y construir desde cero un directorio web funcional que cualquier persona pueda usar sin instrucciones.

Datos
14.397 registros con dos patrones de corrupción distintos detectados y corregidos automáticamente — solo 12 filas requirieron revisión manual.
Diseño
Sistema visual propio siguiendo la guía de estilo UGA: tipografía Figtree, paleta amarillo/negro, componentes reutilizables sin frameworks.
Tecnología
Un solo archivo HTML que lee en tiempo real desde Google Sheets. Sin backend, sin dependencias externas, sin costo de servidor adicional.
HTML5 CSS3 JavaScript Vanilla Google Sheets API UX Research Diseño Responsivo
94.4%
Filas recuperables
58%
Registros con columnas invertidas
0
Dependencias externas
1
Archivo HTML que lo hace todo
Proceso

De los datos
al directorio

01 · Diagnóstico
Análisis de la base de datos
El archivo original tenía 14.397 registros con dos tipos de error distintos: el 56,8% tenía los campos Nombre y Rubro intercambiados, y el 27,8% venía de una fuente con estructura diferente que corrió todas las columnas. Identifiqué ambos patrones con Python antes de tocar cualquier dato.
02 · Limpieza
Corrección automática
Desarrollé un algoritmo de detección que usó el cruce entre los campos para identificar qué tipo de error tenía cada fila. Las correcciones automáticas cubrieron el 99,9% de los casos. El resultado se entregó en un Excel con colores por categoría.
03 · Diseño
Sistema de componentes UGA
Construí el sistema visual siguiendo la guía de estilo de UGA: tipografía Figtree, paleta amarillo #FAC010 / negro #1A1A1A, carrusel de rubros, fichas de negocio y mapa interactivo. Todo desde cero, sin frameworks ni plantillas.
04 · Integración
Conexión en tiempo real
El directorio lee los 14.397 negocios directamente desde Google Sheets publicado. Cuando el equipo de UGA actualiza el Sheets, el sitio refleja los cambios sin necesidad de tocar código.

Ver el proyecto
en producción

Funcionando en unagranavenida.cl desde junio 2025

Visitar el directorio ↗
Púrpura Esencia — Case Study Ir al sitio ↗
Case Study · E-commerce · WordPress
✦

Púrpura
Esencia

Aromaterapia que se ve, se siente y se compra.

UI Design WordPress PHP · ACF 2024
Visitar el sitio ↗
5
Secciones
8+
Productos
2
Modos UI
WP
Tema propio
Playfair Display
Titulares · Lato cuerpo
cat.riosa.laboratoriodiseno.cl/examen/
El proyecto

¿Qué es Púrpura Esencia?

Púrpura Esencia es una marca de aromaterapia natural que vende roll-ons con aceites esenciales. El proyecto consistió en diseñar y desarrollar desde cero su presencia digital completa con WordPress.

Incluye tienda con carrito, catálogo vía ACF, blog editorial, formulario de contacto y modo claro/oscuro con variables CSS nativas.

El desafío

Calma que se transmite

Crear un sitio que se sintiera tan orgánico y cálido como los propios productos: que transmitiera calma, confianza y bienestar desde el primer scroll.

Al mismo tiempo debía funcionar como tienda real — con flujo de compra claro y fichas que invitaran a explorar.

Proceso de diseño

Cómo se construyó

01
Identidad visual

Paleta morado #8B3A7E + crema #F5EDE8, tipografía Playfair Display y tono de marca cálido y sofisticado.

02
Tema WordPress a medida

Desarrollo desde cero con PHP, templates personalizados y variables CSS para el sistema de modos.

03
Tienda + Blog

Carrito con JavaScript, fichas de producto con ACF, sistema de entradas del blog con categorías.

04
Modo claro / oscuro

Toggle nativo con data-theme y variables CSS. El sitio recuerda la preferencia del usuario.

Pantallas

El sitio en acción

Tienda — productos
Blog editorial
Sobre nosotras
Contacto

Aromaterapia que se ve,
se siente y se compra.

WordPress · Tema propio · 2024

Visitar el sitio ↗
Blu Vaiú — Case Study Ir al sitio ↗
Case Study · Fotografía Análoga · WordPress

Blu Vaiú

Una colección de instantes capturados en película — viajes, personas, momentos que no se repiten.

UI Design WordPress PHP · ACF 2024
Visitar el sitio ↗
9+
Rollos
2
Modos UI
WP
Tema propio
Serif
Identidad
Playfair Display
Titulares itálica · acento violeta
cat.riosa.laboratoriodiseno.cl/wordpress/
El proyecto

¿Qué es Blu Vaiú?

Blog personal de fotografía análoga inspirado en los boleros del Bloque Depresivo. Desarrollado en WordPress con tema propio desde cero.

Galería con grid 3 columnas, entradas por rollo con slideshow, sección de cámaras, rollos, tutoriales y toggle claro/oscuro.

El desafío

Análogo en lo digital

Trasladar la estética imperfecta, nostálgica y cinematográfica de la fotografía análoga a una experiencia web sin perder usabilidad.

La tipografía serif itálica y el fondo negro profundo fueron las decisiones clave que definieron la identidad visual.

Pantallas

El sitio en acción

Rollo individual — galería con slideshow
Sobre mí
Vista móvil — slideshow de rollos
Blu Vaiú
SUR — 2024
Lomochrome
Purple
01 / 11 fotos
Lomochrome Purple · 400 ISO
Modo oscuro
Claro

Responsive
desde el diseño

Cada rollo tiene su propia entrada con slideshow táctil. La galería pasa de 3 columnas a 1 en móvil. El toggle claro/oscuro funciona en todas las resoluciones.

Slideshow por rollo
Cada entrada agrupa todas las fotos del mismo rollo con navegación ←→ táctil.
Toggle claro/oscuro
Implementado con CSS custom properties. Pruébalo con el switch de abajo del teléfono.
Grid adaptivo
3 columnas en desktop, 1 en móvil. Sin media queries redundantes.
Rollos en el sitio
Lomochrome Purple · Sur 2024 11 fotos
Tesla · Pucón 2023 9 fotos
Lo que no fue no será 7 fotos

"Cada clic de la cámara,
una nota en la melodía visual."

WordPress · Tema propio · 2024

Visitar el sitio ↗
Gladys Espinoza — Case Study Próximamente
Case Study · Landing Page · Cursos
✦

Gladys

Espinoza

Landing page para coach de desarrollo personal. Sistema visual cálido y editorial pensado para conectar emocionalmente con su audiencia.

Landing Page HTML · CSS · JS En desarrollo
Sitio en construcción
1
Landing única
3+
Cursos en oferta
Playfair
Tipografía
Video
Modal integrado
DM Sans + Playfair Display
Cuerpo · Titulares serif
Preview del sitio
gladysespinoza.cl — en construcción
El proyecto

¿Quién es Gladys?

Gladys Espinoza es coach de desarrollo personal que necesitaba una presencia digital que transmitiera su metodología de manera clara y emotiva, con capacidad para vender cursos online.

El sitio incluye sección "Quién soy", para quién es el método, metodología, cursos con modal de video, oferta formativa y guía descargable.

El desafío

Calidez que convierte

Crear una landing page que no solo informara, sino que conectara emocionalmente: que quien la visitara sintiera que Gladys la entendía antes de leer una sola línea de sus cursos.

La paleta dorada/terracota y la tipografía Playfair Display fueron la respuesta a ese brief emocional.

Proceso de diseño

Cómo se construyó

01
Brief emocional

Definición del tono, valores y audiencia objetivo. La paleta dorada/terracota surgió de mapear las emociones que Gladys quería despertar: calidez, confianza, sofisticación accesible.

02
Sistema visual

Playfair Display para titulares (con itálica para énfasis emocional) + DM Sans para cuerpo. Paleta: oro #C9956A, terracota #8B3A2A, crema #FDF6EE.

03
Secciones y flujo

Hero → Quién soy → Para quién → Metodología → Cursos con video → Oferta → Programa semana a semana → Guía descargable. Flujo pensado para la conversión.

04
Modal de video

Sistema de modales de video integrado en las cards de cursos. Al hacer clic en el play se abre un overlay oscuro con el iframe de YouTube sin salir de la página.

Secciones destacadas

Anatomía del sitio

H
Hero

Título en serif, eyebrow con línea dorada, descripción y CTA doble. Estadísticas clave al pie.

C
Cursos con video

Cards con thumbnail, botón play que abre modal de YouTube sin salir de la página.

O
Oferta formativa

Cards de precio con badge de "Destacado", lista de beneficios y CTA diferenciado por tier.

Para quién

Sección con fondo gradiente terracota y lista numerada que apela directamente a los dolores de la audiencia.

Semana a semana

Grid de 4 columnas con el programa del curso. Hover con borde dorado y fondo sutil.

Guía descargable

Sección terracota con formulario de captura de email para entregar un lead magnet gratuito.

Calidez que conecta.
Diseño que convierte.

Landing Page · HTML/CSS/JS · En desarrollo · 2025