Old Site vs New: A Creative Agency Rebuild on Adon
The Old Site
Before the rebuild: a creative studio running a five-year-old portfolio theme, no dark mode, animations that felt dated instead of polished, and a homepage that took visitors three scrolls to even see a single project. The client's actual complaint was simpler than any of that — "it doesn't look like the work we do."
Picking the Replacement
Went with Adon – Creative Agency Portfolio WordPress Theme for the rebuild. It ships with 23+ homepage variations across light and dark versions, built on Elementor with GSAP-powered animations baked in. For a studio that wanted the site itself to double as a portfolio piece, having both light and dark demos to test against client branding saved a design-exploration phase that usually eats a week on its own.
What Actually Changed
Homepage structure. Old site: logo, nav, a static hero image, then scroll to find any actual work. New build: hero section transitions straight into featured project cards above the fold, using one of Adon's demo layouts as the starting point instead of building from a blank canvas.
Motion. This was the client's biggest ask — they wanted the site to feel alive without feeling gimmicky. Adon's GSAP animations gave that out of the box for scroll-triggered reveals and hover states on project cards.
Contact and lead capture. Old site used a bare HTML form with no spam filtering, sending client inquiries straight into a Gmail inbox getting buried by bots. New build used the theme's built-in Contact Form 7 compatibility, with actual spam protection through Contact Form 7's honeypot setting rather than a bare form.
The Overlooked Detail
Here's the part that almost got shipped without a second look: GSAP-driven sites move constantly by default, and some visitors genuinely can't tolerate that — motion sensitivity is a real accessibility issue, not a nitpick. The demo content didn't account for prefers-reduced-motion, the browser setting people with motion sensitivity actually turn on.
Added a CSS override that respects that setting without touching the animation code itself:
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }}Tested it by toggling the reduced-motion setting in macOS Accessibility preferences and reloading — animations dropped out cleanly, page still worked fine, just without the movement. Ten minutes of work for something that matters more than most portfolio sites bother to check.
Performance, Before and After
Old site: heavy unoptimized images, no caching, homepage load around 4.2s. New build with the same real project photography, compressed and served as WebP, plus server-side caching: homepage load down to about 1.4s.
Pros & Cons
Good:
- 23+ homepage demos meant real design options to show the client, not one fixed look
- GSAP animation is smooth and genuinely well-built, not the janky kind that tanks performance
- Contact Form 7 compatibility meant real spam protection instead of the old bare-HTML form
Not perfect:
- Motion-heavy by default — budget time to add reduced-motion support, it's not there out of the box
- With 23+ demos, expect to spend real time picking one rather than assuming the first one fits
Result
Client's actual words after seeing it live: it finally looked like their work, not like a template with their logo pasted on. The animation and layout options did the heavy lifting; the accessibility fix and honest spam protection were the parts that separated "looks nice in the demo" from "actually production-ready."
Link for reference: Adon – Creative Agency Portfolio WordPress Theme.
