About Me

Ruo-Fang Wang

Front-end / UI / Web Developer

📋 Background

I am a dedicated Front-end Engineer currently at ViewSonic, where I specialize in building high-performance desktop applications, web apps, and developing private UI libraries using React, TypeScript, and Material-UI (MUI). My work is deeply rooted in creating accessible and inclusive digital experiences, including implementing features that comply with the European Accessibility Act (EAA) and ensuring WCAG standards are met.

With a GPA of 3.95 and Dean’s Honor recognition from Algonquin College's Interactive Media Design program, I bridge the gap between design and technical execution. My professional journey includes serving as a Student Web Publisher for the Government of Canada, where I automated newsletter templates to improve efficiency by 33%, and a UI Developer Co-op at Agility PR Solutions, where I focused on revamping reusable components and refining SCSS architectures.

My background is uniquely multifaceted; before transitioning into engineering, I spent nearly three years as a Marketing Officer at DBS Bank, honing my communication and strategic thinking skills. This experience, combined with a Bachelor of Arts in Economics from National Taipei University, allows me to approach development with a logical, data-driven perspective and a keen eye for business impact. I am a lifelong learner who even dedicated a seven-month sabbatical to an in-depth study of React, and I thrive in collaborative Agile/Scrum environments where I can deliver scalable, high-quality web solutions.

Contact Me

🎓 Education

Algonqion College - Ottawa, ON, Canada
- Diploma, Interactive Media Design
- Sep 2021 - Aug 2023
- Grade: GPA: 3.95
- Activities and societies: Dean Honor 2021-2023
- Skills:
  - Web Development: HTML, CSS, SCSS, JavaScript, React, Vue, Vite, Git, GitHub
  - Design and Media: Adobe Creative Suite
  - Content Management Systems (CMS): WordPress, Shopify
  - UI/UX: Adobe XD, Figma, Figjam
National Taipei University - Taipei, Taiwan
- Bachelor of Arts - BA, Economics
- Sep 2013 - Jun 2017
- Grade: GPA: 3.48
- Activities and societies: President of Zither Club, 2015-2016

💻 Skills

Web Development

React
React Redux
Redux Toolkit
JavaScript
Electron
Node.js
HTML
CSS
Sass/SCSS
Vue
Angular
TypeScript
Git & GitHub
PHP
Liquid

UIUX Design

Figma
Figjam
Adobe XD
Adobe Photoshop
Adobe Illustrator

Content Management System

WordPress
Shopify
Adobe Experience Manager (AEM)

💼 Work Experience in Taiwan 🇹🇼

Front-end Engineer

ViewSonic · Permanent Full-time
Mar 2024 - Present · 2 yrs 1 mo
New Taipei City, Taiwan
Job Description:
- Develop accessibility features for the desktop application to comply with the European Accessibility Act (EAA), and implement new functionalities based on business requirements using Electron, React, React Router, and TypeScript.
- Continuously improve and refactor existing code to reduce package size and enhance performance, aiming to minimize the risk of application crashes.
- Build a private UI library for internal use across multiple projects, featuring reusable components developed with React, TypeScript, customized Material-UI (MUI), and Azure DevOps Artifacts. Document UI specifications with Storybook and deploy static documentation to AWS S3 via Azure DevOps CI/CD pipelines.
- Ensure high-quality UI and branding by customizing MUI themes, components, and typography in alignment with design systems, mockups, and prototypes provided by UI/UX designers.
- Deliver front-end web solutions using React and its ecosystem, including React Router, React Redux, Redux Toolkit, and Material-UI (MUI). Integrate APIs via Axios and manage data interactions using Lodash. Write automated tests for websites using Cypress to ensure code quality and functional reliability.
- Thrive in a fast-paced Scrum environment by collaborating closely with UI/UX designers, back-end developers, project managers, and product development managers. Proactively reprioritize tasks to optimize efficiency throughout Agile sprints.

Marketing Officer

DBS Bank · Permanent Full-time
Jul 2018 - Apr 2021 · 2 yrs 10 mos
Taipei City, Taiwan
Job Description:
- Orchestrated comprehensive Marketing Strategies spanning branch communications to digital marketing for an array of Consumer banking products. Demonstrated outstanding proficiency by maintaining an impressive CPL of CAD 27 in digital marketing initiatives for mortgage loans.
- Collaborated seamlessly with diverse stakeholders across multiple squad teams, honing and showcasing exemplary leadership and communication skills.
- Strategically designed and executed social media campaigns for Consumer banking products including loans, deposits, and investment offerings.
- Leveraged the resources of DBS Bank (Singapore) to curate and publish 21 articles and videos. Pioneered the launch of bi-weekly and daily newsletters, dedicated to promoting investment products among our esteemed wealth clientele, significantly enhancing brand awareness within this segment.
- Conceptualized, organized, and hosted highly successful webinars focused on unit funds, achieving established product goals within an impressive one-month timeframe.

💼 Work Experience in Canada 🇨🇦

Student Web Publisher

Government of Canada · Seasonal
Jun 2022 - Aug 2023 · 1 yr 3 mos
Ottawa, Ontario, Canada · Hybrid
Job Description:
- Conducted thorough Quality Assurance checks on web pages to ensure compliance with WCAG standards, maintaining a high level of accessibility.
- Demonstrated proficiency in crafting customized web pages in response to clients' specific requests, utilizing Adobe Experience Manager (AEM) to implement designs effectively.
- Successfully remedied 50 broken links within web pages, ensuring seamless navigation for users, and subsequently published the pages with updated, functional links.
- Streamlined web content by archiving 221 outdated pages through AEM, enhancing the overall user experience.
- Effectively managed the integration of 772 new links into web pages after a migration, ensuring smooth transition and optimal functionality.
- Played a pivotal role in creating and publishing web pages for weekly newsletters, enhancing the template using HTML and CSS codes within AEM text blocks. This streamlined editing, saving 33% of working time and making maintenance more accessible for non-coders.
- Produced insightful web analytics reports using Adobe Analytics, tailored to internal client specifications. Reports included critical metrics such as popular search terms, peak visitation hours, and more, providing valuable insights for strategic decision-making.
Skills:
- Web Content Accessibility Guidelines (WCAG)
- Adobe Experience Manager (AEM)
- Adobe Analytics (AA)
- HTML
- CSS

UI Developer Co-op

Agility PR Solutions · Co-op
Jan 2023 - Apr 2023 · 4 mos
Ottawa, Ontario, Canada · Remote
Job Description:
- Proficiently addressed UI discrepancies, utilizing a skill set encompassing HTML, SCSS, JavaScript, and fundamental Angular. Meticulously adjusted SCSS codes for components to align precisely with mock-up designs, ensuring a seamless user experience.
- Revamped 7 general components like checkboxes, radio buttons, input fields, text areas, selections, various buttons, and sidebar across multiple product pages, aligning them with new mock-ups. Employing a comprehensive toolkit featuring HTML, SCSS, JavaScript, Angular, and Typescript, the components were seamlessly integrated with the refreshed design.
- Demonstrated a keen eye for style by systematically updating the SCSS stylesheet and variables in accordance with new mock-ups, refining attention to detail in the design process.
- Skillfully navigated the Jira framework and adeptly executed tasks within the Agile/Scrum development process. Demonstrated exceptional time management and collaborative skills within the dynamic front-end team, consistently meeting deadlines and fostering a culture of teamwork.
Skills:
- TypeScript
- Angular
- Front-End Development
- Sass (SCSS)
- Agile(Scrum) Development Process