Building a Professional Nursing Portfolio with Claude

My wife is finishing her MSN-FNP program and needed a portfolio website to present her academic work, clinical experience, and NONPF competencies. Instead of using a template or hiring a developer, I decided to build it entirely using Claude Code — Anthropic's AI coding tool. The result is anishakarki.com, a fully custom portfolio with 10+ pages, a clinical dashboard, and a live Azure deployment.

Because nursing portfolios require structured academic content, clinical data visualization, and NONPF competency mapping, a custom build offered far more flexibility than any template.

Outcome

• Delivered a fully custom, production-ready portfolio used for MSN-FNP program completion and job applications
• Automated content syncing via CLAUDE.md reduced manual updates whenever papers were revised
• Clinical dashboard provided meaningful insights into patient cases, diagnoses, and procedures for preceptors and faculty

What Was Built

• Homepage — hero, skills tags, highlights, and calls to action
• Resume page — timeline layout with clinical experience, population tags (Family, Women, Pediatric, Underserved…), preceptor info, and downloadable PDF
• NONPF Competencies — all 9 domain cards with descriptions and supporting evidence sections linking to papers and courses
• Philosophy page — personal nursing philosophy paper with collapsible full-text, metadata, and sidebar quote — synced to the actual PDF
• Clinical Hours Dashboard — built from Typhoon clinical tracking data (Excel exports): 600+ hours, 669 patient cases, age breakdown, top diagnoses, procedures, medication categories
• Reflections — card grid of 8+ reflective journal papers, each with a full dedicated page
• Contact page
• Deployed to Azure Static Web Apps with custom domain and HTTPS

How the Workflow Worked

Every page, component, and data transformation was generated through iterative conversation in Claude Code — no templates, no frameworks, and no manual coding outside the AI environment. Claude wrote the HTML, CSS, and JavaScript, read PDF papers directly to sync content, and parsed Excel clinical data files to build the dashboard.

A key breakthrough was creating a CLAUDE.md file — a persistent instruction layer that keeps content synced automatically whenever PDFs are updated. When a paper is revised, Claude reads it and updates the corresponding HTML page in the same commit.

The Stack

• Frontend: Pure HTML, CSS, JavaScript — no frameworks, no build tools
• Hosting: Azure Static Web Apps (free tier) with managed SSL
• Domain: GoDaddy — registration and DNS
• Data Source: Typhoon clinical tracking (Excel exports)
• AI Development: Claude Code — the entire development workflow

Key Lessons

• Claude Code works best with specific, structured prompts. Vague prompts get generic results; detailed prompts with real content get production-ready pages.
• A CLAUDE.md file is essential for any project — it persists instructions across conversations so you never have to re-explain the rules.
• For Azure + GoDaddy: ensure the apex domain forwards to https://www.yourdomain.com. Forwarding to HTTP will cause certificate warnings even when the www subdomain is fine.
• Reading source data directly (PDFs, Excel files) and generating HTML from it keeps content in sync without a CMS.

Why This Matters

This project demonstrates how AI-assisted development can empower non-developers to build fully custom, production-ready websites. It also shows how academic and clinical data can be transformed into a polished digital portfolio without relying on templates or CMS platforms.

Build Your Own Nursing Portfolio — Master Prompt

Below is the consolidated prompt to build your own nursing portfolio from scratch. Replace the bracketed fields with your own information and paste it into Claude Code.

Build me a complete, professional nursing portfolio website with the following details.

PERSONAL INFORMATION
- Name: [Your Full Name], RN, BSN
- Program: MSN-FNP Candidate
- School: [Your School Name and School of Nursing]
- Expected Graduation: [Month, Year]

PAGES TO BUILD
1. Homepage — hero section with name, credentials, and a short personal statement. Include skill tags (e.g., Evidence-Based Practice, Patient-Centered Care, NONPF Competencies).
2. Resume — timeline layout with clinical experience, work history, education, certifications, and a downloadable PDF resume. For each clinical site include population tags (e.g. Family, Women, Pediatric, Acute Care, Underserved).
3. NONPF Competencies — 9 domain cards (Foundation of Science, Leadership, Quality, Practice Inquiry, Technology & Information Literacy, Health Policy, Health Delivery Systems, Ethics, Independent Practice). Each card should have a description and a Supporting Evidence section linking to relevant papers and courses.
4. Philosophy — display my personal nursing philosophy paper with metadata (course, instructor, date), a collapsible full-text view, and a sidebar blockquote. Include a second earlier paper section.
5. Clinical Hours Dashboard — read my Typhoon clinical data Excel exports and visualize: total hours, total cases, unique patients, age breakdown, top diagnoses, procedures performed, and medication categories.
6. Reflections — a card grid of all reflective journal papers and course assignments, each linking to a full dedicated page.
7. Contact — a simple contact section with email and LinkedIn.

CLINICAL EXPERIENCE (for Resume page)
[List each clinical site]:
- Site Name, Address, Website
- Hours completed
- Preceptor name and credentials
- Population tags (e.g., Family, Women, Pediatric, Acute Care, Underserved, Community)
- 4–6 bullet points describing what you did there

ACADEMIC PAPERS (for Philosophy and Reflections pages)
[List each paper]:
- Title
- Course name and number
- Instructor
- Date
- 2–3 sentence summary

NONPF COMPETENCY DESCRIPTIONS
[Write 2–3 sentences per domain describing how you have demonstrated each of the 9 competencies]

DESIGN
- Color scheme: professional navy and teal
- Clean sans-serif fonts, modern card layout, mobile-responsive
- No frameworks — plain HTML, CSS, and minimal JavaScript

DEPLOYMENT
- Host on Azure Static Web Apps (free tier)
- Custom domain via GoDaddy
- Set up HTTPS for both www and apex domain (use HTTPS forwarding for apex, not HTTP)

After building all pages, create a CLAUDE.md file that instructs Claude to always sync HTML content whenever a PDF is updated, with a mapping table of each PDF to its corresponding HTML page.

Deployment Steps

1. 1Download Claude Code, create a new project folder, and open it in Claude Code — see the setup guide if this is your first time.
2. 2Fill in the prompt above with your details and paste it. Claude will build all pages and files.
3. 3Drop your PDF papers into the project folder — Claude will read them and sync the HTML content.
4. 4Push to a GitHub repo.
5. 5Create a free Azure Static Web App, connect your GitHub repo — Azure auto-deploys on every push.
6. 6In Azure, add both www.yourdomain.com and yourdomain.com as custom domains. Azure provisions free managed SSL certificates for both.
7. 7In GoDaddy DNS: add a CNAME for www pointing to your Azure Static Web Apps URL. For the apex domain, update the forwarding to https://www.yourdomain.com (must be HTTPS, not HTTP).
8. 8Refine through conversation — ask Claude to update any content, adjust design, or add new pages any time.