AI Workflow ยท Portfolio

Turning Portfolio Modal and Mobile Readability Issues into Browser Checks

How portfolio screenshots, side-project modals, and mobile readability problems became Playwright-based UI validation instead of one-off fixes.

May 31, 2026

Trigger

Static link and content checks passed, but the migrated portfolio still had real usability problems. Screenshot galleries were cramped inside modals, side-project details were hard to discover, and mobile layout issues were not being caught automatically.

Fix

  • Added a Playwright-based validation script that serves the built dist output and opens pages in desktop and mobile viewports.
  • Checked generated pages for readable content, heading structure, broken images, and horizontal overflow.
  • Clicked portfolio modal cards for side projects, HotDealppom, and BikeNavi, then verified text length, markers, images, iframes, and mobile gallery width.
  • Improved modal gallery CSS so screenshots use readable spacing and one-column mobile layout.

Rule

For UI migration work, content existence is not enough. Future agents must verify that a person can click, read, and inspect the content in both desktop and mobile browsers.