Muhammad Bilal Khan, Developer in Karachi, Sindh, Pakistan
Muhammad is available for hire
Hire Muhammad

Muhammad Bilal Khan

Verified Expert  in Engineering

Front-end Developer

Location
Karachi, Sindh, Pakistan
Toptal Member Since
October 25, 2022

Bilal is a web developer with over six years of professional experience. He specializes in WebGL-related technologies, software engineering, and front-end web development. Throughout his career, he has built interactive, responsive, and visually pleasing web applications for companies worldwide. Bilal is passionate about creating 3D content on the web and making an impact through immersive 3D experiences, as he believes that 3D websites are the future.

Portfolio

Stylomystery
WebGL, Three.js, HTML5, CSS3, Node.js, Blender...
Scentcraft
WebGL, Three.js, HTML5, CSS3, SCSS, React, JavaScript, Blender, 3D, CSS...
Crypto Gem Alliance
HTML5, CSS3, React, JavaScript, GreenSock Animation Platform (GSAP), GLSL...

Experience

Availability

Part-time

Preferred Environment

MacOS, Windows, Visual Studio Code (VS Code)

The most amazing...

...thing I've built is a 3D multiplayer first-person shooter with React, WebGL, Three.js, Node.js, and real-time communication with geckos.io.

Work Experience

CEO | Developer | Co-founder

2019 - PRESENT
Stylomystery
  • Managed the growth of the fashion startup and oversaw the development of different in-house tools and the company website.
  • Led the development of a tool that allowed customization according to colors, designs, and sizes of different clothing items.
  • Collaborated closely with WordPress developers to help integrate the customization tool into a WordPress website.
Technologies: WebGL, Three.js, HTML5, CSS3, Node.js, Blender, GreenSock Animation Platform (GSAP), Firebase, MySQL, 3D, CSS, Web Development, Interactive UI, HTML, Front-end, Agile, REST, Jira, Figma, GSAP, Algorithms, 3D Animation, Performance

Senior WebGL Developer

2020 - 2022
Scentcraft
  • Developed a scent customizer that allowed users to create a scent and its bottle by choosing from various options available in different categories.
  • Created a web marketing tool that allowed different celebrities to create 3D-rendered videos by putting their content in it.
  • Worked closely with Blender modelers and helped design the flow of content from Blender to WebGL.
  • Collaborated with front-end developers to integrate different WebGL tools into the existing website.
Technologies: WebGL, Three.js, HTML5, CSS3, SCSS, React, JavaScript, Blender, 3D, CSS, Web Development, Interactive UI, HTML, Front-end, Agile, REST, Jira, Next.js, Single-page Applications (SPA), Figma, GSAP, PlayCanvas, 3D Modeling, Algorithms, Virtual Reality (VR), 3D Animation, Performance

Senior WebGL Developer

2021 - 2021
Crypto Gem Alliance
  • Developed a website with a 3D viewer, allowing users to explore a different range of NFT diamonds.
  • Built a Node.js application to create GIF animations of 3D diamonds with different attributes using FFmpeg and Puppeteer. It allowed to bulk-create NFT diamonds with various attributes, each different from the other.
  • Created and customized different GLSL shaders for the NFT diamonds and environmental effects.
Technologies: HTML5, CSS3, React, JavaScript, GreenSock Animation Platform (GSAP), GLSL, Blender, Three.js, WebGL, FFmpeg, Node.js, 3D, CSS, Web Development, Interactive UI, HTML, Front-end, Agile, REST, Jira, Next.js, Single-page Applications (SPA), Figma, GSAP, 3D Modeling, Algorithms, Virtual Reality (VR), 3D Animation, Performance

Senior Front-end Developer

2018 - 2021
Euphoria XR
  • Led the development of multiple web applications based on an immersive 360-degree product showcase.
  • Created a custom 3D globe in React and Three.js, which led to company details from different sites worldwide.
  • Collaborated with the front-end developers to integrate the built WebGL tools into the existing website.
  • Created a virtual try-on web application for glasses that tracked users' faces and placed 3D glass models on them.
Technologies: HTML5, CSS3, SCSS, JavaScript, React, WebGL, Three.js, GreenSock Animation Platform (GSAP), Blender, Babylon.js, 3D, CSS, Web Development, Interactive UI, HTML, Front-end, Agile, REST, Next.js, Single-page Applications (SPA), Figma, GSAP, PlayCanvas, 3D Modeling, Algorithms, 3D Animation, Performance

Full-stack Developer

2017 - 2018
Jobarter
  • Partnered with a team of developers to create a website for a freelancing platform.
  • Redesigned an enhanced UI of the website while collaborating with other front-end developers.
  • Tracked and fixed bugs in the company's existing website.
  • Collaborated with PHP and Node.js back-end developers to integrate APIs in the front end based on React.
Technologies: HTML5, CSS3, JavaScript, React, Sass, SCSS, Bootstrap, Material UI, CSS, Web Development, Interactive UI, HTML, Front-end, Figma, GSAP, Algorithms

Smart Home Technology Experience | Silicon Labs

https://solutions.silabs.com/homes/
A 360-degree experience-based website that demonstrates different home solutions offered by the company in an immersive way. Users can explore the home with all integrated technologies. It has different sections through which users can navigate, including hotspots, a 3D map, a sidebar, and a filtering tool. Each tool is represented by an info spot that provides further details about the product. An admin portal was also created to track user activity on the website.

