GGL
DESCRIPTION
Marketing Agency — Website Renewal
DURATION
Dec 2025 - Jan 2026
MY ROLE
- Information hierarchy redesign and clean, trust-oriented UI/UX.
- Next.js SSR frontend for SEO and load speed.
- Framer Motion scroll-trigger animation and page transitions.
- Full-stack development with Supabase backend logic and an admin CRUD dashboard.
- Lighthouse-measured performance tuning and technical SEO.
TECH
Next.js · React · Tailwind CSS
Framer Motion · CSS Keyframes
Sanity CMS (Headless) · Supabase
Lighthouse CI · Google Search Console · Naver Search Advisor
Project Purpose
"The beginning of growth." GGL wanted to read as a business partner rather than an ad vendor. Marketing agency sites tend toward noise — every service listed, every claim stacked — so this one was rebuilt around two things a prospective client can verify: a clear process and actual outcomes. Everything else was cut so those two survive.
Scope
- · Website Renewal, UI/UX Design
- · Interaction Development (Next.js · Framer Motion)
- · Headless CMS & Admin Dashboard
- · Performance and Cross-platform SEO
Key Technical Features
Data-Driven Admin Dashboard
- · Daily and monthly visitors and referral paths are surfaced in a dashboard UI rather than buried in an analytics console.
- · Marketing portfolio entries and inquiry records are editable by staff without developer involvement.
Perfect Optimization
- · WebP conversion, code splitting and render optimisation hold Core Web Vitals in the green above 90.
- · Dynamic sitemap.xml and robots.txt, refined Open Graph and JSON-LD, with registration completed on both Google Search Console and Naver Search Advisor.
Robust Security Architecture
- · Supabase RLS blocks non-admin data access at the database layer.
- · Next.js middleware protects admin routing and redirects unauthorised attempts.
Design Points
Immersive Hero Video
A full-screen video interaction on entry communicates the agency's energy and capacity to execute before a single line of copy is read.
Structured Service Grid
Blog, Instagram and influencer marketing services are numbered (_01, _02) on a grid, with hover micro-interactions revealing detail — information density stays controlled while browsing stays interesting.
Step-by-Step Process Flow
Six stages from consultation through strategy, execution and reporting are visualised as a timeline, converting an abstract engagement into something the client can point at.
Responsive Contact Interface
The quote form is reachable without navigating away, with budget and service selectors that lower the effort of asking.