Help Wanted!

Hey, I hope you're having a good day. If you've stumbled on this page it must mean you're conducting some research on me. I read that your team needs an extra hand around the shop, so I applied because I want to help and I'm interested in your company. Maybe you can consider hiring me.

What am I good for? I'm here to help you design fun, professional and easy to use web software for your customers and team. I love building software. From pre-production, to user testing, all the way to the very end with handover. Nothing makes me happier than working with people that share the same passion, (and sometimes) soul-crushing joy for software development like I do.

I'm an aspiring developer

I've been building web products for the past 4 years. Everyday I find ways to improve my skills as a programmer and designer. At the moment, I'm working on developing my skills in Vue.js and extending my knowledge in vanilla Javascript. HTML, CSS, & Javascript are my go-tos. When it comes to back-end programming languages, I prefer Ruby. And for web frameworks, Ruby on Rails. A dream of mine is to one day attend Rails Conf.

Embrace boring

In this industry, trends come and go. Every year someone releases a giant report about how to become a better designer or developer. I'll be honest, I usually stray away from it.

I take pride in being a boring developer. By being a boring developer, it allows me to focus on getting the job done and stick to the trades I'm best at.

Work examples

A login page example

Before
Before work example
After
After work example

A user home page Another user home page Another user home page Another user home page

Another user home page
Another user home page Another user home page

An example of a form journey
An example of a form journey

I love creating marketing pages.
Sometimes I even enjoy the copy writing more than marking it up.
A marketing page
A responsive marketing page

How I design & prototype

The conversation always starts with the client. What are we building? Once we define the core features and model our database, I'll start mapping out the software on pen and paper. I understand things always change, but I always try my best to stick to the original game plan and only iterate when we have something in development to experiment with.

  • I jot and list every page I believe will make up the software. Afterwards, I'll list out the necessary components that make up each page, and map out an input/output if need be. At this point I am designing tiny pieces of the UX & UI.
  • Ryan Singer, product specialist at 37signals/Bascampe is someone I really admire. He cares about making good products and often shares his experience. One of his methods of creating UI patterns for software is a practice I have adapted and overtime it has proven it's value.
  • I'll then start wireframing those pages. Always with a thick marker and paper. Below is a strict layout of an admin panel I designed earlier this year.
  • Then I'll make my way onto sketch always sticking to my paper and marker wireframes.
  • Time to hardcode my designs. My favorite part of the design cycle.
  • Lately, I've had a knack for writing my own SASS stylesheets. I do have experience with UI libraries in the past like TwilwindCSS, Bootstrap, Bulma, and Tachyons. Using those libraries has helped me understand how to keep CSS organized and maintainable.
  • I can help prepare static dummy data in the controller, which can be rendered in the view with ERB. The backend programmers I work with, really appreciate this kind of help. Below is an example of an instance variable I created for a project I've worked on in the past.
  •   @menu = {
        collection: [
          {
            type: "Cheese",
            ingredients: "Cheese, Tomato",
            slice: "20",
            med: "110",
            lg: "150",
            color: "#F4BD3A",
            letter: "C",
          },
          {
            type: "Garlic Mushroom",
            ingredients: "Mushroom, Cheese, Tomato",
            slice: "25",
            med: "130",
            lg: "190",
            color: "#299144",
            letter: "G",
          },
          {
            type: "Pepperoni",
            ingredients: "Pepperoni, Cheese, Tomato",
            slice: "25",
            med: "130",
            lg: "190",
            color: "#E96438",
            letter: "P",
          },
        ]
      }
    
  • And here is was it would look in the view.
  •   <% @menu[:collection].each do |pizza| %>
      <tr>
        <td id="dotted" style="background: #fff;">
          <div style="border-radius: 50%; width: 80px; height: 80px; background: <%= pizza[:color] %>; color: white; font-weight: 800; font-size: 48px; text-align: center; line-height: 1.63"><%= pizza[:letter] %></div>
        </td>
        <td id="dotted">
          <div><span style="font-weight: 800; background: #fff; padding-right: 0.5em; font-size: 32px;"><%= pizza[:type] %></span></div>
        </td>
        <td id="dotted" style="font-weight: 800; text-align: right; font-size: 28px;"><span style="background: #fff; padding: 0 8px 0 18px;"><%= pizza[:slice] %></span></td>
        <td id="dotted" style="font-weight: 800; text-align: center; background: #fff; font-size: 28px;"><%= pizza[:med] %></td>
        <td id="dotted" style="font-weight: 800; text-align: center; background: #fff; font-size: 28px;"><%= pizza[:lg] %></td>
      </tr>
      <tr>
        <td></td>
        <td><div style="width: 220%; font-weight: 200; margin-top: -20px; font-size: 28px;"><%= pizza[:ingredients] %></div></td>
      </tr>
      <% end %>
    

    The tools I use

    Hardware
  • 2010 iMac
  • 2013 Macbook Pro
  • Pen & Paper
  • Developers Tool
  • iTerm2
  • Sublime Text 3
  • VSCode
  • Github & Gitlab
  • Postman
  • Slack
  • Basecamp
  • Wechat Mini Program IDE
  • Programming
  • Ruby
  • HTML
  • CSS
  • ES5/ES6 Javascript
  • Ruby on Rails
  • Sinatra
  • Vue.js
  • Nativescript
  • Jekyll
  • Middleman
  • Webpacker
  • Devops
  • Heroku
  • Dokku
  • Docker
  • Digital Ocean
  • Netlify
  • Github Pages
  • Design
  • Sketch App
  • Figma
  • Zeplin
  • Final Cut Pro
  • Affinity Design
  • More about me

    I am mostly cooperative when working in a team, occasionally group-orientated and capable of working autonomously. Socially, I am enthusiastic and am capable of keeping a conversation going and small talk. With other people, I occasionally tend to be forthright and warm. I am adaptive and usually high-energy, and follow the rules. I think my strongest skill is the ability to think logically and rationally to solve problems based on observed patterns, which makes me open to change.

    Thank you for reaching the bottom and spending the time to read this page.

    Sincerely,

    Jason Chee

    Let's keep in touch

    Back to the top