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.
Portfolio
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.
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 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 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.
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 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.
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 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.
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 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 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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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 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 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! 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.