Frontend Engineer

Elizabeth
Afolabi

I build interfaces that feel inevitable: fast, accessible, and obsessively detailed. Currently available for freelance and full-time roles.

Elizabeth Afolabi, Frontend Engineer

About

Hi, I'm Elizabeth.

I'm a frontend developer with 3+ years of experience building responsive, user-focused applications with React, Next.js, and TypeScript — turning complex ideas into clean, intuitive interfaces.

I've worked on API-driven products and data-heavy interfaces, including real-time dashboards and interactive visualizations. I care deeply about performance, accessibility, and building interfaces that scale with real-world usage.

Lagos, NG Remote React / Next.js / Astro
Available for work

Open to frontend roles where performance, usability, and product thinking matter. I enjoy working on data-heavy and user-facing applications.

Let's collaborate

Experience

Experience & Impact

2025 — Present Full-time

Checkit

Frontend Engineer

Current

Manage frontend development for the Proc360 logistics ecosystem (Admin & User apps). Championed a performance-first architecture by implementing granular Suspense boundaries to prioritize critical UI paths and reduce TTI (Time to Interactive).

  • Engineered a robust, state-driven tutorial system for the User app, resolving critical race conditions and timeout errors in the onboarding flow.
  • Optimized high-density shipment tables using cursor-based pagination and specialized TanStack Query logic to handle deep-scrolling datasets.
  • Resolved complex navigation bugs, including recursive redirect loops and stale breadcrumb states, by refactoring routing and global state synchronicity.
  • Improved platform responsiveness by refactoring heavy logistical components into memoized, lazy-loaded modules to ensure 60fps interactions.
Next.js TypeScript React Tailwind CSS TanStack Query Zustand
2024 — 2025 Internship

Building Bloques

Frontend Developer Intern

Built responsive interfaces and translated UI/UX designs into production-ready components.

React TypeScript Tailwind SCSS
2024 Volunteer

Vechy Graphix

Frontend Engineer & Lead

Promoted

Promoted to Frontend Lead within 4 months. Led team and built agro-business web app.

React Next.js Tailwind
2024 DevRel

Metis / BuildHer

DevRel Ambassador

Led technical session on Metis L2. Created curriculum and delivered teaching session.

Watch session ↗
Web3 Blockchain Education

PORTFOLIO

Selected Work

AtmosChart
Next.jsTypeScriptTailwindCSS +2

AtmosChart

A weather visualization app focused on trend clarity, comparative analysis, and real-time readability.

View project
MultiStep Logic Engine
ReactTypeScriptMaterialUI +2

MultiStep Logic Engine

A high-performance, schema-validated form architecture designed for complex data collection and modular UI injection.

View project
ITERATIONS

Three versions. Each one built when I knew more than the last.

A portfolio isn't just a deliverable — it's a log of how you think. Here's mine.

Portfolio v1 screenshot
2023 v1
HTML CSS JavaScript
Constraint Proving I could build anything

What I didn't know yet

A flat list of small projects with no narrative. No component thinking, no performance awareness, no design system — styles scattered everywhere with nothing consistent. It worked, but it didn't communicate anything beyond "I wrote some code."

The delta
Architecture Single files. No separation of concerns.
Performance Unoptimised images, no lazy loading, no budgeting.
Design No system. Every section styled independently.
View live
Portfolio v2 screenshot
2025 v2
React Tailwind CSS Framer Motion
Constraint Showing I understood modern tooling

What I overcorrected on

Still a project list at its core, but dressed up with React and Framer Motion. I added a blog, an events page, and a scroll-within experience section — but shipped a broken pagination where page 2 loaded at the bottom of the viewport. I knew it was broken. That moment taught me more about UX than any tutorial.

The delta
Architecture Component-driven, but over-abstracted in places.
Performance Framer Motion added JS weight without proportional UX gain.
Design More intentional, but motion was decoration not communication.
View live
Portfolio v3 screenshot
Current
2026 v3
Astro TypeScript Tailwind CSS
Constraint Communicating engineering maturity

What I optimised for

Every decision here was deliberate. Astro for zero-JS by default and static output. Content collections for maintainability. A layout that tells a story rather than listing work. Performance, architecture, and design philosophy aligned for the first time.

The delta
Architecture Content collections, clear component boundaries, no accidental complexity.
Performance Zero-JS default, view transitions, lazy loading throughout.
Design System-first — tokens, consistent spacing, motion only where it earns its place.
View live

Stack

Tools I work with

Core

TypeScript · React · Next.js · Tailwind

Ecosystem

Firebase · Zustand · REST APIs · Git · Vercel · GitHub · Jira

Exploring

AI APIs · Astro · Web3 · Performance Optimization

What's next?

Let's build something
remarkable.

Whether you have a project in mind, a role to fill, or just want to talk frontend, my inbox is open.

Say hello →
Available for work
Switch theme