Skip to content

Fardin Omor Afnan · Frontend engineer for SaaS teams

I make softwarefeel simple.

Landing pages, product UI and component systems for SaaS startups and design studios — in React, Next.js and TypeScript, with performance and accessibility built in from the first commit.

See the offers

Performance and accessibility targets go into the contract — mobile Lighthouse scores on agreed pages — so "fast" is something you can check at handover, not something promised after launch.

3+ years building product interfaces across three teams. Based in Dhaka on GMT+6: I overlap the UK working day, and US East Coast teams wake up to the handoff.

this page is the work sample

Its grid, tokens, focus order and motion are all inspectable, live, from any scroll position.

Work history

  1. Kiip Corp.

    Frontend Engineer

    · current

  2. Potential Inc

    Frontend Developer

  3. Microdeft

    Frontend Engineer

    · first role

Selected work

Two things I built, still running.

Both are my own projects, not client work — each panel is a capture of the site running as it shipped.

  • The Logiq Dev studio site: a dark hero reading “Software, built by the people who ship it” beside a live availability card showing local time in Dhaka, next start date and overlap hours.

    Logiq Dev — studio site, own project

  • The Web Hawker agency site playing through its wordmark, its expertise list and its work index.

    Web Hawker — agency site, own project

Also mine — a separate site

Iris: backgrounds you choose by light.

I also keep a catalogue of the reusable pieces I build — backgrounds, sections, components, templates. Pick a light and one of them runs here.

Live: iris/backgrounds/cobalt-foundry

Iris — Cobalt Foundry · Beam

Choose a light
Open Iris in this light, in Blue

109 pieces · 95 with code · newest 29 Sep

Ways to work together

Three fixed-scope ways to start.

Each one has a written scope, a fixed price and a timeline before any work begins. You pay for deliverables, not hours.

  • Teardown

    3 days

    From $400

    An audit of your live site — speed, mobile, accessibility and conversion issues — as a prioritised fix list with a short video walkthrough.

    • Measured on mobile, with the numbers shown
    • Fixes ranked by effort against impact
    • Fee credited in full toward a build

  • Launch Sprint

    7–12 days

    From $3,000

    A SaaS landing page built in Next.js from your Figma, responsive and animated, with SEO basics, deployed to Vercel or your own host.

    • Up to 5 sections or pages
    • Mobile Lighthouse 90+ on agreed pages, in the contract
    • 2 revision rounds, 14 days of fixes after launch

  • Frontend Partner

    Monthly

    From $1,500 / month

    Fixed monthly hours on your product UI — components, features, bug fixes and code review — for teams without frontend capacity of their own.

    • 15 to 80 hours a month, by tier
    • Reply within one working day
    • Cancel with 30 days notice

A bigger build — a dashboard, a component library, a feature in an existing product — is quoted per scope, usually 3–6 weeks. Copywriting, brand design and backend work are quoted separately.

Inspect this page

Don't take my word for the craft. Open it up.

Every portfolio claims good layout, consistent tokens and accessibility. You cannot check any of that from a screenshot, and a bought template makes the same claims. So this page carries its own instruments — four lenses that read the running document and the token module the stylesheet is generated from.

or press i anywhere on the page

  • Grid

    press 1

    Draws the real 12-column grid and the spacing rhythm over the live page.

    Claim it evidences

    Pixel-perfect, responsive layouts.

    Generated from the layout's own custom properties — it can't flatter the page, because it is the page's grid.

  • Tokens

    press 2

    Names the design tokens behind any element on the page, read from its computed style, with the measured contrast ratio for each text tier.

    Claim it evidences

    Reusable component systems and consistent styling.

    Read live from lib/design-tokens.ts — the one place any value here is defined.

  • Access

    press 3

    Outlines every focusable element in tab order, marks the heading structure, and flags anything unlabelled.

    Claim it evidences

    Accessible interfaces.

    Reads the live DOM — a missing alt or href gets flagged here exactly as it would anywhere else.

  • Motion

    press 4

    Reports live scroll progress and the active timeline, and lets you force reduced motion to watch the fallback.

    Claim it evidences

    Smooth animations with Framer Motion and GSAP.

    Forces the same code path a visitor with the OS setting gets — a complete fallback, not a stripped one.

