Hi, my name is

Michael Li,
Full Stack Engineer.

I make applications for the web with a focus on creating unique, intuitive user experiences and immense dedication to quality design.

Let's talk

About

I am a self-taught programmer with a childhood fascination for computers and science fiction. Passionate for quality UX design, I am devoted to crafting elegant and intuitive applications that are accessible to all and pleasing to use. As a programmer, I enjoy solving algorithms, systems design, data visualization, and building things from scratch.

I mostly build for the web, specializing in JavaScript and dynamic frameworks such as React.

    LANGUAGES

  • HTML
  • CSS/Sass
  • Ruby
  • Python
  • Java

    FRAMEWORKS

  • React + Redux
  • Ruby on Rails
  • Gatsby
  • Apollo
  • Material UI

    DATA

  • PostGreSQL
  • MongoDB
  • Firebase
  • GraphQL
  • D3

    DEVELOPMENT

  • Figma
  • Webpack, Gulp
  • Jest, Puppeteer
  • Chrome DevTools
  • Google Cloud

Projects

GeoNews

GeoNews

Get geographically relevant news articles about any topic for your locale or travel destination. Integrates Google Maps API with News API into a single-page React application.

ReactGatsbyGoogle Maps APINews APIGeolocation API

Sorting Visualizer

Sorting Visualizer

Educational tool for visualizing sorting algorithm patterns and understanding their time efficiencies and stabilities. Powered by a custom processing module that consumes variable datasets and functions to render changes in real time.

ReactGatsbyAlgorithmsObject-Oriented ProgrammingAnimationEducational

MoneyTrack

MoneyTrack

Money management web application built with a mobile-first design. Implements Apollo Framework with GraphQL BaaS integration, D3 data visualization, and custom touch-intuitive UI components,

ApolloReactGraphQLGraphcoolD3.jsMaterial UIResponsive DesignProgressive Web AppUI/UX Design

Cocktail Craft

Cocktail Craft

UX-focused CRUD application for discovering cocktail recipes. Find the coolest drinks that you've never heard of before, or craft your own recipes to share with the community.

Ruby on RailsSemantic UIPostGreSQLCRUD AppResponsive DesignUI/UX Design

Mastermind

Mastermind

Web port of the classic Mastermind board game, brought to life with React + Redux dynamic rendering and advanced CSS styles and transitions that appeal to a quality user experience. Installable on your mobile device.

ReactReduxGatsbyUI/UX DesignResponsive DesignProgressive Web AppGame Dev

On the web

I often use online tools such as Codepen and Glitch to build small projects and develop UI/UX ideas from scratch.

D3 Choropleth

Interactive choropleth data visualization made with D3.js library.

JavaScriptD3.jsData VisualizationInteractiveUI/UX Design

Bookshelf Cover Flow

3D Cover flow interface with a modern look and feel, built from scratch leveraging 3D CSS transformations.

UI/UX DesignCSS3D TransformInteractive

Data Tree Lineage

Visualize an SQL-type simulation of a tree data structure. Predecessor and progeny of each node are calculated with the Breadth First Search algorithm.

Data VisualizationUI/UX Design

Floating Elements

Simple floating animation leveraging CSS animations.

CSSAnimationInteractive

D3 Treemap

Interactive tree map data visualization made with D3.js library.

JavaScriptD3.jsData VisualizationInteractiveUI/UX Design

Fruitbowl

Fruit-themed instant messaging chatroom with socket.io real-time communication and intuitive UX design elements.

Node.jsExpress.jsMongoDBWebSocketsSocket.ioResponsive DesignUI/UX Design

Glimmering Starscape

Animated star background that glimmers.

JavaScriptAnimation

Image Comparison Slider

Image comparison slider built with CSS and vanilla JavaScript.

JavaScriptCSSImageWeb Tool

Hex Buttons

CSS-only implementation of hexagon-shaped elements, leveraging the clip-path property.

UICSS

Image Metrics

Measure points and distances on your images. Provides CSS-oriented metrics in pixels and percentages.

JavaScriptImageWeb Tool

Parallax Scrolling

Apply parallax scrolling behavior to multiple elements. Syncs relative top and bottom positions of elements as the user scrolls.

UI/UX DesignCSSJavaScript

Phrase Generator

Generate a random unique phrase, useful for creating unique filepaths or addresses. Inspired by similar implementations by Gfycat and Glitch.

Node.jsExpress.jsDatamuse APIMicroservice

Lazy Image Loader

Custom JavaScript lazy image loader. Initial page load uses a low-resolution image, then replaces it with an asynchronously loaded high-resolution image.

JavaScriptUXOptimization

Pomodoro Clock

A fun pomodoro clock tool to increase productivity! Features intuitive controls and color indicators to enhance the user experience.

ReactJavaScriptUI/UX Design

Radial Menu

Sleek CSS-only radial menu that expands on hover. Built from scratch with pure CSS.

CSSUI ComponentInteractive

PopUp Shop

AirBnb-style digital marketplace aimed to connect artists to local store-owners that have the space and means to sell the artist's work.

Ruby on RailsPostGreSQLGoogle Maps APIUI/UX DesignAgile

React Swipe Options

Add custom action buttons under your React components that are revealed by swiping.

ReactMobile designUI Component

Radial Pointer

Unconventional menu interface revolving around a centerpiece that follows your cursor.

CSS3D TransformJavaScriptUI/UX DesignInteractive

Slideshow Component

Portable slideshow component built as a JS class with customizable options and argument validation. Implement with a single line of code.

JavaScriptUI

URL Book

Basic URL shortening microservice using Node and MongoDB.

Node.jsExpress.jsMongoDBMicroservice

Contact

Want to know more? Have project inquiries? Need a language partner?

Say hello! My mailbox is open to all.

Say hello
问好
挨拶する