Website Landing page

What it does

• Price by tag colour

  Every piece sits in a tier, RM5 clearance basics, RM10 standard pieces or RM20 heavyweight 'grail' pieces, so the price is simply the tag.

• Browse two ways

  A polaroid ring you spin like flicking through a rack, or a grid for scanning the whole drop.

• Item details

  Tap a piece to see it larger with its tag code.

• Private preview gate

  Visitors with a key get in; everyone else is pointed to WhatsApp to ask for one. Each person can get their own key, and a key can be taken back later.

• Phone first

  The layout, the polaroid ring and the gate are all designed for a phone screen first.

• A deliberate look

  A warm cream, flat paper style with no gradients and no shadows, and a serif headline over a clean sans body.

How it works

8 steps

1. 01Private access gate

   The drop opens to a private gate. Invited visitors enter their key; others are pointed to WhatsApp to ask for one.

   

2. 02Landing hero

   The landing hero in the brand's flat, paper-like style.

   

3. 03RM20 tag with polaroid ring

   The RM20 tier, with its pieces shown as polaroids on a ring you can spin.

   

4. 04Switch to grid view

   The same drop as a grid, for scanning every piece at once.

   

5. 05Item detail and tag code

   A piece opened in detail, with its tag code.

   

6. 06How the price tags work

   A short section explains the tag tiers, so shoppers know what each colour costs.

   

7. 07Mobile hero

   The hero on a phone.

   

8. 08Mobile polaroid ring

   The polaroid ring on a phone, swiped with a thumb.

   

How it's built

• Plain HTML, CSS and JavaScript, with no framework and no build step, so it loads fast and is easy to hand over.
• Access keys are never in the page's code: only scrambled fingerprints (SHA-256 hashes) of them are, and removing one locks that person out again on their next visit.
• Honest about what the gate is: a soft preview gate for a drop, not real access control. It decides who sees the drop early, which is all it needs to do.
• Strict security settings for a static site: scripts only from the site itself, no outgoing connections and no embedding in other sites.
• Prices, tiers, items and the gate settings all live in one place at the top of one script, so a new drop is quick to set up.

What this shows I can build

• Websites

  Business websites and landing pages that load fast, work on phones, and are built to be found on Google.

More projects

• Marine Procurement & Approval System (Odoo 19)A custom Odoo 19 module pitched as a working prototype to a Malaysian offshore marine operator, closing the four gaps standard Odoo left in their project-to-payment workflow: purchase requisitions that turn into orders line by line (with no vendor field, so the requester states the need and procurement picks the supplier), a limits-of-authority approval matrix that routes each requisition and purchase order to the right approvers by amount and OPEX/CAPEX, service acceptance so services like hull-cleaning dives can only be billed once confirmed as performed, and a vessel register with per-vessel and per-project cost tracking on a custom dashboard. Every step of the workflow was tested end to end, logged in as each role. Shown here with fictional demo data.
• Credit Tracking & Usage Monitoring SystemA working prototype pitched to the DXP Digital Acceleration Program for a consulting firm that buys prepaid assessment credits from a third-party platform with no API, and tracked them manually in Excel. It replaces the spreadsheet with a tamper-proof credit ledger (corrections are new entries, never edits), assessment status tracking, an Excel/CSV import wizard with a dry-run preview, monthly reconciliation against the provider's statement with automatic matching and a dispute queue, burn-rate forecasting with reorder suggestions, low-balance alerts and weekly digests, role-based access, a full audit log, and Excel/PDF usage reports. Built solo.