![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.](https://cdn.myportfolio.com/5474c2ad-0995-4d93-b1b3-c707f797ce01/d7f0d3d5-36fd-4840-b593-1a9073d0e8dd_rw_1920.jpg?h=e9a37fbf9e5e05f80324c5201f4c2d34)
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.](https://cdn.myportfolio.com/5474c2ad-0995-4d93-b1b3-c707f797ce01/3d88f508-06b3-48c0-8240-2fda4dafb7b3_rw_1920.jpg?h=b578c98d94eb52b586696e688ceeed04)
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.](https://cdn.myportfolio.com/5474c2ad-0995-4d93-b1b3-c707f797ce01/d4ef91e1-f0a3-4d2d-aedf-d43dd6ca083a_rw_1200.png?h=a7dc7f2b1ba8a8fb59f04aa24cbe85db)
![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.](https://cdn.myportfolio.com/5474c2ad-0995-4d93-b1b3-c707f797ce01/996ddbc5-2cce-478b-9ce1-6e0123804638_rw_1920.jpg?h=ec919433ad2b3da48a2283554a76722d)