Amanda Mercer - Front End Web Developer

Splash Section

Mercer

Hello, my name is Amanda Mercer.
I am a front-end web developer from Ontario, Canada.

Services Section

My Services

Design

UI/UX design involves wireframing to plan a website's architecture and layout. Once the proper content and information structure is in place, I then design the visual component to create a beautiful user experience. My constant desire to learn comes into play by giving me the knowledge of the latest innovations to implement into my designs.

Front End Development

The front-end of an application is what a user sees, interacts with and experiences, which makes it distinctly human. I bring that human experience into my front-end development and create a unique user experience with each website I build. I build responsive websites mobile-first and make sure they work across all browsers and platforms.

Research and Learn

I understand that technology and the web industry are in a constant state of change and growth. I'm always eager to get my hands on books, articles, videos—anything that will provide me with the opportunity to learn more about web design and development.

Services

About Section

About Me

My name is Amanda Mercer. I am graduate from the joint Interactive Media Design program at Western University and Fanshawe College. Through this program I have had the opportunity to gain critical, theory-based knowledge about media, technology, advertising and marketing, as well as hands-on experience with design, back-end and front-end coding, branding, photography and editing.

I am an incredibly organized individual who loves working as part of a team as well as independently, and who never wants to stop learning and expanding my world view. I have a passion for coding, developing, designing, and fine art. As a dynamically trained artist, I enjoy creating responsive, user-friendly websites; engaging, timeless designs; and powerful and meaningful entertainment experiences. There is nothing quite like creating something from nothing, whether it be coding a website from scratch, creating an entire brand identity for a company, or producing a work of art with nothing but a blank piece of paper and a pencil.

About

I am fluent in:

HTML

CSS

JavaScript

jQuery

Foundation

CodeIgniter

Laravel

Agile

GitHub

SVG

Greensock

SASS

Slack

Photoshop

Illustrator

InDesign

After Effects

Sketch

Portfolio Section

My Portfolio

Forest City Cakes

Front & Back-End Development

Chantry Island

Front & Back-End Development

TruckLadders

Back-End Development

New Brunswick

Video Editing

Aston Martin

Design & Front-End Development

Watch It!

Design & Front-End Development

Pesci

Front-End Development

Organica

Front-End Development

Peachtree TV

Website & Brand Identity

Ecomo

Brand Identity

HouseCom

App Design

Wedding Invitation

Design & Printing

Engagement

Photography

Wedding

Photography

Social Awareness

Photography

Train Tracks & Graffiti

Photography

Beach

Photography

Animals

Drawing

Portrait

Drawing

Self Portrait

Drawing

Self Portrait

Drawing

ABOUT

I enjoy drawing as a personal hobby. This is a self portrait I did for an art assignment.

PROCESS

My drawing process starts with finding an image to draw. For this particular drawing, I used a photo I took of myself as a resource. Next, I drew a basic outline of myself. Then I began filling in the details through the process of shading, outlining, highlighting, blending and erasing.

DETAILS

Title: Self Portrait

Created: April 2016

Project: Solo project

Tools: Pencil, paper, blending tool, kneading eraser

Tags: Art, drawing, realism

Portrait

Drawing

ABOUT

I enjoy drawing as a personal hobby. This is a drawing of a friend I did for fun.

PROCESS

My drawing process starts with finding an image to draw. For this particular drawing, I took the photo of my friend that I used as a resource. Next, I drew a basic outline of him. Then I began filling in the details through the process of shading, outlining, highlighting, blending and erasing.

DETAILS

Title: Portrait

Created: September 2015

Project: Solo project

Tools: Pencil, paper, blending tool, kneading eraser

Tags: Art, drawing, realism

Animals

Drawing

ABOUT

I enjoy drawing as a personal hobby. This is a Christmas present I drew for someone which is a collage of their favourite animals.

PROCESS

My drawing process starts with finding an image to draw. For this particular drawing, I used five different resources and combined them in a way that flowed nicely on the page and fit the space in a balanced way. Next, I drew a basic outline of each of the animals. Then I began filling in the details of each animal through the process of shading, outlining, highlighting, blending and erasing.

DETAILS

Title: Animals

Created: December 2014

Project: Solo project

Tools: Pencil, paper, blending tool, kneading eraser

Tags: Art, drawing, realism

Wedding Invitation

Design & Printing

ABOUT

I was approached by a family member who asked me to design her save the date cards, wedding invitations, RSVPs and wedding programs.

PROCESS

