Maranatha LimSenior Frontend Developer

BASED IN DUBAI · SELECT CONVERSATIONS WELCOME

Building fast, responsive, and thoughtful web experiences.

Senior Frontend developer with 10+ years of experience building responsive websites and web applications. I work closely with designers and backend developers to turn designs into maintainable, production-ready interfaces, with a focus on performance, responsiveness, and design fidelity.

View Selected Work↓Contact↗
LinkedIn ↗Email ↗
Dubai, UAE
01 // SELECTED WORK

Featured Engineering Projects

01 / PRODUCTView live site ↗

ShuttleTribe

Co-creator · Frontend & product engineering

Badminton group scheduling product: publish sessions, fill courts, auto waitlists, and live rotation for hosts—without spreadsheets or endless group chats. Built with a partner; public app at shuttletribe.com.

Next.js · Tailwind CSS · Supabase · TypeScript

Games near youAuto waitlists · Live queue
  • AR

    Friday Random Rally

    Social · Private · 5/12 players

    Join game
  • QM

    Club Social Session

    Social · Public · 23/30 players

    Waitlisted
Zero spreadsheets
Auto promotion
Host rotation
02 / DESIGN SYSTEMPrivate / NDA

Shared Component Library & Storybook

Frontend · Design system & documentation

Helped introduce and adopt a shared component library across multiple product teams. Built a dedicated Storybook workspace—atomic structure (atoms → molecules → organisms), variant APIs per component, and stories for states, docs, and visual regression handoff.

React · TypeScript · Storybook · Atomic Design · Design tokens

Storybook · Design systemVariants · Stories

Atoms

Button · Input · Label

Molecules

Field group · Card header

Organisms

Nav bar · Data table

Components / ButtonControls · Docs · A11y
PrimarySecondaryGhost
Default story
Disabled · Loading
03 / PORTFOLIO

Editorial Engineering Portfolio

Personal site · Design-to-code

This site: Stitch design spec to Next.js App Router, theme tokens, responsive editorial layout, and accessible patterns—serving as both CV surface and implementation sample.

Next.js · Tailwind CSS · TypeScript · App Router

design/stitch → src/appWCAG AA target
--font-sansHanken Grotesk
--color-hairline#E5E5E0
max-width1360px grid

Server-first sections, class-based theme toggle, content in src/content/.

04 / ARCHIVEView legacy site ↗

Earlier Front-End Portfolio

Personal site · AngularJS SPA

Monochrome portfolio with a full-viewport hero and a Swiss-style modular grid for selected works, profile, and contact—hash routing across views.

AngularJS · JavaScript · HTML & CSS

maranathalim.comAngularJS · Hash SPA
Legacy portfolio — full-viewport hero with desk photography
Hero landing + modular works gridMonochrome · Uppercase type
02 // ABOUT

Craft & Discipline

My engineering practice is grounded in semantic HTML, modern CSS layout engines, scalable React and Next.js architectures, and a craftsman's eye for micro-interactions and typographic rhythm. I view the browser not just as an execution target, but as a deliberate medium for clear human communication.

Throughout ten years in production, I have specialized in balancing engineering precision—clean maintainable code, type safety, low bundle footprint, and uncompromising web performance—with high design fidelity. Working closely with product designers in Figma, I ensure interfaces transition into code without losing their original polish, tactile responsiveness, or structural integrity.

03 // STACK

Technical Competencies

01 / Frontend

React · Next.js · TypeScript · JavaScript (ESNext) · Tailwind CSS · HTML5 Semantic · CSS Subgrid & Custom Props

02 / UI & Design Systems

Design System Architecture · Figma Tokens · Storybook · WCAG 2.1 AA Accessibility · Responsive Layouts

03 / Engineering & Tooling

Git Monorepo Workflows · REST / JSON API · ESLint · TypeScript · Code Review · Web Performance (Core Web Vitals) · Technical SEO

04 // CONTACT

Let's build something thoughtful.

For peer conversations, thoughtful collaboration, or a long-term fit when the timing is right—email is best. Connect below if that’s useful.

mara.lim.dev@gmail.com
LinkedIn ↗Email ↗