DOMINATE
BLENDING
AESTHETICS
DOMINATE
BLENDING
AESTHETICS
DOMINATE
BLENDING
AESTHETICS
DOMINATE
BLENDING
AESTHETICS
DOMINATE
BLENDING
AESTHETICS
DOMINATE
BLENDING
AESTHETICS
DOMINATE
BLENDING
AESTHETICS
Auvance
studio
auvance
hafizau
auvance
hafizau
auvance
hafizau
auvance
hafizau
auvance
hafizau
auvance
hafizau
AESTHETICS
devsigner
HAFIZAU
devsigner
creative
devsigner
creative
devsigner
auvance
studio
auvance
studio
auvance
studio
DOMINATE
BLENDING
AESTHETICS
DOMINATE
BLENDING
AESTHETICS
DOMINATE
BLENDING
devsigner
DOMINATE
devsigner
AESTHETICS
STUDIO
BLENDING
AESTHETICS
STUDIO
BLENDING
AESTHETICS
DOMINATE
BLENDING
studio
Auvance
studio
auvance
hafizau
auvance
hafizau
auvance
hafizau
auvance
hafizau
auvance
hafizau
auvance
hafizau
king
after
king
dominate
realms
king
after
king
dominate
realms
dominate
realms
king
after
king
dominate
realms
blending
aesthetics
hafizau
aesthetics
blending
aesthetics
auvance
studio
auvance
hafizau
auvance
studio
creative
devsigner
studio
devsigner
creative
devsigner
blending
aesthetics
blending
aesthetics
This site is currently only available on pc & mobile
APOLOGIES FOR THE INCONVENIENCE
SYNOPSISWORKSSERVICESEXPERIENCEconnect
SYNOPSISWORKSSERVICESEXPERIENCECONNECT
AUVANCE-STUDIO
creative
devsigner
Frontend Dev & Designer.
I build things people feel.
AUVANCE STUDIO
/ 01 SYNOPSIS
←
Between logic and imagination, I build. Trained at BCIT with Distinction, I've spent 600+ hours sharpening the craft — turning ideas into living interfaces that are responsive, accessible, and impossible to ignore. Currently shipping GrainFree. Every project, a step forward.
BASED IN VANCOUVER
When the code rests, I'm in the gym, on the road, or chasing the next idea. Balance isn't a side note — it's what keeps the work honest. Strength is the discipline; creativity is the reward.
WORKS 02\
WORKS 02\
WORKS 02\
WORKS 02\
WORKS 02\
WORKS 02\
WORKS 02\
WORKS 02\
WORKS 02\
WORKS 02\
WORKS 02\
WORKS 02\
WORKS 02\
works o2\
works o2\
works o2\
works o2\
works o2\
Each project is a milestone where imagination meets function. From API-integrated React apps to high-motion Webflow experiences. Each one pushed my skills forward whether its System Scalability, Animation Sequencing, CMS Structure or Anything in between.

Auvance

\ Pre 2026

Aakif Umar's personal portfolio is a Webflow-built creative showcase displaying his work as a Frontend Developer and UI Designer.
It features his projects, services, skills, and experience - designed to connect with employers, collaborators, and clients.
View LiveView more
View FigmaView GitHub

Intercodex

\ Pre 2025

Intercodex is corporate CMS-powered website for showcasing tech services and products.
It combines the flexibility of React with the content management power of WordPress, delivering a mobile-first, accessible, and high-performance experience.
View LiveView more
View FigmaView GitHub

ONAFilms

\ Pre 2025

ONA Films is a React-based movie discovery application built to explore films and trending releases.
It delivers real-time movie data through a fast, responsive UI designed for smooth browsing and discovery.
View LiveView more
View FigmaView GitHub
Four disciplines. One workflow. I bridge the gap between design and development — building things that look intentional and work reliably. These aren't just skills I list; they're how I actually think and ship.

\ 01

WEB DEVELOPMENT

I build fast, production-ready websites with Next.js, TypeScript, and GSAP. Clean code, WCAG accessibility, and performance are non-negotiables — not afterthoughts. Everything I ship is responsive, maintainable, and engineered with the next developer in mind.

\ 02

WEB DESIGN (UX/UI)

I design interfaces that feel considered. Figma is my sketchbook — built around auto layout, design tokens, and motion that guides rather than distracts. My goal is always the same: a design that translates cleanly into a product people actually want to use.

\ 03

AI-POWERED DEVELOPMENT

AI is in my workflow, not in charge of it. I use it to move faster through prototyping and debugging, while keeping the direction, decisions, and design thinking human. The result: complex systems shipped with both speed and intention.

\ 04

SYSTEMS THINKING

I don't just build pages — I build structures. Component architecture, animation systems, data flow — I approach each project with the full picture in mind so nothing breaks when it scales. Good systems are invisible; you only notice them when they're missing.

MY SKILL ARSENAL

FRONTEND
HTML5
CSS3
JavaScript
TypeScript
SASS
React.js
Next.js
Tailwind
PLUGINS
GSAP
Splide.js
Lenis.js
Three.js
Locomotive
DESIGN
Figma
AdobeXD
Webflow
Photoshop
Illustrator
Indesign
Premiere Pro
/ 04
experience
/ 04
experience
/ 04
experience
/ 04
experience
/ 04
experinence
/ 04
experience
/ 04
experinence
/ 04
experinence
/ 04
experinence
/ 04
experience
/ 04
experience
/ 04
experience
/ 04
experience
/ 04
experience
/ 04
experience
/ 04
experience
/ 04
experience
/ 04
experience
/ 04
experinence
/ 04
experience
/ 04
experience
/ 04
experience
/ 04
experience
/ 04
experience
/ 04
experience
/ 04
experience
/ 04
experience
Creative Developer /
@Auvance (Freelance Business)
June 2024 - present
Vancouver, BC
  • Delivered freelance websites with custom WordPress builds, SEO improvements, and responsive design reduced load times by up to 40% and improved Core Web Vitals scores.
  • Built purposeful side projects (API-driven apps, JS games, React movie database, GSAP portfolio) to test new frameworks and strengthen UI/UX design thinking.
  • Applied analytics-driven SEO to projects, increasing visibility and discoverability of client sites
React Developer & Web Designer /
@StudentSoftwareAssociation
June 2025 - present
Vancouver, BC
  • Designed 5 core screens (Home, About, Events, Blogs, Student Projects) from low-fidelity wireframes through to high-fidelity Figma prototypes, presenting each stage to the executive team for approval.
  • Defined the visual language and layout system for the platform — typography, spacing, colour, and responsive behaviour — ensuring consistency across all pages.
  • Building the approved designs in Next.js, TypeScript, and React — translating Figma specs into reusable, production-ready components across the codebase.
  • Managing the full GitHub workflow — opening and closing issues, committing consistently, and handling merges across an active team repository.
No Experience A
lets
Send me a
request on
Send me a request on
GitHub →LinkedIn →Email →
connect
@2026
HAFIZAU
SynopsisWorksServicesExperienceConnect
navigation
EmailLinkedInGitHub
Behance
Discord: auvance
connect
Terms & Conditions
Cookie Policy
Data Privacy
Discord
Behance
privacy policy
designed by auvance
@hafizau all rights reserved