All work Case Study · Retail & IT Services

Unique Computers

A computer store that had traded in Ferozepur for twenty-two years and had never existed online. We built its first web presence — hand-written HTML, CSS and JavaScript, with no framework and no build step.

8.7 KBJavaScript, uncompressed
52 KBCSS, uncompressed
0Build steps
StaticNo server to run
  • HTML5
  • CSS3
  • Vanilla JavaScript
  • IntersectionObserver
  • Lottie
  • Static hosting
Visit the live site

01 — The Problem

A twenty-two-year reputation that stopped at the shop door

The business problem

Unique Computers sells, repairs, upgrades and networks computers in Ferozepur, Punjab, and has done so for twenty-two years. The reputation is real and entirely offline — built on repeat customers and word of mouth, and invisible to anyone who had not already been told about it.

That invisibility costs in two distinct ways. Someone searching for laptop repair in Ferozepur found nothing. And someone who had been given the shop’s name had no way to confirm it was real, established and worth the trip before making it. For a business whose entire advantage is trust accumulated over two decades, having nothing to point at is a structural problem, not a cosmetic one.

The technical problem

The obvious build is a catalogue — products, prices, stock, cart. It is also the wrong one. A store like this changes what it carries week to week, and hardware prices move constantly. A published price list would have been wrong within a month, and a wrong price is worse than no price: it turns the site from an asset into a liability the owner has to maintain or apologise for.

So the real constraint was this: convey range, competence and trustworthiness while asserting nothing that expires. Every fact on the page had to still be true a year later with nobody touching it.

02 — The Approach

Choose the smallest thing that solves it

Three decisions shaped the build, and each one was about removing something rather than adding it.

Static, by decision — not by default

There is no dynamic data on this site: no accounts, no cart, no inventory, no user-generated content. So there is no server. The whole thing is plain files served from Hostinger’s CDN.

WhyNothing to boot, nothing to keep patched, no runtime that can fall over at 2am. For a single-location retail business, a server is an ongoing liability bought in exchange for capability it will never use.

No framework, and no build step

React or Next.js would have brought a toolchain with them — a dependency tree, a build, a deploy pipeline. The finished site is 8.7 KB of JavaScript and 52 KB of CSS, uncompressed, in files a person can open and read.

WhyA build system is a recurring maintenance cost, and it quietly makes the client dependent on whoever set it up. Here the owner can hand the folder to any developer — or edit the copy himself. That is not minimalism for its own sake; it is refusing to charge the client rent on complexity the project never needed.

Keep the convention, drop the dependency

The markup uses data-aos="fade-up" attributes — the API convention from AOS, a widely used scroll-animation library. AOS itself is never loaded. One IntersectionObserver adds an .aos-animate class at 20% visibility, and CSS transitions do the rest.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) entry.target.classList.add("aos-animate");
  });
}, { threshold: 0.2 });

document.querySelectorAll("[data-aos]").forEach(el => observer.observe(el));

WhyEight lines instead of a library, and markup that any developer who has met AOS reads at a glance. The convention is the valuable part; the payload is not.

Motion that finishes

Every reveal on the site is observer-gated, and the expensive ones call unobserve() after they fire. Nothing animates off-screen, and nothing loops indefinitely draining a phone battery. Motion is used once, to introduce something, and then it is done.

03 — Key Technical Challenges

Two problems worth solving properly

01

Sixty-one brand logos that had to read as strength, not clip-art

Problem

The store carries dozens of brands, and that breadth is a genuine selling point — it is the reason people drive to the shop rather than ordering online. But sixty-one logos laid out in a static grid reads as filler. The eye skips it. The most persuasive fact on the page would have been the least noticed one.

Solution

The wall assembles itself. When the section first scrolls into view, every logo is thrown to a random point in 3D — up to ±150px on X and Y, 300–1300px toward the viewer, scaled 3× — then settles into its true position over 4.5s on a cubic-bezier(0.23, 1, 0.32, 1) curve, staggered 180ms apart.

The offsets are generated per page load, so the assembly never plays the same way twice. The wall also drifts ±5px with the pointer, which keeps it feeling like a physical object rather than a picture of one. Critically, the observer unobserve()s after the first trigger: scroll back up and the wall stays assembled, because something that rebuilds itself every time you glance at it is a gimmick, not a device.

Outcome

