Haris Munawar Start a project

Taking on new website projects

DesignCode3D

Web designer & developer,

I design, build and look after websites for businesses that want to look the part online and hear from customers sooner.

See the work Get in touch
Guru Vibez home page Guru Vibez Vertical Four home page Vertical Four Wibbbit home page Wibbbit

01Selected work

8 projects

Selected work

Five websites and stores, two 3D property viewers and a 3D jewellery studio. I designed and built all of them. Most of the sites are in private preview with their owners, so they're shown as screenshots; the 3D work is live and you can try it on this page.

Case 01 / 08Interiors and events

Guru Vibez

An interior design and event studio working across Peshawar and Mardan

The full Guru Vibez home page, from hero slider to footer
Guru Vibez on a phone

A heritage-meets-modern brand needed a site that felt as crafted as its rooms. I built a dark, gold-lit layout around the studio's own photography, with truck-art florals as the only ornament.

What's in it

  • Full-screen slider across interiors, living spaces, décor and events
  • Project gallery filtered by residential, commercial, hospitality and corporate
  • Drawn map plotting every project across Peshawar and Mardan
  • Six-step process walkthrough, client words, a journal and a newsletter sign-up
  • WhatsApp button and consultation booking on every page
My role
Design, development, maintenance
Pages
Home, about, services, projects with detail pages, journal, contact
Built with
Hand-written HTML, CSS and JavaScript on Netlify
Type
Cormorant Garamond and Raleway
Map section listing six projects across Peshawar and Mardan
The project map. Tap a name to open that project.
Six-step process section with step one, Listen, open
The process, one step at a time, each with its own photo.

Case 02 / 08Property sales

Vertical Four

Shops and hotel suites in a mixed-use building by One Developments, Faisal Hills

The full Vertical Four page, from hero to enquiry form
Vertical Four on a phone

The first thing every buyer asks is what a unit will cost, so this one-page site answers it up front. Rates sit floor by floor, a calculator does the maths, and every enquiry lands on the sales team's WhatsApp.

What's in it

  • Rate list drawn as a cross-section of the building, bars scaled to the highest rate
  • Price calculator with corner surcharge and utility charges, totals shown in lakh and crore
  • Enquiry form that opens WhatsApp with the message already written
  • Building gallery, address and a Google Maps link
My role
Design, development, maintenance
Pages
Single page with five sections
Built with
Hand-written HTML, CSS and JavaScript on Netlify
Type
EB Garamond and Hanken Grotesk
Price calculator showing a furnished hotel suite totalling PKR 1,45,00,000
The price calculator, with the total ready to send on WhatsApp.
Floor-by-floor rate list from basement to sixth floor
Rates floor by floor, read like a section through the building.

Case 03 / 08Streetwear store

Wibbbit

A streetwear label selling back-print tees to gamers and meme lovers

The full Wibbbit shop page, from hero to footer
Wibbbit on a phone

A loud brand that sells through WhatsApp, not a payment gateway. The store keeps that simple: pick a tee and a size, and the cart turns into an order message. No account, no card.

What's in it

  • Catalogue filtered by theme: anime, sci-fi, gaming and meme
  • Size picker and cart with no sign-up
  • Checkout that writes the WhatsApp order for the customer
  • Products kept in a single data file, so the range is easy to update
My role
Design, development, maintenance
Pages
Shop, themes, contact
Built with
Hand-written HTML, CSS and JavaScript with self-hosted fonts, on Netlify
Type
Archivo and Inter
Product grid of eight tees with size pickers and add to cart buttons
The shop grid, filterable by theme.
Three-step how to order section in lime green
Ordering explained in three steps.

Case 04 / 08Online store + admin

Lashé Studio

An online store for lash tools, extensions and aftercare, with its own admin panel

The full Lashé Studio home page, from the hero slider to the footer
Lashé Studio on a phone

A lash brand needed more than a catalogue: a shop its owner could run alone. I built the storefront and a full admin panel behind it, so products, stock, orders, payments and the home page are all managed without touching code.

