Zapta
A Figma design from Panze Studio, built out as a front end for a digital marketing agency site — services, a filterable portfolio, team, testimonials and a blog. A demo piece to show clients rather than a commission.
- HTML5
- CSS3
- Bootstrap
- jQuery
- Isotope
- Agency site · Digital marketing
- Front end — design by Panze Studio
- Demo piece, not client work
- Frontend Development
- html.ashekur.com/zapta
The ask
A Figma design from Panze Studio, built out as a demo piece to show prospective clients.
The build
The whole site written by hand in HTML, CSS and JavaScript, with a filterable portfolio grid.
The outcome
A working agency site to open in a first conversation, rather than a description of one.
THE PROBLEM
An agency site is a credibility argument
What an agency buys when it commissions a site is proof: that the work has been done, that there are people behind it, that somebody was pleased. Those pieces have to arrive in an order that builds rather than a list that sprawls, and the work grid has to hold whatever mix of projects gets dropped into it later. As a demo, it also had to be worth showing — a half-finished sample argues against you.
THE SOLUTION
Built to Panze’s design, finished like a client job
Panze Studio designed it; I built the front end by hand and took it as far as I would a paying project. The credibility sequence runs logos, services, numbers, work, testimonials, team, and the portfolio grid filters rather than paginates, so a visitor sorting for one kind of work never leaves the page.
- Client logos and a statistics band — projects, partners, consultants, clients
- Six service cards, then a filterable portfolio grid in three styles
- Five testimonials and four team profiles, the two proofs an agency lives on
- Blog in three grid styles with a details page, plus a contact section
THE STACK
Built the way a client project would be
Static HTML on Bootstrap with jQuery for behaviour — Isotope for the portfolio filtering, CounterUp for the statistics band, Slick for the testimonial rail, and scroll animation on top:
- HTML5
- CSS3
- Bootstrap
- jQuery
- Isotope
- Slick
- CounterUp
- Animate.css
THE RESULT
A sample that answers the question for you
There is no client here and no launch to report — the page says so. What it gives is a working agency site to hand someone in a first conversation, which settles the question of whether the work gets finished properly far faster than saying that it does.
THE SERVICE BEHIND IT
Want something built this way?
This project came out of my Frontend Development work. That page covers the process in full — what I deliver, how a project runs, and the questions people usually ask before starting one.
What that service covers
- Pixel-accurate implementation, responsive from 320px upward
- Interfaces built to the data they carry, not to a template
- Accessible, conventional code the next developer can read
MORE WORK
Other case studies
Same write-up every time — the problem, the approach, the stack and what changed.
Photography studio · Luxury fashion
Velour
Designed and built end to end to sell through Codexse — a luxury fashion photography studio site with no framework at all, custom CSS and vanilla JavaScript.
- HTML5
- CSS3
- Vanilla JavaScript
Marketplace · Ready-made websites
Codexse
My own product, built end to end — a marketplace selling ready-made websites, themes and plugins, with accounts, cart and checkout.
- Laravel
- Tailwind CSS
- Alpine.js