jonathan manas
Jonathan Manas profile


Hi! I'm Jonathan Manas aka. Athan, a passionate Front-end Developer based in the Philippines.

featured works

Being part of different teams enabled me to contribute to the development of projects that leverage cutting-edge technologies, ensuring optimal experiences for end-users.

  • myosh myosh

    myosh

    Environmental, Health and Safety Management (EHS) Cloud-based Software

    Role: Lead Front-end Developer

    URL: myosh.com

    Tech: React Redux Zustand SWR React Hook Form Recharts

    myosh

    myosh

    Environmental, Health and Safety Management (EHS) Cloud-based Software

    Role: Lead Front-end Developer

    URL: myosh.com

    Tech: React Redux Zustand SWR React Hook Form Recharts

    • Refactored a legacy React-based enterprise module within three months leading to its MVP launch.
    • Presided over multiple enterprise modules to implement new features, debug, and fix client-reported bugs and issues, helping reduce overall technical debts.
    • Upgraded application's outdated dependencies to the latest versions, ensuring compatibility.
    • Offered technical advice, resulting in observable improved loading time and UX performance of legacy codebases.
    • Performed timely peer code reviews, streamlining the development process.
    • Handled iterative version releases and deployments into different testing environments up to production.
    • Led online demonstrations of new features for the executive stakeholders.
    • Participated in weekly task grooming and sprint planning.
    • Collaborated with a team in Australasia and European time zones, ensuring effective integration of managed modules with other applications within the software ecosystem.
    • Produced wiki documentation of managed module's FE structure and architecture.
  • Fox Ad Solutions Fox Ad Solutions

    Fox Ad Solutions

    Sales and Marketing

    Role: Lead Front-end Developer

    URL: foxadsolutions.com

    Tech: WordPress React Zustand

    Fox Ad Solutions

    Fox Ad Solutions

    Sales and Marketing

    Role: Lead Front-end Developer

    URL: foxadsolutions.com

    Tech: WordPress React Zustand

    • Led team in setting up FE architecture approach, resulting in an organized, scalable, and maintainable component-based front-end system within WordPress.
    • Created an internal React-based plugin package within the WP application.
    • Coordinated regularly with the technical director in approaching technical UI requirements.
    • Collaborated with designers and strategists to fully understand expectations and to ensure effective translations of user interface designs into intuitive user experiences.
    • Developed reusable stylesheets with BEM and Atomic Design CSS methodologies, and used Sass mixins and functions.
    • Configured Webpack for code linting, splitting, and file minifications.
    • Implemented lazy-loading of assets (scripts, styles, and image files), prompting fast page response time.
    • Utilized Lighthouse (Google's Core Web Vitals) to monitor and optimize web performance and user experience.
    • Ensured design responsiveness on multi-device web and mobile platforms.
    • Addressed Accessibility (a11y) compliance, ensuring ease of usage among users with disabilities.
    • Performed code reviews and guided junior FEs within the team to uphold code standards.
    • Contributed to FE task estimations and distribution, resulting in optimal capacity utilization across the team.
    • Participated regularly in various Agile ceremonies with US-based counterparts.
  • Party City Party City

    Party City

    Retail chain corporation

    Role: Lead Front-end Developer

    URL: partycity.com

    Tech: Salesforce Demandware Amplience Storybook Handlebars Web Components

    Party City

    Party City

    Retail chain corporation

    Role: Lead Front-end Developer

    URL: partycity.com

    Tech: Salesforce Demandware Amplience Storybook Handlebars Web Components

    • Led front-end team in building a new version of retail e-commerce store running under Salesforce, Demandware, and Amplience platforms.
    • Developed native Web Components to build a reusable, modular, and interactive component system without the use of frameworks.
    • Applied BEM and Atomic Design CSS methodologies, and used Sass mixins and functions to create clean, reusable stylesheets.
    • Helped create a Storybook library for UI component development, testing, and documentation.
    • Worked closely with designers and strategists to fully understand expectations and to ensure effective translations of user interface designs into intuitive e-commerce experiences.
    • Utilized Lighthouse (Google's Core Web Vitals) to monitor and optimize web performance and user experience.
    • Ensured design responsiveness on multi-device web and mobile platforms.
    • Addressed Accessibility (a11y) compliance, ensuring ease of usage among users with disabilities.
    • Performed code reviews to ensure code consistency.
    • Contributed to FE task estimations and distribution, resulting in optimal capacity utilization across the team.
    • Participated regularly in various Agile ceremonies with US-based counterparts.
  • Griffin Catalyst Griffin Catalyst

    Griffin Catalyst

    Philanthropy site

    Role: Lead Front-end Developer

    URL: griffincatalyst.org

    Tech: WordPress TypeScript

    Griffin Catalyst

    Griffin Catalyst

    Philanthropy site

    Role: Lead Front-end Developer

    URL: griffincatalyst.org

    Tech: WordPress TypeScript

    • Led team in setting up FE architecture approach, resulting in an organized, scalable, and maintainable component-based front-end system within WordPress.
    • Developed in Typescript, utilized BEM and Atomic Design CSS methodologies, and used Sass mixins and functions to create reusable front-end scripting and styles.
    • Implemented lazy-loading of assets (scripts, styles, and image files), prompting fast page response time.
    • Configured Webpack/Babel for effective code linting, splitting, and file minifications.
    • Collaborated with designers and strategists to fully understand expectations and to ensure effective translations of user interface designs into intuitive user experiences.
    • Utilized Lighthouse (Google's Core Web Vitals) to monitor and optimize web performance and user experience.
    • Ensured design responsiveness on multi-device web and mobile platforms.
    • Addressed Accessibility (a11y) compliance to ensure ease of usage among users with disabilities. Performed code reviews to ensure code consistency.
    • Contributed to FE task estimations and distribution, resulting in optimal capacity utilization across the team.
    • Participated regularly in various Agile ceremonies with US-based counterparts.
    • Handled creation of FE architecture wiki document.
  • NYCEDC NYCEDC

    New York City EDC

    Non-profit organization

    Role: Senior Front-end Developer

    URL: edc.nyc

    Tech: Drupal Twig Pattern Lab

    The Webby Awards (2020) - Honoree - Websites and Mobile Sites Government & Civil Innovation

    NYCEDC

    New York City EDC

    Non-profit organization

    Role: Senior Front-end Developer

    URL: edc.nyc

    Tech: Drupal Twig Pattern Lab

    The Webby Awards (2020) - Honoree - Websites and Mobile Sites Government & Civil Innovation

    • Helped build a frontend system running under Drupal and Twig templating engine.
    • Utilized BEM CSS methodology and created an atomic-based design system using PatternLab.
    • Configured Webpack for code linting, splitting, and file minifications.
    • Worked closely with designers and strategists to fully understand expectations and to ensure effective translations of user interface designs into intuitive user experiences.
    • Ensured design responsiveness on multi-device web and mobile platforms.
    • Addressed Accessibility (a11y) compliance, ensuring ease of usage among users with disabilities.
    • Contributed to FE task estimations and distribution, resulting in optimal capacity utilization across the team.
    • Participated regularly in various Agile ceremonies with US-based counterparts.
  • NCOA NCOA

    National Council on Aging

    Charitable organization

    Role: Senior Front-end Developer

    URL: ncoa.org

    Tech: Kentico CMS

    W3 Awards (2021) - Best in Show - General Websites-Associations

  • Others:

    Giffords

    Social activism organization

    Role: Senior Front-end Developer

    URL: giffords.org

    Tech: WordPress Gutenberg React Contentful

    The Webby Awards (2022) - Honoree - Websites and Mobile Sites Activism

  •  

    Remi by Allspring Global Investments

    Asset Management Portfolio Portal

    Role: Senior Front-end Developer

    URL: allspringglobal.com

    Tech: React Zustand React Hook Form SWR Storybook

  •  

    Responsible Time-Off (RTO)

    Internal PTO Management Portal

    Role: Senior Front-end Developer

    Tech: React Styled Components

Appreciations

  • As a developer.

    “Athan has shown the leadership we expect him to be. He took on the most complicated tasks and turned them into exceptional features of the project. His meticulousness was vital in developing with little to no UI issues. He was vocal on bringing up issues, and expressing possible solutions to the team's problems."

  • As a team player.

    "Jonathan takes the time to really understand what's being asked. Whether working with designers, UX, client, or backend teams, he doesn't just take the easy road out of a discussion."

  • As a team leader.

    “Having worked with Athan on two projects, I could say, in my opinion, that he is one of the top developers in the company. He was highlighted as an effective team leader, supportive of everyone, and always offering advice that he believes will improve the team's efficiency - all while continuing to demonstrate competence in completing tasks as accurately and promptly as he can."

Career Journey

I began as a Web Designer in an era when Front-end wasn't a prominent focus.

Over time, I've contributed to different teams, taking on positions as both a Senior Developer and Team Lead, offering lasting solutions to front-end performance challenges.

download my resume
for detailed work information.

  • Lead / Senior Front-end Developer

    2023 - 2024

    Worked with a global vendor of cloud-based HSEQ Management Software, to transform and elevate software functionality across multiple enterprise modules while also overseeing maintenance tasks. Offered technical advice to enhance old applications, ensuring optimal performance and meeting client needs.

  • Senior Front-end Developer / Unit Team Lead

    2018 - 2023

    Turned designs into user-friendly, responsive web applications. Guided the front-end team to uphold code standards and ensure the maintainability and scalability of each project. Provided technical and practical career support to junior developers while taking a leadership role in overseeing their work.

  • Front-end Developer (Software Engineer II)

    2016 - 2018

    Managed the front-end specifications to guarantee accessibility and functionality of web applications for both public and private enterprises. Ensured compatibility across various browsers, addressing the diverse user base and enhancing the user experience on multiple platforms.

  • Senior Front-end Developer / Digital Production Manager

    2011 - 2015

    Developed scalable, responsive websites using proficient front-end tools and industry standards. Contributed to technical planning, task scheduling, and reporting throughout the project lifecycle. Established development guidelines to improve production workflow and ensure client satisfaction. Actively participated in the recruitment process, contributing to hiring new team members to strengthen and expand the project team.

  • Web Designer / Developer

    2011

    Created user interface designs, brand logos and front-end development.

    Web Master / Graphic Artist / Marketing Manager

    2007 - 2010

    Oversaw the upkeep of the company website, including content creation. Led the Marketing and Advertising Department in the development and execution of comprehensive marketing and advertising campaigns and strategies. Managed trade exhibitions and events, ensuring successful execution. Generated emailers, online newsletters, and print collaterals to support the company's promotional efforts.

  • Others:

    Resource Speaker / Trainer

    ReactJS Training (May 30 - June 01, 2018) Phoenix One Knowledge Solutions

    Acted as a temporary instructor to a group of developers venturing into React for the first time. Provided training to facilitate introduction and understanding of React development principles.

workable tech

I studied Psychology and taught myself to code. Since 2005, my journey has been all about professional web design and development. My success as a Front-end Developer comes from combining insights from Psychology, creative thinking, and a strong interest in logic and human behavior. This unique combination gives me a distinctive edge in my approach to development.

Understanding the breadth of the Front-end spectrum, my usual emphasis lies in CSS, UX, web performance, and Accessibility. And as a proponent of clear and sustainable code, I lean towards CSS methodologies such as BEM, OOCSS, SMACSS, and Atomic Design as my preferred approaches.

  • HTML logo
  • CSS logo
  • Sass logo
  • JavaScript logo
  • TypeScript logo
  • ReactJS logo
  • NextJS logo
  • WordPress logo
  • Drupal logo
  • Storybook logo
  • NodeJS logo
  • Git logo
  • Webpack logo
  • Redux
  • Handlebars
  • Jest
  • Salesforce
  • Electron
  • Figma
  • Docker
I (try to) maintain a Facebook page - Front-end Notes - where I share Front-end tips and personal learnings.

Education

Bachelor of Science in Psychology
Far Eastern University, Manila

Personal Milestones

Run 102KM Bataan Death March (BDM) Ultramarathon - Philippines (2012)

Climbed Mt. Kinabalu - Kota Kinabalu, Sabah, Malaysia (2013)

Get in touch