GiraFlor: from my profile to a digital product

Situation

A space to show more than a résumé

The project began during UX Content Vibe, a training program by Sol Parnofiello and Joni Ariste: hands-on practice in Git, GitHub, the terminal and development with AI as a copilot. We also worked on shaping the portfolio’s narrative strategically.

I needed a space of my own to showcase my experience at Tiendanube, explain my decisions and share personal projects. I also wanted to highlight what I was learning beyond my role: UX skills I wanted to develop beyond my team’s needs.

Task

Turning my career into an experience

The challenge was to create a portfolio that would help people understand my profile, explore my work and contact me. It needed its own identity and a structure I could update independently while learning to work with code and repositories.

"Let us say that the world is a figure, it has to be read. By read let us understand generated."

Julio Cortázar, Hopscotch

Action

Designing, building and evolving

Architecture and writing. I organized the sections and case studies using the STAR method. I worked on titles, bold emphasis and H2 and H3 hierarchies to support scanning and bring key information forward. The portfolio’s writing needed to demonstrate the content judgment I wanted to communicate.

Visual identity. I took the symbolism of sunflowers as a starting point for GiraFlor. With help from Stitch, I defined the foundations of the design system: colors, typography and components.

Development and publishing. I worked with HTML for structure and content, and CSS for visual presentation. I used Codex as a development agent and learned to manage changes through VS Code, the terminal, Git and GitHub. I published V1 on Firebase Hosting and shared the code in a public repository.

I incorporated commands such as git status, git add ., git commit -m "…", git push and npm run deploy into my daily workflow.

Discoverability and contact. I applied my SEO experience: I configured the sitemap and robots.txt, created the property in Google Search Console and submitted the sitemap. I reviewed titles, meta descriptions and social previews for each page and added a contact form connected to Firestore.

Bilingual evolution. After launch, I translated the portfolio into English and worked with JSON and i18n to organize the translations. I updated the routes and configured redirects from the old URLs ending in .html.

Iterating on specific points of friction

• Making it easier to get in touch. I received feedback about the effort of filling out the form and the need to copy my email address directly. I changed the CTA, which opened the default email app, so it would copy the address to the clipboard. To make the action clear and confirm it, I added a copy icon that changes to a check mark after a click, accompanied by a confirmation message.
• Showing my technical practice. I replaced “Approach” with “How I work” to explain my workflow and highlight technical skills that were on my résumé but missing from the portfolio.

Result

A published portfolio and newfound independence

I built a bilingual portfolio with its own identity, case studies, a contact form and version-controlled code. The project helped me learn to implement content and design decisions: modifying the site, checking the changes and publishing them.

Next step: review mobile navigation

Taking a mobile-first approach, I reduced the number of visible links in the header to prioritize the main sections. Now, I am considering bringing all sections together in a hamburger menu: the icon would take up less space, and opening the menu would give visitors access to all navigation options.