Teams & leads
Hard to know what to build first — and worried they'll discover requirement problems only after development.
Work / Product & Engineering
I turn complex user needs into product structures
and working digital products.
Service Planner & Product-Minded Developer — I define the problem, design the structure, and validate it directly with HTML·CSS·JavaScript and Python prototypes.
Shared Problem
Good planning and working technology
need translation between them.
If user needs aren't accurately translated into features and screens, direction blurs during implementation. And code that runs fine but isn't connected to real user problems rarely becomes a product people keep using.
The core problem
Information loss between user needs and actual implementation
Users
Features look complicated, and learning a new tool feels like yet another job.
Philosophy
Technology should reduce complexity and support better decisions — not demand more explanation and effort.
Value Proposition
Define the problem, design the structure,
build it into something that works.
Clear Problem Definition
I don't copy requests into feature lists — I first identify whose problem is the core one.
Actionable Product Structure
Ideas become PRDs, user flows, feature priorities, screen structures, and operations.
Working Prototypes
I don't stop at documents — core hypotheses run as web UIs and Python applications.
Evidence-Based Iteration
Execution logs, user flows, outputs, and tests confirm problems and guide the next alternative.
Professional Capabilities
Work capabilities
Turning field needs into service structures, operations, product strategy, and user language.
Product & Service Planning
Separating users and stakeholders, analyzing surface/inner/latent needs, defining problems and priorities, user journeys, PRDs and feature requirements, B2B/B2C comparisons, service policy.
Value linked to engineering · Screen flows and data handling are considered together, so planning isn't reinterpreted at development time.
B2B Service Operations
Operating services for early-childhood institutions — onboarding, teacher usage and training needs, consultation/demo/training flows, collecting recurring operational issues and improvements.
What it shows · Real usage conditions before and after adoption feed back into planning.
B2C Product Expansion
Redesigning institution-centered services for personal life contexts — separating B2B/B2C features, app-centered flows, family usage scenarios, core user value definition.
Features explored · Silent-mode SOS, surroundings check, top screen-time items, adding family members — each labeled live / in development / planned / under review by actual status.
Content & Communication
Translating technical features into problems and benefits users understand — messages per audience (institutions, teachers, parents), and conversion flows across consultation, video, and training.
What it shows · Reframing feature-centered copy into problem- and benefit-centered language.
Main Work Case
EdTech product planning & operations
I organized problems experienced differently by institutions, teachers, and parents into one service structure, connected to product and operational requirements.
| Area | What I did | Capability shown |
|---|---|---|
| Service planning | User segmentation, requirements analysis, user flows, feature scope and priority, B2B/B2C separation, service policy | Structuring ambiguous field needs into product requirements |
| Operations | Institution onboarding, teacher usage, consultation/demos/training, organizing recurring questions and issues | Reflecting real usage conditions into planning |
| Content & communication | Per-audience messages, value-centered explanations, edtech content, consultation-video-training conversion flows | Translating technical features into user language |
| Engineering view | Screen/feature separation, core app/web flows, data storage and changes, prototype implementation, constraints | Reducing information loss between planning and build |
Reporting principles
No unverified institution counts, user counts, or conversion rates. Without exact numbers, I prove through artifacts, decision processes, and role scope. Institution names and internal details are anonymized.
"In the field, relationships and flows work before features do.
Good planning starts with identifying who struggles with what — not with adding features."
Engineering Capabilities
Engineering capabilities
Proving actual implementation scope, integration, deployment, and problem-solving — not the number of technologies.
HTML · CSS · JavaScript · jQuery
Pure-CSS screen structure and hierarchy, forms and file uploads, dynamic content and state, DOM manipulation, event handling, animation, and HTML UIs connected to Python WebView.
I design screen structures and interactions directly, without CSS frameworks — first defining the order in which users see and act on information.
Python · pywebview · PyInstaller
File/folder processing and input validation, connecting OCR, local AI models, audio/video libraries and external CLIs, wiring HTML UIs to Python functions, progress and log management.
After implementation, I package with PyWebView and PyInstaller into runnable Windows applications.
Tesseract OCR · Stable Diffusion · OpenCV · FFmpeg · librosa · Demucs · MuseScore
Text detection and OCR post-processing, running local AI models, audio feature analysis and source separation, frame processing, tracking, overlays, encoding, and MIDI/score/PDF output.
My strength is connecting existing models and tools to user problems as executable product flows — rather than training models from scratch.
Firebase Hosting · Realtime Database · PyInstaller · Inno Setup
Web app deployment, real-time data structures, building Python executables with bundled FFmpeg binaries, installer creation, path and resource management.
Prototypes shouldn't only run in a dev environment — I consider web deployment and Windows packaging from the start.
Compatibility · Runtime · UI wiring · Alternatives
Python version and package conflicts, FFmpeg/DLL loading and binary paths, repeated JavaScript event calls and pywebview thread errors, library replacement and environment separation.
I don't just silence error messages — I isolate whether the cause is version, dependency, runtime, or data flow.
Decompose → Draft → Run → Fix by logs → Integrate
I use generative AI for requirements, structure, code drafts, and error analysis — but never accept its output as finished. Everything is tested repeatedly against real logs, screen behavior, and file outputs.
Defining the problem, separating features, verifying results, and choosing alternatives when things fail — I do those myself. AI is a partner that speeds up implementation.
How I Build
A six-step process
Understand the Context
Who decides, who uses, and who experiences the results.
Define the Problem
One sentence for the core problem behind the surface request.
Structure the Product
User flows, priorities, inputs/outputs, data, exceptions, and a PRD.
Build the Core Flow
HTML·CSS·JavaScript UI, Python logic, Firebase or AI/media tools.
Test and Debug
Normal and abnormal inputs, paths, versions, logs, behavior, and final outputs.
Deliver and Document
Web deployment, Windows EXE, installers, usage docs, architecture, next items.
Engineering Evidence
Real implementation cases
Not just results — decision processes, limits, failures and fixes, and deliverable artifacts. Detailed screens, code, and videos will be published as they're ready.
Evidence 01 · Interactive Web Product
HTML · CSS · JavaScript · jQuery · Firebase
Designed and built a lightweight service flow connecting user input, state changes, data storage, and web deployment.
Evidence 02 · Local AI Desktop Application
Python · pywebview · Tesseract OCR · Stable Diffusion · PyInstaller
Connected image input, OCR, local AI processing, and result generation into one Windows application flow — fully local, with no external transfer.
Evidence 03 · Audio & Media Pipeline
Python · FFmpeg · OpenCV · librosa · Demucs · MuseScore
Automated analyzing audio/video files, extracting information, and generating new outputs — source separation, overlays, and MIDI/score/PDF export.
Evidence 04 · Technical Troubleshooting
Log analysis · Library replacement · Environment separation
Analyzed compatibility and runtime issues through logs, replaced tools, and split features across Python versions. Failed approaches and final choices are recorded together.
Languages & Technologies
Tech stack
What matters isn't how many technologies — it's what problem each was applied to. Labeled by actual usage, not arbitrary percentages or stars.
| Level | Technologies and actual usage |
|---|---|
| Core | HTML · CSS — custom layouts, visual hierarchy, animations, WebView interfaces JavaScript · jQuery — DOM manipulation, event handling, dynamic interactions, user-driven flows Python — file processing, application logic, local AI integration, media pipelines |
| Applied | Firebase Hosting · Realtime Database / pywebview · PyInstaller · Inno Setup / Tesseract OCR · Stable Diffusion Inpainting / FFmpeg · OpenCV · librosa · Demucs · MuseScore |
| Expanding | React · Node.js · Java · JSP · JDBC · Spring · Spring Boot · MySQL · Machine Learning · Deep Learning — moved to Core/Applied once real project evidence exists. |
| Explored | MediaPipe · Basic Pitch — installation and compatibility experience, not overstated as primary tools. |