Hanami Language Centre

Overview

Hanami Language Centre is a Batam-based school teaching Japanese, Mandarin, and English with a culture-first approach. The project was a marketing landing page paired with a Strapi CMS, so the school's own team can keep courses, teacher profiles, and copy up to date without touching code.

The challenge

A language school's site is never static — course prices, class sizes, and the teaching roster change every intake. The site had to look polished and load fast as a marketing page, while every piece of content behind it stayed editable by non-technical staff.

My role

• Build the landing page as a fast, server-rendered React site.
• Model the content in Strapi — courses, programs, teachers, and sections.
• Wire the frontend to the CMS so edits publish without a redeploy.

Approach

The frontend is React on Vike (SSR) with a Tailwind CSS design system, pulling all its content from a Strapi backend over its REST API. Course programs, teacher cards, and page copy are Strapi content types, and media is served from Strapi's upload library — so the school updates a price or adds a teacher and it's live immediately.

What I built

• A responsive landing page: hero, story, programs, teacher roster, and CTAs.
• Program cards for Japanese, English, and Mandarin tracks, driven by the CMS.
• A teacher directory where each profile — certifications, experience, interests — is a CMS entry.
• A Strapi content model the school's team manages themselves.

Performance

A marketing site earns or loses a visitor in the first second, so speed was a headline requirement — not a finishing touch. The page is server-rendered with Vike and ships minimal client JavaScript, and every image (hero art, teacher photos, program media) is right-sized, modern-format, and lazy-loaded from Strapi's upload library. The result paints almost immediately and stays smooth on the mid-range Android phones most visitors browse on.

Under the hood

• React + Vike for server-side rendering and client routing.
• TypeScript and a Tailwind CSS design system throughout.
• Strapi as a headless CMS — content types and media consumed over REST.

Tools

Figma · VS Code · GitHub · Strapi