Loading your experience...

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 Image

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:

Portfolio Section

My Portfolio

Forest City Cakes

Front & Back-End Development

Forest City Cakes

Chantry Island

Front & Back-End Development

Chantry Island

TruckLadders

Back-End Development

TruckLadders

New Brunswick

Video Editing

New Brunswick

Aston Martin

Design & Front-End Development

Aston Martin

Watch It!

Design & Front-End Development

Watch It!

Pesci

Front-End Development

Pesci

Organica

Front-End Development

Organica

Peachtree TV

Website & Brand Identity

Peachtree TV

Ecomo

Brand Identity

Ecomo

HouseCom

App Design

HouseCom

Wedding Invitation

Design & Printing

Wedding Invitation

Engagement

Photography

Engagement

Wedding

Photography

Wedding

Social Awareness

Photography

Social Awareness

Train Tracks & Graffiti

Photography

Train Tracks & Graffiti

Beach

Photography

Beach

Animals

Drawing

Animals

Portrait

Drawing

Portrait

Self Portrait

Drawing

Self Portrait

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
Self Portrait




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
Portrait

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
Animals

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
Wedding Invitation
Wedding Invitation

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
HouseCom
HouseCom
HouseCom
HouseCom

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
Ecomo
Ecomo

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.

DETAILS

  • Title: Peachtree TV
  • Created: November 2016
  • Project: Team & solo project
  • Tools: Photoshop, Illustrator, InDesign
  • Tags: Design, web design, responsive design, rebrand, style guide, brand document, brand identity
PeachTree
PeachTree
PeachTree

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.

DETAILS

  • Title: Organica
  • Created: March 2015
  • Project: Partner project
  • Tools: Dreamweaver
  • Tags: Web development, responsive design, front-end development
  • Click here to view this website live.
Organica
Organica
Organica
Organica

Pesci

Front-End Development

ABOUT

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.

DETAILS

  • Title: Pesci
  • Created: March 2015
  • Project: Team project
  • Tools: Dreamweaver, Trello
  • Tags: Web development, responsive design, front-end development, SASS
  • Click here to view this website live.
Pesci
Pesci
Pesci
Pesci

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.

DETAILS

  • Title: Watch It!
  • Created: October 2016
  • Project: Solo project
  • Tools: Photoshop, Illustrator, Sublime Text 3
  • Tags: Web design, responsive design, web development, front-end development
  • Click here to view this website live.
Watch It
Watch It
Watch It
Watch It

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.

DETAILS

  • Title: Aston Martin
  • Created: November 2016
  • Project: Solo project
  • Tools: Photoshop, Illustrator, Cinema 4D, After Effects, Media Encoder, Sublime Text 3
  • Tags: Web design, responsive design, web development, front-end development, motion design, 3D design
  • Click here to view this website live.
Aston Martin
Aston Martin
Aston Martin
Aston Martin

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
TruckLadders
TruckLadders
TruckLadders
TruckLadders

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.

DETAILS

  • Title: Chantry Island
  • Created: January - April 2017
  • Project: Partner project
  • Tools: Sublime Text 3, PHP, MAMP, phpMyAdmin, Photoshop, Illustrator, After Effects
  • Tags: Web development, back-end development, front-end development, database, CMS, video, web design, photography
  • Click here to view this website live.
Chantry Island
Chantry Island
Chantry Island
Chantry Island

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.

DETAILS

  • Title: Forest City Cakes
  • Created: January - April 2017
  • Project: Partner project
  • Tools: Sublime Text 3, Laravel, MAMP, phpMyAdmin, Photoshop, Illustrator
  • Tags: Web development, back-end development, front-end development, database, CMS, web design
Forest City Cakes
Forest City Cakes
Forest City Cakes
Forest City Cakes

Beach

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 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
Beach
Beach
Beach
Beach
Beach
Beach

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
Graffiti
Graffiti
Graffiti
Graffiti
Graffiti
Graffiti
Graffiti
Graffiti
Graffiti
Graffiti
Graffiti

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
Social Awareness
Social Awareness
Social Awareness
Social Awareness
Social Awareness
Social Awareness

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
Wedding
Wedding
Wedding
Wedding
Wedding
Wedding
Wedding
Wedding
Wedding
Wedding
Wedding
Wedding
Wedding
Wedding
Wedding
Wedding
Wedding
Wedding

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
Engagement
Engagement
Engagement
Engagement
Engagement
Engagement
Engagement
Engagement
Engagement
Engagement
Engagement
Engagement
Engagement

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.

Contact