You do not skim past sixty-one brands. You watch them arrive, and the number registers — which was the entire point of putting them there.

The brand wall caught mid-animation: logos are oversized, semi-transparent and scattered across the section, each still travelling toward its final position.
Caught mid-assembly. Logos are still arriving at their own scales and depths — thrown up to 1300px toward the viewer, each on its own 180ms delay.
The same brand wall fully settled into an even eight-column grid of sixty-one manufacturer logos under the heading ‘Trusted by the World’s Leading Tech Brands’.
The same section once every stagger has run. An even grid — but the visitor arrived at it by watching sixty-one brands land.
02

An auto-advancing slider you can actually read

Problem

Auto-rotating carousels usually fail in one of two ways. Too fast, and the content is gone before you finish reading it. Slow enough to read, and the visitor cannot tell whether it is about to change — so they never commit to reading at all. Both failures share a cause: the viewer has no idea how much time they have.

Solution

Each slide holds for 7s, with a progress bar that fills over 6.5s. The bar is a single CSS transition set once per slide, not a JavaScript timer ticking every frame — the browser owns the animation, so it stays smooth under load, and the deliberate half-second gap means the bar visibly completes before the slide turns rather than racing it.

Hovering pauses the timer and freezes the bar. And each slide draws its entrance from a five-effect cycle — fade, zoom, slide-left, slide-right, bounce — selected by index, so a visitor who watches several in a row is not sat through the same animation repeating.

Outcome

Readable dwell time, an honest indicator of how much of it is left, and an escape hatch for anyone who needs longer.

The testimonial carousel mid-rotation: one centred review card reading ‘My system was dead. They got it running in a day. Can’t thank them enough!’ attributed to Kiran Sir, with the neighbouring cards partly visible either side.
The testimonial rotation. Seventeen named reviews, one at a time, with the neighbours left visible so it reads as a sequence rather than a single static quote.

04 — What We Built

A showcase, not a shop

A single-page site organised around what a prospective customer actually needs to establish: what this place does, whether it is any good, and how to reach it.

Storefront

  • Hero with animated tagline
  • Four core services — sales & accessories, repairs & upgrades, networking, support
  • Device specialisation grid: laptops, processors, monitors, printers, keyboards, mice, speakers
  • Hardware showcase of representative stock

Proof

  • 61-logo brand wall with staggered 3D assembly
  • 17 named customer testimonials on a paced carousel
  • Years-in-business counter, revealed on scroll

Contact

  • One-tap call, WhatsApp and email in header, body and footer
  • Full-screen map overlay with directions
  • Escape-to-close and body scroll lock on every overlay

Craft

  • 17 Lottie animations for iconography rather than static images
  • Scroll-reveal on a single shared observer
  • Mobile menu with scroll lock

One deliberate omission is worth naming: for a local retail business the conversion is not a checkout, it is a phone call. So call, WhatsApp and directions appear in the header, in the body and in the footer — and there is no cart anywhere on the site.

The Unique Computers homepage: the UC logo beside the headline ‘Your Tech Store & Service Hub in Ferozepur’, with sales, repairs, accessories, networking and upgrades listed beneath, and call, email, WhatsApp and location shortcuts pinned to the top bar.
The homepage. Contact shortcuts sit in the top bar on every viewport — for this business, that row is the conversion path.
The ‘Devices We Specialize In’ grid: illustrated cards for laptops, processors, monitors, printers, keyboards, mice and speakers, each with a one-line description and no pricing.
The device grid states categories, never stock or prices — which is why nothing on it needs revisiting when what the shop carries changes.

05 — The Result

Delivered, live, and built not to rot

Unique Computers has a web presence for the first time in twenty-two years of trading. It loads as static files with no server to keep running, no dependency tree to update and no platform fee attached to it.

It also makes no claim that will expire. There are no prices to go stale and no stock counts to be wrong — the site will read as accurately in three years as it does today, with nobody maintaining it. That was the brief we set ourselves once the catalogue idea was ruled out, and it is the part of the build we would defend hardest.

See it live

We do not run analytics on this build, so there are no traffic or conversion figures for us to quote. Rather than fill the gap with numbers we cannot stand behind, we have left it empty — the site itself is the evidence, and it is one click away.

Want this level of care on your build?

We size the solution to the problem — and we will tell you when the smaller option is the right one.

Start a conversation