Portfolio
Websites

Angry Ramen

Frontend ReactJS Developer

August 2019 — Current

Angry Ramen is a modern restaurant with a tech-savvy demographic.

  • Applied mobile-first design to develop a React SPA for optimizing customer experience using HTML5, CSS3, Javascript, NextJS, PropTypes, and Styled Components.
  • Iterated using Git and Heroku for continuous development based on growing business needs.
  • Designed Styled Components for responsive, reusable, and dynamic UI using CSS3 Flexbox and Grid.
  • Developed a responsive navigation bar for different site widths featuring a mobile accordion design.
  • Created data models with JSON for purchasable items.
  • Designed responsive CSS templates using URL Parameters to query data taxonomies and single page items.
  • Designed embedded Yelp Reviews to increase information accessibility for single page items.
  • Developed a viewport visibility detection library to display CSS animations for a dynamic UI experience.
  • Designed a Hero section with a clickable address CTA link routing conditionally to Google or Apple Maps.
  • Implemented a custom Google Maps interface with animated location marker using GoogleMapReact.
  • Implemented QR codes on the Order Menu and Welcome Sign to close the loop between the in-person and online experiences.
  • Designed a Quick Action Button to improve mobile user experience with high-value CTA links.
  • Designed social media icon links enabling users to quickly follow brand accounts.
  • Implemented Google Analytics to track user traffic and behavior.

Transcend Volleyball

Full Stack ReactJS Developer

July 2019 — Current

Transcend Volleyball is a Bay Area sports organization that provides coaching and private lessons.

  • Developed and designed a React SPA frontend app with HTML5, CSS3, Javascript, NextJS, PropTypes, Styled Components, Apollo Client and GraphQL for displaying business information and allow clients to book private lessons based on availability.

Frontend

  • Designed Styled Components with render props for responsive, reusable, and dynamic UI using CSS3 Flexbox and Grid.
  • Designed a video hero section with a business booking CTA.
  • Designed responsive components using URL Parameters to query data taxonomies single page users.
  • Developed interfaces to manage site settings, user permissions, and coach profiles.
  • Designed social media icon links enabling users to quickly follow brand accounts.
  • Developed sign in/up/out user functions and interfaces.

Backend

  • Deployed a Prisma database interface and a MySQL database on DigitalOcean in a Docker container.
  • Developed and deployed a GraphQL Yoga server to implement query and mutation resolvers.
  • Developed custom server side logic performing JWT Authentication and checking permissionfor user management.
  • Developed a GraphQL API to perform CRUD functionality for user, schedule, settings, and experience data models.
  • Implemented email sending with a SMTP Server on mailtrap.io.
  • Implemented image hosting and management for user image data with Cloudinary.
Open Source

IOS Gui

Frontend ReactJS Developer & Author

2019 — Current

IOS GUI is an open source react component for aesthetic displaying elements within a functional iOS device interface.

  • Developed and designed a responsive React component for stylistically displaying content within a realistic mobile device using React Hooks, PropTypes, and Styled Components.
  • Developed various dimensionally accurate graphically representations of iOS devices using React props and CSS variables to maintain dimension ratios for both portrait and landscape orientations.
  • Modeled and designed virtual apps interface with icons to launch the app into fullscreen mode with transitions.
  • Developed a home button that minimizes a virtual app that has been launched into fullscreen mode.

Custom Text To Speech

Automator & AppleScript Developer

2016 — Current

Custom Text to Speech service allows you to create a dictionary to redefine how selected text will be read on macOS text to speech service.

  • Developed text parsing library to compare and replace text with matching entries in a user defined dictionary using AppleScript.
  • Extended script to support Apple Speech Modifiers for fully customizable text voiceovers.
  • Leveraged Automator to create a fast installable service.

Custom Text To Speech

Custom Text to Speech service allows you to create a dictionary to redefine how selected text will be read on macOS text to speech service.

Installation

Double click on Custom Text To Speech.workflow then Install and Custom Text To Speech will be installed as a service.

Now add textToSpeechDictionary.txt to your Documents folder and you should be good to go!

To add a keyboard shortcut:

Open System Preferences > Keyboard > Shortcuts > Services, find Custom Text To Speech, then click on none.

Usage

Select text from any application and right click and press Services > Custom Text To Speech or your keyboard shortcut.

The textToSpeechDictionary.txt is a dictionary with colon separated values. When the script runs into any string on the left, it converts that string to the one on the right.

You can also use OS X embedded speech commands link in your redefinitions.

Dictionary Examples

mkdir:make directory

This changes the mkdir into make directory for a more understandable listening experience.

Example Text

Try using Custom Text To Speech on these lines:

for(int i = 0; i < 10; i++ )
  std::cout << i << std::endl

Coming Soon

  • Multiple dictionaries
    • Programming languages support (c++, java)
  • Colon escape character
Graphic Design

Restaurant Menus

Angry Ramen Order Menu
Angry Fish Sushi Togo Order Menu
Angry Fish Sushi Togo Order Menu

Restaurant Table Displays

Angry Ramen Table Display Page 1
Angry Ramen Table Display Page 2
Angry Fish Sushi Happy Hour Table Display Page 1
Angry Fish Sushi Happy Hour Table Display Page 2

Photobooth Layouts

Design Photo
Design Photo

About

I'm a Full Stack Web Developer making exciting apps. I create practical products as a freelance developer, graphic designer, and entrepreneur.

Services

Business Website

Your own custom business website built on React and/or Wordpress

Wedding Website

Your own custom wedding website for your special day

Graphic Design

Original graphic layouts and artwork for business

Photobooth

In person photobooth with live photo prints and props

Contact

© 2019 Harrison Tran

Harrison Tran

© 2019 Harrison Tran