Colophon

Sing Chan is currently the VP of Product at Collabware Systems.

Sing is responsible for working with customers and stakeholders to determine the product and feature roadmaps for Collabware's Collabspace solution and manages the Product and Quality Assurance teams.

He is also responsible for the interaction design, user experience, and front-end development frameworks for Collabware's software offerings.

Technologies

This portfolio site has been rebuilt from the ground up. Here's what powers the current version:

Core Stack

Next.js 16

React framework with App Router for server-side rendering, static generation, and optimized performance.

React 19

UI library for building component-based interfaces with hooks and concurrent features.

TypeScript

Static type checking for improved developer experience and code reliability.

Development Experience

i18next

Internationalization library for managing multi-language support and localization.

JSDoc

Documentation generation tool for creating API documentation from code comments.

Prettier

Opinionated code formatter for consistent code style.

ESLint

JavaScript/TypeScript linter for code quality and consistency.

Husky

Git hooks framework for automating code quality checks before commits.

AI-Powered Development

Claude Code

AI-powered coding assistant for pair programming, code review, and documentation.

Context7

Documentation and code examples retrieval for up-to-date library and framework information.

GitHub MCP

GitHub integration for repository operations, pull requests, and issue management.

Filesystem MCP

Safe filesystem access for reading and writing files within allowed directories.

Sequential Thinking MCP

Structured reasoning and problem-solving through step-by-step thought processes.

DeepL MCP

AI-powered translation service for auto-translating content to multiple languages.

UI & Styling

Material UI (MUI)

Comprehensive React component library implementing Material Design with customizable theming.

Emotion

CSS-in-JS library for styled components and dynamic styling.

Testing & Quality Assurance

Vitest

Fast, Vite-native unit test framework with excellent TypeScript support.

React Testing Library

Testing utilities focused on user behavior rather than implementation details.

axe-core

Accessibility testing engine for automated WCAG 2.2 compliance validation.

vitest-axe

Vitest integration for accessibility testing within unit test suite.

Deployment & CI/CD

npm

Package manager for installing and managing JavaScript dependencies.

GitHub Actions

CI/CD automation platform for continuous integration and deployment workflows.

The original portfolio site was built with these technologies:

Gumby Framework

Responsive grid layout, Entypo icon set, and base UI element styles.

jQuery

Asynchronously loading portfolio projects, DOM manipulation, and UI effects.

PHP

Simple web service to serve up the portfolio projects.

Swipebox

jQuery plugin for the project image lightboxes.

SWFObject

Determined whether to show links to Adobe Flash projects.

Sass & Compass

Custom CSS written in SCSS syntax and compiled with Compass.

Design & Typography

The initial design was inspired by classic pork cuts diagrams. I wanted the site to feel like a menu at a butcher shop but eventually moved to a modern feel through the use of flat colours and sans-serif fonts.

Colour Palette

Sakura

Cherry blossom pink - more inspirational than actual implementation

Duck Egg

Pastel green - used for secondary elements and tags

Sky Blue

Primary accent color for interactive elements

Graphite

Dark charcoal for primary text

Sage

Muted green for the footer background

Maroon

Deep red for headings and call-to-action elements

The colour palette is comprised of some of my favourite pastels—sakura (cherry blossom), duck egg, and sky blue — graphite and maroon are included as background colours for instances of white text.

Typography

Open source web fonts available through Google Fonts:

Open Sans

Body text and UI elements

The quick brown fox jumps over the lazy dog.

Oswald

Headings - clean with weight, feels like a butcher's block

CHOICE CUTS

Gochi Hand

Buta's thought bubble - the Comic Sans of this portfolio!

Oink oink!

The Story of Buta

Boo vs Bu - comparing the original Yoshinoya mascot with Buta

The well-dressed Buta (pig in Japanese) caricature found in the footer was created for me by Christine Ibbitson. Buta is a shameless rip-off of Yoshi Boo, or Boo-chan, a now retired mascot for Yoshinoya, a famous chain of fast food restaurants in Japan (and other parts of the world).

In early 2004, Yoshinoya introduced a pork-centric menu due to the rising cost of beef in Japan when U.S. beef imports were banned in December 2003 after a case of bovine spongiform encephalopathy was reported in the United States. I take it the marketing folk at Yoshinoya decided the best way to promote their new pork-based menu was to create a new mascot.

When I went to Japan in March 2005, Yoshinoya was celebrating the 1-year anniversary of the introduction of their pork menu. Boo-chan was all over their in-store merchandising and there was a funny TV commercial of him dressed in a tuxedo giving a press conference. Boo-chan was an easy choice to become my new avatar.