Haider Ali

Currently at CoBlack

Before: Horizon Tech

Open to design engineer, frontend and UI roles

I design interfaces , then ship them

React.jsNext.jsMaterial UIReduxTailwind CSSShadcn/uiJavaScript (ES6+)TypeScriptPythonHTML5CSS3JavaNode.jsExpress.jsMongoDBSQLREST APIs

the short version

About me

I'm Haider a Software Engineer focused on building user-friendly and efficient web applications. I design interfaces and then ship them I look after the design system and the screens where people wait on AI

hi, I’m Haider

sketch, then screen

button.tsx

const buttonVariants = cva(…, {
  variants: {
    variant: {
      default: "selectable bg-primary",
      secondary: "selectable border-ink",
      nav: "font-mono uppercase",
    },
  },
})

this site, in code

this site’s parts bin

Design systems
Next.js and TypeScript
Interfaces for AI
Designing in code

a few things I've made

Selected work

01business-buddy
2024–2025
Business Buddy
Getting small business owners online without asking them to learn web design.
Final-year project, built by two of us. I worked across the front end, the guided site builder, AI captions, Meta publishing and auth.
Read the case study
- React
- Express
- MongoDB
- Meta Graph API
- Gemini
fyp-landing.png
02business-buddy-redesign
September 2026
Business Buddy, redesigned
I redesigned the landing page on my own, straight in code, with no mockups first.
Drag the handle across the screenshot to compare the old page with the new one.
See the redesign
- Solo
- Designed in code
- Light and dark
landing.tsx
beforeafter
03free-scribe
2023
Free Scribe
Speech-to-text and translation that runs OpenAI’s Whisper in the browser, inside a Web Worker so the page stays responsive.
Earlier work.
Built by following Smoljames’s tutorial, with small changes of my own.
Open the live site
- Whisper
- Web Worker
free-scribe.png
04usabilityhub-clone
2023
UsabilityHub clone
A clone of usabilityhub.com’s landing page, built in HTML, CSS and JavaScript.
Earlier work.
A practice clone: their design, my code.
Open the live site
- HTML
- CSS
- JavaScript
usabilityhub-clone.png
05big-box-souq-clone
2023
Big Box Souq clone
A four-page clone of bigboxsouq.com (home, about, partnerships and contact) in HTML, CSS and JavaScript.
Earlier work.
A practice clone: their design, my code.
Open the live site
- HTML
- CSS
- JavaScript
big-box-souq-clone.png

open the hood

The system

This site runs on a small design system. Colour, type and shape live as tokens in one stylesheet, and the components are shadcn/ui with variants added, so a change in one place reaches every page. It’s how I like to work on a product.

colour: 4 fills, ink and paper

Click a swatch to copy it. The fills stay the same in the night theme.

type: four faces, four jobs

HaiderFlux, display
Interfaces, then shippedGeist, text
w 766 × h 143Geist Mono, labels
pencil notesReenie Beanie

components: shadcn/ui, extended with variants

onswatch-3swatch-4status

Built on shadcn/ui. Button, Badge, Card, Avatar and Switch got new variants: hard corners, ink outlines and the selection handles you get on hover.

See it for yourself

Inspect mode shows the component, variant, size, type and colour token of anything you hover.

the door's open

Say hello

I'm looking for design engineer, frontend and UI roles. Based in Rawalpindi, Pakistan, open to remote work or relocation.

0345haiderali@gmail.com LinkedIn

Haider Ali

now

Open to design engineer, frontend and UI roles. The quickest way to reach me is email.

Haider Ali

About me

Selected work

Business Buddy

Business Buddy, redesigned

Free Scribe

UsabilityHub clone

Big Box Souq clone

The system

Say hello