Resume websites a.k.a Curriculum vitae (CV) websites have been on the Internet over the years. The trend dictates that more and more people are into responsive CV websites.
These kinds of website provide information that makes it easy for employers to evaluate that particular person’s skills. This has a lot of advantages as you do not need to submit a paper version of your CV because it can already be accessed online anytime and anywhere.
Its purpose is to provide an overview of of the following:
Experience
Basic information
Portfolios
On today’s tutorial, we’re going to build a responsive CV website using CSS and a jQuery plugin called Easy Tabs Plugin, a lightweight jQuery plugin to provide full tab functionality.
Resources You Will Need to Complete This Tutorial:
Flat icons (You can get your own preferred icons here with 24px by 24px icon size)
jQuery latest library
EasyTabs jQuery Plugin
Open Sans (Google Font)
Time and Patience
Final Product
File Structure
For our file structure, we will create three folders and one HTML file:
index.html – This will serve as our main file. All of our designs will be utilized on this file.
js folder – For our JavaScript/jQuery
img folder – For our images
css folder – For our styling (CSS)
The HTML Markup
On our HTML file, first, we will add the HTML5 doctype and series of links on our head section. This will include our link to the CSS files and Google fonts followed by our jQuery library file and the EasyTabs jQuery plugin.
For our body section, let’s add first the container class along with the content class. This will hold the next menu and elements. We will wrap the menu with an unordered list and give it a class of tabs. Each menu has its own link to the ID of the element, along with its class for its style.
Next, let’s add our markup for the profile section. This will have two sides. The first one will be the primary information like name, job and job description that will be placed on the left. This will be wrapped up with a class of about.
The next one will be the basic information such as birthdate, address, phone and so on. This will be wrap with an unordered list basic info class.
Afterwards, we will add the markup for our résumé section. This will also have to 2 sides. The first one will be our markup for the Education History and Work Experience. On the right, we will add the Technical Skills.
Next, we let’s add the markup for the Portfolio section. This will include a series of image and title of the project along with its description. All of these portfolios will be wrapped in an unordered class portfolios.
Now that we’ve got our 3 tabs setup the way we want, let’s finish our HTML. Let’s add the connect section which includes a contact form.
With that last chunk of markup, we’ve completely added the HTML structure of our CV website. So by this time, it is expected you can have a similar look like the image below:
The CSS
Now let’s add the CSS general styles first. Let’s start by adding styles to our body tag as well as the H1 tag, container and so on. Our ID container will have a 866px width. We will also add a border radius to our content.
Now let’s go style the menu. We will first add a background on it with the hex color #dadada and give it a height of 60px. Next on the list will be the class tabs and its sub-classes.
Now it’s time to target each tabs. We’ll start first with the Profile tab. Let’s give it a background hex color #01bdf3 and give it also a nice border radius. We will also need to put styles for the About and Basic Info sections.
For our résumé section, we will add a padding of 20px on all sides, hide the overflowed element and then set styles for the date and date-range as well as the Skills section.
Next is the chunk of styles that governs the Portfolio section. First, we will add a 20px padding to the right, bottom and left sides. Then, finally, we will add styles to our heading, unordered list, images, portfolio-title and description.
Finally, we will set up some styles on our connect section. This will include styles of forms (textbox, text ares, submit button). We will also give the Submit button a nice hex color #ffef6a and a background hex color of #01bdf3 when moused over.
With that last chunk of codes, we’ve completely transformed our boring tabs and content into something that looks a lot closer to what we’re trying to achieve. Let’s now add the media queries.
Responsive with Media Queries
Media queries consist of a media type and at least one expression that limits the scope of the style sheets by using media features. Using its capabilities, we will be put detailed styles that we want to fix or change for each view port. To learn more about media queries, you check this article.
The JQuery
All this effort and the dang thing still doesn’t work! We need to add the jQuery code before the closing body tag using the EasyTabs plugin.
To make it work, we need to add the codes below. I had done some customization with the code so that we can easily customize the speed of animation as well as which one to animate.
In my code below, I created a variable content and then assigned it to the content ID then work it out with the easytabs code.
That’s it! These are all the codes we need to take our responsive CV website from static to functional. I know that codes seem pretty mind-blowing, but it’s not as crazy as you think.
Final Words
Congratulations, you’re all finished! There you have it, we’ve built a fancy but interactive responsive CV website using HTML, CSS and JQuery.
Leave a comment and let me know what you think. What would you have done differently?