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

4 projects

Selected work

Three recent sites and a 3D property viewer. I designed and built all of them. The sites are in private preview with their owners, so they're shown as screenshots; the 3D viewer is live and you can try it on this page.

Case 01 / 04Interiors 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 / 04Property 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 / 04Streetwear 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 / 043D floor plans

Ace Mall in 3D

Interactive 3D floor plans for Zameen Ace Mall, a mixed-use mall and office 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
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.

+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

  • 4

    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.

03About

About

Experience

    Education

      Tools and skills

        04Contact

        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