Frontend engineer · BtoB / spec-heavy products · Vue 3 @ work · React / Next.js elsewhere
Ex-sales (6y) → translating ambiguity into buildable scope.
| 🏗️ | Scalable front-end structure — clear boundaries and contracts; refactor incrementally instead of one-off fixes |
| 🧩 | Team-level quality — reviews, tests, and automation so delivery doesn’t hinge on individual heroics |
| ♿ | A11y-aware shipping · IC track: impact through implementation, design tradeoffs, and review — not line management |
| Area | Outcomes |
|---|---|
| 🔄 Vue 2→3 | Shipped the migration without pausing the roadmap. Owned hands-on design, migration, and implementation inside a program-level re-arch (direction aligned with engineering leadership). Cut legacy risk after Vue 2 EOL; kept product work moving while paying down FE debt. |
| 🤖 AI × CI | Shifted critical checks from ad hoc review to the pipeline. Led end-to-end — proposal → design → implementation → adoption: AI-assisted PR review (diff-aware hints vs architecture / coding guidelines) and E2E test perspectives generated from changes (e.g. upgrade PRs). Tighter consistency pre-merge, less variance in what gets caught, quality gates became default — not optional polish. |
| 📐 OpenAPI | Established a schema-driven FE–BE workflow with backend partners — clearer contracts, fewer late integration surprises, lower regression risk at API boundaries. |
| 👥 Collaboration | Facilitated alignment across PM, design, and BE when specs were fuzzy. Ran onboarding for partners and new engineers — faster ramp without relying on tribal knowledge. |
Pinia · MSW · GraphQL (Apollo) · NestJS · Firebase (side / pro bono)
| Repo | What it exercises | |
|---|---|---|
| 🌐 | lt_i18n_todo | Locale + TZ correctness when state, formatting, and UX must stay aligned · demo |
| 🧪 | dm_i18n-rtl | RTL + i18n edge cases — layout, direction, and component assumptions under non-LTR languages (based on real product requests) |
| ♿ | dm_keyboard-a11y | Keyboard accessibility — focus management and operability without mouse (derived from real user feedback) |
| 🗣️ | dm_speech-contents | Speech + content UX — exploring voice interaction patterns and accessibility (based on real improvement needs) |
| 🎻 | vc_attendance-list | Real-world scheduling system — used in an orchestra group; handles constraints, participation tracking, and practical UX tradeoffs |
| 📚 | vc_recommend-books | Internal app development — built to share what colleagues read and their thoughts; designed to encourage lightweight contributions and used for onboarding |
| 🤖 | ai-dev-starter | Agent-ready FE starter — reproducible quality gates and AI-assisted workflows (independent from employer systems) |
Blog (JA): zenn.dev/hakushun GitHub: github.com/hakushun