John Abodunrin
Overview
John Abodunrin is a portfolio website for a YouTube video editor and digital storyteller who specialises in audience retention, pacing, and narrative structure. The site positions him not as a general freelancer, but as a creator-economy specialist working across documentary, true crime, short form, finance, and AI content. Beyond video editing, it presents two supporting services — thumbnail design and scriptwriting — as part of a complete creator stack. The design language borrows from print collage and editorial zines: torn paper labels, tape strips, film perforations, newsprint texture, and a restrained YouTube-red accent against matte black.
The Problem
Most video editor portfolios look the same: a dark grid of embedded videos with no argument behind them. John needed a site that proved his understanding of attention before a visitor watched a single frame. It also had to carry three distinct services without burying the main one, present performance metrics credibly rather than as decoration, and avoid the generic template feel that makes premium pricing hard to justify.
The Solution
I designed and built a six-page React application with a custom scrapbook design system. The homepage opens with a typewriter animation cycling through his three services, then moves through proof metrics, featured work, editing niches, an editor introduction, services, process, tooling, a testimonial carousel, and an FAQ — each section answering a question a prospective client would actually ask. The Work page separates video editing, thumbnail design, and scriptwriting into tabs, with category filtering and hover-to-play video previews. Motion is handled with Framer Motion and Lenis smooth scrolling, tuned to feel edited rather than animated: staggered reveals, paced transitions, and deliberate rhythm. The collage system is built from reusable primitives — paper labels, tape, pins, film strips, dot grids — so the aesthetic stays consistent without becoming visual noise. Layouts were reworked per breakpoint rather than stacked, with dedicated tablet arrangements for the hero, about section, and navigation.