Api Doc Portfolio

Source: Dev.to

Overview

My hack‑athon goal was to craft a portfolio that stands out while remaining approachable.
I chose an API‑documentation aesthetic (think Swagger / Postman) to reflect my developer identity, yet I kept the experience friendly for non‑technical visitors.

• Single‑source data: All personal information lives in one data.json file, making updates painless.
• Tech stack: React + TypeScript for scalability & type safety, Tailwind CSS for rapid, consistent UI design.
• Tools used:
  • Gemini – creative prompt‑engineering assistant.
  • Antigravity IDE (Gemini 3 Pro) – senior‑frontend reviewer, refactoring, bug‑fixing, UI/UX feedback.
  • Google Cloud Run – deployment platform.

I followed Google scientists’ prompt‑engineering guide, applying one‑shot, step‑back, and tree‑of‑thought techniques. Selected prompts are included below.

Prompt 1 – Refactor Resume Page to Fetch Data from JSON

Context:
We are moving to a data‑driven architecture. All content now lives in data.json.

Task:
Refactor the “Resume/IDE Viewer” page (HTML/JS) so it loads its content dynamically from data.json.

Requirements

1. JSON Structure (exact shape)

   {
     "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: fetch('./data.json').
   • Update PDF: Find the <iframe> (or similar) and set its src to resume.pdf_path.
   • Update “Raw” View: Fill the code block in the “Raw (JSON)” tab with a nicely formatted version of resume.raw_data.
   • Update UI Labels: Change the breadcrumb/file‑path label to resume.filename.

3. HTML Changes

   • Remove any hard‑coded src from the PDF container (leave empty or show a loading spinner).
   • Add unique IDs for JS targeting, e.g.:
     • id="pdf-viewer"
     • id="json-code-block"
     • id="file-name-label"

Deliverable

Below are the minimal HTML snippet and the updated JavaScript (TypeScript‑compatible) that satisfy the above.

HTML (excerpt)

<!-- PDF viewer -->
<iframe id="pdf-viewer" src=""></iframe>

<!-- Tabs -->
<button id="preview-tab">Preview</button>
<button id="raw-tab">Raw (JSON)</button>

<!-- JSON code block -->
<pre id="json-code-block"></pre>

<!-- Breadcrumb / filename label -->
<span id="file-name-label"></span>

JavaScript / TypeScript (ES6)

// src/utils/loadResume.ts
interface ResumeRaw {
  name: string;
  role: string;
  stack: string[];
}

interface ResumeData {
  pdf_path: string;
  filename: string;
  last_updated: string;
  raw_data: ResumeRaw;
}

interface PortfolioJSON {
  resume: ResumeData;
}

/**
 * Fetches `data.json`, updates the DOM, and handles errors.
 */
async function initResumeViewer(): Promise<void> {
  try {
    const response = await fetch('./data.json');
    if (!response.ok) throw new Error(`HTTP ${response.status}`);

    const data: PortfolioJSON = await response.json();
    const { pdf_path, filename, raw_data } = data.resume;

    // ---- Update PDF viewer ----
    const pdfViewer = document.getElementById('pdf-viewer') as HTMLIFrameElement;
    if (pdfViewer) pdfViewer.src = pdf_path;

    // ---- Update filename breadcrumb ----
    const fileLabel = document.getElementById('file-name-label');
    if (fileLabel) fileLabel.textContent = filename;

    // ---- Populate Raw JSON view ----
    const jsonBlock = document.getElementById('json-code-block');
    if (jsonBlock) {
      const pretty = JSON.stringify(raw_data, null, 2);
      jsonBlock.textContent = pretty;
    }
  } catch (err) {
    console.error('Failed to load resume data:', err);
    // Optional: display a user‑friendly fallback UI
  }
}

// Run on DOM ready
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initResumeViewer);
} else {
  initResumeViewer();
}

Prompt 2 – UX Audit for Non‑Technical Users (Recruiter Persona)

Role: Senior UX Researcher paired with a Non‑Technical Tech Recruiter (HR Manager).

Context:
The portfolio uses a heavy API‑Documentation / CLI theme: dark mode, monospaced fonts, terminal‑style inputs, JSON code blocks, sidebar navigation (Stripe‑Docs style), and a command palette.

Problem:
The design may be over‑engineered, potentially confusing recruiters who lack coding experience, increasing cognitive load and navigation friction.

Heuristic Evaluation

Specific Questions Answered

Summary

• Maintain the technical aesthetic (dark theme, code‑like borders, line numbers) while simplifying interactions for non‑technical users.
• Prioritize readability: plain text for bios, bullet points for experience, high‑contrast colors.
• Offer progressive disclosure: advanced JSON or terminal features are hidden behind optional toggles, keeping the primary flow straightforward.

Implementing these bridges will let recruiters find the essential information (Name, Role, Tech Stack, Resume) within the 6‑second scan window while preserving the unique API‑documentation personality of the portfolio.

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.