About Me

Ruo-Fang Wang

Front-end / UI / Web Developer

📋 Background

I am a Frontend Engineer specializing in React and its ecosystem, with a strong focus on building scalable, maintainable, and high-performance applications. My experience spans web and Electron-based products, where I have worked extensively with TypeScript, state management, and modern frontend architectures.

In my current role at ViewSonic, I focus on solving complex engineering challenges, including refactoring legacy systems, optimizing performance, and building a cross-project UI component library. By introducing CI/CD pipelines, reusable architecture patterns, and automated testing, I significantly improved development efficiency and reduced regression costs. I also led performance optimization initiatives, improving Lighthouse scores and reducing bundle size, contributing to better application stability and user experience.

Prior to this, I gained experience in accessibility (WCAG compliance) and large-scale content systems while working with the Government of Canada, ensuring usability and accessibility standards. I also strengthened my UI engineering skills during my time at Agility PR Solutions, where I translated design systems into reusable components.

My earlier career in marketing gives me a strong product sense and user-centric mindset, allowing me to bridge business goals with technical execution effectively.

I thrive in collaborative, fast-paced Agile environments and enjoy working closely with cross-functional teams to deliver impactful, user-focused 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

AI Agent

Github Copilot
Claude Code

Web Development

React
TypeScript
Sass/SCSS
React Redux
Redux Toolkit
Vite
Git & GitHub
HTML
CSS
JavaScript

Dekstop Applications

Electron (Node)

UI Library

Material-UI (MUI)

CSS Frameworks

Tailwind CSS

E2E Test

Cypress

Unit Test

Vitest

CI/CD

AzureDevOps Pipeline
Guthub Actions

UIUX Design

Figma
Figjam
Stich AI
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 3 mos
New Taipei City, Taiwan
Job Description:
- Improved frontend performance via code splitting, caching, and bundle tuning, boosting Lighthouse scores from 71.5 to 94.5.
- Led Electron app refactoring, reducing bundle size by 27% and lowering crash risk.
- Built AI-powered automation workflows (AI Skills), reducing manual effort by up to 97%:
  - Automated release notes generation with Outlook draft output (1 hr → 2 min).
  - Implemented dependency audit to enforce N-1 version compliance.
- Built and maintained a cross-project MUI-based UI library, published to Azure Artifacts with automated Storybook deployment via CI/CD; delivered 14 components and 2 layouts covering 50%+ UI patterns.
- Introduced Cypress E2E testing, reducing regression time from ~3 hrs to ~10 min (~94%).
- Developed theme system and base configuration for CodeCrush UI, improving design consistency and scalability.
- Adopted Vite + ESM, reducing setup time by ~50%.
- Applied Container/Presentational pattern and custom hooks to improve maintainability.
- Implemented i18n with react-i18next for multi-language support.
- Developed EAA-compliant features and business logic for Electron apps using React and TypeScript.
- Collaborated in Scrum teams across design, product, and backend.

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