Client Work · Frontend
J.Kloting
Custom apparel printing — marketing site & quote system
About
A two-page marketing site I built for J.Kloting, a custom apparel printer in Meycauayan City, Bulacan, Philippines.
Their offering covers DTF, sublimation, and silk-screen printing for schools, sports teams, corporate uniforms, streetwear,
and traditional barong shirts. The site serves both as a brand presence and as a working lead-generation tool —
visitors can browse the portfolio, see pricing per print method, and submit quote requests directly.
Deployed at jkloting.store.
What's on the site
- Two pages — a single-scroll landing (`index.html`) and a dedicated barong product page (`barong.html`)
- Portfolio with filtering — MixItUp-powered grid filtering work by category (corporate, sportswear, uniforms, streetwear, barong)
- Pricing breakdown per print method — DTF, sublimation, silk-screen, each with a feature list and turnaround time
- 4-step process explainer — Inquiry → Quote → Approve & Pay → Production & Delivery, with payment terms (50/50 split, GCash / bank transfer / cash on pickup)
- Two AJAX forms — Quick Message + Quote Request, posting to
api.web3forms.comwith honeypot spam protection and animated success/error states - Mobile contact bar — sticky bottom bar on phones with one-tap call + Messenger shortcuts
- Scroll behaviour — sticky nav that solidifies past 200px, smooth-scroll one-page navigation, scroll-triggered entrance animations
Tech stack
| Markup & styles | HTML5 · custom CSS · Bootstrap 4 grid + components |
| Typography | Google Fonts — Playfair Display (headings) + Poppins (body); Linearicons + Font Awesome for icons |
| JavaScript | jQuery + ~10 plugins: WOW.js (entrance animations), Stellar.js (parallax), MixItUp (portfolio filter), Owl Carousel, Magnific Popup, Slicknav (mobile menu), Nivo Lightbox, jQuery Easing |
| Forms | Web3Forms API (no own backend) · honeypot anti-spam · client-side validation |
| Hosting | Cloudflare Workers (deployed via wrangler.jsonc) at the custom jkloting.store domain |
| Engagement | Paid client work for a real business (not a demo or tutorial project) |
Honest scoping note
The stack is deliberately traditional — jQuery + Bootstrap 4 + a serverless edge host — chosen because the brief
was a fast-turnaround marketing site for a small business, not a SPA. There's no React, no build step, no TypeScript,
no design system. The trade-off was the right one for the engagement: the site is small, fast, easy for the client to
update later, and was shipped and live on a custom domain end-to-end.