Portfolio v1 → v2

The starting point

When I decided to reposition myself as a Product Designer with a Design Experience Engineering lens, I realized the first product that needed an audit was my own portfolio.

The v1 was born as an experiment: I generated the site with Figma Make and published it on GitHub Pages, at helloraboff.github.io. It was a quick proof that the idea worked, and I fell in love with a lot of it, the T-shaped strategist concept, a few layout moves, the energy of a first draft. But when I came back to it with product eyes, the debt list surfaced: no real control over SEO, contrast below accessibility standards, heavy images, a single language, and no structure to grow with cases written in my own voice.

The hardest part was not technical, it was editorial: telling apart what I wanted to keep out of attachment from what had to evolve for v1 to become a portfolio that actually opened doors. I was looking for a new opportunity, and that gave me the filter: keep what communicates who I am today and helps me get hired, drop what was only fondness for the first version. The v1 stays published and untouched at helloraboff.github.io, on purpose, so anyone can compare the two versions side by side.

The challenge

A portfolio that promises end-to-end delivery has to be the proof of that promise. The challenge was not to remake a pretty site, it was to build a product that could back up the positioning: genuinely bilingual, WCAG AA accessible, fast on mobile, findable on Google, and free of that generic AI-generated look. And to do all of it as my own client, with the brief shifting in my head every week.

Why Next.js and Claude Code

Figma Make gave me speed on v1, but left me without control over what matters in a long-term product: metadata, image performance, per-language routes, HTML semantics. I chose Next.js 16 with Tailwind because it gives that control back, with static generation and image optimization built in. And I chose to work with Claude Code because that is how I deliver today: the strategy, the criteria and every design decision are mine, and AI speeds up building what I have already defined.

The journey: from faithful copy to repositioning

Side by side, the two versions show the distance covered: from the T-shaped strategist UX/UI Designer of v1 to the Design Experience Engineer of v2.

The v2 was born in May 2026 and went through three clear stages. First, fidelity: I rebuilt the site faithful to v1 and fixed the heuristic problems the audit had flagged, to separate technical debt from actual design decisions. Then, repositioning: I rewrote the content around the DXE narrative, structured PT/EN internationalization with native English reviewed with my English teacher, and set up an MDX case system so I could write texts like this one.

The third stage was the polish, and that is where the real work showed up. A run of eight commits dedicated purely to removing AI design clichés I had let slip through myself: decorative blobs in every section, gradients everywhere, ghost numbers, five little stars on testimonials. An iOS Safari compatibility saga, where the mobile menu only worked after I tested on the actual device instead of the emulator. And a final round where I browsed the site as a demanding user and mapped 11 adjustments of hierarchy, breathing room and voice, from the scroll indicator glued to the CTA down to a footer that now owns it: designed and built by me, with Next.js and Claude Code.

Process and role

1. Auditing v1. I evaluated the site I had published with the same rigor I would apply to a client's product: usability heuristics, contrast, image performance, SEO and content structure.

2. Technical foundation with design criteria. I defined the stack, the color tokens with dark mode as default, the typography and the per-language route architecture. AI wrote fast, but it wrote what I specified.

3. Native bilingual content. I rewrote everything in Portuguese and English as sibling versions, not mirrored translation. The English voice went through human review so it sounds like how I actually speak.

4. Validation in real context. I tested on the iPhone, on desktop, in light and dark mode, generated a PDF for copy review and turned every friction point into a prioritized backlog item.

5. Curating against generic design. I did a deliberate cleanup of the visual patterns that give away an AI-built site with no direction. What has a function stayed; what was ornament left.

The delivery

The v2 is live at hellora-portfolio-v2.vercel.app: bilingual with hreflang and per-page language switching, WCAG AA accessibility, images optimized with next/image, a custom og-image for sharing, sitemap and robots configured, my CV hosted on the site itself in PT and EN, and real testimonials with photo, date and identified source.

The numbers tell the measurable part. The strategic part is that the site became infrastructure: the MDX case system lets me publish a new case with two files, SEO and layout already solved, without depending on an external platform.

Learnings

1. Being my own client was harder than it sounds. With no external deadline, scope grows and standards slip. What unblocked the project was treating myself as a formal client: a documented audit, a prioritized backlog and validation rounds with a closed list.

2. An emulator does not replace a real device. The mobile menu broke only on iOS Safari, and it took a long string of attempts until I tested on the actual phone and found the cause. Today nothing I deliver ships without passing through a physical device.

3. AI speeds up production, but repertoire makes the decisions. The AI design clichés entered the project through my own hands, by accepting defaults without questioning them. Removing them took a trained eye and eight curation commits. The tool amplifies the judgment of whoever uses it, for better and for worse.

4. Keeping v1 online was the cheapest and most valuable editorial decision. The real comparison between the two versions communicates growth better than any paragraph about professional evolution ever could.