Portfolio

Portfolio

Intro

Here are some of my projects. I like designing, building, and automating things of all forms in any industry. My background is in metallurgical engineering and restaurant architecture.

Expertise

  • React/Redux
  • Javascript
  • CSS/SCSS
  • Design tools (Figma, Indesign, etc)
  • WebGL, HTML Canvas, SVG
  • Web scraping
  • Excel-VBA, python, nodeJS
  • Macros/automation
  • Business strategy & execution
  • Project management

Smaller projects are here


E-commerce


April 2018 – February 2019
👉 JS – jQuery – RWD – ASP.NET – BASH

Fully responsive 80,000+ SKUs ecommerce site. I executed the site from start to finish. From framework selection to full business integration. Designed the UX/frontend components using a custom gulp.js/pug/scss pipeline. Product managed everything else with a team of developers/database admins.

The most challenging parts were data pipelining, hiring, and project management.


MERN Redux Social Devs


March 2019
👉 MERN (Mongo Express React Node) + Redux

My 3rd course on this topic. It demonstrates authentication, private routing, pagination, heroku deploy, JWT auth, etc.

video TBA- project still being worked on


TADHacks Hackathon


March 2019
👉 NodeJS – GoogleFirebase – Voice/SMS APIs

In 24 hours, we built a speed dating phone roulette app. I focused on frontend integration firebase, voice/SMS API.
In preparation for this hackathon, I built a small python flask-Twilio app that calls a cloud-vision API when you send an SMS image.


UX Animations


February 2019
👉 SCSS – HTML – Animations – UX

I started to explore the world of UX design and animations. Because it simplifies the way we communicate. I built two fun CSS only demos, one was featured on a marketing site (see link above), another in celebration of Chinese New Year.


Technical Talk


January 2019
👉 JS – Canvas

I used to run a youtube gaming channel of 5000 followers. I wanted to get back into teaching as a form of learning, so I did a 1.5 hour technical workshop on HTML5 Canvas vs SVG vs WebGL.
In preparation for this topic, I prepared a few demos.

Some featured on front page of codepen. Example:


React Calculator


December 2018
👉 JS – React

I refactored an original vanilla-js calculator I made previously into React. State is dictated by three values

  • curValueholds the current operation / numeric token.
  • formula holds the entirety of everything before eval
  • Evaluated is a flag check to determine if “=” was the last command

Canvas Vanishing Art Cube


December 2018
👉 JS – HTML Canvas

A small experimental project using some geometry to calculate how a 3D object can be represented on a 2D plane, using art vanishing points and HTML Canvas. It’s my introduction into basic mathmatical modeling on the web. It doesn’t use anything other than a slope formula though. Read the more here


Techstars Startup Weekend 2018


November 2018
👉 JS – ReactJS – Material UI

This was a three day hackathon that focused on building a solution to a problem. MVP app was to to make a game to associate color to text. Synesthesia is a color stimulas sensation from reading text or listening to music. Target sector is educational space similar to luminosity.com, which is a brain training app. Application was built by 2 other senior developers and me. Contributions I made include: (1) UI/UX into react templating, SCSSs tyling, and user studies.


Nasa’s Spaceapp Challenge 2018


October 2018
👉 JS – Jquery

This was a two day hackathon that I worked on with 2 other developers, 1 design artist, and one business college student. The goal was to create a visual tool to help spread awareness towards NASA’s initiatives. One developer focused on project management/backend. Another on frontend / UI. My focus was on frontend development and exploring datasets. Contributions I made include:

  • Building the business logic for the “Randomize” button – e.g. it takes you to 1 of 195 countries in the world via longitude/latitude.

 


MVC Javascript Calculator


February 2018 – April 2018
👉 JS

  • Advanced Javascript
  • Debugging
  • Breaking Down JS libraries
  • Functional Programming vs Iterative/OOP
  • Unit Testing

Early 2018, one of my goals was to deep dive into javascript. I had read all of YKDJS (You don’t know JS) and watched gordon zhu’s practical javascript + premium course. I needed to apply everything I learned to one project. I chose to build a calculator, since it is a good bridge to learn about low-level programming as well. I built this app with functional programming in mind. And learned how to implement a simple MVC design pattern using object literals.

All the same, I realized why writing things functionally is not easy. Things behave in iterative fashion. Even if it can be represented functionally. A good example of this is how integrals in calculus works. I learned to appreciate the features a SPA framework like React has to offer. I wrote about my shuntyard javascript calculator on stackexchange here and things I learned from it. I also applied mocha + chai unit testing as well. Code demo is here


Dynalist Plugins


May 2016 – Now
👉 JS / CSS-selectors – GreasyFork – TamperMonkey

Dynalist is a notetaking app that I use every day. It lets you have infinitely nested outlines. I use it to capture ideas I have, take course notes, log daily sprints & summaries. If I use a webapp long enough, I end up writing my own extensions for it. In this case a CSS theme.

The next thing I made was a userscript extension. I learned how to use tampermonkey as a middleman for injection and greasy the javascript assets. I made a write up of how I developed it here. What the tool does is add a jquery slider on a page, and resizes any img html element. The 3 minute video below explains more details on what dynalist is, the tooling I made for it, and why.


Airtable Plugins


May 2017 – August 2017
👉 Excel VBA / VB6, Windows batch scripting

800 downloads currently. Airtable is the next generation relational database tool. It’s a hybrid of google spreadsheets + Microsoft access. I use it to manage product databases at work. However, it was lacking features. Namely

  1. There was no bulk way to upload image files
  2. You couldn’t backup image assets locally

For #1, I created a macro keyboard mouse AutoHotkey script to solve this issue. For #2, I developed a popular excel VBA script. You can read more about how this script works here and how I went about making it.

Checkout out this video where I explain how the bulk image downloader and renamer tool works (for backing up image assets). I explain what Airtable is, why this macro was necessary, how it works, and what it does behind the scenes here:


Design & Architecture

Planet Hollywood

I spec’d out the design of bar equipment that you’ll see at Planet Hollywood, in Disney Springs. We had it manufacturered overseas, then added green LED’s to it.

 

Morimoto Asia

Chef Yuhi who was trained directly under Ironchef Masaharu Morimoto reached out to us. I went over there to provide consultation specs for a new compartment sink. I wrote a fusion360 CAD design to get the unit manufactured locally in town.

Pics of the restaurant in general

From start to finish:

Architectural Layout

Some work, from my very first AutoCAD architectural layout to more advanced layouts used in restaurants I helped startup. Mostly, my expertise came in through design management. Of how different factors (people, menus, pathfinding, safety, permit/county codes, cross-contamination, spacing issues, equipment specs) impact how a kitchen is optimized. Similar to how offices / warehouses / factories are designed.

DIY

I’m a huge DIY enthusiast/tinkerer. Some things I’ve built/welded: