Senior Front-End Engineer & UI Architect · React, Next.js, TypeScript & Gutenberg · remote from Dhaka · 10+ years
Scans block directories, validates schemas against WordPress core standards, and generates strongly-typed TypeScript interfaces (BlockAttributes, BlockEditProps) and Cursor/Copilot context rules. Includes a git-based breaking change guard that diffs attribute schemas against history and emits deprecation stubs.
Open-source drag-and-drop landing page builder. Engineered the interactive visual editing canvas in React and Flux, real-time responsive breakpoint preview controls, and custom block layout engines.
Official merchant integration app built with React and Shopify Polaris design system. Designed responsive merchant portal settings, real-time delivery status views, and mobile-friendly merchant dashboards.
CLI tool that restructures project documentation and component context for AI coding tools, reducing initial session token usage from 11,000 to 1,300 tokens during active front-end engineering.
Custom post-query blocks built in React.js with editor inspector controls, responsive grid presets, and compliant block.json metadata.
How I design, architect, and review front-end systems on distributed product and agency teams.
Accessibility is verified during local development and in automated CI suites, not as an afterthought. Every UI component is built for keyboard accessibility (Tab order, focus trapping, Escape triggers), explicit ARIA states, color contrast compliance, and verified with VoiceOver and NVDA.
Components are small, composable, and strictly typed. Presentation is decoupled from data-fetching logic. With tools like wp-block-typegen, attribute schemas and component props stay strictly synchronized, preventing type drift and runtime errors.
I pick the right styling tool for each challenge: custom CSS with modern CSS Grid, Flexbox, and Container Queries for expressive art direction, and Tailwind CSS for rapid, scalable design systems. Layouts are thoroughly tested across Safari, Chrome, Firefox, and mobile viewports.
I measure Interaction to Next Paint (INP), Largest Contentful Paint (LCP), and Cumulative Layout Shift (CLS) on every build. Critical CSS is inlined, non-critical bundles are code-split, and font display is configured to eliminate layout shifts.
AI coding tools (Cursor, Claude Code, GitHub Copilot) are a force multiplier when paired with rigorous engineering discipline.
By generating explicit TypeScript interfaces from block.json and schema definitions, models receive strict context and never hallucinate invalid props or attribute names.
Every line of code generated with AI assistance is thoroughly read, syntax-checked, and exercised locally with unit and integration tests before submitting a pull request.
All PRs run through GitHub Actions checking linting, formatting, strict TypeScript compilation, accessibility scans, and unit tests.
Using claude-token-optimizer, project repositories are structured so AI assistants load only relevant architecture files, maximizing output precision.
Dhaka is UTC+6 all year, with no daylight saving. I maintain 6 dedicated overlap hours with US Eastern teams (8am - 2pm ET), plus full overlap with UK, Europe and Sydney. The table below calculates today's live daylight savings time.
| Your team in | Your time | My time (Dhaka) | Overlap |
|---|
Your browser reports your time zone as your time zone. The call booking link displays open slots in your local time.
Distributed teams run on clarity, predictability, and thoughtful documentation. Here is how I collaborate.
What got shipped, what is queued next, and any open questions or blockers. Your team reviews it at their day start without waiting for meetings.
Available on Slack, Teams, or Discord during overlap hours for rapid code discussions, pairing, and live reviews.
Each pull request details what changed, the architectural reasoning, testing steps, and short videos or screenshots demonstrating UI states.
When design mocks or requirements are ambiguous, I ask upfront with clear option trade-offs rather than making assumptions that require rework.
Available for sprint planning, demos, architecture reviews, and client-facing presentations over Zoom or Google Meet.
Bangladesh public holidays and scheduled time off are shared well in advance so project delivery is never interrupted.
Example daily asynchronous update:
Shipped today - Header navigation: added accessible mobile drawer with keyboard focus trap and Escape handler - Block attributes: regenerated TypeScript types using wp-block-typegen; fixed card variant type drift Queued next - Hero block: responsive grid layout with CSS container queries and image aspect-ratio presets Question - For the mobile drawer animation, do we want 200ms ease-out or immediate visibility for users with prefers-reduced-motion?
Slack, Zoom, Google Meet, GitHub, GitLab, Jira, Linear, Asana, Figma, Notion. Fully adaptable to your workflow.
| Employer of Record | Deel, Remote.com, Oyster, or similar |
|---|---|
| Direct Contracting | Monthly invoice in USD, paid via Wise, Payoneer, or direct international wire |
| Platforms | Upwork, Toptal, and similar contractor networks |
| Availability | Immediate contract availability; flexible trial-to-hire engagement |
Full details and credentials available in the resume (PDF).
| Front-End Frameworks | React.js, Next.js (App & Pages Router), TypeScript, JavaScript (ESNext), state management, modular component architecture |
|---|---|
| CSS & Styling | Modern CSS (Grid, Flexbox, Container Queries), Tailwind CSS, BEM, SASS/SCSS, responsive design, CSS modules |
| Gutenberg & WordPress | Custom Gutenberg blocks in React, Block API v3, InnerBlocks, block themes, theme.json, slot fills, WP REST API |
| Accessibility (a11y) | WCAG 2.1 AA compliance, keyboard navigation, focus management, ARIA attributes, VoiceOver & NVDA testing |
| Performance & Vitals | Core Web Vitals (INP, LCP, CLS), critical CSS, bundle optimization, code splitting, asset preloading |
| Tooling & Quality | Vite, Webpack, ESLint, Prettier, Jest, Playwright, GitHub Actions CI, strict TypeScript type checking |
| AI-Assisted Workflow | Cursor, Claude Code, GitHub Copilot, custom prompt context architectures |
I have spent 10+ years building user-facing web applications. I care about the craft of UI engineering: turning complex design systems into fast, accessible, and delightful digital experiences that work seamlessly across every screen.
Whether architecting custom Gutenberg block systems for enterprise publishers or engineering modular React applications in Next.js, I focus on clean code, zero-defect delivery, and clear asynchronous collaboration.