Skip to content
web ▶ Demo Available

Engineering Ladders Picker — Career Level Assessment Tool

A web-based Engineering Ladders assessment tool that helps engineers pick axis levels, compare against reference ladders, and export a clean PDF summary.

0 views
HTML CSS JavaScript Canvas API Vercel

The Problem

Engineering career ladders are useful, but they are often hard to discuss in a practical way. A static ladder page gives the expectations, but engineers and managers still need to translate those expectations into a personal profile: where someone is strong, where they are still growing, and which reference role level they most closely resemble.

The original Engineering Ladders framework is clear and thoughtful, but I wanted a small tool that makes the first conversation easier. Instead of asking someone to choose a role first, the app asks them to pick evidence-based levels across the five framework axes.

The Solution

Engineering Ladders Picker is an interactive self-assessment app based on the public Engineering Ladders reference. Users select a level from 1 to 5 for each axis:

  • Technology
  • System
  • People
  • Process
  • Influence

The result stays hidden until all five choices are selected. After that, the app shows the closest reference role and level, a radar chart, selected-level summary, closest reference matches, and a PDF export for career conversations.

Live Demo

The app is embedded below from Vercel. You can also open the live version directly at engineering-ladders-picker.vercel.app.

Architecture

This project is intentionally simple: a static HTML, CSS, and JavaScript app with no framework dependency.

Engineering Ladders Picker
├── Static UI
│   ├── HTML structure
│   ├── CSS dark cyber theme
│   └── Responsive split-panel layout
├── Assessment Logic
│   ├── Five Engineering Ladders axes
│   ├── Reference role/level matching
│   └── Summary generation
├── Visualization
│   └── Canvas radar chart
└── Export
    └── Browser-native print/PDF report

Key Features

  • Answer-first flow — Users pick levels before seeing any role result.
  • Reference descriptions — Every 1-5 option includes the original framework meaning.
  • Closest match calculation — The app compares selected levels with Developer, Tech Lead, Technical Program Manager, and Engineering Manager reference ladders.
  • Radar chart — A compact visual summary of the selected engineering profile.
  • PDF export — Generates a clean portrait report with the chart, summary, selected levels, framework notes, and closest matches.
  • Portfolio-ready styling — Styled to match the dark cyber visual system used on this site.

References

The app is based on these Engineering Ladders pages:

What I Learned

This was a good reminder that career tools should not reveal conclusions too early. If the app shows a role before the user finishes selecting evidence, the assessment becomes biased. Hiding the result until all five axes are complete makes the flow feel more honest.

The PDF export also had a useful constraint: browser print styles behave differently from screen styles. The final report uses explicit print pages, portrait sizing, and a separate high-contrast chart image so the exported summary stays readable.

Interested in Something Similar?

Need a similar project built, want to collaborate, or have questions about the tech stack? Drop a comment below or reach out directly.

Discussion