CINXE.COM
Umair Hafeez
<!doctype html> <html lang="en"> <head> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-M73CT62TPW"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-M73CT62TPW'); </script> <base href="/"> <title>Umair Hafeez</title> <meta charset="utf-8"> <meta name="description" content="Personal portfolio of Umair Hafeez. Microsoft Certified Professional. Full Stack Web Applications Developer. Senior Front End Developer. Front End Architect."> <meta name="author" content="Umair Hafeez"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png"> <link rel="manifest" href="site.webmanifest"> <link rel="stylesheet" type="text/css" href="./assets/css/base.min.css"> </head> <body id="top" style="height: 0;"> <!-- header ================================================== --> <header> <div class="row"> <div class="top-bar"> <a class="menu-toggle" href="#"><span>Menu</span></a> <nav id="main-nav-wrap"> <ul class="main-navigation"> <li class="current"><a class="smoothscroll" href="#intro" title="">Home</a></li> <li><a class="smoothscroll" href="#about" title="">About</a></li> <li><a class="smoothscroll" href="#tech-stack" title="">Technology Stack</a></li> <li><a class="smoothscroll" href="#certificates" title="">Certificates & Awards</a></li> <li><a href="https://blog.umairhafeez.com/" target="_blank">Blog (Hashnode)</a></li> <li><a class="smoothscroll" href="#contact" title="">Contact</a></li> </ul> </nav> </div> <!-- /top-bar --> </div> <!-- /row --> </header> <!-- /header --> <app-root></app-root> <!-- intro Section ================================================== --> <section id="intro"> <div class="intro-overlay"></div> <div class="intro-content"> <div class="row"> <div class="col-twelve"> <h5>Hello, World!</h5> <h1>I'm Umair Hafeez.</h1> <p class="intro-position"> <span>Microsoft Certified Professional</span> <span>Aspiring Front End Architect</span> </p> <a class="button stroke smoothscroll" href="#about" title="">More About Me</a> </div> </div> </div> <ul class="intro-social"> <li><a name="LinkedIn" rel="noreferrer" target="_blank" href="https://www.linkedin.com/in/umairhafeez/"><i class="fa fa-linkedin"></i></a></li> <li><a name="Facebook" rel="noreferrer" target="_blank" href="https://www.facebook.com/umairmoghal"><i class="fa fa-facebook"></i></a></li> <li><a name="Twitter" rel="noreferrer" target="_blank" href="https://twitter.com/_umairhafeez_"><i class="fa fa-twitter"></i></a></li> <li><a name="Instagram" rel="noreferrer" target="_blank" href="https://www.instagram.com/_umairhafeez_/"><i class="fa fa-instagram"></i></a></li> </ul> </section> <!-- /intro--> <!-- about Section ================================================== --> <section id="about"> <div class="row section-intro"> <div class="col-twelve"> <h5>About</h5> <h1>Let me introduce myself.</h1> <div class="intro-info"> <img class="lazyload" data-src="./assets/images/profile-pic.jpeg" alt="Profile Picture"> <p class="lead">I am a full-stack web application developer, having more than a decade of extensive experience in all phases of small-scale to enterprise-scale projects. I have ample knowledge of various domains including Web Design Systems, Learning Management Systems (e-learning), and Resource Management Systems.</p> </div> </div> </div> <div class="row"> <div class="col-twelve"> <blockquote> I believe in team success & growth, hence I always put my best efforts to build & maintain a strong team bonding for every project I get to work on. </blockquote> </div> </div> <div class="row about-content"> <div class="col-twelve tab-full"> <p>I have been leading project teams for more than 5 years and have proudly delivered numerous successful projects. I have extensive experience in handling client-facing communications and meetings both remotely and in-person.</p> <p>My motto is: <ul> <li>LEARN from everyone</li> <li>SHARE what you learn</li> <li>GROW together</li> </ul> </p> </div> <div class="col-twelve tab-full"> <p> I also write occasionally to share what I have learned over the past decade. You can find my writings at <a href="https://blog.umairhafeez.com/" target="_blank">blog.umairhafeez.com</a>. </p> </div> </div> <div class="row button-section"> <div class="col-twelve"> <a href="#contact" title="Contact Me" class="button stroke smoothscroll">Contact Me</a> <!-- <a href="#" title="Download CV" class="button button-primary">Download CV</a> --> </div> </div> </section> <!-- /about--> <!-- Skills Section ================================================== --> <section id="tech-stack"> <div class="row section-intro"> <div class="col-twelve"> <h5>Technology Stack</h5> <h1>My technical background & skills </h1> </div> </div> <div class="row about-content"> <div class="col-twelve tab-full"> <div class="col-twelve tab-full"> <h2></h2> <p>I started my career with web applications based on ASP.NET Web Forms and stuck with .NET stack for good 7 to 8 years. Later on I decided to move on towards more interesting stuff happening around. So, I opted for Front End development where AngularJS was the first choice. Since then, I've been keeping up with Angular and learning new stuff in my free time. </p> <h3>Everyday Toolkit</h3> <div class="logos"> <img class="lazyload" data-src="./assets/images/logos/javascript.svg" alt="JavaScript" /> <img class="lazyload" data-src="./assets/images/logos/html5.svg" alt="HTML5" /> <img class="lazyload" data-src="./assets/images/logos/css3.svg" alt="CSS3" /> <img class="lazyload" data-src="./assets/images/logos/angular.svg" alt="Angular" /> <img class="lazyload" data-src="./assets/images/logos/typescript.svg" alt="TypeScript" /> <img class="lazyload" data-src="./assets/images/logos/sass.svg" alt="Sass" /> </div> <h3>Supporting Power Pack</h3> <div class="logos"> <img class="lazyload" data-src="./assets/images/logos/webpack.png" alt="Webpack" /> <img class="lazyload wide" data-src="./assets/images/logos/jasmine-karma.png" alt="Jasmine/Karma" /> <img class="lazyload wide" data-src="./assets/images/logos/bamboo.svg" alt="Atlassian Bamboo" /> <img class="lazyload wide" data-src="./assets/images/logos/bitbucket.png" alt="Atlassian Bitbucket" /> <img class="lazyload lazyload" data-src="./assets/images/logos/git.svg" alt="Git" /> <img class="lazyload wide" data-src="./assets/images/logos/github.png" alt="GitHub" /> <img class="lazyload" data-src="./assets/images/logos/prettier.svg" alt="Prettier" /> <img class="lazyload" data-src="./assets/images/logos/husky.png" alt="Husky" /> <img class="lazyload wide" data-src="./assets/images/logos/jquery.png" alt="jQuery" /> <img class="lazyload" data-src="./assets/images/logos/bootstrap.svg" alt="Bootstrap" /> </div> <h3>Learning In Progress</h3> <div class="logos"> <img class="lazyload wide" data-src="./assets/images/logos/nodejs.svg" alt="NodeJS" /> <img class="lazyload" data-src="./assets/images/logos/react.svg" alt="React" /> <img class="lazyload" data-src="./assets/images/logos/redux.png" alt="Redux" /> </div> </div> </div> </div> </section> <!-- /skills --> <!-- Certificates Section ================================================== --> <section id="certificates" class="resume-certificates grey-section"> <div class="row section-intro"> <div class="col-twelve"> <h5>Certificates & Awards</h5> <h1>More of my credentials.</h1> <p class="lead">The following sections highlight my educational and professional achievements.</p> </div> </div> <!-- /section-intro--> <div class="row timeline"> <div class="col-twelve header"> <h2>Certificates</h2> </div> <!-- /header --> <div class="col-twelve"> <div class="timeline-wrap"> <div class="timeline-block"> <div class="timeline-ico"> <img class="lazyload" data-src="./assets/images/logos/udemy.jpeg" alt="Udemy, Inc."> </div> <div class="timeline-header"> <h3>Angular 8 - The Complete Guide (2019+ Edition)</h3> <p>Jan 2020</p> </div> <div class="timeline-content"> <h4>Udemy Inc.</h4> <img class="lazyload" data-src="./assets/images/certificates/20200114-udemy.jpg" alt="Angular 8 - The Complete Guide (2019+ Edition)"> </div> </div> <!-- /timeline-block --> <div class="timeline-block"> <div class="timeline-ico"> <img class="lazyload" data-src="./assets/images/logos/engagehr.png" alt="ENGAGE HR"> </div> <div class="timeline-header"> <h3>General Management Training for Middle Managers and Future Leaders</h3> <p>Aug 2018</p> </div> <div class="timeline-content"> <h4>ENGAGE HR</h4> <img class="lazyload" data-src="./assets/images/certificates/201808-engagehr.png" alt="General Management Training for Middle Managers and Future Leaders"> </div> </div> <!-- /timeline-block --> <div class="timeline-block"> <div class="timeline-ico"> <img class="lazyload" data-src="./assets/images/logos/microsoft.png" alt="Microsoft"> </div> <div class="timeline-header"> <h3>Exam 480: Programming in HTML5 with JavaScript and CSS3</h3> <p>Feb 2013</p> </div> <div class="timeline-content"> <h4>Microsoft</h4> <img class="lazyload" data-src="./assets/images/certificates/20130223-ms-480.png" alt="Exam 480: Programming in HTML5 with JavaScript and CSS3"> </div> </div> <!-- /timeline-block --> </div> <!-- /timeline-wrap --> </div> <!-- /col-twelve --> </div> <!-- /timeline --> <div class="row timeline"> <div class="col-twelve header"> <h2>Awards</h2> </div> <!-- /header --> <div class="col-twelve"> <div class="timeline-wrap"> <div class="timeline-block"> <div class="timeline-ico"> <img class="lazyload" data-src="./assets/images/logos/mobilelive.png" alt="mobileLIVE Inc."> </div> <div class="timeline-header"> <h3>Recognition for commitment, passion and quality</h3> <p>Mar 2020</p> </div> <div class="timeline-content"> <h4>mobileLIVE Inc.</h4> <p>mobileLIVE Inc. has been recognized as one of Canada's Best Managed Companies for the fourth time earning the distinguished designation of THE GOLD STANDARD.</p> <img class="lazyload" data-src="./assets/images/awards/202003-mobilelive.png" alt="Recognition for commitment, passion and quality"> </div> </div> <!-- /timeline-block --> <div class="timeline-block"> <div class="timeline-ico"> ZS </div> <div class="timeline-header"> <h3>Certificate of Recognition - Peer Recognition</h3> <p>Dec 2017</p> </div> <div class="timeline-content"> <h4>ZSystems (Private) Limited (Offshore office mobileLIVE Inc.)</h4> <p>"Make it happen" Award</p> <img class="lazyload" data-src="./assets/images/awards/201712-mobilelive.png" alt="Certificate of Recognition - Peer Recognition"> </div> </div> <!-- /timeline-block --> <div class="timeline-block"> <div class="timeline-ico"> <img class="lazyload" data-src="./assets/images/logos/macrosoft.png" alt="Macrosoft Pakistan"> </div> <div class="timeline-header"> <h3>Top Performer 2014 (ROD/AOD)</h3> <p>Oct 2014</p> </div> <div class="timeline-content"> <h4>Macrosoft Pakistan (SMC-Private) Limited</h4> <p>I was honored to receive the award from VP Macrosoft Inc.</p> <img class="lazyload" data-src="./assets/images/awards/201410-macrosoft.png" alt="Top Performer 2014 (ROD/AOD)"> </div> </div> <!-- /timeline-block --> <div class="timeline-block"> <div class="timeline-ico"> <img class="lazyload" data-src="./assets/images/logos/zintech.jpeg" alt="ZIN Technologies Limited"> </div> <div class="timeline-header"> <h3>Certificate of Achievement</h3> <p>May 2012</p> </div> <div class="timeline-content"> <h4>ZIN Technologies Limited</h4> <p>Our team was recognized for delivering critical company project</p> <img class="lazyload" data-src="./assets/images/awards/201205-zintech.png" alt="Certificate of Achievement"> </div> </div> <!-- /timeline-block --> </div> <!-- /timeline-wrap --> </div> <!-- /col-twelve --> </div> <!-- /timeline --> </section> <!-- /certificates --> <!-- Recommendations Section ================================================== --> <section id="recommendations" style="display: none;"> <div class="row section-intro"> <div class="col-twelve"> <h5>Recommendations</h5> <h6>As received on LinkedIn</h6> <p class="lead">I am honored to have received over 20 recommendations for pretty much every role I've worked in. I am really thankful to all my colleagues who recognized my work and professional abilities.</p> </div> </div> <!-- /section-intro--> <div class="row recommendations-content"> <div class="recommendations-list"> <div class="recommendation"> <p class="recommended-by"> <a rel="noreferrer" target="_blank" href="https://www.linkedin.com/in/shahzaibkhalid/"> Shahzaib Khalid </a> <span>September 25, 2019</span> </p> <p>Umair has an uncanny ability to lead engineering teams at scale. I worked under his supervision for quite a lot of time and he definitely lets you think that this is the best job that you ever had!</p> </div> <div class="recommendation"> <p class="recommended-by"> <a rel="noreferrer" target="_blank" href="https://www.linkedin.com/in/muhammad-zubair-2170104a/"> Muhammad Zubair </a> <span>September 25, 2019</span> </p> <p>Umair Hafeez is an amazing person to work with. We have worked on many projects. He has worked as a Team Lead. He is a person with a strong motivation and aims for excellence all the time. He is creative, energetic, solution-oriented and highly motivated with great communication skills. Umair Hafeez always keeps the entire team motivated. His technical knowledge and people management skills are exceptional. I would highly recommend Umair Hafeez as a Team Lead.</p> </div> <div class="recommendation"> <p class="recommended-by"> <a rel="noreferrer" target="_blank" href="https://www.linkedin.com/in/usmantahirr/"> Usman Tahir </a> <span>June 20, 2018</span> </p> <p>I worked with Umair at Mobile Live on various medium scale applications mostly related to telecom sector and during those months I learnt a lot in terms of coding standards and code quality.</p> <p>Umair keeps a close eye on implementing things the right way and help/empower his team to follow the same. He leads by example which is another very visionary way of running a team. His hardwork and sense of responsibility really motivates the junior members to work harder.</p> </div> <div class="recommendation"> <p class="recommended-by"> <a rel="noreferrer" target="_blank" href="https://www.linkedin.com/in/waqar-azhar-b7450b48/"> Waqar Azhar </a> <span>June 15, 2018</span> </p> <p>I have worked with Umair at mobilelive. I found him a dedicated and hardworking professional with a can do attitude.</p> </div> <div class="recommendation"> <p class="recommended-by"> <a rel="noreferrer" target="_blank" href="https://www.linkedin.com/in/shahzadns/"> Shahzad Nawaz </a> <span>June 2, 2018</span> </p> <p>During my services at MobileLive, Umair Hafeez performed lead front end developer. It was great to work under such a talented, skilled, calm, nice, and solution-oriented professional.</p> <p>I witnessed his dedication to the company and the team he works with, no matter under how much workload and pressure he is, he always has a fine positive energy with him that he spreads into his team. beside this, working with cross teams i.e. QA, designers, even Management and usually comes in front with a valid solution proposal to the problems.</p> <p>He has been open to learn new technologies, suggest and share new hot techs in market to consider, target inspiring goals for himself and for his team.</p> <p>I highly recommend Umair Hafeez to IT firms that have serious and personal products for which one would need such a dedicated, skilled professional in their board or team.</p> </div> <div class="recommendation"> <p class="recommended-by"> <a rel="noreferrer" target="_blank" href="https://www.linkedin.com/in/naeem-khan-2595885/"> Naeem Khan </a> <span>April 15, 2016</span> </p> <p>I worked with Umair Hafeez Mughal and found him as dedicated self motivated and marvelous analytical person.He is a self motivated person that if you gave him a task then it is surety that it has been done. He is focused on his work and welcome difficult task. Meanwhile he is a team man and help other guys in the team in their problems and gave them a best solution for their problems. In short it is blessing to have a such person in your team.</p> </div> </div> </div> <!-- /recommendations-content --> </section> <!-- /Recommendations --> <!-- contact ================================================== --> <section id="contact"> <div class="row section-intro"> <div class="col-twelve"> <h5>Contact</h5> <h1>I'd Love To Hear From You.</h1> <p class="lead">Please feel free to connect with me on my<br> <a name="LinkedIn" rel="noreferrer" target="_blank" href="https://www.linkedin.com/in/umairhafeez/">LinkedIn</a>, <a name="Facebook" rel="noreferrer" target="_blank" href="https://www.facebook.com/umairmoghal">Facebook</a>, <a name="Twitter" rel="noreferrer" target="_blank" href="https://twitter.com/_umairhafeez_">Twitter</a> or <a name="Instagram" rel="noreferrer" target="_blank" href="https://www.instagram.com/_umairhafeez_/">Instagram</a>.</p> </div> </div> <!-- /section-intro --> </section> <!-- /contact --> <!-- footer ================================================== --> <footer> <div class="row"> <div class="col-six tab-full pull-right social"> <ul class="footer-social"> <li><a name="LinkedIn" rel="noreferrer" target="_blank" href="https://www.linkedin.com/in/umairhafeez/"><i class="fa fa-linkedin"></i></a></li> <li><a name="Facebook" rel="noreferrer" target="_blank" href="https://www.facebook.com/umairmoghal"><i class="fa fa-facebook"></i></a></li> <li><a name="Twitter" rel="noreferrer" target="_blank" href="https://twitter.com/_umairhafeez_"><i class="fa fa-twitter"></i></a></li> <li><a name="Instagram" rel="noreferrer" target="_blank" href="https://www.instagram.com/_umairhafeez_/"><i class="fa fa-instagram"></i></a> </li> </ul> </div> <div class="col-six tab-full"> <div class="copyright"> <span>漏 Copyright Umair Hafeez 2020.</span> <span>Design by <a rel="noreferrer" target="_blank" href="http://www.styleshout.com/">styleshout</a></span> </div> </div> <div id="go-top"> <a class="smoothscroll" title="Back to Top" href="#top"><i class="fa fa-long-arrow-up"></i></a> </div> </div> <!-- /row --> </footer> <div id="preloader"> <div id="loader"></div> </div> <script src="runtime.7d7e9038a1cdbceb3d53.js" defer></script><script src="polyfills-es5.88e51338e9e3aff13d44.js" nomodule defer></script><script src="polyfills.ea6af735e399b9217896.js" defer></script><script src="scripts.6380ca243929651239ca.js" defer></script><script src="main.56cacdc9c83ad591be03.js" defer></script></body> </html>