naushad . punjani
home work writing about
NAUSHAD PUNJANI◆ WEB BUILDS / GALLERY◆ REV. 2026.02

Web Build & Site Gallery

Marketing sites and front-end builds, one plate per site. Each plate opens a working demo build — not a mockup.

← back to Work
FIG. 01MARKETING · FOOD & BEV
Homepage of an artisan smashed burger brand concept site VIEW DEMO ↗
brand concept · demo

Artisan Smashed Burgers

Marketing and ordering site for an artisan smashed-burger brand with takeaway locations in Berlin, London, New York, Sydney and Tokyo. Built on Next.js with image-optimized product photography, an ingredient-storytelling layout, and per-city location cards.

Next.jsImage OptimizationResponsive

hero → ingredients → locations → order

→ View demo brand concept · demo
FIG. 02EDITORIAL · ARCHITECTURE
Homepage of a Nordic architecture studio concept site VIEW DEMO ↗
concept · architecture

Atelier Nord — Architecture Studio

Editorial one-pager for a Nordic architecture studio. Hand-drawn SVG floor plans that sketch themselves in, a works index with hover drawing plates, and a print-inspired grid over bone-white paper.

HTML/CSSSVG line artScroll reveals

plans draw in as you arrive

→ View demo concept · architecture
FIG. 03BRAND · SPECIALTY COFFEE
Homepage of a small-batch coffee roastery concept site VIEW DEMO ↗
concept · specialty coffee

Ember & Husk — Coffee Roastery

Small-batch roastery brand site in dark-roast tones. CSS-only steam and film grain, three bean cards with roast-level dots, and a six-step brew ritual on a crema-coloured spread.

HTML/CSSCSS grain & steamWonky serif type

steam → beans → six-step ritual

→ View demo concept · specialty coffee
FIG. 04PRODUCT · SAAS LANDING
Homepage of a SaaS analytics product concept site VIEW DEMO ↗
concept · saas product

Pulseboard — SaaS Analytics

Dark product landing with a working dashboard mock: an interactive SVG chart with crosshair tooltip, count-up metrics, and a chart palette validated for colour-vision deficiency.

HTML/CSS/JSSVG chartsCVD-safe palette

hover the chart — it answers

→ View demo concept · saas product
FIG. 05BRAND · FITNESS
Homepage of a boxing gym concept site VIEW DEMO ↗
concept · fitness brand

Southpaw Boxing Club

Loud type-driven site for a boxing gym. Outline display type with a jab animation, program rows that flood red on hover, and a weekly schedule set like a fight card.

HTML/CSSType-drivenMicro-interactions

outline type, red hook on hover

→ View demo concept · fitness brand
FIG. 06PRODUCT · AUTOMOTIVE
Homepage of a lightweight electric sports car concept site VIEW DEMO ↗
concept · automotive

Kestrel Motors — Electric Sports Cars

Marque page for a hand-built 895 kg electric sports car. The hero is a Three.js spaceframe you can drag and spin, backed by a published mass ledger that animates as you read it.

Three.jsGSAP ScrollTriggerWebGL

drag the chassis — it spins

→ View demo concept · automotive
FIG. 07BRAND · LUXURY FASHION
Homepage of a luxury cashmere house concept site VIEW DEMO ↗
concept · luxury fashion

Marengo — Cashmere House

Quiet-luxury editorial for an Umbrian cashmere house, built around a concept AI stylist — a three-question flow that composes a look from the collection, entirely client-side.

GSAPInteractive flowCSS/SVG garments

answer three questions, get a look

→ View demo concept · luxury fashion
FIG. 08PRODUCT · MOTORCYCLES
Homepage of an electric enduro motorcycle concept site VIEW DEMO ↗
concept · motorcycles

Thorn — Electric Enduro

Launch page for an electric enduro machine. The hero is a Three.js procedural trail — low-poly terrain generated and scrolled toward the camera — under hi-vis condensed type.

Three.jsProcedural terrainGSAP

the trail is generated, not filmed

→ View demo concept · motorcycles
FIG. 09BRAND · APPAREL
Homepage of a boutique golf apparel concept site VIEW DEMO ↗
concept · apparel

Slow Play Society — Golf Goods

Small-batch golf apparel brand with a hand-drawn SVG crest, a clubhouse palette and a scorecard section where every hole carries a house rule instead of a yardage.

HTML/CSSSVG crestGSAP carousel

slow play isn’t a penalty here

→ View demo concept · apparel
FIG. 10STUDY · NOT MY DESIGN
A front-end recreation study of the Longbow Motors site layout VIEW DEMO ↗
front-end study · credited

Longbow Motors — Recreation Study

A technical exercise, not a client build: the layout and scroll choreography of Longbow Motors' site rebuilt from an empty file. Their design and brand — my code. All artwork original, nothing copied.

GSAPLenis smooth scrollSVG

credited study — design not mine

→ View demo front-end study · credited

— more plates soon —

made by hand in islamabad · 2026
github linkedin dev.to email