# 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:

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”]
}
}
}
```



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.



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.

# 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):

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.
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).
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:

Friction Point: (e.g., “Bio text inside JSON brackets”)
Why it fails HR: (e.g., “Hard to read quickly, visual noise”)
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?