Esri Career Explorer

NextJS • styled-components • CSS Grid

Screenshot of Career Explorer application with one career development subject selected. The title of the subject is "Architecture and Coding: Create and Design." The UI shows links to definitions of the terms in that title and an "In Practice Description", which has been blurred to protect sensitive data.

Screenshot of Career Explorer application with one career development subject selected. Sensitive text has been blurred.

In the lulls between my customer projects, I set out to make a more user-friendly version of Esri's internal career development guide for software engineers (heavily censored representative screenshot below:)
An incomprehensible mess of unintelligible career development diagrams.

Uy.

The most challenging aspect of this, by far, was finagling CSS Grid layout rules and positioning rules to create a fully responsive version of the fingerprint.
Screenshot of the mobile view of the app, demonstrating reflow.
Screenshot of the home screen of the app. The user has not selected a career development topic yet. Topics are laid out in a grid that looks somewhat similar to the face of a Rubik's cube.
↑Back to Top