Case Study · Live

This site, built collaboratively with an AI agent.

A meta-project: shipping my own portfolio in a single afternoon by pairing with an AI coding agent. The output is what you're reading. The interesting part is the process: what I owned, what I delegated, and what I edited.

Status · Live Type · Meta-project HTML CSS JavaScript GitHub Pages Claude (Cowork)

I work in data: pipelines, warehouses, dashboards. Frontend isn't my home turf. But I needed a portfolio. So I treated it as a small experiment: how far can I get if I bring the same scoping, decision-making, and review discipline I apply at work, but use an AI agent to handle the implementation?

The brief

A single-page portfolio that signals my craft as a Senior BI Engineer at a glance. It needed to:

Translate 8+ years across CTT, Audiogest, Multivision (Nokia), and EDP into something a recruiter can scan in 30 seconds.
Look the part for the role: technical, clean, not a generic template.
Be easy to extend as I add real projects (case studies, dashboards, pipelines).
Deploy on GitHub Pages with no build step or framework lock-in.

The collaboration model

I framed this as pair programming, not delegation. The agent gets context, generates options, and writes code. I drive: I make the decisions, push back when output drifts, and review every line that ends up in the repo.

What I owned

Defining the brief, audience, and tone
Choosing the design direction (dark + cyan + data-viz motifs)
Picking which CV content to surface and how to translate it
Deciding sections, hierarchy, and what to leave out
Reviewing every code change and rejecting drift
Catching the broken preview and demanding a fix

What the agent handled

Reading the CV PDFs and surfacing salient details
Generating the HTML, CSS, and JS scaffolding
Implementing the responsive layout and animations
Writing the GitHub Pages deployment guide
Inlining assets when relative paths broke in preview
Suggesting future project ideas grounded in my CV

Process — start to live in one session

Step 1 · Scoping

Clarifying questions before code

The agent didn't start writing. It read both my Portuguese and English CVs, then asked four targeted questions: language, design style, sections, and GitHub setup. That single round eliminated the most common AI failure mode: confidently building the wrong thing.
Step 2 · Design call

Recommendation, not menu

When I asked for a design suggestion, it proposed "modern tech / dark mode with data-viz accents" with reasoning grounded in my field. I accepted, and we anchored every later decision (typography, color, motifs) to that direction.
Step 3 · Build

Structured generation, sectioned output

Hero, About, Experience timeline, Skills, Projects, Interests, Contact, all built in a single pass with a clear task list. Tech badges, key results, and stat numbers were sourced directly from the CVs (10,000+ daily dashboard users, 500+ stakeholders, 2,500 hours saved/year).
Step 4 · Verification

The honest part — verification didn't go cleanly

The agent tried to render the site headlessly to verify, but the sandbox wedged on a backgrounded server. It told me, clearly. It then did a static review and flagged the limitation rather than claiming success. I noticed when I previewed it that the CSS wasn't loading, told the agent, and we diagnosed it: the preview pane sandboxes sibling files. Fix: inline the CSS, JS, and favicon as data URIs. One round.
Step 5 · This case study

Make the meta-project the first project

Once I saw it working, I realized the build itself was the most honest "Agentic AI" example I could put on the site. So I asked for this page.

Reflection

The agent saved me probably a week of front-end work. It didn't save me from the work that actually matters: deciding what to say, what to surface, and what to cut. That's still mine. The leverage is in the implementation, not the judgment.

Decisions worth mentioning

No framework, no build step

Plain HTML, CSS, vanilla JS. No React, no static site generator, no Tailwind. For a single-page portfolio, the build pipeline would weigh more than the site. GitHub Pages can serve it as-is, and I can edit any line without learning a tooling stack.

Inline everything for preview portability

After the preview-pane CSS issue, I had the agent inline CSS, JS, and the favicon directly into index.html. The modular files still exist in the repo for reference, but the live site is one self-contained file. Trade-off: less modular, but immune to any sandbox/preview issue and easier to share.

Real numbers, not vague claims

The hero stats (8+ years, 500+ stakeholders, 10k+ daily dashboard users, 2,500 hours/year automated) all come directly from my CV. No rounding up, no marketing inflation. If a recruiter asks me to back any of them, I can.

Placeholder cards are a feature, not a bug

The other three project slots are visibly empty by design, signaling "this portfolio is being actively built" rather than pretending to be more complete than it is. As I publish each case study, it replaces a placeholder.

Takeaways

Scope first, code never

The cheapest minute is the one where the agent asks a clarifying question instead of generating output. Reward that behavior.

Pair, don't delegate

Treat the agent like a fast colleague who needs context. Don't hand over judgment. Hand over implementation.

Verify what you can

The agent flagged when verification was incomplete. That honesty is worth more than a confident "done".

Ship, then iterate

v1 live in an afternoon beats v3 forever in a branch. Real projects will replace placeholders one by one.

What's next

This site is v1. The next iterations are content, not code:

NPS deep-dive on a public dataset: replicating the methodology I used at CTT in a fully reproducible way.
Quality of Service dashboard case study: the design and DAX logic behind a dashboard used daily by 10k+ people, on non-sensitive sample data.
SQL pattern cookbook: reusable patterns I've applied at work (SCDs, date dimensions, data quality checks).
Each replaces a placeholder card.