PORTFOLIOKEVIN NAZAR MUFADHOLBUILDING MODERN WEBSITESFULLSTACK DEVELOPERAVAILABLE FOR REMOTE WORK
A high-performance, SEO-driven company profile website for the VinnDeev web development agency, built with Next.js App Router and engineered to convert organic traffic into WhatsApp leads.
VinnDeev is a web development agency founded by a single developer with a clear positioning: high-quality engineering, fast websites, and honest pricing for UMKM, startups, and mid-sized companies in Indonesia. Before this project, the agency had no official digital presence — potential clients had nowhere to see its services, portfolio, or pricing, and all business relied on word of mouth. The core problem was trust and discoverability. A web agency that cannot rank on Google or present a credible portfolio struggles to win projects, because clients evaluate the agency by the quality of its own website. The website had to serve as both a marketing asset and a living proof of the agency's engineering standards. The project was scoped as an MVP with a single developer in mind: no CMS, no database, no admin panel. Every architectural decision — static rendering, Server Components by default, centralized data, and docs-driven development — was made to keep the codebase maintainable by one person while still delivering enterprise-grade performance and SEO. The result is a multi-page, fully static Next.js website that combines a landing page, services catalog with detail pages, filterable portfolio, pricing tiers with FAQ, about page, and contact page — all funneling visitors toward a single conversion action: a WhatsApp chat with a pre-filled message template.
Developed with Next.js 16 App Router, React 19, TypeScript, and Tailwind CSS v4, the site follows a Section-Based Modular Architecture: every page is a composer that imports data from a centralized `src/data/` layer and arranges standalone sections from `src/components/sections/`. Server Components are the default, and client components — MobileMenu, WorkFilter, PricingFAQ, PortfolioGallery — are kept as small as possible to minimize the JavaScript bundle. All pages are statically rendered (SSG) for maximum performance and SEO, with dynamic routes (`/services/[slug]`, `/work/[slug]`) generated via `generateStaticParams`. Motion and Lenis handle scroll-reveal and smooth scrolling micro-interactions, while lucide-react provides lightweight icons. Vercel Analytics and Speed Insights monitor real-user traffic and performance in production. SEO is implemented end-to-end: unique metadata per page via `generateMetadata`, Organization, WebSite, Service, FAQPage, and BreadcrumbList JSON-LD schemas, canonical URLs, sitemap, and robots.txt. Google Analytics 4 tracks a defined event plan (`whatsapp_click`, `hero_cta_click`, `portfolio_detail_view`, `faq_expand`, and more) mapped directly to business KPIs and a six-step conversion funnel.
Each page is a thin composer that imports data from a single source of truth and arranges reusable sections, keeping components decoupled, DRY, and easy for one developer (or an AI agent) to navigate.
All pages are pre-rendered at build time (SSG) including dynamic routes, producing near-instant loads, minimal TTFB, and fully crawlable HTML — the foundation of both the performance and SEO targets.
Per-page metadata, canonical URLs, sitemap.xml, robots.txt, Open Graph, and Twitter Cards, plus JSON-LD structured data for Organization, WebSite, Service, FAQPage, and BreadcrumbList to unlock rich results.
Every CTA routes to WhatsApp with a pre-filled message template — from navbar, hero, pricing tiers, and a reusable GlobalCTA banner — turning the entire site into a single, measurable conversion path.
All content lives in `src/data/` mirroring the section folder structure, so the same portfolio array powers the landing page preview (`slice(0, 9)`), the full work grid, and each detail page without duplication.
A documented event plan maps business KPIs to GA4 events — WhatsApp clicks, CTA clicks per placement, portfolio engagement, and FAQ expansion — loaded asynchronously so analytics never hurt performance.
A complete PRD, functional requirements, architecture docs, and an AGENTS.md rulebook govern the project, making every decision traceable and enabling AI-assisted development without drift.
Semantic HTML, keyboard navigation, aria-labels, and WCAG AA contrast are enforced across sections, with a mobile-first responsive layout powered by Tailwind CSS v4 design tokens.
The site needed smooth scroll animations and interactive filters without sacrificing the ≥ 95 Lighthouse performance target or inflating the JavaScript bundle that SSG was meant to eliminate.
Server Components became the default with client components reduced to the smallest interactive islands. Motion animations were limited to scroll-reveal micro-interactions triggered only when sections enter the viewport, keeping the client bundle minimal.
Building a multi-page marketing site — landing, services, work, pricing, about, contact, and 404 — as a solo developer risked duplicated code, inconsistent data, and unmaintainable pages as content grew.
Section-Based Architecture with a centralized data layer ensured each page is a thin composer over shared data. One source of truth feeds the landing preview, the full grid, and detail pages, so content changes propagate everywhere automatically.
Competing organically for local web-development keywords requires rich per-page metadata and structured data, which is easy to get wrong or skip when maintaining a static, no-CMS site by hand.
SEO was engineered into the framework itself: `generateMetadata` drives unique titles and descriptions per page, JSON-LD schemas are rendered per page type, and sitemap/robots are generated automatically — so every new page inherits the full SEO setup.
