Motion With Intent
Every transition, reveal, and hover treatment should clarify hierarchy or amplify the narrative, not compete with it.
Open to modern frontend and product engineering opportunities
Creative Frontend Developer
M Bilal Shah Gillani
Creative Frontend Developer
Designing immersive, high-performance web experiences where motion, depth, and clarity work together.
A spatial portfolio direction with stronger 3D presence, sharper motion timing, and recruiter-friendly structure designed to feel premium from the first fold.
Now shapingGLSL surfaces
Signature Direction
High-end portfolio storytelling with movement that actually feels engineered.
Built around layered surfaces, cinematic scroll response, and a 3D hero stage so the page feels more like a crafted product than a static template.
Spatial UIScroll ChoreographyGlass Depth
Design Lens
Immersive, dark, product-first
Build Bias
Motion with performance discipline
Current Focus
Next.js, GSAP, and 3D storytelling
Live 3D System3D Live
Signal Stream
Radar sweep active
Cursor-linked particles
Ambient data field live
Mode
Desktop-first
Motion
GSAP-driven
Depth
Real 3D scene
Base
Pakistan
Focus
Immersive frontend systems
About
A dark, modern portfolio direction centered on polish, narrative flow, and careful performance.
Designed for first impressions that feel intentional: immersive on desktop, graceful on tablet and mobile, and structured to be easy to update.
SummaryPortfolio Story
Bilal leans toward frontend work where the details carry real weight: layouts feel deliberate, motion supports the story, and performance remains part of the craft.
His portfolio direction blends polished interface systems, cinematic interaction design, and responsive implementation so the final experience feels premium without becoming heavy or distracting.
Presence
Clear enough for recruiters, distinctive enough to be remembered.
Location
Pakistan
Systems Before Noise
Reusable sections, consistent spacing, and clean component boundaries keep ambitious visuals maintainable over time.
Depth Without Drag
Rich visuals, subtle glow, and 3D presence are paired with lazy loading and restrained effects to keep the experience fast.
Skills
Capability cards that feel more like a polished product system than a plain resume list.
Each skill cluster now has stronger hierarchy, active-state detail, and popup-style motion so recruiters can scan fast while the section still feels premium and alive.
Coverage
16 active skills
Frontend, motion, 3D, and delivery quality in one system.
Best Fit
Premium UI builds
Strongest when polish, storytelling, and interaction quality matter.
Interaction
Hover to inspect
Each row activates a popup detail card with a clearer skill narrative.
Capability Suite 01
Frontend Systems
4 skill signals
Component architecture, responsive layout thinking, and modern React patterns for product-grade interfaces.
Active Capability
Next.js / React
Production-style React architecture focused on fluid routing, component layering, and polished rendering behavior.
App RouterSSRState Flow
Active Capability
Component Architecture
Turning visuals into maintainable sections, repeatable patterns, and cleaner boundaries that can scale with product needs.
CompositionReuseConsistency
Active Capability
Tailwind CSS
Building expressive surfaces, spacing systems, and responsive states without sacrificing speed or maintainability.
Utility SystemResponsiveDesign Tokens
Active Capability
Responsive UI Engineering
Layouts are shaped for large-screen impact while still adapting cleanly across tablet and mobile breakpoints.
Desktop-firstTablet FitFluid Layout
Capability Suite 02
Motion & Narrative
4 skill signals
Scroll choreography and micro-interactions that add texture while preserving readability and flow.
Active Capability
GSAP / ScrollTrigger
High-end reveal timing, scrubbed motion, and section choreography that gives the page rhythm and direction.
ScrollTriggerScrubSequencing
Active Capability
Micro-interactions
Hover behavior, button response, and subtle surface shifts that make the interface feel deliberate and premium.
Hover StatesFeedbackPolish
Active Capability
Scroll Storytelling
Designing sections so each scroll movement reveals the next beat with stronger control over hierarchy and drama.
NarrativeTempoReveal Logic
Active Capability
Interaction Prototyping
Exploring interaction behavior fast so the final product feels refined before deeper implementation begins.
PrototypeIterationUX Motion
Capability Suite 03
3D & Spatial UI
4 skill signals
WebGL-driven scenes and perspective-based UI moments that create depth without overwhelming the page.
Active Capability
Three.js / React Three Fiber
Using WebGL scenes for hero moments, spatial surfaces, and animated visual identity that stands out immediately.
WebGLR3FReal-time Scene
Active Capability
Scene Composition
Balancing foreground geometry, supporting particles, and supporting UI overlays so the whole scene feels intentional.
LayoutDepthComposition
Active Capability
Lighting & Materials
Using emissive surfaces, transparent materials, glow balance, and contrast to make 3D elements feel premium.
LightingMaterialsMood
Active Capability
3D UI Experiments
Blending cards, HUD layers, and perspective motion so UI feels dimensional instead of flat and template-like.
Spatial UIHUDDepth Motion
Capability Suite 04
Delivery & Quality
4 skill signals
Performance-aware implementation with maintainable structure, lazy loading, and recruiter-friendly polish.
Active Capability
Code Splitting
Keeping ambitious sections fast by loading interactive modules only where the experience actually benefits from them.
Lazy ChunksLoad StrategyPerformance
Active Capability
Lazy Loading
Deferring non-critical visual work so the first render stays smooth even when the page carries richer interactions.
DeferFirst PaintEfficiency
Active Capability
Accessibility Passes
Making sure the site stays usable with readable contrast, keyboard access, and reduced-motion considerations.
A11yReadableInclusive
Active Capability
Performance Tuning
Tuning animation density, GPU-heavy moments, and render behavior so the experience still feels controlled and fast.
FPS CareOptimizationSmoothness
Projects
Interactive work panels shaped around premium web directions and recruiter-facing storytelling.
The card system is built for depth: perspective tilt on hover, scroll-reactive movement, and visual surfaces that feel more spatial than flat.
Healthtech Platform
Healthcare Management App
A modern healthcare application built with TypeScript, Next.js, Tailwind CSS, and Appwrite, focused on appointment workflows, patient-facing clarity, and secure dashboard operations for everyday medical use.
TypeScriptNext.jsTailwind CSSAppwrite
Appointment booking flowPatient and admin dashboardsAppwrite-powered data handling
View DirectionHealthtech Platform
Interface Layer
Appointments32%
Patient Portal64%
Care Records96%
Impact Lens
Appointment booking flow
Patient and admin dashboards
Interactive NodesDepth Map
Node
Appointments
Node
Patient Portal
Node
Care Records
Operations System
Library Management System
A library workflow platform built with Vue.js, JavaScript, Tailwind CSS, and Node.js for managing catalog visibility, borrow and return cycles, and smoother day-to-day admin control.
Vue.jsJavaScriptTailwind CSSNode.js
Book issue and return flowCatalog and inventory trackingAdministrative control panels
View DirectionOperations System
Interface Layer
Book Catalog32%
Borrow Logs64%
Admin Access96%
Impact Lens
Book issue and return flow
Catalog and inventory tracking
Interactive NodesDepth Map
Node
Book Catalog
Node
Borrow Logs
Node
Admin Access
Commerce Platform
E-Commerce Storefront
A responsive e-commerce application built with Vue.js, JavaScript, Tailwind CSS, and Node.js, designed around product discovery, cart flow, and a cleaner customer purchase journey.
Vue.jsJavaScriptTailwind CSSNode.js
Product browsing and filtersCart and checkout journeyOrder management workflow
View DirectionCommerce Platform
Interface Layer
Product Grid32%
Cart Flow64%
Order Queue96%
Impact Lens
Product browsing and filters
Cart and checkout journey
Interactive NodesDepth Map
Node
Product Grid
Node
Cart Flow
Node
Order Queue
Experience
A modern timeline focused on how the work is approached, shaped, and delivered.
Instead of a crowded resume dump, this section emphasizes the kind of frontend and interaction work that makes the portfolio feel intentional.
Today
Interactive web products
Frontend Experience Design
Building interfaces that combine product clarity with a cinematic feel, using motion and spacing to guide attention rather than distract from it.
Storytelling layoutsUI polishDesign-system thinking
Workflow
Animation systems and interaction detail
Motion-led Implementation
Using scroll logic, deliberate easing, and hover response to create rhythm across the page while keeping each interaction lightweight and purposeful.
GSAP sequencesScrollTrigger orchestrationMicro-motion refinement
Delivery
Responsive, maintainable builds
Performance-aware Engineering
Pairing rich visuals with lazy-loaded scenes, modular components, and careful front-end structure so the end result feels polished and scalable.
Code splittingResponsive systemsMaintainable architecture
Contact
Let's build something that feels as sharp as it performs.
If you're hiring, collaborating, or exploring a polished product experience, LinkedIn is the fastest way to start the conversation.
Primary Channel
LinkedIn conversation, polished first touch.
This contact block stays deliberately minimal so the overall experience feels clean. The main call to action is direct, visible, and easy to act on.
M Bilal Shah Gillani
https://www.linkedin.com/in/m-bilal-shah-gillani-3a7980220/
Based In
Pakistan
Open to modern frontend and product engineering opportunities