← Back to Projects
Client Work · Frontend + Edge
J.Kloting Website
Custom apparel printing — marketing site, live barong catalog & AI stylist
About
A two-page marketing site built for J.Kloting, a custom apparel printer in Bulacan, Philippines. Their offering covers DTF, sublimation, and full-sublimation printing for schools, sports teams, corporate uniforms, streetwear, and traditional barong shirts. The site is a no-build static frontend backed by a Cloudflare Worker edge API, Firebase Firestore for the live barong catalog, and Cloudinary for image hosting — an unusual hybrid that behaves more like a small app than a plain landing page.
What's on the Site
- ›Two pages. A single-scroll landing (index.html) and a dedicated live barong catalog (barong.html) — both served from a Cloudflare Worker with Static Assets.
- ›Live barong catalog. barong-catalog.js (ES module) reads status=available products from Firebase Firestore in real time. Images are served via Cloudinary CDN. The internal dashboard writes to the same Firestore the public site reads.
- ›AI Barong Stylist. Fuzzy keyword + color search powered by a Cloudflare Worker endpoint — returns matching barong suggestions from the live catalog with graceful no-results fallback.
- ›Newsletter. MailerLite double opt-in via POST /api/subscribe on the Worker — no third-party embed, custom success/error states.
- ›Contact & quote forms. Web3Forms — Quick Message + Quote Request with honeypot spam protection and animated feedback states.
- ›Custom mobile drawer. Right-side slide-in nav (mobile-drawer.js) with a 4-square SVG burger that inherits the navbar color — replaced the original Slicknav dropdown.
- ›Mobile contact bar. Sticky bottom bar on phones with one-tap call + Messenger shortcuts.
Tech Stack
| Markup & Styles | HTML5 · custom CSS · Bootstrap 4 grid + components — no build step, no framework |
| JavaScript | jQuery · WOW.js (scroll animations) · Owl Carousel · vanilla ES modules for catalog, drawer, AI stylist |
| Barong Catalog | Firebase Firestore (jklothing-inventory) — public read, write-blocked · Cloudinary (dn3gaufjz) for image CDN |
| Backend / API | Cloudflare Worker (worker/index.js, wrangler.jsonc) — serves static assets + /api/subscribe (MailerLite) |
| Forms | Web3Forms (contact/quote) · MailerLite double opt-in (newsletter via Worker) |
| Hosting | Cloudflare Worker + anycast edge · auto-deploys from GitHub via Workers Builds · custom domain jkloting.store |
Intentionally no framework and no build step — the brief was a fast-turnaround marketing site for a small business, not a SPA. But "static" is misleading: the barong catalog is Firestore-driven with live inventory, images are on Cloudinary CDN, and a Worker handles the newsletter API. The trade-off was right: fast to ship, easy for the client to understand, and the hybrid approach kept everything on the free tier.