khanhanh@sydney: ~/projects/kianweb-studio · cat kianweb-studio.md
$ cd .. back to ~/projects (esc)

case-study --deep-read

kianweb.studio

A bilingual, CMS-powered web studio showcasing services, expertise, and client work for my web studio.

project: kianweb.studiorole: founder and full-stack engineerstack: Next.js · Payload · Typescript · Stripe · Cloudflaretimeline: 2026status: live

KianWeb Studio is the business system around my freelance engineering work. It is not only a landing page. It packages a service offer, selected work, pricing, process, trust signals, bilingual copy and a contact flow into a site that can sell and manage small-business web projects.

Problem

Small businesses usually do not want to buy "a Next.js site." They want a website that explains the offer, proves the business is real, gets enquiries and does not become another technical burden. The studio needed to communicate that clearly while still being flexible enough for custom builds such as bookings, payments and membership flows.

The engineering challenge was to keep the site highly designed, bilingual and fast without hard-coding every future content change into components.

Architecture

The studio is a dedicated Next.js app with localized routing for English and Vietnamese. Static content modules define the current marketing copy, service cards, selected work and process. Payload mirrors that content model as a studio global, with tabs for SEO, header, hero, work, services, process, worldwide availability, trust, FAQ and CTA.

That shape matters because it separates page structure from editable business content. The component tree can stay deliberate and designed, while the content model still gives the studio a path toward CMS-driven updates.

Key decisions

The first decision was to productize the offer instead of presenting a generic agency site. KianWeb, KianWeb Pro and custom builds are separate service cards with different expectations: one-time launch, managed monthly support and larger systems with bookings or payments.

The second decision was to localize the studio at the route level. Vietnamese clients and English-speaking Australian businesses read different copy, but the underlying service model and component system stay shared.

The third decision was to treat selected work as a structured catalog. Each case has a market, platform, focus, image, live URL and category. That makes the work section useful for scanning instead of becoming a loose gallery.

Hard parts

The hard part was balancing taste with sales clarity. The studio has a strong visual identity, animated browser-window previews and rich section transitions, but the offer still has to be immediately understandable: price, timeline, ownership, managed support and next action.

The Payload model was another challenge. The fields have to mirror the Zod schema closely enough that seeded content, admin edits and rendered components share one contract. That reduces drift between CMS data and frontend expectations.

What this demonstrates

KianWeb Studio shows product thinking around service design, bilingual content, CMS modeling, conversion UX and maintainable frontend architecture. It also shows that I can turn engineering work into a business-facing system, not just build isolated features.

-- EOF · written by khanhanh, edited by nobody● open live ↗next: goat-food-and-tea.md →