Institutional website for a marketing agency with a filterable portfolio in WordPress via WPGraphQL, login-free likes synced to the CMS, and an animated multi-step job application form.
DesignAgência Ade!
↗ View live project
01
Overview
Agência Ade! is a marketing and communication agency in Ponta Grossa that needed an institutional website to present its portfolio, team, and services — and to serve as a recruitment channel. The project covers essential sections (Home, About, Contact, Portfolio, Blog) with a segment-filterable portfolio and an animated multi-step Work With Us form.
The project was built with Next.js, React, and TypeScript, styled with Tailwind CSS with animations in Motion.js. Content — portfolio, blog, and institutional data — is managed in WordPress via WPGraphQL, with custom PHP routes for likes and form submission. Forms validated with Zod and React Hook Form. Hosted on Vercel.
02
Challenge
The site had to go beyond a brochure layout: a portfolio page with category and segment filters powered by WordPress, a multi-step Work With Us form with per-step validation and animated transitions, and a login-free like system on portfolio projects and blog posts — with totals visible in the CMS panel.
Each area had its own constraint. The portfolio needed dynamic listing without hardcoding on the front end. The form couldn't lose data or add friction when moving between steps. Likes had to persist across visits, prevent double counting, and sync with the back end without user accounts or a heavy per-session API.
03
Solution
I structured the data layer with WPGraphQL: portfolio, blog, and institutional pages come from WordPress in typed queries, and the portfolio page builds filters and categories from the schema — without duplicating content in Next.js.
For Work With Us, React Hook Form with Zod validates each step before advancing; Motion.js handles transitions between steps and the final submission goes through a PHP route in the CMS. For likes, a custom PHP route increments the counter in the database; on the front end, LocalStorage records items already liked, preventing duplicates after reload. Totals reflect in the WordPress panel — a lightweight feature with no authentication and engagement the team can review in the back office.