Resume Website

The resume website is an incredibly important piece of every developer's journey. For me, it was important that my resume website reflected how I worked on previous projects: from scratch. With nothing but HTML, CSS, JavaScript, and Bootstrap, I designed and built my resume website with a few main features in mind:

1. Ease of use
2. Availability
3. Accuracy

With these in mind, I developed the key features of my resume website.

The Main Page

The main page is important primarily in fitting information in without looking cramped. It should highlight the most important pieces, namely the resume and the projects page. Additionally, the main page must convey the most important information for potential employers.

Knowing this, I designed the main page to follow a standard branching structure, with the most important information easily accessible at the top. Using HTML and CSS, I created a moderately attractive but entirely functional resume-style main page, which lists out various relevant information. The idea was that the larger, darker, headers would highlight sections, and important sections could easily be read.

Additionally, the resume is available in one-page and two-page PDF files for companies to print and a text version for accessibility. The navbar was the final challenge of the main page, since it must be usable on both desktop and mobile clients. To fix this issue, I used Bootstrap's navbar collapse class so mobile users can access any page from a simple hamburger menu.

The Projects Page

Unlike the main page, the project page is meant to show off projects rather than statistics. This means a series of pictures rather than words is more fitting. The problem with a large series of images, however, is the chance that certain projects which are more important to the employers may become lost among the rest. To fix this issue, I created an entirely custom JavaScript sorting system.

The JavaScript sorting system was designed with ease of use in mind. By default, all projects are shown. A simple click or tap on a tag limits the results to only projects with that tag. By tapping on multiple tags, any projects with any matching tags will match. This way, an employer can select only the relevant tags and browse through those projects.

The next issue was displaying the images and headers. For this, I opted to use CSS and hide the headers until the image is hovered over. This means that both desktop and mobile users can easily find relevant projects without text clutter, but the text can still be searched for or read by screen-readers.

Contact

Compared to the other pages, the contact page was quite simple. I listed the contact information for myself and two references, and used Bootstrap to adjust for mobile users.

Tags: JavaScript, HTML, CSS, Bootstrap, Client

Link: samuelmach.com