I began by discussing her wedding theme with her and going over the style of invitations she would like. I was granted complete design freedom, so my next step was to research wedding invitations and get some of her top choices. Once I came up with a basic design, I created it in Photoshop and showed it to her to discuss any changes that she would like made. Once the final design was approved, I created the save the dates, RSVPs and programs with the same design. I prepared it for printing by creating a bleed and crop marks, and I had the given number of each printed, as well as some extras as back ups.

DETAILS

Title: Wedding Invitation

Created: April 2015

Project: Solo project

Tools: Photoshop

Tags: Design, printing

HouseCom

App Design

ABOUT

This assignment required me to design a touchscreen GUI app for the company HouseCom, which is a fictional, fully digital, hardwired/wifi-enabled home security and environment control system. The first portion of this assignment involved working as a group to design a logo for the company, as well as a style guide. My individual work afterwards consisted of taking the preliminary group work and generating the visuals that made up the GUI of the app.

PROCESS

My group and I began by researching similar companies, such as Nest. Together we designed a logo and a style guide. Once we separated to do our individual work, I used Photoshop to design a responsive app that could be used on an Apple Watch, mobile device, tablet, and even on desktop.

DETAILS

Title: HouseCom

Created: September 2016

Project: Team & solo project

Tools: Photoshop, Illustrator, InDesign

Tags: Design, style guide, brand document, brand identity

Ecomo

Brand Identity

ABOUT

The goal of this assignment was to work with the preexisting brand and identity features of Ecomo as well as integrate some of our own rebranded features that would together make up the look, feel and experience of the high tech Ecomo water bottle and its marketing assets. We had to work as a group to rebrand Ecomo and recreate visuals of their electronic water bottle. Along with this, we had to work indivdually with our group assets and develop new marketing materials as well as design and create a lexan polycarbonate display to wrap around the water bottle.

PROCESS

My group started off by researching the Ecomo brand. We redesigned and recreated a new logo for Ecomo, chose some new style features and stuck with some of the ones the brand already had. We took our visuals of the water bottle to the next level by recreating it in Cinema 4D, which gave us the ability to display our individual lexan polycarbonate displays on the bottle and take different angled photos of the water bottle. Working on my own, I designed a display in Illustrator with the intention of having it wrap around the water bottle and be interactive, allowing the user of the bottle to check the settings of their water bottle, the quality of their water, etc. I also created a branding document for my group that outlined the specifications for our rebrand. Finally, I created some marketing materials that advertised the new look of the water bottle, including new packaging.

DETAILS

Title: Ecomo

Created: November 2016

Project: Team & solo project

Tools: Photoshop, Illustrator, InDesign, Cinema 4D

Tags: Design, style guide, brand document, brand identity, 3D design

Peachtree TV

Website & Brand Identity

ABOUT

The purpose of this project was to take a television broadcasting network and refresh their brand to give them a more modern appearance. This included updating their television bumpers, their logo, their website, their marketing materials, and creating a branding document to outline the guidelines for the updated appearance.

PROCESS

My group and I chose to refresh the Peachtree TV brand and began by brainstorming how we wanted to update their look and their logo. Once the general appearance we wanted was agreed upon, my partners took on the 3D aspects of the project, working in Cinema 4D and After Effects to create commercial bumpers. I took on all the other aspects of the project, where I started off by creating a branding document that outlined the basics of the refresh including new fonts, styles, colours, etc. and why we chose what we did. I redesigned their website, staying consistent with the guidelines of the branding document. I also created multiple new marketing materials as well as updated some of the ones they already used (such as Facebook and Twitter) while following the same guidelines.

Organica

Front-End Development

ABOUT

The specifications for this project were to build a restaurant website that contained a filtering menu. Referencing the London-based restaurant The Root Cellar's website, the main purpose of the Organica site was to provide the website with a cleaner, more organized menu section that was an alternative to The Root Cellar's entirety of their menu being displayed on one page that the user had to scroll through.

PROCESS

I worked with a partner who designed the appearance of our Organica website. After the design was created, it was passed on to me to handle the front-end development. I created the website's menu with Foundation's Tabs, which provides the menu with a filtering option where the user has the ability to click through different tabs (Drinks, Appetizers, Desserts, etc.) and see menu items matching those specifications.

Pesci

For this project I was tasked with working with a group to create a website that promoted the new Pesci fishing rod with a gallery image section, with styling done through the use of SASS.

PROCESS

Once our first group member completed the design of the Pesci website, myself and another group member were handed off the design and worked on the front-end development together. For the gallery portion of the website, we used Foundation's Clearing Lightbox, and the website was styled through the use of SASS.

Watch It!

Design & Front-End Development

ABOUT

For this assignment I was tasked with creating a website that displayed multiple products and included an interactive product demo.

PROCESS

