Before After Comparison
A split panel that shows a project before and after your work with a draggable divider. Proves your impact visually when results speak louder than text.
A split panel that shows a project before and after your work with a draggable divider. Proves your impact visually when results speak louder than text.
The Portfolio Collection unlocks the source for every Portfolio block. All Access unlocks every Collection.
Already purchased? Log in
Before After Comparison is a project transformation showcase. A centered heading and supporting paragraph introduce the section, then a looping carousel presents each project as a card. Each card splits into two equal panels side by side: the left panel holds a "Before" image with a caption strip underneath, and the right holds an "After" image with its own caption. Below the two panels, a content area carries the project title, a short description, and a highlighted impact callout that states a concrete measurable result. Numbered dot buttons and previous/next arrows sit below the carousel for navigation. A full-width "View all projects" button closes the section.
All copy is independent per project entry. You can add or remove projects from the array, swap the images, rewrite the captions, and update the impact figures without changing anything else. The section heading and subheading are plain strings you can edit in place.
Reach for this block when you need to show, not just tell, what your work produces. It works especially well for a developer tools company whose output is visible software: a dashboard before a redesign versus after, a cluttered CLI flow versus a streamlined one, a legacy docs site versus a clean new version. The carousel lets you cycle through several projects without stacking them vertically, so the page stays tight. A simple testimonial or static metrics block cannot convey the visual gap the way side by side images do.
A natural flow around it on a Portfolio page:
Before
After
The core use is showing before and after states of a shipped project, each paired with a real metric. A few other ways to fill the frame:
Tip: keep the impact callout to one sentence with a specific number so the stat reads instantly and does not compete with the images above it.