What's in it

  • Storefront that opens instantly: the whole catalogue ships inside the page
  • Shop filters by category, stock and price, with search, cart and order tracking
  • Checkout with cash on delivery, bank transfer, JazzCash and Easypaisa, plus payment-receipt upload
  • Admin dashboard with revenue chart, monthly target, stock health and live shop activity
  • Orders, products, stock, reviews, subscribers, home-page slides and pages, all editable
  • Owner, manager and staff roles, activity log, Excel export, one-click backups and an installer
My role
Design, front end, PHP back end, database
Pages
Storefront (single-page app), admin panel, installer
Built with
PHP 8, MySQL, hand-written JavaScript, no framework
Type
Cormorant and Jost, self-hosted
Lashé Studio admin dashboard with a revenue chart, monthly target, stock health and an activity feed
The admin dashboard: sales, targets, stock and who did what.
Shop page with category, availability and price filters beside a product grid
The shop, filterable by category, stock and price.

Case 05 / 08Brand site + 3D

Markhor Drinks

A brand site for Markhor Stimulant Drink, built around a real-time 3D can

Markhor Drinks home page: scroll scenes with the 3D can, then news, ambassadors, events and contact
Markhor Drinks on a phone

An energy drink sells on attitude, so the can is the hero. It is modelled in 3D, carries a 4K label rebuilt from the official emblem, and turns, tilts and travels through the page as you scroll, before the site settles into news, ambassadors and a distributor form.

What's in it

  • 3D can carousel with six brand messages, studio reflections, droplets and sparks
  • Scroll scenes for the product facts: 250 ml, 45 kcal, 400 mg taurine
  • A separate 3D viewer page: rotate and zoom the can, with ten colourway concepts
  • Latest news, ten campaigns, the Markhor Era gallery, seven ambassadors and events
  • Distributor and contact forms, map and videos that load only on click
  • Ultra HD switch, sound toggle, and a photo fallback where 3D is unavailable
Project type
Brand site rebuild, at demo stage
My role
Design, 3D build, development
Built with
Three.js, GSAP and Lenis, bundled with esbuild, hosted on Cloudflare Pages
Type
Archivo variable
A single Markhor can on a pedestal in the 3D viewer, with colourway buttons
The 3D can viewer: drag to rotate, scroll to zoom, switch colourways.
Scroll scene with the 3D can beside product facts
One of the scroll scenes, with the can travelling between facts.

Case 06 / 083D floor plans

Ace Mall in 3D

Interactive 3D floor plans for Zameen Ace Mall, a 14-storey mall, office and hotel-apartment building in DHA Phase II, Sector J, Islamabad

The 3D viewer showing Main Prime shops as coloured blocks with unit MP-112 selected
The 3D viewer on a phone
Open full screen

Floor plans are hard to read and buyers rarely look past the first page. I turned the sales-kit plans for all eight floors into a 3D model a buyer can turn, walk through and filter on a phone, with every unit number and size taken straight from the drawings.

What's in it

  • Eight floors, from Hyper Square to the 4th-floor offices, stacked or one at a time
  • Nearly 1,300 shops, kiosks, food units and offices, each clickable with its number and area
  • Filters by unit type, availability and size, plus search by unit number
  • First-person walk-through of the corridors, a top view and a measuring tool
  • Shortlist that sends the chosen units to the sales team on WhatsApp
  • Project page with renders, location and amenities
Project type
Concept build for builders and developers
The building
14 storeys: mall, smart offices and hotel apartments; 800+ basement parking; on Islamabad Expressway, 1 min from GT Road
Prices shown
PKR 46.3 lakh (offices) to 2.19 arab (Hyper Square), floor by floor
My role
Plan tracing, 3D build, design and development
Built with
Three.js and hand-written JavaScript, about 3 MB, loads floor by floor
Type
Cormorant Garamond and Hanken Grotesk
All eight floors stacked: retail floors as coloured blocks, offices as purple markers
All eight floors at once. Pick a level from the lift buttons.
Top view of Main Prime coloured by availability
Top view coloured by availability, ready for a sales team's live stock.

Case 07 / 08Real-time 3D

NORA Residences in 3D

