Front-End Web Developer

About Me


Picture of me

Hello! I’m Andrew a front-end web developer based in the greater Seattle area. I'm also a part-time student, studying courses in JavaScript (through the University of Washington Continuing Education program) and full-stack web development (through Nucamp), while continuing to sharpen my skills and experiment with new technologies by build websites for clients as a freelance web developer. Ultimately, I'm looking for any positions as a front-end in web developer in the Seattle and greater Seattle areas.

A little bit about myself, I’m a University of Washington graduate with a degree in linguistics and eight years of teaching experience working abroad in Cambodia. This past year marked a major turning point in my life as I moved back to the states, got married, and completed a full-stack web development boot camp through the University of Washington Continuing Education Certificate Program to jumpstart a career in web development. Switching from a career in education as a primary school teacher to a career in web development has not been an easy transition, but it has been an exciting and rewarding journey. Every day I'm learning new things to develop my skills while solving and fixing problems, and building applications with real-life functionality; all things that get me excited to continue down this path.

Outside of work and study, I love to hike and travel. While living in Asia, I was able to travel regularly throughout the region. Hiking along Tiger Leaping Gorge in Yunnan Province of China was a highlight, as was jungle trekking and orangutan viewing in Borneo. Despite my love for travel I’m actually a bit of a homebody and prefer to spend my evenings reading, watching movies or playing board games, particularly Disney trivia games.


  • Olaf Application

    Olaf

    Olaf is a community-driven food service web application which offers both seller and customer interactivity. Users can create an account as either a customer or chef for different user experiences. As a chef, the user can create food items to post online. (Photos can be added to the online items through the use of Cloudinary.) Once the chef is online, their address is converted to geo-coordinates using the Geocoding API, and the chef's location is placed on a map using Google Maps API. Now the customer can search the map to find online chef's and shop for items to add to their cart. Once a customer has completed checkout, the customer and chef are notified of order details via text message through the use of Twilio. This application was created using React and MDBootstrap on the front end. Data is stored in a MySQL database with the use of Sequelize NPM.

  • Dictionary Application

    Dictionary App

    The Dictionary App is a search and vocabulary building application. It allows users to search for words' definitions, save words to their collections, review words as flashcards, add their own words to their collection, take dynamically generated tests, and more. This handy application has a simple and clean design and smooth UI for individuals looking to improve their vocabulary. The UX is enhanced with additional features such as light/dark mode and other theming options which allows users to customize the app to suit their personalities. It utilizes third-party authorization and authentication through firebase. Data is stored and queried through the firebase firestore.

  • Pixel Images Application

    Pixel Images

    Pixel Images is a full-stack MERN photo sharing and social media application. Pixel Image allows users to post images; view, like and comment on other images; register for an account; log into an existing account and more. Data is persistant through the use of MongoDB and authentication is through passport JWT strategy. The frontend was built using React and all components were created from scratch along with Sass for styling and CSS grid and flexbox for positioning and layout.

  • Weather Forecaster Application

    Weather Forecaster

    Weather Forecaster is a searchable, mobile responsive application that provides weather info for the user's current location, a five-day weather forecast, Fahrenheit - Celsius conversion, Weather news articles, location mapping, and even a weather report from Mars. It fetches data from various web APIs including: NASA, openweather, zipcodeapi, and newsapi. Map navigation capabilities were added through the open layers third-party library.

  • Weather Forecaster Application

    News Reader

    News Reader is news search application that allows users to scan through news articles by section or perform a custom search based on a keyword query. User are also able to save articles to read again later using local storage for data persistance. News data is provided by the third-party News API. Style and design were built from scratch using flexbox, css grid, and scss.

  • Music Modus Application

    Music Modus

    Music Modus is an interactive web based application built with purpose of providing a resource for users to learn more about the artists and the songs that they love. This application takes the users' input from the search field and returns information on the artist, a censored or uncensored copy of the lyrics, and displays a YouTube video of the artist and their song. The application was styled using CSS and JavaScript interactivity. Bootstrap and CSS media queries were used to create mobile responsiveness. The information is being pulled and processed from five different APIs.

  • Film Reviewer Application

    Film Reviewer

    This is a React Native application built using the Expo CLI, which uses data from the OMDb API to allow users to search through the film catalogue, view film information, scroll through top rated films from various genres, and add comments for popular films. This application utilizes many third-party libraries to create a clean and friendly UI /

  • Native NuCamp Application

    Native NuCamp

    Native NuCamp is a React Native Application that allows users to search for campsites, add campsites to their favorites, read or add comments / reviews of campsites, share campsite information online, and more. It utilizes many third-party libraries and uses many of the available APIs from the Expo SDK including permissions, mail-composer, netInfo, and secure store. The application's state is managed through Redux and data is persistant using client-side storage.

  • BattleList Application

    BattleList

    An easy to use productivity application that allows the user to set up a family account. The user can create todo lists for each family member and send their lists to them via email or sms message using the nodemailer and twilio APIs. User information is not stored locally, but utilizes a backend database to create, query and delete user information and tasks assignned to team members. The frontend was designed with MDBootstrap and is fully mobile responsive.

  • Forum for leadership and reconciliation

    Forum LR

    Forum for Leadership and Reconciliation is a company website created for a client to display company news and information. The client's original site was not complete, full of broken links and unadequate for the client's needs. Using much of the same content, I restyled the website from scratch and added a number of new features including the ability to scrape blog posts from the client's blog to display in the news section of the website, utilizing the youtube data api to display videos from the client's youtube channel, a contact form that is functioning and connects user messages to the client's email address, as well as many design effects like parallax images, animation on scroll and lightbox image galleries.

  • News Collection Application

    News Collection

    News Collection is an application that scrapes articles from the New York Times website and stores information into a NoSQL database (mongodb) then displays the results on the page. The user is able to save and delete articles to and from their account, add comments to individual articles, and delete their comments. The front-end is mobile responsive and was created using mdbootstrap along with handlebars for HTML templating.

  • Recipe Finder Application

    Recipe Finder

    The Recipe Finder app is a react application that uses data from theMealDB API and allows users to search through recipes based on popular food categories. This application has a polished UI with animation effects added through the use of many third-party libraries.

  • Memory Click Game Application

    Memory Click Game

    The Memory Click Game is a front-end game application created using React. Play begins by clicking on one of twelve images. From there the cards are randomly rearranged using a durstenfeld shuffle to randomize array items and a map method on a React card component to refresh cards on the page. The game dynamics and score system were handled using methods within the app.js class object. The player wins by clicking on each of the twelve cards only once. Once a card is clicked twice, the game is reset i.e. the player loses.

  • Rainbow Keyboard Game

    Rainbow Keyboard Game

    Rainbow Keyboard is simple desktop typing application that makes typing fun. Once the user clicks the start button, writing prompts are appended to the page for the user to type. Once the answer is submitted with a click of the enter key, a new prompt takes the place of the old one. The fun audio and constanly changing colors as the user types, make this an exciting game to play. The design of this website was created solely with CSS and HTML. Because of the nature of this being a desktop game, this application is not mobile responsive. All the game logic and onclick/keyup/keydown commands were created through vanilla javaScript as an attempt to deepen my knowledge of writing pure JS without JQuery.

  • Google Books Search

    Google Books Search

    The Google Books Search app is a React-based search application which displays book information based on the user's search. It also allows the user to save books to review or purchase later. User's saved book information is stored in a Mongodb database. The website consists of two dynamically created react pages; A search page which show queried book information and and a Saved page which displays saved books.

  • Camp Sites

    Camp Sites

    This website was built using bootstrap and was constructed in an attempt to broaden and deepen my understanding of bootstrap components. This site takes advantage of many of bootstrap's features including: toolkits, modals, accordions, nav-tabs, navbars, cards, tables, grid-system, utility classes, forms, and more. This site also makes a call to the National Park Service API to pull information about national parks and points of interest in the area. Users can can visit the linked sites of each spot, or with the use of OpenLayers maps, find the location of each sight on the map with the click of a button.

  • New York Times Search

    New York Times Search

    A search engine application built using the New York Times API to find articles by topic and year of publication. This collaborative project was built using HTML, CSS and JavaScript.

  • Trivia Game Application

    Ocean Trivia Game

    A timed trivia game themed around the ocean. The timer functions and score system were created using JavaScript. The page was styled using bootstrap and external CSS.

  • GifTastic Application

    GifTastic

    A search engine application built using the Giphy API to find age-appropriate gifs by the user's input. Ajax calls and site interactivity were handled with JQuery while mobile responsiveness and styling were handled with Bootstrap and CSS.

  • Crystal Collector Application

    Crystal Collector

    A game of collecting crystals with unknown values to match the generated computer score. The game dynamics and logic were written using JavaScript / JQuery while the styling was achieved with CSS and bootstrap grid system for mobile responsiveness.

  • LIRI Bot Image

    LIRI Bot

    The LIRI Bot is a "Language Interpretation and Recognition Interface". It works by using set commands to retrieve information regarding movie and music information. This program uses many different third-party Node packages such as Axios, node-spotify-api to retrieve the requested information from relevant APIs. Other Node packages such as moment and dotenv were also used.

  • Bamazon.com Image

    Bamazon.com

    Bamazon.com is CLI that utilizes MySQL to create an online marketplace with different controls for customers to view in-stock items and make purchases which affects the database by decreasing the quantity of items in stock. CLI was created using Node.js with the mysql and inquirer NPMs.

  • Friend Finder Image

    Friend Finder

    Friend Finder is an application that matches users with other friends based on the results of a ten-question survey. When the survey is submitted, the friend record most similar to the user's submitted survey is found and returned. This application is implemented using a Node.js and Express server on the back end. HTML with a MDBootstrap CSS framework and Jquery for DOM manipulation was used on the front end.

  • Burger Devourer Image

    Burger Devourer!

    Burger Devourer! is an application that allows the user to devour burgers with the click of a button and add new burgers to their list of burgers to eat. It works through the use of GET, POST, and DELETE requests connected to a MySQL database. This app was built using MDBootstrap for front-end styling, with JQuery forAjax calls and DOM manipulation. The backend was created with Node.js and the Express NPM package with Heroku to host the deployed site. MySQL was used for the database.

Skills


Front End

HTML / HTML5

JavaScript / JQuery

React.JS and React Native

CSS / CSS3

SCSS and Sass

Bootstrap

Mobile Responsive Design

Back End

Express.JS

Node.JS

RESTful APIs

Redux

MVC and FLUX Architecture

MongoDB

MySQL

Other

Git

UI / UX Design

Problem Solving

Adobe XD

CLI

Contact