← Back to projects
Software Engineer

CardioCycle Explorer

This project is a real medical education application for exploring the cardiac cycle, hemodynamics, and waveform timing. The portfolio page now embeds the original interface from the project folder instead of a decorative heartbeat animation.

Embedded here: the original interactive physiology app with condition switching and hemodynamic controls.
Original Interactive App
Learning mode Cardiac cycle explorer

Waveforms, pressure traces, and timing remain synchronized in one surface.

Controls Condition presets + rate

Users can switch clinical states and pace the diagram without leaving the view.

Mobile fit Scaled original app

The preview preserves the original interface while keeping it visible on smaller screens.

The embedded build includes the clinical sidebar, rate controls, condition presets, and the synchronized visual layers used to connect ECG activity with ventricular pressure and blood-flow timing. The portfolio page now loads a root-level app entry directly to avoid CloudFront issues with the older nested path.

Built With

HTML SVG JavaScript Clinical data mapping Responsive visualization

Teaching Surface

Learners can compare normal and abnormal states, adjust rhythm pacing, and read synchronized waveform layers without relying on prerecorded video.

Clinical Value

  • Connects electrical and mechanical cardiac events in one surface
  • Supports condition-based comparisons for physiology teaching
  • Keeps timing readable through layered color-coded traces

Implementation

The application uses direct SVG and DOM control so the waveforms can stay lightweight, scalable, and precise. That makes it easier to synchronize traces and side-panel controls than a video-driven approach.

Why This Matters

The project turns a dense physiology concept into an explorable system. Students can reason about timing relationships instead of passively watching a fixed animation, which is the core educational payoff.