About
Full-stack engineer who builds from the frontend through APIs, databases and deployment.
8.5 years as an engineer, 5.5 as a frontend specialist. I work as a contract frontend engineer on Next.js / React / TypeScript projects, from greenfield builds to long-running redesigns. I am currently at DMM.com, replacing the frontend of a live-chat service with Next.js; before that I owned the vehicle-appraisal request feature of an automotive service, followed by its survey and review functionality. With 5.5 years of fully-remote experience I collaborate daily with backend, design and QA over Slack-based chat. I build AI tools such as Claude Code into everyday development — not only for writing code but for review, refactoring and tests. My scope does not stop at the frontend: on an admin-dashboard renewal I volunteered for Go and implemented the backend end-to-end, and I built two recruitment sites single-handed — technology selection, CMS schema and hosting included. On personal projects I run Cloudflare Workers with D1 / KV / R2 and Supabase row-level security myself. My background in performance/film studies at Rikkyo University shapes how I design from the user experience inward — covering UI, accessibility, and performance instrumentation. Outside client work I maintain 22 personal projects to validate new frameworks and best practices against real workloads.
User-value-driven UI / UX design
Before opening a code editor I try to put into words what the user expects from the product. With a performing-arts background I pay close attention to visual hierarchy, density, whitespace and tone, and partner with designers and PMs to validate hypotheses early. I respect existing guidelines (HIG, WCAG, shadcn patterns) while proposing product-specific variations when they better serve the user.
Performance optimization grounded in measurement
I rely on Lighthouse, Web Vitals and bundle analysis day-to-day so improvements can be discussed as numbers, not hunches. On my own projects that has meant dynamic imports for heavy libraries such as Three.js, removing render-blocking CSS, and adaptive frame rates for pages that render 3D continuously. My 22 side projects carry 17,914 tests in total, and the 19 measured on Lighthouse average 96.5 for Performance, all 19 of them at 90 or above — with every app's figures published on my portfolio. On client teams I extend the same mindset to DX: Storybook documentation, Vitest coverage, type safety and CI/CD pipelines so the frontend stays hard to break.
Using AI tools — and designing the workflow around them
On client work I build Claude Code, GitHub Copilot, ChatGPT and Gemini into everyday development. Rather than limiting them to writing code, I have widened what I delegate to include code review, refactoring and test authoring — and I check every change with AI against a single bar: will another engineer be able to read this? On my own projects I go a step further and design the workflow itself: ten custom Claude Code skills, subagents that run research and implementation in parallel, and a CI pipeline gating on 100% test coverage, Lighthouse, gitleaks and npm audit — so anything AI writes is caught by a machine before it reaches human review. The more volume you generate with AI, the more mechanical verification you need. On client teams I am still a user of these tools, but because I have designed the workflow myself, I am ready to take on introducing AI practice to a team and building the quality gates that go with it.
Self-directed learning and execution
When picking up a new technology I cross-read documentation, the official repo, and real-world code, then validate it with a working prototype. I have shipped side projects on Next.js App Router, SvelteKit, TanStack Start, Vite, Tailwind CSS v4 and Three.js, and feed what I learn back into client work. I deliberately step outside my assigned scope: on the admin-dashboard project I talked through the team's capacity, volunteered for Go despite having no prior experience with it, and implemented medical-record fetch / delete end-to-end from backend to frontend.
Experience
Live-chat service replacement in Next.js — Frontend engineer (Contract)
- Joined in October 2026 as a frontend engineer on a project replacing the frontend of a long-running live-chat service with Next.js
- Part of a five-person product team in the development department (team lead, backend / infrastructure, two frontend engineers, backend). Fully remote, with specs and decisions kept in Slack / GitHub / Jira / Confluence
- One-week Scrum sprints; my work is moving existing screens onto the new stack while preserving their current behaviour
Automotive service platform — Frontend engineer (Contract)
- Continued on the same service through the later growth phase (contract vehicle changed from SB Technology to SoftBank), implementing CVR-improvement work and paying down technical debt
- Designed and built the survey and review features, switching between three components (start / input / complete) within a single page — deliberately a different shape from the multi-page appraisal flow, chosen to fit the requirement
- Implemented a director-designed "multi-vendor recommendation" balloon and the A/B test around it — two copy variants, social proof against direct recommendation — and tracked the metric after release. There was no significant change, and I reported back that the feature could not be shown to work. Also added multi-campaign-ID support to the in-house experimentation tool
- Built the market-price comparison chart and the price-offer expiry display — surfacing the information users actually decide on
- Fixed a defect where a button stayed disabled, tracing it to the root cause rather than patching the symptom
- Removed SCSS !important declarations and tidied font-family definitions, paying down debt left over from the replacement phase between feature work
- Fully remote on a 10-developer / 13-person team; kept specs and decisions written down in Slack / GitHub / Jira / Confluence, working alongside backend, design and QA
Automotive service platform — Frontend engineer (Contract)
- Joined an automotive appraisal service — where owners register a car and receive offers from dealers — at the greenfield stage. It is a marketplace matching sellers with buying dealers, and appraisal requests were the business KPI — so cutting drop-off in the request form and improving CVR were the point of the work. Built it over the seven months before launch, then continued with CVR improvements and debt paydown (the same service carried on into the SoftBank contract period)
- Owned the three-page appraisal flow (input / confirm / complete) from detailed design through implementation, testing and release. An email verification code sits on the confirm step, so form values had to survive navigation: I set up a FormProvider context and centralised state and validation with React Hook Form and zod
- Replaced screens another team had built in HTML / CSS / jQuery with React and Next.js
- Next.js / React were already chosen, but no one on the team had used them, so I led the selection of the libraries layered on top. My criterion was "can the next person pick this up": Jotai for its minimal, simple API; React Hook Form and zod for the volume of material available when someone gets stuck; Vitest / Testing Library for tests
- Paid down the styling left unoptimised during the replacement by splitting CSS extraction into three phases after launch. Doing it in one pass would have halted releases, so I sized each phase to run alongside feature work and shared it across the team
- Implemented director-designed A/B tests (appraisal CTA copy, a sell-timing survey modal), built two landing pages and added routing so the right one is served by traffic source
- Shipped nudge features — sell-timing copy, a countdown on the price-offer expiry, and a redesign of the waiting state in the scout list. Reworded the registration-complete screen to reduce drop-off caused by spam filtering
- Handled a Next.js version upgrade, removed a Storybook setup that had fallen out of use, improved error-log output and de-duplicated a custom logger
- Traced and fixed a defect where switching vehicles in the mobile scout list left the previous car's image on screen — from first triage through root cause, fix and prevention
- Adopted Claude Code / GitHub Copilot early in daily development — not only for implementation but for code review, refactoring and writing tests; every change was checked with AI to keep the code readable for others
HR / motivation-management system — Frontend engineer (Contract)
- Built new features for an employee-motivation management product in React / TypeScript / Radix UI
- Implemented UI components and state management (Jotai), wired up GraphQL via Apollo Client, and added unit / component tests with Jest / Testing Library
- Maintained the shared in-house design-system repository used across multiple products, adding and revising the components the new feature needed — built on the assumption that other products would consume them, not just my own
- Worked in an 8-developer / 15-person scrum team using Slack, Figma, Asana and DocBase
Recruiting site — ongoing development & operation (Contract)
- Continued to develop and operate the recruiting site (https://recruit.caps365.jp/) that I had originally built as a full-time employee — growing it from the twelve pages of the first release to 31: role-specific hiring pages (doctors, nurses, medical clerks, office staff), alumni and new-graduate hiring, and an FAQ
- Kept refining the MicroCMS schema so the non-engineers editing it would not get lost
- Implemented animated landing sections and contact / application forms via SSGform
- Deployed to Cloudflare Pages and refined the editorial update workflow
- Ran this alongside other client engagements (HR system, automotive service); handed it over to the client's in-house team around June 2026
Clinic web apps & admin dashboard — Frontend engineer (Full-time)
- Led a ~2-year replacement of the reservation / patient-portal web app used across ~30 in-house clinics — UI in Next.js / React / Jotai / MUI, state management, GraphQL integration, and test setup with Jest / Testing Library / Cypress / Storybook
- Rebuilt the patient / medical-records admin dashboard. It started on the Pages Router, but as the App Router had just shipped and there was room before release, I migrated it across
- Used Mantine headlessly on that project and styled with Tailwind CSS to match the designer's Figma work — a setup chosen so the UI library's default look would not pull the implementation away from the design
- Go was new to me, but after talking through the team's capacity and task load I volunteered and implemented medical-record fetch / delete end-to-end, from the Go backend through to the frontend — deliberately widening my scope beyond frontend work
- Operated the electronic medical record / patient portal (CakePHP / Go): feature additions and bug fixes
- Built two sites single-handedly, from technical selection onward: the recruiting site (https://recruit.caps365.jp/) and the corporate-wellness business site (https://healthmanagement.caps365.jp/). The recruiting site existed to strengthen hiring across the ~30 in-house clinics and the wellness site to launch a new business line, so both sat directly against the division's targets. The recruiting site shipped at roughly twelve pages including a headless CMS and contact forms
- Kept the framework and state layer (Next.js / React / Jotai) aligned with the company's other products so more people internally could read the code, and selected only the site-specific pieces from scratch — CMS, hosting and forms (microCMS / Cloudflare Pages / SSGform). Since non-engineers would run the CMS day to day, I compared Contentful, Newt and WordPress and chose microCMS on three counts: a Japanese admin UI, domestic adoption so operators could research problems themselves, and the expected article volume fitting the free tier
- Reused that stack and the operations documentation on the second site, cutting the cost of standing it up
GCP data platform, analytics & mobile — Systems engineer
- Built an insurer's integrated data warehouse on GCP (BigQuery / Cloud Storage) and migrated production data from on-prem to the cloud
- Drove construction and operation of an apparel company's data lake (Cloud Composer / Pub/Sub / Cloud Functions / Cloud Scheduler) as the infrastructure engineer
- Ran a fashion-trend analysis PoC: built models with AutoML Vision / Vision API and handled image scraping and labeling for training data
- For an automotive data-visualization PoC, implemented custom Looker screens in JavaScript and set up a CD pipeline with Cloud Build
- Enhanced an in-house business-card mobile app in Flutter / Dart and built the frontend of a regional e-coupon app in AngularJS
Credit-card core system operations — Systems engineer
- Operated and maintained a shared credit-card core system (Java / Struts / Db2) and added admin-panel features
- Built VBA automation utilities, produced Excel-based design / test artifacts and ran regression test cycles
- Managed configuration and issues with Rational ClearCase / ClearQuest
- Presented at the in-house study group; earned Oracle Certified Java Programmer Silver SE 8
New-graduate engineer training
- Group training on business etiquette, Java programming and IBM product fundamentals
- Team / solo development exercises (requirements to design) and a design-thinking workshop
B.A., Department of Body Expression and Cinematic Arts
- Studied film, photography, advertising, theater, dance and martial arts through workshop-style classes
- Developed expressive technique and learned collaborative production workflows hands-on
Side Projects
Personal apps portal — my-apps-portal (opens in a new tab)
A portfolio of the 22 side projects I keep running outside client work (20 of them live). Each entry carries its measured Lighthouse scores, test coverage, dependency vulnerabilities and secret-scan results, and the header totals them automatically. A development blog covers the design, technology choices and updates behind each app.
- 17,914 tests in total; the 19 apps measured on Lighthouse average 96.5 for Performance, all 19 of them at 90 or above
- The stack is chosen per app — Next.js App Router, SvelteKit, TanStack Start and Vite on the web, plus desktop apps in Electron and SwiftUI
- Learning apps: AI Primer (24 tracks, 142 lessons), CSS Atelier (87 tracks, 248 lessons), GLSL Atelier (49 tracks, 168 lessons) and Snippet Sprint (621 problems across 32 languages)
- Apps built on Three.js load it through dynamic imports, keeping mobile Lighthouse scores up even with continuous 3D rendering
Development blog (opens in a new tab)
Somewhere Now — live cameras worldwide (opens in a new tab)
A web app for browsing 5,711 YouTube live cameras across 118 countries and regions from a map or a globe, and watching them in place (Japanese / English). It draws the current day–night line and shows local time and weather, with up to four streams side by side.
- Separates camera definitions (bundled) from live status (Cloudflare KV); a Cron Trigger runs liveness checks every 10 minutes so the map does not fill up with dead links
- Schedules liveness checks and rediscovery to stay under 8,000 of the YouTube Data API's free 10,000 daily units
Service Anatomy — a magazine that dissects services (opens in a new tab)
A bilingual (Japanese / English) magazine that analyses popular services from public information on four fronts: what the service does, its UX, its likely technology stack and its business model. It carries 121 articles plus 36 head-to-head comparisons.
- Every Next.js 16 route is generated statically at build time and served from Cloudflare Workers (2,716 URLs in the sitemap)
- Tests enforced in CI keep every article consistent — matching language-neutral fields across Japanese and English, and a primary-source URL for every technology marked as confirmed
chronoscroll — a scrolling timeline of history (opens in a new tab)
A vertical, zoomable timeline of 27,440 events in Japan and worldwide from 1829 to today — the closer you zoom, the more detail appears. A build-time data pipeline parses Wikipedia's year pages and scores each event for prominence. Sixty-four themed collections (1,927 events) can also be read end to end.
- A static SvelteKit 3 + Svelte 5 site; a virtualised timeline renders only what is on screen, keeping up with zoom and scroll on every frame
- Per-event static HTML pages live in R2 and are served by a Worker, separately from the static assets
Skills
Languages
Frameworks / Libraries
Databases / Cloud
Tooling
Practices
Thanks for reading this far
For project inquiries or collaboration, feel free to reach out through the form. I usually reply within 2–3 business days.
Go to the contact form