JQuery Website


Requirements/Project’s Goals

The goal of this project was to create an online version of my resume that demonstrated responsive design and semantic HTML for search engine optimization and user experience purposes. The project required that I used at least two jQuery plugins and a custom jQuery code to add a level of interactivity to the page.


Much of my design inspiration comes from my artistic background. My undergraduate education is in fine arts, and I developed a noticeable artistic style that features cool, grungy colors and quiet but curious landscapes or buildings. This certainly influences my simple yet bold designs, and it is evident in this resume website’s color pallet and imagery.

Targeted Audience

The target audience for this website consists of potential employers looking to hire for a position, potential clients looking to investigate my background, and potential network connections looking to get to know me better.

Skills/Techniques/Programs used

For this project I utilized coding skills including: semantic HTML, responsive CSS, and both downloaded and custom jQuery. I also utilized design skills in making sure the website was aesthetically pleasing and used appropriate colors and imagery for the purpose of the site. To complete the project, I practiced version control using Git in the command line and pushed the project to my repository on GitHub. I also utilized Adobe Photoshop CC for the design, Atom text editor for coding, and Chrome Developer Tools for testing changes.

Design/Coding Stages/Steps

The first step I took in completing this project was to create a mood board. This helped me determine the colors, fonts, and imagery for the site, and I was easily able to create a style guide to reference throughout the project. I then cloned the starting code from the class’s GitHub repository and coded the semantic HTML, making sure it made sense in the HTML5 Outliner. Next, I coded the CSS for the website using mobile-first principles, and added media queries as I moved to the coding for larger screens. I then researched simple and customizable jQuery plug-ins, and decided on two – the moving color strip and the tool-tips. I finally wrote my custom jQuery code to allow for the navigation’s hover effect and to allow the page to scroll down on the button click.

Favorite Aspect of Project

My favorite aspect of the project was writing the jQuery code. The endless options we have with coding JavaScript interactivity is so cool to me, and I had a lot of fun with deciding how to write the jQuery to make it perform the exact actions I wanted.

What did you learn while completing this Project?

While completing this project, I learned how to really refine my responsive design skills. I spent a good amount of time perfecting the media queries while working in Chrome Developer Tools, and it taught me the importance of trial in error in the browser before working straight in the code.