Skip to content

Fardin Omor Afnan · Software engineer · Frontend

I make softwarefeel simple.

Designing interfaces, building systems, obsessing over the details.

View the work

React, TypeScript and modern frontend architecture — with interaction, accessibility and performance considered from the start.

3+ years across three product teams, shipping responsive interfaces, reusable component systems and the motion work that holds them together.

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.

Each panel is a capture of a surface I owned, running. No mockups, no case study — the interface, 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 — software studio site

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

    Web Hawker — agency site

Featured — a separate site

A catalogue of reusable pieces

I also keep a catalogue of the reusable pieces I build — backgrounds, sections, components, templates.

Open Iris

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.

  • What I want next: frontend or full-stack work on a product with real users, where performance and interaction quality are treated as features rather than polish.

Fardin, working at a laptop.
Based in
Dhaka, Bangladesh
Timezone
GMT+6
Working
Remote

Let’s work together

You have seen the work. Now check the person.

I’m a frontend engineer open to remote roles, working from Dhaka, Bangladesh on GMT+6. Tell me what you’re building and what’s hard about the front of it right now.

Email Fardin

Fardin Omor Afnan · Frontend Engineer · Dhaka, Bangladesh

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

No inspect lenses active.