Work

Hire me

Resume

Github

About

Work

Hire me

Resume

Github

About

Work

Hire me

Resume

Github

About

Product design & Frontend Engineer

Product design & Frontend Engineer

CONVERT
designed & built.

CONVERT
designed & built.

A design-inspiration platform for product teams, 1,400+ real app patterns, a procedurally rendered UI engine, and a full conversion funnel engineered to turn browsing designers into paying customers.

A design-inspiration platform for product teams, 1,400+ real app patterns, a procedurally rendered UI engine, and a full conversion funnel engineered to turn browsing designers into paying customers.

View Live Project→

Github Link

Role

Design + Front-End Build

Scope

Marketing Site + Funnel

Stack

HTML · CSS · Vanilla JS

Systems

Light / Dark Theming

01 / Discovery Grid

01 / Discovery Grid

The hero is the demo.

Instead of a static screenshot, the hero renders a live 4×4 grid of mobile UI patterns from a custom procedural engine, status bars, icons, real photography, and layout all assembled from structured data, not image files. Filter pills auto-cycle to narrate the product's own interaction model before a visitor lifts a finger.

Instead of a static screenshot, the hero renders a live 4×4 grid of mobile UI patterns from a custom procedural engine, status bars, icons, real photography, and layout all assembled from structured data, not image files. Filter pills auto-cycle to narrate the product's own interaction model before a visitor lifts a finger.

procedural rendering

auto-cycling filters

theme-aware

02 / Signature System

02 / Signature System

One token system, two complete worlds.

Every surface, including every procedurally generated mockup, is driven by CSS custom-property tokens. Toggling dark mode re-skins the entire product instantly, correctly, with zero flash of unstyled content.

Every surface, including every procedurally generated mockup, is driven by CSS custom-property tokens. Toggling dark mode re-skins the entire product instantly, correctly, with zero flash of unstyled content.

Light — Default

Cream, ink, neon.

Dark — Toggled

Charcoal, bone, brighter neon.

03 / Revenue Calculator

03 / Revenue Calculator

Turns curiosity into a number.

A visitor types their monthly traffic and watches loss figures update live, including a counter ticking upward in real time since the moment they landed, refreshed on a 55ms interval. It's the exact demo counter running to your left, right now.

A visitor types their monthly traffic and watches loss figures update live, including a counter ticking upward in real time since the moment they landed, refreshed on a 55ms interval. It's the exact demo counter running to your left, right now.

real-time state

input-driven

psychology of urgency

04 / Funnel Close Screen

04 / Funnel Close Screen

Real urgency mechanics, honestly engineered.

A countdown timer, a scarcity counter that silently decrements, and a live "viewers now" figure, the same conversion architecture used in high-performing sales funnels, built from scratch as a demonstration of full-stack marketing engineering, not just visual design.

A countdown timer, a scarcity counter that silently decrements, and a live "viewers now" figure, the same conversion architecture used in high-performing sales funnels, built from scratch as a demonstration of full-stack marketing engineering, not just visual design.

countdown state

scarcity logic

micro-interactions

14

Distinct sections shipped

2

Complete theme systems

3

Funnel screens engineered

0

Static screenshots used

Under the Hood

Under the Hood

Design that's actually engineered.

Three systems that separate this build from a static marketing page.

Three systems that separate this build from a static marketing page.

01

Procedural UI Engine

Every app tile and pattern card is generated at runtime from structured data, real status bars, icons, and layouts, never static images. Change the theme or filter and every mockup regenerates correctly.

02

Full Token Architecture

Color, shadow, and surface are all CSS custom properties. Dark mode re-themes the entire experience, including every generated mockup, with zero broken components.

03

Conversion Funnel Logic

A full VSL sequence, live ticker, interactive quiz, urgency close, built on real state management, not a static form pretending to be one.

Available for select partnerships

Available for select partnerships

Let's build your next conversion system.

I design and engineer products like this one , full-stack, conversion-minded, and built to hold up past the first screenshot.

I design and engineer products like this one , full-stack, conversion-minded, and built to hold up past the first screenshot.

View Live Project→

Review the Build on GitHub

Review the Build on GitHub

Currently booking Q3 engagements.

Currently booking Q3 engagements.

Thank you for your interest in my work

Thank you for your interest in my work

I designed and built this portfolio in Framer, to reflect my unique vision

I designed and built this portfolio in Framer, to reflect my unique vision

© 2025 Olufolake Olufade Framer. All Rights Reserved.

© 2025 Olufolake Olufade Framer. All Rights Reserved.

Hire Me

Create a free website with Framer, the website builder loved by startups, designers and agencies.