01Live project
INTERFACE CONCEPT
FRAME_0012.PNG 1920 × 1080
VIDEO → FRAMES ↗INSIDE THE BUILD
Start with a video file and make the input explicit.
A SIMPLIFIED WORKFLOW. SELECT A STEP TO UNDERSTAND IT.MOHAMMED TAHIRI / INDEPENDENT DEVELOPER
Good ideas.
Made tangible.
I turn everyday problems into useful web applications. Thoughtful interfaces, practical tools, and a little room for curiosity.
Mohammed.BASED IN MOROCCO. BUILDING FOR THE WEB.
WMH / WORKBENCHA place to make things
Video2Frame A video. A collection of moments.
AN ILLUSTRATED WORKSHOP. PICK A TOOL TO EXPLORE.
MY BUILDING BLOCKS
Python✳FastAPI✳Laravel✳JavaScript✳Docker
01 / SELECTED WORK
Built with purpose.
Useful by design. Personal by nature. A selection of what I’m building and improving.
02In development
INTERFACE CONCEPT
00:00:12,400
Every story deserves to be understood.
00:00:12,400
كل قصة تستحق أن تُفهم.
✦INSIDE THE BUILD
Parse subtitle cues or document text before sending the translatable parts onward.
A SIMPLIFIED WORKFLOW. SELECT A STEP TO UNDERSTAND IT.
03In development
→
INTERFACE CONCEPTLESS FRICTION. MORE FLOW.
INSIDE THE BUILD
The source checks the extension, content signature, size, and requested target before conversion.
A SIMPLIFIED WORKFLOW. SELECT A STEP TO UNDERSTAND IT.No projects in this category yet.
02 / THE INTERACTION WORKSHOP
Don’t just read it.
Explore the thinking.
Two small, working explanations inspired by my projects. Move through a caption. Follow a conversion route.
EXPERIMENT / 01Timing & language
Same moment.
Another language.
Scrub the sample timeline. Captions change with the selected language; their timing stays in place.
ILLUSTRATED PREVIEW00:00.000
00:0000:1000:20
1
00:00:00,000 --> 00:00:05,000
A useful idea starts with a question.Prepared sample translations. This demonstrates caption structure; it does not call an AI provider or process a video.
Inside the subtitle projectEXPERIMENT / 02Files & pipelines
The file changes.
The route matters.
Different jobs need different engines. Choose a sample route to see what sits between the input and output.
DOCXInput
ENGINELibreOffice
PDFOutput
WHY THIS PATH
An office document is rendered through LibreOffice’s document engine into a PDF.
WHAT TO REVIEWAvailable fonts and complex layouts can affect rendering. Review the resulting pages.
An illustrative route from the converter source. No file is uploaded or converted in this portfolio.
Inside the file converterSTILL CURIOUS?Try the Signal Run arrow puzzle
03 / THE PERSON BEHIND THE WORK
Mohammed Tahiri
Independent developer · MoroccoBUILT BY HAND. TEMPERED BY NIGHT. ↗
A curious mind.
A builder’s hands.
I like making things that earn their place in someone’s day.
withmyhands is my personal workshop: a place where I turn ideas into web applications and practical tools. I care about the details people notice, and the ones that quietly make everything work.
My approach is hands-on. Understand the problem, build a clear experience, test it, and keep improving. One project at a time.
Clarity before complexity.Useful details, honest limits.Build, test, refine.
BASED INMorocco, working online
FOCUSWeb apps & useful tools
04 / BEHIND THE INTERFACE
The tools. The thinking.
What I use, where it appears in the work, and why the choice matters.
Python / FastAPI
FastAPI is a Python framework for building APIs with type-based request handling.
IN THE WORKSHOP
Used in this portfolio and in the converter source; it is also listed in the Video2Frame catalog.
WHY THIS TOOL
Useful when an interface needs to coordinate Python processing or expose a focused API.
THE BOUNDARY
Long or CPU-heavy work needs its own execution strategy; an async endpoint alone does not make every task a background job.
PHP / Laravel
Laravel organizes a PHP application around routing, services, validation, and other application components.
IN THE WORKSHOP
The subtitle translator uses Laravel 12 and PHP 8.3+.
WHY THIS TOOL
A structured home for translation requests, quotas, licensing, and service boundaries.
THE BOUNDARY
Provider configuration, concurrency, and file reconstruction still need application-specific handling.
HTML / CSS / JavaScript
The interface describes the task, presents the choices, and explains the state of the work.
IN THE WORKSHOP
This portfolio uses local fonts, plain JavaScript, bilingual content, and progressive interface enhancements.
WHY THIS TOOL
Keep the page readable first, then add filters, dialogs, motion, and small experiments.
THE BOUNDARY
Motion should not carry essential information. Keyboard and reduced-motion paths need to remain usable.
Docker / Deployment
A container packages an application with the runtime files it needs and isolates its execution.
IN THE WORKSHOP
The portfolio ships Docker configuration, and both application projects include container deployment files.
WHY THIS TOOL
Keep local and server startup instructions explicit, including ports and configuration.
THE BOUNDARY
A container does not remove the need to manage host resources, configuration, and updates.
05 / HOW I CAN HELP
Your idea. My craft.
Focused builds for people who want to turn an idea into something they can actually use.
Web applications
Purpose-built tools and web experiences, with a clear interface and a practical backend.
Personal websites
A digital home that tells your story and makes your work easy to discover.
Workflow tools
Small utilities that reduce repetitive steps and make everyday tasks simpler.
WHAT A PROJECT CAN INCLUDE
These are starting points for a scope discussion. Deliverables are agreed for your project.
01Web applications
A focused application for a specific task, from interface to processing logic.
A good fit when…
For a repeatable workflow that is hard to manage with disconnected steps.
Possible deliverables
- A clear scope and user flow
- A working interface and backend for the agreed features
- A configuration and deployment handover
Useful first inputs
A description of the task, sample inputs, expected output, and important constraints.
02Personal websites
A digital home that helps visitors understand you, explore your work, and make contact.
A good fit when…
For a portfolio, an independent business, or a project that needs a clear introduction.
Possible deliverables
- Content structure and a coherent visual direction
- Responsive pages and useful interactions
- Editable source and practical publishing instructions
Useful first inputs
Your name or brand, real projects, contact details, visual references, and the main visitor action.
03Workflow tools
Small tools that turn repetitive file or media steps into a more focused experience.
A good fit when…
For a recurring manual task where inputs and outputs can be defined clearly.
Possible deliverables
- An agreed input/output contract
- A focused tool with explicit errors and limits
- Examples and usage notes for the agreed workflow
Useful first inputs
Representative files, desired output, approximate workload, and privacy or hosting requirements.
From “what if” to “here it is”.
A SIMPLE WAY OF WORKINGFind the real problem.
A conversation about your goal, your users, and what matters most.
Make it tangible.
A focused design and a working version you can try and discuss.
Improve, then ship.
Test the details, refine the experience, and prepare a clear handover.
06 / WORKSHOP NOTES
A little more context.
Small explanations for the choices that shape a useful tool.
A useful interface answers three questions.
What do I put in? What is happening now? What will I get out? File and media tools are easier to understand when each state makes those answers visible.
A format is more than its text.
Subtitle files contain timing and structure. Office documents contain formatting and layout. A workflow should explain which parts it preserves and which parts can change.
Make the limits part of the experience.
A clear error, an honest partial result, or a visible configuration requirement can be more useful than a vague success message. It gives the visitor a concrete next step.
TRY THE RELATIONSHIP
More frames. More to handle.
Sampling rate changes the size of a frame collection. Adjust the assumptions to see the relationship before you make a choice.
An explanatory model, not a live video extractor. It samples from time zero, before the clip ends. Size excludes ZIP compression and metadata.
Read the Video2Frame studysampled frames
assumed image total
MODEL: FRAMES = CEIL(SECONDS × RATE)
07 / A PLAYFUL DETOUR
Every idea
needs a way out.
A tiny puzzle from the workshop. Rotate the arrows, connect the route, and send your idea into the world.
- 01Start at IN, in the top-left corner.
- 02Tap an arrow to rotate it clockwise.
- 03Reach OUT, then point right to leave.
Good design leaves room for a little play.
SIGNAL / RUNInteractive experiment
IN →FIND A WAY THROUGH→ OUT
KEYBOARD: ARROWS TO MOVE · ENTER / SPACE TO TURN
08 / BEFORE WE START
Clear questions.
Useful answers.
A few things worth knowing about the work, the projects, and getting in touch.
01What kinds of projects can we discuss?
Focused web applications, personal websites, and tools for file or media workflows. A small, well-defined first version is a useful starting point.
02What should I send in the first message?
Describe the problem, who will use the result, an example input/output, and any important deadline or hosting constraint. The project planner below helps you organize that brief.
03Can you give a price or deadline before seeing the scope?
The scope, dependencies, and existing code need to be understood first. Use the contact brief to start a discussion; the planner does not produce a quote or delivery promise.
04Is every project here a public demo?
Video2Frame has the link supplied in the project catalog. The subtitle translator and file converter have detailed source-based studies here, without public demo links.
05Are the interface visuals actual screenshots?
They are labelled interface concepts created for this portfolio. Read each case study for the project workflow and the limits of what is described.
06Will the contact form send a message automatically?
It opens your email application with a draft. You review and send the email yourself. The portfolio does not collect or store this brief on a server.
07Can the animations be turned off?
Use the motion button in the header. Your device’s reduced-motion setting takes priority. The Signal Run puzzle and explanatory tools remain usable without animation.
08Does AI translation guarantee a publishable result?
No. Language, terminology, and context need review. The subtitle study explains structure preservation and partial output, without treating AI output as a substitute for human checking.
09 / MAKE THE FIRST STEP EASIER
From a rough idea
to a clear brief.
A few choices help explain what you need. Use the result as a starting point for our conversation.
This organizes your brief. Scope, cost, and delivery timing are discussed after reviewing the project.
open to small freelance builds — usually replies within 24h.
10 / LET’S MAKE SOMETHINGGood things start
with a hello.
Have a project in mind, a tool you wish existed, or just something to share? I’d like to hear it.
MohammedTahiri@withmyhands.online