OCJ.
All projects

E-commerce · Live client site

ShelemJ Resources Ltd

A 14-page black-and-gold storefront built for ShelemJ Resources, a premium African food export brand, designed to present the company’s products credibly to international buyers.

HTML5 Tailwind CSS (build pipeline) JavaScript Responsive
ShelemJ Resources homepage screenshot

The challenge

A food export business selling to international buyers needs a site that reads as credible and premium on first glance, since buyers checking out a supplier for the first time are making a trust decision as much as a product decision.

The approach

I designed and built a 14-page site around a black-and-gold visual identity intended to feel premium rather than generic, with dedicated pages for products, supply chain, partnership, and gallery content so international buyers can evaluate the company from multiple angles.

Design

A black-and-gold palette chosen to signal premium quality, applied consistently across products, supply chain, and partnership pages rather than confined to the homepage.

Development

Built with a proper Tailwind CSS build pipeline (compiled via PostCSS, not the CDN version) alongside plain HTML and JavaScript, giving more control over the final CSS output than a quick static build would.

What I solved

  • Grew into a 21-page site: home, about, products, supply chain, partnership, gallery, a 3-article blog, and contact.
  • A consistent black-and-gold design system applied across every page, not just the homepage.
  • A proper Tailwind build pipeline for production-grade CSS output.
  • Added structured data for Google search, ran a real WCAG contrast audit and fixed two genuine failures, and rebuilt every favicon and share image from the client's actual logo.

Result

It's live at justixxprime.github.io/shelemj-website. The client's actual words were that customers keep coming back for the product pages, which is the kind of feedback that tells me the site is doing its job, not just looking good.

Everything in the box

21 pages, plus a full pass on the details most sites skip:

Branding & content

  • A cleaned, sharpened logo rebuilt across nav, footer, and every favicon size (16×16, 32×32, 180×180 Apple, plus favicon.ico)
  • A new 1200×630 social share image, and every placeholder or unverified stat replaced with confirmed real figures

SEO

  • Organization schema (JSON-LD) added to all 21 pages, plus FAQPage schema built from the client's real Q&As
  • Meta descriptions and page titles audited and corrected across the site

Accessibility

  • Real WCAG contrast-ratio math run on the color system (not a guess), with failures found and fixed
  • Skip-to-content link, visible focus rings, and aria-labels throughout

Functionality

  • A fully functional site search built on a small in-page index, no external service needed
  • GA4 analytics snippet installed site-wide, and a CNAME file wired up for the client's custom domain

Under the hood

  • Contact, testimonials, and every enquiry form wired to Web3Forms across all 21 pages, so submissions land in a real inbox with nothing to host on the client's end.
  • Real JSON-LD structured data, Organization schema site-wide plus FAQPage schema built from the client's actual 8 questions and answers, so Google can render richer results directly in search, not just a plain blue link.

Screens

ShelemJ Resources desktop screenshot ShelemJ Resources tablet screenshot ShelemJ Resources mobile screenshot