Justin Wong designs & builds interfaces

I’ve been making websites and web applications for a few years. I’m looking to transition from solo developer to front-end team member.

Contact meSend me a message

I like owning any work that reaches end users: front of the front-end, back of the front-end, UX, accessibility, design, writing. Here are some projects I worked on:

Music Player

a web app for playlists and playback

There are five phone screenshots. The first is a home screen of song categories and playlists. The other four screenshots show a playlist screen, with searching, sorting, adding to queue, and a 'now playing' bar at the bottom. The design is simple and flat.

I made a small React app for playing music. It was a good exercise in using frameworks and implementing widgets. I also learned about web APIs for media sessions.

Technologies: React, Material UI, SQLite, a Python webserver

ins.report

a micro-SaaS for home inspection reports

The screenshot has a form on the left and a PDF on the right. The form has a few fields like client name, address, and inspection date. The PDF is titled '4-Point Inspection Form' with lots of checkboxes and text fields.

an early prototype

This web application is only in pre-alpha. But I think the prototype is worth including here.

After a couple years working alongside a home inspector, I noticed several pain points in the business process. Some issues were improved without code, but the report process remained clunky and error-prone. I decided to design a better form-to-PDF workflow. I’m focused on UX aspects like speed, error reporting, and reliability.

  • designed for non-technical people to use during inspections
  • PDF edits performed in the browser with Wasm
  • all client-side, hosted for free, no backend
  • working on a PDF test suite

Technologies: IBM’s Carbon Design System, Web Components, Rust & Wasm, PDF manipulation, Astro

Personal Website

chasing sidequests at wonger.dev

In one corner of the screen, I wear a blindfold. There is a checklist entitled 'deploy a website.' The current task is 'create DNS record', and the timer shows one minute, nine seconds. The rest of the screen is taken up by a web browser, which shows a form for creating a DNS record, with fields such as 'record type' and 'name.'

I can deploy a website with my eyes closed (article, video)

The screenshot shows a minimal video player interface. The top half shows a pixel-art-like image of the 20th century fox logo. The bottom half has commands like 'm' for make marker, 'space' for unpause, and 'q' for quit and cut into three segments. Other textual interface components include an fps count and a playerbar with segments.

vic: play and cut videos in the terminal

A small desktop GUI for fast scripture lookup

  • writeups include “There is only one animal emoji” and “Cutting videos in the terminal with chafa and ffmpeg”
  • side projects written in languages like Python, Rust, and Bash
  • curating hundreds of tech tips in my nuggets
  • healthy outlet for Luddite tendencies

Technologies: Vanilla HTML/CSS

ghostty.in-one.page

redesigning a documentation site

Screenshot of the original documentation website for Ghostty. The main area is a scrolling list of configuration keys and descriptions. The sidebar contains site navigation for pages like installation, configuration, and the terminal API. The top of the page has links for Discord, GitHub, and download.

original docs (before)

Screenshot of the redesigned website. There is an alphabetized list of configuration keys with default values on the left, and a scrolling pane of descriptions on the right. The top of the page has a search bar, version number, dark mode toggle, and a disclaimer about being an unofficial site.

my redesign (after)

I forked ghostty.org to demonstrate some usability improvements:

  • filtered options depending on the user’s platform
  • wrote a custom build step to find keywords and link them to definitions
  • removed the JavaScript dependency in tab components
  • designed a desktop breakpoint to make use of extra space

and implement some commonly requested features:

  • showed the default app configuration
  • linked to helpful resources and discussions
  • added a search box

Technologies: Astro, MDX, JavaScript & CSS

Virtual Whiteboard

a scratchpad for online tutoring

try it on desktop

Typical canvas apps are cluttered with menus and buttons. I made a button-free alternative that saves screen space and reduces distractions. The whiteboard supports basic features like pan and zoom, undo and redo, and import and export. This is just one example of “making the tool that I wish existed.”

Most of my developer instincts come from ten years of math tutoring. I’m always focused on solving problems and communicating clearly.

Technologies: Vanilla JavaScript, HTML Canvas

Various Microsites

one-page design experiments

The screenshot says 'no, you gotta wait 16 hours and 38 minutes' at the top. There are bullet points at the bottom that answers questions 'what', 'when', and 'who'.

is.slippi.ranked.today

The screenshot says 'I love writing in my notebook', with the first subheading 'mind on paper', and a few paragraphs and doodles as well.

notebook love

The screenshot shows a simple grid of boxes, each filled with small monospace text.

nuggets

I stay sharp by making little design experiments. Each new site is a training ground for layouts and typography.

Technologies: Vanilla HTML/CSS; fluid design with utopia.fyi

Google Summer of Code

contributing to an open-source library

In 2023, I was sponsored to make a few pull requests to p5.js, a creative coding tool. I wrote specs, code, and documentation. It was good practice contributing to a large codebase and working remotely.

Results included:

  • speeding up image processing by using shaders (from 3fps to 60fps)
  • removing some boilerplate for end users
  • a blog post recap

Technologies: HTML Canvas, WebGL, Mocha & Chai, Git

Let’s Chat

Think we would work well together? I’d be happy to hear from you.

Contact meSend me a message