GiraFlor: de mi perfil a un producto digital

Situación

Un espacio para mostrar más que un CV

El proyecto comenzó en la formación UX Content Vibe, de Sol Parnofiello y Joni Ariste: una capacitación práctica en Git, GitHub, terminal y desarrollo con IA como copiloto. Además, trabajamos en la narrativa estratégica del portfolio.

Necesitaba un lugar propio donde mostrar mi experiencia en Tiendanube, explicar mis decisiones y compartir proyectos personales. También quería hacer visible lo que aprendía por fuera de mi rol: capacidades de UX que buscaba desarrollar más allá de las necesidades de mi equipo.

Tarea

Convertir mi trayectoria en una experiencia

El desafío fue crear un portfolio que permitiera entender mi perfil, explorar mi trabajo y contactarme. Debía tener una identidad propia y una estructura que pudiera actualizar de forma autónoma mientras aprendía a trabajar con código y repositorios.

“Digamos que el mundo es una figura, hay que leerla. Por leerla entendamos generarla.”

Julio Cortázar, Rayuela

Acción

Diseñar, construir y hacer evolucionar

Arquitectura y escritura. Organicé las secciones y los casos con metodología STAR. Trabajé títulos, negritas y jerarquías H2 y H3 para facilitar el escaneo y anticipar lo importante. La escritura del portfolio debía demostrar el criterio de contenido que buscaba comunicar.

Identidad visual. Tomé la simbología de los girasoles como punto de partida para GiraFlor. Con ayuda de Stitch, definí la base del sistema de diseño: colores, tipografía y componentes.

Desarrollo y publicación. Trabajé con HTML para la estructura y el contenido, y CSS para la presentación visual. Usé Codex como agente de desarrollo y aprendí a gestionar cambios desde VS Code, la terminal, Git y GitHub. Publiqué la V1 en Firebase Hosting y compartí el código en un repositorio público.

Incorporé a mi flujo de trabajo diario comandos como git status, git add ., git commit -m "…", git push y npm run deploy.

Encontrabilidad y contacto. Apliqué mi experiencia en SEO: configuré el sitemap y robots.txt, creé la propiedad en Google Search Console y envié el sitemap. Revisé titles, meta descriptions y previews sociales por página e incorporé un formulario de contacto conectado con Firestore.

Evolución bilingüe. Después del lanzamiento, traduje el portfolio al inglés y trabajé con JSON e i18n para organizar las traducciones. Actualicé las rutas y configuré redirecciones desde las antiguas URL con terminación .html.

Iterar sobre fricciones concretas

• Facilitar el contacto. Recibí feedback sobre el esfuerzo de completar el formulario y la necesidad de copiar mi correo directamente. Cambié el CTA, que abría la aplicación de mail predeterminada, para que copiara la dirección al portapapeles. Para anticipar y confirmar la acción, incorporé un ícono de copiar que, después del clic, cambia a un check acompañado de un mensaje de confirmación.
• Mostrar mi práctica técnica. Reemplacé «Enfoque» por «Cómo trabajo» para explicar mi flujo de trabajo y hacer visibles capacidades técnicas que estaban en mi CV, pero no en el portfolio.

Resultado

Un portfolio publicado y una nueva autonomía

Construí un portfolio bilingüe con identidad propia, casos de estudio, formulario de contacto y código versionado. El proyecto me dio práctica para llevar decisiones de contenido y diseño a la implementación: modificar el sitio, verificar los cambios y publicarlos.

Próximo paso: revisar la navegación mobile

Con un enfoque mobile first, reduje la cantidad de enlaces visibles en el header para priorizar las secciones principales. Ahora, evalúo reunir todas las secciones en un menú hamburguesa: el ícono ocuparía menos espacio y, al abrirlo, la persona tendría todas las opciones de navegación disponibles.