Basing my website on watches, I began with researching other watch websites, including Watch It! which I based my website off of. I created an interactive product demo by collecting images of 5 different styles of the same watch and creating swatches to represent their colours. I added in functionality through JavaScript that allows for the user to click on a colour swatch for the watch and the image switches out to show the watch in that style.

Aston Martin

Design & Front-End Development

ABOUT

The assignment was to create a car website that was promoting a specific car. It had to contain a section where the user had the ability to test different paint colours on the car and read details about the car by hovering over different parts of the car. This car configuration section was supposed to be invisible until the promotional video on the homepage was watched, where it would then direct the user to the configuration portion of the site. This was to be done through the use of Cinema 4D, After Effects and a source code editor.

PROCESS

I began by texturing and adding motion to an Aston Martin car model in Cinema 4D. I rendered out a short clip of the car rotating on a platform, as well as stills of different angles of the car in different colours. Once I had all my pieces rendered out, I brought everything into After Effects and combined and edited them to create a short 15 second promotional video. After researching other car company websites I designed and built the single page, scrollable site. I did so in a way that hid the car configuration section until the user either: watched the entire video, where upon completion it would jump down to the now visible configuration section; selected the Configure link in the header navigation or the footer navigation, which would open the configuration section and jump to it; or selected the Configure image on the main page, which would produce the same result. Through the use of Javascript, I built hot spots on the car that upon hovering would show information about that specific part of the car. I also created a paint colour selection that allows the user to click colour and it switches out the image of the car to show what it would look like in the selected colour.

New Brunswick

Video Editing

ABOUT

While on Vacation in New Brunswick, my partner and I brought GoPros with us to film our experience.

PROCESS

Using multiple accessories for the GoPros, me and my partner filmed our time in New Brunswick. I sorted through all the videos and cut the best clips. Then I used After Effects to compile the clips, add music and add subtle effects.

DETAILS

Title: New Brunswick

Created: August 2016

Project: Partner project

Tools: GoPro, After Effects

Tags: Videography, video editing

TruckLadders

Back-End Development

ABOUT

While working for Reactr through Fanshawe College, I was assigned the task of taking on the back-end development for the website of the London-based company TruckLadders. Previously, other Reactr students had designed and developed the original website from the ground up. While the company had once only been selling ladders built for commercial transport trucks, the development of their website brought to light a new client base which was pick-up truck drivers who wanted safe access into the beds of their pick-up trucks. My job was to take the already created website and database and a new section to the website that would serve their new clientele.

PROCESS

Working in-line with my partner who was handling the design and front-end development of the new portion of TruckLadders, I started off by drawing and revising multiple versions of database flowcharts in order to come up with the most logical and efficient organization of the database. This included modifying some of the tables and columns that had previously existed, as well as adding new ones to accommodate the new aspect of the site. After modifying the TruckLadders database, I worked with CodeIgniter to set up new controllers, models and views for the new portions of the website. This included building a form that allows pick-up truck drivers to insert the make of their truck, the model, year, bed height and tailgate width specifications, as well as their contact information. Upon submission of the form, this information sends to the database and is emailed to TruckLadders as an order so they can get in contact with the customer. After my partner finished with all the design and front-end development portions of the site, I combined everything together and edited her code to work with the CodeIgnitor framework.

DETAILS

Title: TruckLadders

Created: September - December 2016

Project: Partner project

Tools: Sublime Text 3, CodeIgniter, MAMP, phpMyAdmin, Slack

Tags: Web development, back-end development, Scrum

Chantry Island

Front & Back-End Development

ABOUT

As a final assignment for school, I was tasked with building a custom website and CMS for the client the Marine Heritage Society at Chantry Island. This was a competition against classmates, as the client would be choosing the website they liked the best to use as their website. The goal was to create a more modern, updated version of their current website, including fixing a list of bugs and changes they provided for us. We had a total of four checkpoints throughout the semester in which certain parts of the website were to be completed.

PROCESS

My partner and I worked together to design the basic look of website. We came up with a less cluttered and confusing site map and a fresh design that would stand out from the others. I then took on the position of developer and built the front-end of the website with the use of Foundation for the first checkpoint. For the second checkpoint, I created a dynamic, JavaScript-driven gallery that pulled images and matching descriptions from the database. To meet the third checkpoint, my partner and I worked together to build a customized Google Maps API that showed the location of Chantry Island as well as the user's current location with unique drop pins and styling. For the fourth and final checkpoint, my partner and I created a CMS with PHP that allowed for the client to update text and images across their website, add new images and delete images from the gallery, etc. The final step included a presentation of the website to the clients where they decided which website they were going to go with.

Forest City Cakes

Front & Back-End Development

ABOUT

