Front End Developer - HARMONY DATA INTEGRATION TECHNOLOGIES - Mohall, ND
(2023-04)
Working on international projects for PMY Group (England) through Harmony, contributing to frontend and data-driven solutions as part of an outsourced development team.
- Collaborate with designers and stakeholders to understand and convert Figma and Adobe XD designs into responsive web interfaces.
- Sometimes work independently to implement new UI directly in live pages when clients need urgent delivery and have no time to provide finalized Figma designs.
- Design and develop pixel-perfect UIs using Next.js 14.2 with TypeScript, ensuring type safety, maintainability, and a modern development approach.
- Work on the latest Next.js version 14.2 (App Router-based) utilizing: page.tsx and co-located routing structure, Route groups and folder naming conventions (e.g., (group-name), _folderName) for organized and scalable codebase structure, React hooks such as useState for local state management across many pages
- Create reusable and scalable components using custom design systems, including shared styles for typography, spacing, color themes, and layout structures.
- Utilize modern CSS layout techniques such as Flexbox and CSS Grid, combined with media queries, to build flexible, maintainable, and responsive custom themes and UI layouts.
- Ensure cross-device compatibility by building responsive designs for desktop, tablet, Android, and iOS browsers.
- Work with component libraries (custom and open-source) to streamline UI consistency and accelerate development.
Libraries used include: Styled-components – scoped, maintainable CSS-in-JS with global theming, Bootstrap – for responsive grid layouts and quick prototyping, Radix UI – for accessible primitives like Accordions, Dropdowns, Custom Select Boxes, and Tooltips, installed selectively to minimize bundle size.
- Use Redux Toolkit to manage global state and reusable API logic: Create Redux slices to handle loading and error states, Build thunks for async actions and backend API integration.
- Handle full API integration: Use fetch and axios to consume RESTful APIs, Implement CRUD operations (GET, POST, PUT, PATCH, DELETE) with error handling and loading states.
- Build and maintain a secure, private-access football club management platform exclusively for internal use by Manchester City Football Club's staff and management teams.
- The platform is not publicly accessible and is restricted to authorized users only.
- Includes admin portals and features such as 'Create Player', 'Player Fixtures List', 'Create Fixture', 'Report Page', and 'Assignment List Page'.
- Implements role-based access control to restrict or allow editing of specific report sections depending on the user's role.
- Participate in daily scrum calls and weekly planning meetings involving: Direct collaboration via Microsoft Teams calls with club management teams from England, Paris, and Thailand, Close coordination with cross-functional teams including frontend, backend, database, and TPMs.
- Use Azure DevOps for: Version control, branch management, code reviews, and raising pull requests in an enterprise development environment.
Senior User Interface Developer - GeekyBones Lab Pvt. Ltd.
(2020-01 - 2023-03)
Geekybones is a service-based company that secured projects from various online platforms like Upwork. I worked on a wide range of frontend projects depending on the client's requirements, using various modern frameworks and technologies.
- Delivered multiple frontend projects using a variety of frameworks and technologies including React.js, Next.js, Svelte.js, Gatsby, Shopify, and WordPress.
- Built reusable UI components using both Functional and Class Components; mostly used Functional Components with the useState hook for efficient state management.
- Developed fully mobile-responsive websites ensuring seamless performance across different devices and browsers.
- Worked on projects from scratch, converting Figma or Photoshop designs into production-ready code using the mentioned frameworks; for some projects, I also created my own Figma or Adobe XD designs before implementation.
- Utilized popular UI libraries such as Tailwind CSS and Material UI to build clean, modern, and customizable interfaces using pre-defined CSS utility classes and components.
- Implemented CSS keyframe animations and scroll-based effects that triggered animations when elements entered the viewport or when a user navigated to a specific section of the page.
- Managed version control and collaboration using GitHub and GitLab, including pull requests, merge conflict resolution, and branch-based development workflows.
- Applied strong problem-solving and debugging skills to resolve layout issues, responsive breakpoints, and cross-browser compatibility problems.
- Customized or created Shopify themes focusing on design changes using Liquid (Shopify's templating language), HTML, CSS, and JavaScript.
- Modified existing theme files such as product.liquid, cart.liquid, and collection.liquid to implement static design updates and ensure pixel-perfect UI consistency across pages.
- Converted a Figma design into a static Shopify UI using a free Shopify theme with custom HTML, CSS, and JavaScript, focusing purely on frontend/UI implementation without backend functionality.
- Ensured the Shopify pages were fully responsive and matched design mockups exactly.
- Sliced and exported assets from Figma including images, icons, and SVGs for use in the project.
- Wrote clean, semantic HTML structure matching the Figma design layout.
- Styled pages with CSS or SCSS to precisely replicate the Figma layout, including colors, fonts, spacing, and other design elements.
- Added basic JavaScript or jQuery to support interactive UI elements such as sliders, modals, and animations when needed.
- Made the site fully responsive to ensure smooth display on mobile devices, tablets, and desktops.
- Delivered static HTML, CSS, and JavaScript files that were later integrated into WordPress templates by backend developers or theme builders.
- Converted designs from Figma (or other design tools) into React Native UI components.
- Built static screens and layouts using: JSX for defining UI structure, StyleSheet (React Native's CSS-like styling) to style components exactly as per design, React Native core components like , , , , etc.
- Ensured the static UI was responsive across different screen sizes and device types.
- Handled basic interactions like button presses and simple animations (optional).
- Focused purely on visual and structural parts of the app, with no backend or API integration.
- Worked on two projects using Gatsby and Svelte.js, which were not taken live due to client-side issues, but provided hands-on experience with both technologies and their workflows.
- Focused primarily on UI implementation, ensuring that every project matched the client's design specifications accurately.
- Functionality and backend logic were typically handled by other team members or clients.
User Interface Developer - Get Your Solutions - Panchkula
(2018-04 - 2020-01)
Get Your Solutions is a service-based company specializing in WordPress CMS websites and mobile apps. The team mainly consisted of PHP backend developers and mobile app developers, while frontend and design tasks were handled as part of cross-functional collaboration. The company primarily sourced work from online platforms like Upwork, Fiverr, and Toptal.
- Worked extensively on WordPress custom theme implementation focused on static content and design only, without backend or dynamic functionality development.
- Utilized the WordPress Block Editor (Gutenberg) and Classic Editor to visually build pages by adding and configuring blocks such as headings, paragraphs, galleries, buttons, etc.
- Arranged page layouts with popular page builder plugins like Elementor and WPBakery using drag-and-drop interfaces, minimizing the need for custom coding.
- Customized menus, configured widgets, and managed site navigation structures to improve site usability and organization.
- Adjusted site settings such as colors, fonts, and basic styles via the WordPress Customizer when permitted, ensuring brand consistency.
- Optimized images and content for faster load times and basic SEO compliance.
- Ensured all content was fully responsive and displayed correctly on desktop, tablet, and mobile devices through thorough layout testing and adjustments.
- Performed ongoing basic content updates and maintenance tasks such as fixing typos, updating links, and minor page modifications.
- Skilled in creating pixel-perfect static designs for websites, mobile apps, and marketing materials using Photoshop, ensuring consistency, clarity, and high visual appeal.
- Collaborated closely with developers, product managers, and marketing teams to deliver design solutions that improved user experience and engagement.
- Focused on responsive design principles and delivered optimized assets to enable smooth frontend integration.
- Used FileZilla for regular deployment tasks — including uploading static HTML/CSS files to live servers, and pulling the latest files to ensure proper version alignment and updates.
- Maintained up-to-date knowledge of design trends and best practices to create modern, impactful visuals aligned with client goals.
User Interface Developer - Om Solutions - Zirakpur
(2017-11 - 2018-03)
Om Solutions was my first startup company during its initial phase. It operated as a service-based company focusing on small-scale web projects.
- Created Photoshop PSD designs for small projects, delivering clear and visually appealing mockups for websites.
- Converted PSD designs into static HTML pages using clean, semantic HTML5 markup and basic CSS modules.
- Developed core website pages such as Home, About, Services, Blog, and Contact Us with attention to layout and content structure.
- Ensured websites were fully responsive by applying appropriate media queries and flexible CSS properties for different screen sizes and devices.
- Gained foundational knowledge in HTML elements and structure, including the use of semantic tags such as , ,
, , and .
- Performed basic cross-browser testing and debugging to ensure consistent layout and functionality across major browsers.
- Applied SEO best practices by structuring page tags appropriately to improve search engine visibility.
- Optimized images to improve website loading speed and overall performance.
- Learned best practices in organizing CSS for modularity, reusability, and maintainability during early project work.
- Developed an understanding of the web page box model, positioning, floating, and basic layout techniques.
- Collaborated on project planning and delivery during startup phases, adapting to evolving requirements and tight timelines.
- Focused on creating clean, minimalistic, and user-friendly designs tailored for small businesses and service websites.
