ERTH
ERTH: production homepage, technical SEO and GEO implementation
A fast, accessible, search-ready homepage for a Malaysian e-waste collector, built from the client-approved design with 3.7 kB of JavaScript, and since rebuilt in Next.js and TypeScript.
A production homepage for ERTH, an e-waste collection and recycling service in Malaysia that presents itself as the country's #1 authorised collector, recognised by Jabatan Alam Sekitar (JAS). I built it from the client-approved design file, a self-extracting design-tool bundle, as static HTML, CSS and vanilla JavaScript on Vite: JavaScript cut from about 250 kB to 3.7 kB and images from 12.0 MB to 2.7 MB, with technical SEO, Schema.org structured data and accessibility, deployed on Vercel. I have since rebuilt the page in Next.js 16 and strict TypeScript; that rebuild is not yet deployed.
Figma UI/UX Design, Asset Extraction, Static Web Development, Technical SEO, Accessibility & Next.js Rebuild
Key Highlights & Practical Impact
Executive Scan- Delivered Figma UI/UX design and built the production homepage for an authorized e-waste collection and recycling service in Malaysia
- Iterated UI design and components in Figma (ERTH V2.3), establishing responsive layouts, typography, and visual hierarchy
- Rebuilt the approved design into pure semantic HTML, CSS, and vanilla JS, eliminating 250 kB of prototype framework runtime
- Optimized media payload by more than 75%: reduced 12.0 MB image assets to 2.7 MB using WebP and responsive srcset variants
- Engineered comprehensive structured data: Organization/RecyclingCenter, FAQPage (16 Q&As), and WebSite Schema.org JSON-LD
- Rebuilt the page as a Next.js 16, React 19 and strict TypeScript application of 21 section components with typed content and structured data (local rebuild)
Ready to explore the build?
A detailed look at the end-to-end architecture, process workflows, key engineering decisions, live production capabilities, challenges, and results.
Writing from this work
Writing a Page an AI Answer Engine Can Quote Correctly: GEO on a Locked Design
Implementing a GEO requirement on a locked design: test the questions visitors ask, make answers self-contained, attribute claims, and escalate contradictions.
Vercel or a Self-Hosted Ubuntu Box? How I Chose Hosting App by App
Eight deployed apps, three hosting shapes: Vercel for pages and serverless APIs, a self-hosted Ubuntu box for a stateful API, and a hybrid for a model Vercel can't run.
Structured Data for a Local Recycling Business: Organization, RecyclingCenter and an FAQPage That Matches the Page
Turning a client's schema requirements into JSON-LD for a Malaysian e-waste service: Organization plus RecyclingCenter, and an FAQPage that mirrors the visible FAQ.
Baseline Security Headers in Next.js, and Why the CSP Waited
Adding five response headers to a Next.js site that served none, why the Content-Security-Policy was deliberately deferred, and a nonce-free CSP on another app.
Porting a Static Page to Next.js Without Visual Drift
Rebuilding a finished page in Next.js 16 and Tailwind 4 so it looks identical: the font fallback, image optimiser and class-conflict traps, and how drift was checked.
Implemented, Available, Not Connected: Writing Honest Status Into Project Docs
"It exists in the repository" and "it runs in production" are different claims. The three-state status model I use across my projects, with real rows from each.
Canonicals That Pointed at a Redirect: www vs Apex, Sitemaps and Permanent Redirects in Next.js
Every canonical, og:url and sitemap entry on this site named a URL that 308-redirected. The fix, plus the sitemap, feed and redirect decisions made around it in Next.js.
Building Software in Cyberjaya: The Development Environment Behind the Work
What a production operations system, a client website, an AI research assistant and a vision inspector actually get built on, from a laptop in Cyberjaya: the machine, the stack, where things are hosted, and the local details that shaped the code.
Cutting a Page's Image Payload From 12 MB to Under 3 MB
The performance and accessibility pass on a production homepage: what was actually slow, what fixed it, and why most of it was not clever.
Verifying a Static Site You Built by Hand
Hand-written HTML has no type checker and no test runner. On a production build I wrote the guarantees instead, as a post-build script that fails the build.
Rebuilding a Design-Tool Prototype as a Production Website
An approved design arrived as a self-extracting bundle running React from a CDN. Shipping it meant removing almost everything and keeping the part that was actually the specification.
Designing for Desktop and Mobile Before Development
Planning responsive behavior as part of the design phase, instead of leaving it as a problem for development to solve alone.
Translating Figma Components Into Reusable Code
How design components in Figma map to reusable UI components in code, and where that mapping gets harder than it looks.
From Figma Design to Production Website
What actually happens between a finished Figma design and a working, deployed website.
Designing a Website in Figma Before Development
Why doing the design work in Figma first, rather than designing in the browser, changes how the build goes.