Back to Projects
PT Karya Bangun Semesta Corporate Website

PT Karya Bangun Semesta — Corporate Website

Web Development
Client
PT Karya Bangun Semesta
Engagement
Paid Client Project
Timeline
Jan 2025 — Mar 2025

Project Overview

A bilingual (ID/EN) corporate website for PT Karya Bangun Semesta, an Indonesian construction company. The site spans 8 home sections, a 4-page About cluster, 6 service detail pages, a filterable portfolio of 19 completed projects across 6 categories, and an Insight module with 10 published articles. I delivered the engagement end-to-end as a paid client project between January and March 2025 — owning the static Next.js frontend, the Express + Prisma + MySQL backend, and the Nodemailer-driven contact and consultation flows.

8
Home sections
6
Service pages
19
Portfolio projects
10
Insight articles

My Role & Impact

Full delivery. Frontend, backend, database, and Vercel deployment shipped from zero to production for the client.

Production outcome. Live company site at karyabangunsemesta.com replacing the previous web presence.

Bilingual scope. Full ID/EN content layer driven by a custom LanguageContext, wired into every section and route.

Lead generation. Two server-backed forms — general contact and project consultation — that post to Express and dispatch email notifications to the sales team via Nodemailer.

Application Gallery

Homepage — animated hero with bilingual ID/EN copy
Homepage — animated hero with bilingual ID/EN copy
Services overview — six business lines
Services overview — six business lines
Project portfolio — 18+ completed works
Project portfolio — 18+ completed works
About / Profile — company background
About / Profile — company background
Building Construction service detail
Building Construction service detail
Infrastructure service detail
Infrastructure service detail

Site Architecture

Home sections
Hero, Services, Stats, Vision & Mission, Location, FAQ, Blog & News, Contact
About subroutes
Profile, History, Team, ISO Certifications
Service detail pages
Building Construction, Infrastructure, Project Management, Equipment Rental, Equipment Operators, Equipment Maintenance
Top-level routes
About, Services, Projects, Insight, Karir, Resources, Contact, Ethics, Privacy
API endpoints
/contact, /project-consultation, /debug

Portfolio Highlights

Sample of the 19 completed projects rendered through the filterable portfolio module.

Condotel HARPER Ciawi — Tower A, B, C
Building Construction · Bogor
Reflected Pond Lobby Grand Hyatt
Interior · Jakarta
Banjir Kanal Timur Paket 30
Infrastructure · Bekasi
Normalisasi Kali Pesanggrahan Paket 3
Infrastructure · Jakarta
Dredging & Embankment Cengkareng Floodway
Infrastructure · Jakarta
Interior & Furniture Club House Zora BSD City
Interior · Tangerang
Infrastruktur Kawasan OPD Kabupaten Karawang
Infrastructure · Karawang
Cut & Fill Kawasan Industri Subang
Infrastructure · Kalijati

Technical Implementation

Frontend. Next.js 15 App Router with static export (output: "export") for fast CDN delivery via Vercel. React 19 with TypeScript across every component.

UI. TailwindCSS plus Framer Motion for the hero carousel, section reveals, and image transitions. Lucide React supplies the icon set.

i18n & theming. Custom LanguageContext (id/en) and ThemeContext (light/dark) wrap the entire app and are consumed by every home section, service page, and detail route.

Backend. Express.js API structured into controllers, models, routes, utils, and scripts. Prisma ORM over MySQL, deployed as a separate Vercel service.

API endpoints. /contact and /project-consultation handle form submissions; /debug supports production diagnostics. Frontend reaches them via the Next.js rewrite proxy.

Email pipeline. Nodemailer SMTP integration delivers each form submission to the sales team inbox with templated content.

Custom modals. KonsultasiModal drives the consultation flow from any CTA on the site; LoadingScreen masks the initial paint while assets and contexts hydrate.

Technologies Used

frontend

Next.js 15React 19TypeScriptTailwindCSSFramer MotionLucide ReactAxios

backend

Node.jsExpress.jsPrisma ORMMySQLNodemailer

deployment

Vercel (frontend static export)Vercel (separate backend service)

contentLayer

Custom LanguageContext (id/en)Custom ThemeContext (light/dark)

Key Features Shipped

Animated hero carousel with deep-links into each business line
6 service detail pages — building construction, infrastructure, project management, equipment rental, operators, maintenance
Filterable project portfolio with 19 completed works across 6 categories
Insight module with 10 published articles, category filters, and reading-time estimates
Operational footprint section with Indonesia & Jakarta coverage maps
Project-consultation modal (KonsultasiModal) that posts to Express and emails sales
General contact form backed by Nodemailer SMTP pipeline
Bilingual ID/EN content layer driven by a custom LanguageContext
Light/dark theme switcher persisted via custom ThemeContext
About cluster — Profile, History, Team, ISO certifications
FAQ, Vision & Mission, Ethics, and Privacy pages
Mobile-first responsive layout across every page

See it in production

The corporate site is live and serves as the company's primary online presence. Browse the homepage, services, and project portfolio on the deployed site.

Visit karyabangunsemesta.com