Tariq Alvi

CURRICULUM VITAE Tariq Mehmood Alvi Address: House No. 536/9, Bukhari Colony, Nawan Sheher, Multan, Pakistan Mobile: - E-mail:-Website: https://portfolio-fawn-six-48.vercel.app Academics HTML5 & CSS3 Certification FreeCodeCamp, California USA JavaScript Algorithms & Data Structures Front End Development Libraries Certification FreeCodeCamp, California USA FreeCodeCamp, California USA Institute of Chartered Accountants of Pakistan (ICAP) Diploma in Computer Science from Petroman Institute of Computer Sciences, Multan CA Articleship 5-Years Diploma DCS 6 - Months Graduation 1st Division Bahauddin Zakariya University, Multan HSSC 1st Division SSC 1st Division Board of Intermediate & Secondary Education Multan Board of Intermediate & Secondary Education Multan Professional Summary I am a creative and detail-oriented Front-End Developer with three years of experience building engaging, responsive, and user-friendly web interfaces. Proficient in modern web technologies like React, Next.js, and Tailwind CSS, I excel in transforming design concepts into interactive, high-performance applications. Key Highlights Proficient in creating responsive designs tailored to various devices. Experienced in integrating APIs and managing application states with React Context API and Redux. Skilled in using version control systems like Git for efficient project management. Developed and maintained responsive web applications using React and Next.js, enhancing user experience and performance. Implemented modern UI frameworks such as Tailwind CSS, Styled Components, and Bootstrap to create visually appealing and consistent interfaces. Collaborated with back-end developers to integrate RESTful APIs ensuring seamless data flow and dynamic content updates. Work Experience March 2023 - February 2025 VerticalSols (Pvt.) Ltd. - Multan During my tenure of Two Years at VerticalSols (Pvt.) Ltd., located in Multan, I worked on a variety of websites, with a particular focus on developing and optimizing Admin Panels. Some of the Projects are as following: OOSH Admin Panel An Australian client project, a multi-vendor system, I have created its Ticketing System UI and Chabot UIs from Figma design, I have written code in React and Styled Components. It was a MERN stack project, Although, I didn’t work on backend but I got god knowledge of Express js routing system, Mongoose, and MongoDB database. MentalHealth Admin Panel A Saudi client’s Hospital project, I have solely worked on this project and created all of its UI alone from Figma, It was built in Next JS App Router and Tailwind CSS. On the main dashboard page, I have created very attractive charts using react chart js-2 library showing bar charts, line charts, and ratio chart of patients. MHOKM Admin Panel A Qatar client Health Department project, using Figma design, I have created its Auth pages including Sing up, Sign In, Forget Password, OTP page, Reset Password page. I also have created its dashboard along with attractive charts, a Patient’s Table and Settings page where admin can chose different theme colors using a Theme Selector component. This was also built with Next JS App Router and Tailwind CSS. Sudan Plaza A Sudanese client project, I have created some of its UI web app pages from Figma design. I have created a dynamic Hero Section as a common header, which was then used in all over website. I also have created a beautiful and responsive Search bar with date selection and Calendar options. Business Owner Project A local Pakistani client project, created in Next JS and Tailwind CSS. I have created some its web pages including Resources page, Templates page, E- Books page, and Case Studies page. Moveeto Admin Panel and Landing Page A UK client’s goods transport project, I alone has set up its git repository and project with Next JS 15 latest version along with Tailwind CSS. I also have integrated its backend APIs in Admin Panel where Admin can add, update, and delete drivers. I have also created its beautiful Landing page where I have rendered 10 to 12 different web components including a Customer Reviews Carousal which was fully responsive. April 2023 - Currently Working Here TereSols (Pvt.) Ltd. - Islamabad Frontend Development Bank Al-Habib Project  Worked on a large-scale banking application using Vue.js and microservices architecture.  Contributed to the development and maintenance of a complex, enterprise-level codebase, ensuring scalability and performance.  Collaborated with backend teams to integrate RESTful APIs and ensure seamless data flow.  Focused on building responsive, reusable UI components and enhancing user experience in a financial environment. Personal Projects 1 => NextJS_Practice_App: Vercel URL: https://next-js-practice-app-cyan.vercel.app GitHub Link: https://github.com/taariqalvi/NextJS-Practice-App In this practice app of NextJS 13.4.7, I learned about client components and server components and how to use them and fetching data from an API. I separately fetch data with client components and then with server components using https://dummyjson.com/product API. Further I enhanced my vision about prerendering with Static Site Generation (SSG) and Server Side Rendering (SSR) and learned that if a page uses SSG, the HTML pages are generated at build time, that means in production, the HTML pages are generated when we run next build command. This HTML will then be reused on each request. It can be cached by a CDN. While in SSR, the page HTML is generated on each request. I also learned about routing, nested routing, dynamic routing, the use of Link Tag and Button Tag, and how to use server and client components together by importing a client component inside a server component. I learned that the react-router-dom complications have been removed from NextJS and a file-based routing works here. 2 => ReactJS_Practice_2 Vercel URL: https://react-practice-2-mu.vercel.app GitHub Link: https://github.com/taariqalvi/React_Practice_2 In this practice app of React 18.2.0, I tried to use almost all the basic features of react. I learned about rendering lists, controlled and uncontrolled components, use of Refs, useState Hook, useEffect Hook, how to get values from user inputs, use of Bootstrap, styling the components with JavaScript objects and with external stylesheets. I also focused on react-router-dom (6.4.5) and learned about wrapping the App inside BrowserRouter and generating paths by Routes and Route features of reactrouter-dom. 3 => ReactJS_Practice_3 with Redux Toolkit 1.9.1 Vercel URL: https://react-practice-3-five.vercel.app GitHub Link: https://github.com/taariqalvi/React_Practice_3 This practice app is made with Redux Toolkit. I learned how to use a global and central state for your whole application data, how to create Slices and passing reducers inside and then importing them in the main Store, used fakestore API to fetch products and displaying them in a styled manner, how to make Cart and how to pass data in Cart Items through click events. Redux Toolkit has completely overlapped the react-redux library and have made complex things very easy but we still need to install it as an essential react binding. 4 => ReactJS_Practice_4 – CRUD Operations Vercel URL: https://react-practice-4.vercel.app GitHub Link: https://github.com/taariqalvi/React_Practice_4 This beautiful app is all about CRUD operations in React. I learned how to create, read, update, and delete data proficiently in react apps, how to use Axios library for data fetching which is the best alternative of fetch method, how to use useNavigate hook smartly and made navigation buttons to navigate efficiently between different components, how to set items in local storage and then how to get items from that storage for editing purpose. I also learned the use of mockapi and sending data to that API: https://63c9b3ca320a0c4c954dda00.mockapi.io/crud which automatically updates itself as the application data changes. 5 => JavaScript OpenAI Chat App: Website URL: https://portfolio-fawn-six-48.vercel.app/Templates/JS-To-Do-ListApp/index.html This is a JavaScript App made with OpenAI Chat Completions. I have used OpenAI API_KEY and API_URL to make it an intelligent app with a few lines of JavaScript code. Also used Tailwind CSS with its CDN Link. 6 => JavaScript QR Code Generator: Website URL: https://portfolio-fawn-six-48.vercel.app/Templates/JS-RandomPassword-Generator/index.html A JavaScript App for generating QR Code on providing any text or url. An eye catching shake effect happens when the input value is less than zero. I have used a QR Code API https://api.qrserver.com to generate the code. 7 => JavaScript Random Password Generator: Website URL: https://portfolio-fawn-six-48.vercel.app/Templates/JS-RandomPassword-Generator/index.html This app generates a complex random password which can be copied with a single click and can be used anywhere. I have created four variables including uppercase and lowercase letters, numbers and symbols, and then combine them with the help of JavaScript function. Each time it generates a 12-digit complex password. 8 => JavaScript SpeechToText App: Website URL: https://portfolio-fawn-six48.vercel.app/Templates/JS%20SpeechToText/index.html In this app I have used window’s SpeechRecognition object with its properties of recognition.lang and recognition.interimResults and then applied an eventListener to get the results. It recognizes the user’s voice and then convert it into text in the given text field. 9 => JavaScript TalkingBot: Website URL: https://portfolio-fawn-six-48.vercel.app/Templates/JSTalkingBot/index.html This application is the combination of window’s SpeechRecognition and SpeechSynthesisUtterance objects with the properties of lang, pitch, volume and rate. I have manually added some questions with the help of if statement and it can answer only those questions. It can get the voice and can also print those words in the given text field. 10 => JavaScript Todo App: Website URL: https://portfolio-fawn-six-48.vercel.app/Templates/JS-To-Do-ListApp/index.html We can add our notes, text, and todos in this app which will not disappear after closing the app as the items are set in the local storage. We can cross an item after completion or can delete it if not needed. 11 => JavaScript WeatherApp: Website URL: https://portfolio-fawn-six-48.vercel.app/Templates/JS-WeatherApp/index.html In this weather app, we can detect the weather of any city in the world. I have used openweathermap.org API_KEY and API_URL to get the weather data with the help of fetch method. After fetching the data, we get data.main object through which we can use multiple parameters like temp, humidity, and wind.speed that I have displayed in this application. We can add more parameters and can display if needed. 12 => CSS 3D Marquee: Website URL: https://portfolio-fawn-six-48.vercel.app/Templates/CSS-3D-MarqueeText/index.html 13 => CSS Neumorphism Buttons: Website URL: https://portfolio-fawn-six-48.vercel.app/Templates/CSS-NeumorphismButtons/index.html 14 => CSS Tilt Effect: Website URL: https://portfolio-fawn-six-48.vercel.app/Templates/CSS-TiltEffect/index.html 15 => CSS Timeline Design: Website URL: https://portfolio-fawn-six-48.vercel.app/Templates/CSS-TimelineDesign/index.html 16 => CSS Wooden Text Typography: Website URL: https://portfolio-fawn-six-48.vercel.app/Templates/CSS-WoodenText/index.html freeCodeCamp Certificates and Projects HTML5 (freeCodeCamp Certification) CSS3 (freeCodeCamp Certification) https://www.freecodecamp.org/certification/tariqalvi/responsive-web-design JavaScript (freeCodeCamp Certification) https://www.freecodecamp.org/certification/tariqalvi/javascript-algorithmsand-data-structures Front End Development Libraries Certification (freeCodeCamp) https://www.freecodecamp.org/certification/tariqalvi/front-end-developmentlibraries  Bootstrap  jQuery  SAAS  React  Redux  React and Redux FreeCodeCamp Projects: A Tribute Page – Mother Teresa https://codepen.io/taariqalvi/full/QWKoyZY Survey Form https://codepen.io/taariqalvi/full/OJRGxwd Product Landing Page https://codepen.io/taariqalvi/full/OJbmbaV Technical Documentation Page https://codepen.io/taariqalvi/full/rNWdrYX Personal Portfolio https://codepen.io/taariqalvi/full/abBaNvm Random Quote Machine https://codepen.io/taariqalvi/full/vYmbYPQ Markdown Previewer https://codepen.io/taariqalvi/full/LYyaMPO Drum Machine https://codepen.io/taariqalvi/full/MWmNNGR JavaScript Calculator https://codepen.io/taariqalvi/full/bGRVYKz 25 + 5 Clock https://codepen.io/taariqalvi/full/MWomKWm Accounting and Finance CA Articleship Institute of Chartered Accountants of Pakistan (ICAP) Articleship Abdul Sattar & Company Chartered Accountants Abdali Road, Multan, Pakistan As a Trainee Auditor: March 2002 – June 2005 As a Senior Auditor: July 2005 – April 2007 Job Experience - Accountant As an Accounts Officer in National Evaluation Company (Pvt) Ltd. Multan Office (Head Office) May 2007 to June 2008 RESPONSIBILITIES: Meetings with General Manager, Regional Manager, Head RCAD, Bank Managers & Officials. Conducting Internal Audit on quarterly basis. Compiling Pakistan Banks Association (PBA) Data of the Company. Supervision & Arrangement of Survey Teams. Book Keeping of the Company. Financial Reporting As Manager Admin & Accounts Pakistan Environmental Consultants. Multan Office (Head Office) July 2008 - December 2010 RESPONSIBILITIES: Communicating with District Environmental Officers. Research and Conducting Surveys about Environmental Disciplines. Learning to Conduct Initial Environmental Examination (IEE) and to Prepare Environmental Impact Assessment (EIA) reports. Preparing & Analyzing Progress Reports. Internal Auditing As Manager Finance & Admin Mukhtar Mai Women’s Organization (MMWO) MuzaffarGarh Office (Head Office) MouzaMeerwala, Tehsil Jatoi, District MuzaffarGarh February 2010 - December 2019 RESPONSIBILITIES: Accounts: Supervision of Book Keeping of the Organization Internal Auditing Financial Reporting Program-side Activities: Participation in USAID Project for “Women’s Rights Protection” and all the Shelter Home and Mukhtar Mai Girls’ School projects Conducting activities according to the Budget Member of Monitoring and Evaluation Team of Projects Preparing Proposals and Budgets for the NGO Personal Date of Birth Place of Birth Marital Status Nationality Religion CNIC No. Passport No. Domicile June 01, 1977 Multan Married Pakistani Islam- CQ- Multan (Punjab) Language Proficiency International English Language Testing System – IELTS (6.0 Band) Fluent in written and spoken English, Urdu and Punjabi. Excellent Communication Skills Interests Watching Hollywood Movies Traveling and Exploring Places and People. *All supporting documents and Certificates can be furnished any time on demand.