GymlyCRM
An operator-facing administration system: memberships, billing, attendance and multi-branch records in one place.
- Role
- Design and development
- Stack
- PHP
- MySQL
- JavaScript
- CSS
Creative Frontend Engineer
HAIDER SHAH
HAIDER SHAH — Creative Frontend EngineerSelected work
Urban Spark Design
An interactive creative-portfolio site: word-by-word hero reveals, procedural torn-paper section transitions, and a custom GSAP rocket that flies a real, responsive SVG path as the page scrolls.
- Role
- Front-end development and motion design
- Stack
- Next.js
- React
- TypeScript
- GSAP
- ScrollTrigger
- MotionPathPlugin
- Lenis
- Tailwind CSS
Muhammad Wasif
A personal-brand site for fitness consultant and corporate wellness advisor Muhammad Wasif: consulting and wellness services, a filterable photo archive, a transcribed certifications timeline and a database-backed admin panel for the one setting that actually changes.
- Role
- Design and development
- Stack
- Next.js
- React
- TypeScript
- Tailwind CSS
- Framer Motion
- GSAP
- MySQL
Recent articles
Contrast as a build gate, not a review step
A colour rule enforced by review erodes under a deadline. Enforced by a failing build it survives — and it catches a class of defect no amount of looking at the page will find.
Writing the reduced-motion contract before the animation
A reduced-motion block written after the animations is a block that has to catch up with them. Written first, it binds everything added later — and the hardest decision is what it must deliberately not switch off.
Server components and an honest client-JavaScript budget
Server components make the default free, which is exactly why the interesting question becomes what earns a client boundary — and how much interactive work you can do after crossing one without ever calling setState.
Theming without touching a single component
Two independent attributes on the root element give fourteen appearances from nine declarations — and the test that stops the generated CSS drifting from the registry it came from.
Variable font weight as a motion channel
Animating a weight axis instead of opacity or transform gives you motion that never reflows the composition — but it bills you for a relayout on every frame, and the curve you reach for first is the wrong one.
Reconstruct an interface from measurement, not screenshots
A screenshot tells you what something looked like for one frame. Measuring the live page tells you what it does — and only one of those is enough to rebuild from.
About
I work on interface reconstruction: taking a demanding, well-made interface apart to understand why it feels the way it does, then building an original that holds up under real conditions. That means measuring computed styles, layout behaviour and interaction timing rather than working from screenshots, and turning what comes back into a token system the rebuild can stand on.
The standard I hold work to is mechanical rather than aspirational. Contrast, horizontal overflow, reduced motion, schema-valid content and unverified claims are all checked by something that fails the build, because a rule that depends on remembering it is a rule that erodes. This site is built the same way it argues for.
Principles
- Measure before rebuildingA reconstruction starts with numbers — computed values, breakpoints, timings — not with an impression of how something looked.
- Make the rule a build failureAccessibility, performance and content-honesty rules are enforced by gates, so they survive a deadline.
- Static first, enhancement secondThe version without JavaScript, without animation and without a network is the one that has to work.
- Let whitespace carry itRestraint is cheaper than motion and ages better. Most of a premium feel is spacing, rhythm and timing.
Capabilities
UI Engineering
- Responsive interface development
- Component architecture
- Design system implementation
- Interaction and motion implementation
Website Reconstruction
- Visual reverse engineering
- Layout and responsive analysis
- Premium website recreation
- Cross-browser fidelity
Performance and Quality
- Core Web Vitals
- Accessibility to WCAG 2.2
- Technical SEO
- Performance optimisation
- Testing and QA
AI-assisted Engineering
- AI-assisted development workflows
- MCP tooling
- Automated browser inspection
- Structured prompt engineering
Tools
- HTML
- CSS
- JavaScript
- TypeScript
- React
- Next.js
- Tailwind CSS
- Node.js
- Git
- GitHub
- Playwright
- Vitest
- MDX
How a rebuild runs
- InspectMeasure the target interface directly: computed styles, layout behaviour across viewports, interaction timing, network cost.
- ExtractTurn the measurements into a token system — colour, type scale, spacing, motion — so the rebuild starts from structure rather than from screenshots.
- RebuildWrite original components against the tokens, server-first, with the static version working before any enhancement is layered on.
- VerifyHold the result to budgets that fail the build: performance, accessibility, no horizontal overflow, no unverified claim in the content.
Contact
- sayhi@iamhaidershah.com
- Usually replies within 12 hours
- Reserved — no account confirmed