Static Jewelry Catalog Revamp
Budget: ₹12,500 – ₹37,500 INR
I need an extra pair of hands to turn my small handmade-jewelry showcase into a richer, smoother-running static storefront. The codebase is pure HTML, CSS and vanilla JS, so no build tools or frameworks—just clean, lightweight files that I can drop onto any server.
What has to happen
• Expand the catalog to include eight distinct pieces (necklaces, earrings, bracelets and, brand-new, rings). Each item already has price points between $20 and $100 in the data file; you’ll wire them into the UI.
• Swap every placeholder with a real, free Unsplash image that matches the piece. Keep file sizes lean with basic compression only—no fancy WebP pipelines necessary—while preserving enough detail for close-up zooms.
• Improve navigation: the search-by-name bar is the top priority, followed by category filters (now with the Rings option) and optional sorting by price or alphabetical order.
• Preserve existing cart logic, product-detail modals and the mock checkout so everything still works out of the box for testers.
• Polish the responsive styles, keeping the earthy palette of browns, greens and golds. I’m focusing first on a crisp desktop layout, then graceful degradation to tablets and phones. Make sure all images carry meaningful alt text for accessibility and a little SEO boost.
Deliverables
1. Updated HTML, CSS and JS files with clear inline comments where changes were made.
2. Optimized image assets plus a short note on the compression tool/settings you used.
3. A quick read-me explaining how to open and test the catalog locally.
If you’re comfortable tweaking vanilla front-end code and have an eye for product presentation, I’d love to see what you can do.
What has to happen
• Expand the catalog to include eight distinct pieces (necklaces, earrings, bracelets and, brand-new, rings). Each item already has price points between $20 and $100 in the data file; you’ll wire them into the UI.
• Swap every placeholder with a real, free Unsplash image that matches the piece. Keep file sizes lean with basic compression only—no fancy WebP pipelines necessary—while preserving enough detail for close-up zooms.
• Improve navigation: the search-by-name bar is the top priority, followed by category filters (now with the Rings option) and optional sorting by price or alphabetical order.
• Preserve existing cart logic, product-detail modals and the mock checkout so everything still works out of the box for testers.
• Polish the responsive styles, keeping the earthy palette of browns, greens and golds. I’m focusing first on a crisp desktop layout, then graceful degradation to tablets and phones. Make sure all images carry meaningful alt text for accessibility and a little SEO boost.
Deliverables
1. Updated HTML, CSS and JS files with clear inline comments where changes were made.
2. Optimized image assets plus a short note on the compression tool/settings you used.
3. A quick read-me explaining how to open and test the catalog locally.
If you’re comfortable tweaking vanilla front-end code and have an eye for product presentation, I’d love to see what you can do.