Specimen — every value here is drawn from the token module. Turn on Tokens and hover anything, in this block or anywhere on the page.

type scale

  • Interfaces--text-display-sm · Section headings.
  • Interfaces--text-display-md · Major section headings.
  • Interfaces--text-display-lg · The opening statement.
  • Interfaces--text-display-xl · The name.

colour · text tiers, measured

  • primary18.86:1 AAA
  • secondary8.93:1 AAA
  • muted5.82:1 AA
  • subtle4.57:1 AA · on recessed
  • accent primary6.06:1 AA
  • accent hover9.42:1 AAA
  • accent ink6.06:1 AA · on accent primary
  • focus-ring6.06:1 AA

surfaces · separated by luminance, never by shadow

  • canvas
  • surface
  • raised
  • recessed

space · one scale, 4px base, 16 steps — and two radii in the whole system

1
2
3
4
5
6
8
10
12
16
20
24
sm
md

And the two I cannot demonstrate here

  • Scalable web applications.

    Nothing on this page can honestly demonstrate scale — a portfolio has one user at a time. It stays a claim, stated once, and the work history is what supports it.

  • Performance-focused interfaces.

    This page's own load behaviour is the only performance evidence here. I have no shareable numbers from production work yet, so I am not going to print one.

3+ years, three teams

How my scope grew over time

Not a résumé repeated. Each step shows how my scope and ownership grew — and the stack underneath grows with it, so you can see what entered the work and when rather than reading a wall of logos.

Kiip Corp.

Frontend Engineer

Building mobile-first clinic discovery and booking experiences, with a focus on interaction polish and navigation that holds together across a flow.

What changed

Owning a product surface end to end, on mobile first, where a booking flow either completes or it doesn't. Navigation continuity across a multi-step flow is a different problem from making one screen work.

Stack by this point · 10

  • TypeScript
  • React
  • Next.js
  • Tailwind CSS
  • Framer Motion (new at this step)
  • GSAP
  • Storybook (new at this step)
  • Node.js (new at this step)
  • Express.js (new at this step)
  • MongoDB (new at this step)

Potential Inc

Frontend Developer

Designing and implementing dynamic, user-friendly interfaces with a focus on responsiveness and smooth interactions.

What changed

From maintaining interfaces to designing and implementing them. Responsiveness and interaction quality became mine to get right rather than mine to preserve.

Stack by this point · 7

  • JavaScript
  • TypeScript (new at this step)
  • React
  • Next.js (new at this step)
  • Tailwind CSS (new at this step)
  • Bootstrap
  • GSAP (new at this step)

Microdeft

Frontend Engineer

Building modern web apps and revamping existing products for improved usability.

What changed

Working inside interfaces other people had already shipped — the fastest way to learn what makes a frontend codebase survivable, and what makes it not.

Stack by this point · 3

  • JavaScript (new at this step)
  • React (new at this step)
  • Bootstrap (new at this step)

How I work

How I think about building software

  • I start from the constraint, not the component. What has to be true on a slow phone, in a screen reader, at 200% zoom — that usually decides the structure before any visual decision does.

  • I build the system before the screens. Reusable components with real states beat a pixel-perfect page that only exists once, because the second page is where a codebase either holds or stops holding.

  • I work close to designers and backend engineers rather than downstream of them. Most of the interface problems I have solved were cheaper to solve in a conversation than in code.

  • How a project runs: a written scope and a fixed price, 50% to book the start date, milestones you approve on a staging link, and a handover with the Lighthouse report at the end.

Fardin, working at a laptop.
Based in
Dhaka, Bangladesh
Timezone
GMT+6
Working
Remote · UK and US overlap

Start a project

Tell me what you’re launching.

Send the link, the deadline and what’s hard about the front of it right now. I take one project at a time, so the start date is booked when the deposit lands — and I reply within one working day.

Email FardinBook a 20-minute call

Fardin Omor Afnan · Frontend Engineer · Dhaka, Bangladesh

Built with Next.js, TypeScript and Tailwind. Press i to inspect it.

No inspect lenses active.