Building My Interactive Healthcare IT Resume with Next.js & React

I’ve always believed a resume should do more than list bullet points—it should show what you can do, especially when you’re aiming for a specialized field like hospital IT. Static PDFs don’t convey that. By turning my résumé into a Next.js site, I can:

Quantify impact with animated metrics (e.g. “15% drop in defects”)
Let recruiters interact with mock clinical tasks (order entry, lab flagging)
Walk through an EPIC rollout roadmap, showing I speak their language
Still offer the classic “Download PDF” for easy sharing

🎯 Why an Interactive Resume?

Hospitals don’t just want to know you can code—they need confidence you understand compliance, clinical workflows, and data security. Static PDFs don’t convey that. By turning my résumé into a Next.js site, I can:

Quantify impact with animated metrics (e.g. “15% drop in defects”)
Let recruiters interact with mock clinical tasks (order entry, lab flagging)
Walk through an EPIC rollout roadmap, showing I speak their language
Still offer the classic “Download PDF” for easy sharing

🛠 Tech Stack & Architecture

Next.js (App Router + Pages Router Hybrid)
- Server-side session guard with getServerSideProps
- Interactive client components flagged with "use client"
React & Tailwind CSS for fast, responsive UI
Framer Motion animations for smooth on-scroll reveals
jsPDF to generate the downloadable PDF version
Next-Auth for portfolio-wide authentication (Session & role checks)

All styles live in CSS Modules and global variables for a hospital-inspired palette (blues, teals, clean whites).

🚀 Key Features

Hero & Metrics
- My name, certifications, and dual-degree badges front-and-center
- Four animated counters highlight real results:
  - 40% faster dashboards at Pfizer
  - 15% fewer defects in pharma QA
  - 99.8% uptime on clinical apps
  - 30% efficiency gains in my SaaS work
Live Demos
- Order Entry: Simulated medication order flow, complete with role-based “sign off”
- Lab Flagging: Enter test data and see how out-of-range values get “flagged”
About Me & Skills
- A concise, hospital-focused summary of my background
- Skill badges emphasizing FHIR/HL7, HIPAA/FDA compliance, React, .NET Core, Azure, and more
Experience Timeline
- Four crisp entries from Pfizer to early career, each with 3–4 bullet points
- Bullets re-written to highlight clinical-adjacent wins (secure ETL, audit-ready pipelines, real-time reporting)
EPIC Roll-Out Roadmap
- A four-step accordion (Discovery → Assessment → Prototype Sprints → Go-Live Support)
- Shows I know the phases of implementing big-ticket clinical systems
PDF Download
- The same data drives a jsPDF generator so hiring managers can still grab a printable résumé

🔄 Integration & Deployment

I plugged this interactive resume into my existing portfolio under the Resume tab—preserving my light/dark theme toggle and PDF-download button. A quick deploy to Vercel gave me a shareable URL to drop right on my LinkedIn or cover letter.

🌟 What I Learned

Client vs. Server Components in Next.js can be tricky, but adopting "use client" where needed keeps things fast.
Fine-tuning CORS and Auth in a hybrid Next.js setup taught me valuable lessons for future healthcare front-ends.
CSS Modules + custom properties give maximum control over light/dark theming without fighting Tailwind’s PostCSS pipeline.

👀 What’s Next?

I’m already planning to add:

A FHIR Explorer widget to showcase real HL7 JSON samples
A security checklist component to highlight encryption, logging, and role-based controls
Video clips or screencasts of my PDF-viewer and automation projects

If you’re on a hospital IT team and curious to see how this all works in your browser, head to https://my-next-app-eight-black.vercel.app/resume. And if you think I’d be a good fit for an EPIC or systems analyst role, let’s connect—I’d love to dive into your challenges and show how I can help!