While working for Reactr through Fanshawe College, I was assigned the task of working with a partner to design a brand and website, as well as build the website, for London-based bakery Forest City Cakes. After the rapid growth of their business, they required the creation of a stronger digital presence. While this client had a homemade look and feel for their products when being displayed at artisan markets, they needed a stronger overall digital presence and an increased set of tools for communication, promotion and marketing that would fit with the new growth and direction of their company.

PROCESS

My original role on the project was as the back-end developer while my partner took on the role of design and front-end. We began by having one-on-one meetings with the client to discuss their needs and the way we could go about fulfilling those needs. While my partner began designing their overall branding and website, I developed a site map and built the database we would need to accommodate the dynamic content on their website as well as a CMS. While my partner continued with the design of the website, I began the process of learning Laravel and setting up controllers and view-only routes for easier implementation of the built pages when they were ready. Once the site was fully designed, my partner and I decided to switch roles and I took on the task of building the front-end of the website through the use of Foundation. My partner and I also conducted a photoshoot to provide images of the products to be used within the site. Throughout the course of this project, we continued to meet with and communicate over Slack with our clients to make sure they were happy with the work we were producing. I also continued to work hand-in-hand with my partner by giving input on the designs and switching roles or working together on the same role when necessary, resulting in a very fluid and dynamic work flow.

Beach

My partner and I do photography together as a personal hobby. While I take the occasional photograph, my main role is editing the RAW images. These are some photographs my partner and I did for fun.

PROCESS

After coming across this beautiful location, my partner decided to take some photographs for fun. Once he sent me all the RAW photos, I edited each of them in Photoshop.

DETAILS

Title: Beach

Created: November 2015

Project: Partner project

Tools: Nikon D5200, Photoshop

Tags: Photography, photo editing, image optimization, RAW images

Train Tracks & Graffiti

Photography

ABOUT

My partner and I do photography together as a personal hobby. While I take the occasional photograph, my main role is editing the RAW images. These are some photographs my partner and I did for fun.

PROCESS

After coming across this interesting location, my partner and I decided to take some photographs for fun. Once we left, I edited each RAW image in Photoshop.

DETAILS

Title: Train Tracks & Graffiti

Created: September 2015

Project: Partner project

Tools: Nikon D5200, Photoshop

Tags: Photography, photo editing, image optimization, RAW images

Social Awareness

Photography

ABOUT

My partner and I do photography together as a personal hobby. While I take the occasional photograph, my main role is editing the RAW images. These are some of our photographs from my partner's school project, the purpose of which was to create an eBook using mainly photographs on a topic that would raise social awareness.

PROCESS

Once we found the subject of our photographs, our first step was to informally interview him to get an idea of what his day-to-day life was like. We wanted to capture photos that would describe his daily routine and interactions so we needed some background information first. We then took some posed photos, and with his permission, stayed out of sight to take some candid photos of his interactions with others. Once we left, I edited each RAW image in Photoshop and sent the finals to y partner to add to his eBook.

DETAILS

Title: Social Awareness

Created: November 2015

Project: Partner project

Tools: Nikon D5200, Photoshop

Tags: Photography, photo editing, image optimization, RAW images

Wedding

Photography

ABOUT

My partner and I do photography together as a personal hobby. While I take the occasional photograph, my main role is editing the RAW images. These are some of the photographs from a wedding photoshoot my partner and I did.

PROCESS

We started off by researching wedding photoshoots to add to our ideas of poses and angles we could do for the shots, as well as different candid shots to get. The day of the wedding my partner and I directed a lot of the shots, and he took many candids. Once the wedding was over, I edited each RAW image in Photoshop and sent the finals to the subjects of the photoshoot.

DETAILS

Title: Wedding

Created: August 2015

Project: Partner project

Tools: Nikon D5200, Photoshop

Tags: Photography, photo editing, image optimization, RAW images

Engagement

Photography

ABOUT

My partner and I do photography together as a personal hobby. While I take the occasional photograph, my main role is editing the RAW images. These are some of the photographs from an engagement photoshoot my partner and I did.

PROCESS

We started off by researching engagement photoshoots to add to our ideas of poses and angles we could do for the shots. We went to a location and my partner and I both directed the subjects of the photographs and experimented with different styles of photos. I contributed by taking the occassional photo as well. Once the photoshoot was over, I edited each RAW image in Photoshop and sent the finals to the subjects of the photoshoot.

DETAILS

Title: Engagement

Created: April 2015

Project: Partner project

Tools: Nikon D5200, Photoshop

Tags: Photography, photo editing, image optimization, RAW images

Portfolio

Contact Section

Contact Me

If you like my work, if you're interested in hiring me or if you have any questions, please don't hesitate to send me a message. I will get back to you as soon as possible.