A real-time 3D model of NORA Residences by Avenir Developments, Main GT Road, Islamabad

NORA Residences render by Avenir Developments
Open full screen

Buyers want to feel a home before they visit it. This is a real-time model of NORA's Building 3: orbit the building, cut it open floor by floor, then walk into furnished apartments, shops and lounges at any time of day.

What's in it

  • Eight floors with real interiors: lobby, four shops, furnished apartments, lounges, study rooms, roof terrace
  • Scanned furniture (Poly Haven): sofas, armchairs, dining sets, TVs, plants, shelves and working ceiling fans
  • Residents walking the corridors, doors that open, fans and TVs you can switch, lift and real stairs
  • Time of day from sunrise to night, sun shadows, ambient occlusion and screen-space reflections
  • Graphics that adapt: starts at the lowest setting a laptop can run and climbs to Ultra 2K if the GPU allows
Project type
Concept build for Avenir Developments
The project
5 buildings, 280 apartments on Main GT Road; 1 bed from 810 sq ft (PKR 7.7 M) to 2 bed 1,242 sq ft (PKR 11.7 M)
My role
3D build, lighting, design and development
Built with
Babylon.js 7, physically based materials, Poly Haven scans and skies, one hand-written file

Case 08 / 083D jewellery

Atelier in 3D

A real-time jewellery studio: ten pieces, ten gemstones, eight cuts and four metals, rendered so the stones actually sparkle

Open full screen

Jewellery sells on light. Photos freeze it; this lets a buyer turn the piece, change the metal and the stone, and watch light bounce inside the gem the way it does in a real diamond. It's the start of a jewellery website I'm building.

What's in it

  • Ten pieces: solitaire, halo, three-stone, eternity and cocktail rings, studs, drops, hoops, a pendant and a tennis bracelet
  • Ten stones: diamond, yellow diamond, ruby, sapphire, emerald, amethyst, aquamarine, pink sapphire, tanzanite and pearl
  • Eight cuts, carat size, four metals, polished or satin finish, diamond or matching accent stones
  • Ray-traced refraction with internal bounces and fire, studio lighting, sparkle and macro view
  • Sharpness that adapts to the device, and a one-click image download
Project type
Concept build, the base for an upcoming jewellery site
My role
3D modelling in code, shading, design and development
Built with
Three.js, three-mesh-bvh ray tracing, Poly Haven studio lighting
Type
Cormorant Garamond and Jost

+In numbers

  • ≈1,300

    shops, kiosks, food units and offices modelled in 3D

  • 8

    floors traced from a sales kit into one building you can walk through

  • 8

    recent projects, each designed and hand-coded

  • 1

    person from the first sketch to the live site

02Services

Design → Code → Care

What I can do for you

One person from the first sketch to the live site, so nothing gets lost between a designer and a developer.

  • 01

    Website design

    A look built from your brand, your photos and your customers, not a template.

  • 02

    Development

    Hand-coded pages that load fast and work properly on phones.

  • 03

    Ordering and enquiries

    Carts, calculators and forms that send customers straight to your WhatsApp.

  • 04

    3D floor plans for builders

    Your project's floor plans turned into a 3D model buyers can explore on a phone: walk the corridors, filter units by size and availability, and send a shortlist to your sales team.

  • 05

    Hosting and care

    I put the site online and keep it updated and working afterwards.

How a project runs

Four steps

  1. 01

    Brief

    We talk about the business, the customers and what the site has to do.

  2. 02

    Design

    You see the pages, desktop and phone, before any code is written.

  3. 03

    Build

    I build it, check it on phones and desktops, and put it online.

  4. 04

    Look after

    Changes, new pages and fixes once the site is live.

03Journey

Scroll to travel

The road so far

    04About

    About

    Education

      Tools and skills

        05Contact

        Available

        Have a website in mind?

        Tell me what your business does and what the site needs to do. I'll reply with ideas and a rough plan.

          Project

          Private

          The quiet line

          For ideas you would rather not put in a public inbox. This opens a direct WhatsApp chat with me personally. Nothing you write passes through this website, and nothing is stored here.

          Open a private chat