Web-based 3D Multiplayer First-person Shooter

This project features a fully-fledged 3D multiplayer game with real-time communication and physics. It contains different maps, game modes, types of guns, and player avatars. This game allows users to create a room that other users can join. Real-time communication is performed by the geckos.io library, which is an excellent alternative to Socket.IO due to faster data communication. Three.js is used to render the game. It features low-poly assets for faster loading times, allowing it to run smoothly on mid-end and low-end devices. A JavaScript port of the Bullet physics engine is used to implement physics in the game.

Crypto Gem Alliance Website

https://cryptogemalliance.com/
This website showcases different NFT gems that Crypto Gem Alliance offers. It has an interactive 3D experience that can be run on desktops, mobile phones, and some smartwatches. Users can view different types of diamonds and check out the experience with various colors. The experience is powered by a robust tool that allows changing 20 different attributes that affect the diamond's appearance and background effects.

Virtual Glasses Try-on Web Application

A web application that allowed users to try different sets of frames in a real-time AR environment. TensorFlow face mesh was used to detect the 3D landmarks on the face, which were converted into scale, rotation, and positions and then applied to the 3D model of the glasses.

Scentcraft Fragrance Customizer

https://scentcraft.com/
A 3D experience that takes the user through ten steps of creating a customized fragrance and a bottle. With each step taken, the appearance of the bottle in the 3D scene changes. The final customized product is presented to users in the 3D scene, which can be ordered directly from the website.

Web-based American Football Game

This game was for playable web ads. It featured a pleasant 3D environment and real-time physics simulation using a JavaScript port of the Bullet physics engine. With all the assets, 3D models, code, and libraries, the game was very well optimized. The total size is just 1.9 MB, which enabled it to load faster and run smoothly on mobile devices.

Image Cluster Experience

https://youtu.be/VOtsxNts0qI
An immersive WebGL-based image cluster experience for an event presentation. This experience represents the capability of artificial intelligence to organize images into different categories. In the beginning, the experience shows all the images in the database. Users can explore it by looking around and scrolling. The images fade in when they are at a certain distance from the user and fade out when they are very close. From the categories menu, the images of each category can be individually seen through the same experience. All images are low in size, which helps in faster loading.

Multiplayer Ball Game Controlled with Hand Movements

A game where two players compete against each other. A different colored 3D ball represents each player. They are inside a sphere, so if players move forward, they end up at the same point. The goal is to score points by collecting an item and passing through other players' bases. In this game, the user's hands control the ball's movement, which is detected through the webcam. MediaPipe hands library is used to detect hand landmarks. The direction is defined by the area in which the hand is present. The screen is divided into nine parts, and the hand works as a joystick. For better performance, web workers are used to running the game in an off-screen canvas. It allows good frame rates even when a machine-learning model runs in the background.

2D Canvas-based Industrial Parts Designer

https://www.youtube.com/watch?v=8j03ApE3IqE
A 2D canvas-based web application for designing industrial parts. There are different features such as drawing basic shapes, adding text, moving and scaling shapes, changing color and opacity, zooming in, and zooming out. All the above features are designed with custom code and without a drawing library. In the end, the user can also export the canvas in a PDF format.

Tool for Creating Printable STLs of Shoe Soles

This tool was for industrial use, allowing users to design a shoe sole with accurate real-life measurements and angles. After designing the sole, an STL file was exported directly from the web application and used for 3D printing.

Languages

HTML5, CSS3, JavaScript, SCSS, HTML, CSS, TypeScript, GLSL, Python 3, Sass

Libraries/APIs

React, Three.js, GSAP, WebGL, Babylon.js, Node.js, FFmpeg, TensorFlow, Keras, Web Worker, WebXR

Platforms

GreenSock Animation Platform (GSAP), Firebase, Anaconda, Linux, PlayCanvas

Other

Web Development, Interactive UI, Front-end, Single-page Applications (SPA), Algorithms, 3D Animation, Performance, 3D, WebSockets, 3D Math, Linear Algebra, geckos.io, 3D Modeling, Virtual Reality (VR)

Frameworks

Express.js, Next.js, Bootstrap, React Native, Material UI, Bullet, Phaser.io

Paradigms

Agile, REST, Gamification, Data Science

Storage

MySQL, Amazon S3 (AWS S3)

Tools

Blender, Expo, TensorBoard, Git, Zeplin, Webpack, Canvas 2D, Jira, Figma

2018 - 2022

Bachelor's Degree in Software Engineering

NED University of Engineering and Technology - Karachi, Pakistan

MARCH 2019 - PRESENT

Artificial Intelligence

Presidential Initiative for Artificial Intelligence and Computing

JANUARY 2018 - PRESENT

Certified Web and Mobile Application Developer

Saylani Mass IT Training Program

Collaboration That Works

How to Work with Toptal

Toptal matches you directly with global industry experts from our network in hours—not weeks or months.

1

Share your needs

Discuss your requirements and refine your scope in a call with a Toptal domain expert.
2

Choose your talent

Get a short list of expertly matched talent within 24 hours to review, interview, and choose from.
3

Start your risk-free talent trial

Work with your chosen talent on a trial basis for up to two weeks. Pay only if you decide to hire them.

Top talent is in high demand.

Start hiring