Api Doc Portfolio

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

I'm a software engineer based in Mexico, with a strong focus on backend web development using Python. I also have a growing interest in frontend technologies and large language models (LLMs). This portfolio reflects that mix through a UI inspired by API documentation styles commonly seen in tools like Swagger and Postman.

Github Repo

If you'd like to use or build upon this design, feel free to fork the repository linked below :).

https://github.com/iGeraQ/portfolio-api-doc.git

Portfolio

How I Built It

As mentioned before, my goal for this hackathon was to create a portfolio with a distinctive style and environment that represents me as a developer. I wanted to use a technical theme without alienating non-technical users, so I designed the portfolio around an API documentation aesthetic.

Another key requirement was maintainability. The entire portfolio is driven by a single JSON file that contains all the personal data displayed on the site, making it easy to update or extend without touching the core code.

This portfolio was developed using React and TypeScript to ensure scalability and type safety, combined with Tailwind CSS to quickly iterate on UI while maintaining visual consistency.

The main tools used during the hackathon were Gemini, Antigravity IDE (Gemini 3 Pro), and Google Cloud Run. Gemini acted as a creative assistant for prompt engineering and storytelling, Antigravity Agents behaved like a senior frontend reviewer—helping with refactoring, bug fixing, and UI/UX feedback—and Cloud Run was used for deployment.

Prior to starting the project, I reviewed a prompt engineering document published by Google scientists. I applied those concepts while working with Gemini, refining prompts using techniques such as one-shot, step-back, and tree-of-thoughts to initialize the project, configure it, evaluate the code, and improve the JSON data structure. Some of these prompts are included as part of the submission.

# Prompt: Refactor Resume Page to Fetch Data from JSON

**Context:**
We are shifting the portfolio architecture to be **Data-Driven**.
Instead of hardcoding text and paths in the HTML, all content is stored in a local file named `data.json`.

**The Task:**
Refactor the "Resume/IDE Viewer" page (HTML/JS) to dynamically load its content by fetching `data.json`.

**Requirements:**

1.  **The JSON Structure:**
    Assume the `data.json` file has this specific structure:
    ```

json
    {
      "resume": {
        "pdf_path": "/assets/cv.pdf",
        "filename": "cv_xxx_backend.pdf",
        "last_updated": "2026-01-12",
        "raw_data": {
            "name": "XXX",
            "role": "Junior Backend Developer",
            "stack": ["Python", "Django", "Docker"]
        }
      }
    }


    ```

2.  **Typescript Logic (Fetch & DOM Manipulation):**
    * On page load, use `fetch('./data.json')`.
    * **Update PDF:** Locate the `<embed>` or `<iframe>` and set its `src` attribute using the value from `resume.pdf_path`.
    * **Update "Raw" View:** Populate the code block in the "Raw (JSON)" tab with the content of `resume.raw_data` (formatted nicely).
    * **Update UI Labels:** Update the "File Path" breadcrumbs in the header to match `resume.filename`.

3.  **HTML Changes:**
    * Remove any hardcoded `src` attributes from the PDF container (leave it empty or put a loading spinner initially).
    * Add unique IDs to the elements that need to be updated via JS (e.g., `id="pdf-viewer"`, `id="json-code-block"`, `id="file-name-label"`).

**Deliverable:**
Provide the **updated JavaScript** to handle the fetch and update logic, and the **minimal HTML snippet** showing the IDs setup.

Later in the process, I created a dedicated prompt to evaluate both UI and UX using Gemini 3 Pro. The agent generated a detailed review document with actionable recommendations, which helped me significantly refine the final version of the portfolio.

# Prompt: UX Audit for Non-Technical Users (Recruiter Persona)

**Role:**
Act as a **Senior UX Researcher** paired with a **Non-Technical Tech Recruiter** (HR Manager). You specialize in auditing developer portfolios to ensure they are accessible to hiring managers who do not code.

**Context:**
I have built a portfolio with a heavy **"API Documentation / Command Line Interface (CLI)"** theme.
* **Visuals:** Dark mode, monospaced fonts, terminal inputs, JSON code blocks.
* **Navigation:** Sidebar (like Stripe Docs) and a "Command Palette".
* **Content:** My profile data is currently presented as raw JSON in some sections.

**The Problem:**
I fear the UI is "over-engineered" and might confuse non-technical recruiters, causing high cognitive load or navigation friction.

**Your Task:**
Perform a Heuristic Evaluation of this concept. Identify specific sections where "Theme" conflicts with "Usability" and propose solutions that **retain the aesthetic but fix the UX**.

**Analysis Steps (Chain of Thought):**
1.  **The "6-Second Scan" Simulation:** Analyze the portfolio from the perspective of a recruiter who needs to find my Name, Role, Tech Stack, and Resume button in under 6 seconds.
2.  **Identify Friction Points:** List elements that might be "too clever" (e.g., having to type a command to see projects, or reading a bio inside a JSON string).
3.  **Propose "Thematic Bridges":** Suggest UI patterns that *look* technical (API style) but *behave* intuitively (standard web interactions).

**Output Format:**
Provide a table with the following columns:
1.  **Friction Point:** (e.g., "Bio text inside JSON brackets")
2.  **Why it fails HR:** (e.g., "Hard to read quickly, visual noise")
3.  **Thematic Solution:** (e.g., "Render the text normally but keep line numbers on the left like an IDE")

**Specific Questions to Answer:**
* Should I keep the "Terminal Input" as the primary navigation?
* How can I display the "Work Experience" so it looks like code but reads like a story?
* Is the "Raw JSON" view of my resume a blocker?

What I'm Most Proud Of

I'm proud of how this project turned the portfolio itself into an experiment. Instead of focusing only on visuals, I treated it as a system: maintainable, extensible, and driven by data. Designing the entire site around a single JSON source allowed me to iterate quickly and keep the structure clean throughout the hackathon.

I'm also especially proud of how I used AI as a collaborator rather than just a code generator. By refining prompts and applying techniques, I was able to use Gemini and Antigravity Agents as creative and technical reviewers, helping me improve architecture decisions, UI/UX, and overall clarity.