Stop screenshotting your case studies

I rebuilt every wireframe in this portfolio as a React component. Here is why, and what it cost.

The case studies on this site used to be PNGs. Old Sketch exports, flattened Figma frames, screenshots of products that no longer exist. The galleries looked fine. They were dead.

Screenshots rot

A wireframe trapped in an image is unkillable. You cannot retype a label. You cannot adjust a stat. You cannot fix a typo without firing up the source file. Half the time the source file is in a tool you no longer pay for. The other half, the file references fonts your machine does not have. The case study freezes at whatever quality you exported five years ago.

React components are case-study artifacts

Pogo, SmartView, Apple, the THEFT research deliverables, all rebuilt as small React components. Each one is dumb. Takes data. Renders flat boxes, lines, labels. Uses the site type system. No SVG. No Figma export. JSX and CSS variables. Lives in the repo. Ships with the site. Stays in sync with the rest of the visual language automatically.

The trade is real

A code-rendered wireframe takes me four to six times longer to build than dropping in a PNG. That is real time. I accept it because the wireframes now belong to the case study instead of looking like artifacts from another decade. They update with the site, and the implementation proves I can build the design instead of only drawing it.

When not to do this

Photographs of physical work, screen captures of a live product, anything that is genuinely a record of a moment, leave it as an image. Wireframes are different. Wireframes are diagrams. Diagrams should be code.