1stwebdesigner

An Easy Way of Building Responsive CV Websites

Posted: 27 May 2014 06:00 AM PDT

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

final-product

File Structure

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.

  <!DOCTYPE html>  <html lang="en">  <head>      <title>Responsive CV Website</title>      <meta charset="utf-8">      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">      	<link rel="stylesheet" type="text/css" href="css/reset.css"/>      	<link rel="stylesheet" type="text/css" href="css/style.css"/>  		<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic|PT+Serif:400,400italic"/>      <script type="text/javascript" src="js/jquery.min.js"></script>      <script type="text/javascript" src="js/jquery.easytabs.min.js"></script>  </head>

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.

  <body>  <div id="container">  <div id="content" >  <div class="menu">  <ul class="tabs">  	<li><a href="#profile" class="profile-tab">Profile</a></li>  	<li><a href="#resume" class="resume-tab">Resume</a></li>  	<li><a href="#portfolio" class="portfolio-tab">Portfolio</a></li>  	<li><a href="#connect" class="connect-tab">Connect</a></li>  </ul>  </div>

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.

  <div id="profile">  <div class="about">  <div class="profile-photo"><img src="images/profile-picture.png" width="127" height="154"/></div>  <h1>JOHN DOE</h1>  <h3><i>Web Designer/Video Editor</i></h3>  is a web, graphic and video enthusiast based in Kansas City, Missouri, USA. Have a passion for designing detailed, creative and modern websites & graphics.    </div>  <ul class="basic-info">  	<li>  <h3>BASIC INFO</h3>  </li>  	<li><label>Name</label><span>John Doe</span></li>  	<li><label>Birthdate</label><span>December 5, 1990</span></li>  	<li><label>Address</label><span>Kansas City, Missouri</span></li>  	<li><label>Phone</label><span>+000 000 000 000</span></li>  	<li><label>Email</label><span>email@email.com</span></li>  	<li><label>Website</label><span>www.website.com</span></li>  </ul>  </div>

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.

  <div id="resume">  <div class="resume-section">  <h3 class="main-heading">Educational Background</h3>  <ul class="date">  	<li>  <div class="date-box">  <h4>Crest High School<span class="date-range">2003 - 2007</span></h4>  <h5>Effingham, Kansas City, Missouri</h5>  </div></li>  	<li>  <div class="date-box">  <h4>Emporia State University<span class="date-range">2007 - 2011</span></h4>  <h5>Emporia, Missouri</h5>  </div></li>  <div class="clear"></div></ul>  <h3 class="main-heading">Employment History</h3>  <ul class="date">  	<li>  <div class="date-box">  <h4>EGG Graphic Design<span class="date-range">2011 - 2012</span></h4>  <h5>Kansas City, Missouri</h5>  </div></li>  	<li>  <div class="date-box">  <h4>Creative Design Mind<span class="date-range">2012 - 2013</span></h4>  <h5>New York City, USA</h5>  </div></li>  </ul>  </div>  <div class="skills-section">  <h3 class="main-heading"><span>Technical Skills</span></h3>  <ul class="skills">  	<li>  <h4>* Graphic Design</h4>  </li>  	<li>  <h4>* WordPress</h4>  </li>  	<li>  <h4>* Creative Writing</h4>  </li>  	<li>  <h4>* Flash Dev.</h4>  </li>  </ul>  </div>  </div>

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.

  <div id="portfolio">  <div class="heading">My Latest Projects</div>  <ul id="portfolios">  	<li>                              <a href="#">                                  <img src="images/portfolio-image-thumb.png">  <h2 class="portfolio-title">Website 1</h2>  <span class="desc">E-commerce Site</span>                              </a></li>  	<li>                                <a href="#">                                  <img src="images/portfolio-image-thumb.png">  <h2 class="portfolio-title">Website 2</h2>  <span class="desc">Dating Site</span>                              </a></li>  	<li>                               <a href="#">                                  <img src="images/portfolio-image-thumb.png">  <h2 class="portfolio-title">Website 3</h2>  <span class="desc">Social Site</span>                              </a></li>  	<li>                               <a href="#">                                  <img src="images/portfolio-image-thumb.png">  <h2 class="portfolio-title">Movie FX</h2>  <span class="desc">Short Film Intro</span>                              </a></li>  </ul>  </div>

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.

  <div id="connect">  <div class="contact-form">  <h3 class="main-heading"><span>Connect With Us</span></h3>  <form action="" id="connectform">                              	<label for="name">Name</label> <input type="text" name="name" class="input" >    <label for="email">Email</label> <input type="text" name="email" class="input">    <label for="message">Message</label> <textarea name="message" cols="50" rows="6" class="textarea" ></textarea>    <input type="submit" name="submit" value="Send Now" class="submit">                          </form></div>  </div>  </div>  </div>  </div>

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:

html-first-look

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.

    body {  		font-size: 12px;  		font-family:'Open Sans', Tahoma, Arial;  		background: url('../images/light_grey.png');  		margin: 0px;  		padding: 0px;  	}    	 h1 {font-size: 34px;}    	#container {  	    width:866px;  		margin:90px auto;  	}    	#content {  	    background:#f6f6f6;  		-moz-border-radius-bottomright: 10px;  		-webkit-border-bottom-right-radius: 10px;  		border-bottom-right-radius: 10px;  		-moz-border-radius-bottomleft: 10px;  		-webkit-border-bottom-left-radius: 10px;  		border-bottom-left-radius: 10px;  		-webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);         -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);        box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);  	}

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.

    	.menu {  	    background:#dadada;  		height:60px;  		position:relative;  	}    	.tabs li {  	    height:72px;  		float:right;  	}    	.tabs {  		height:116px;  		z-index:100;  		position: absolute;  		margin:-14px 0 0 0;    	}    	.tabs li {  	    height:72px;  		float:left;  	}    	.tabs li > a {  	    width:80px;  		font-size:13px;  		padding:50px 0 0 0;  		display:block;  		height:35px;  		background-repeat:no-repeat;  		text-align:center;  		color:#b9b9b9;  	}    	.tabs li.active {  		background:#01bdf3;  	}    	.tabs li.active a {  	   font-size: 13px;  		font-weight: bold;  		text-decoration: none;  		color:#ffef6a;  	}    	.tabs li .profile-tab {  		background-image:url(../images/profile-icon.png);  		background-position:center 22px;  	}  	.tabs li .resume-tab {  		background-image:url(../images/resume-icon.png);  		background-position:center 20px;  	}  	.tabs li .portfolio-tab {  		background-image:url(../images/portfolio-icon.png);  		background-position:center 26px;  	}  	.tabs li .connect-tab {  		background-image:url(../images/contact-icon.png);  		background-position:center 24px;  	}    	.tabs .active .profile-tab {  		background-image:url(../images/profile-icon-active.png);  	}    	.tabs .active .resume-tab {  		background-image:url(../images/resume-icon-active.png);  	}  	.tabs .active .portfolio-tab {  		background-image:url(../images/portfolio-icon-active.png);  	}  	.tabs .active .connect-tab {  		background-image:url(../images/contact-icon-active.png);  	}

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.

    #profile {  		background:#01bdf3;  		-webkit-border-bottom-right-radius: 10px;  		border-bottom-right-radius: 10px;  		-moz-border-radius-bottomleft: 10px;  		-webkit-border-bottom-left-radius: 10px;  		border-bottom-left-radius: 10px;  		overflow:hidden;  	}    	.about {  	    width:490px;  		float:left;  		margin:30px 0 0 20px;  	}    	.about .profile-photo {  		float:left;  		padding:24px 15px 0 20px;  	}    	.about h1 {  	    margin:31px 0 0 0;  	    color:#ffef6a;  		font-weight: bold;  		line-height:36px;  	}    	.about h3 {  		font-size:16px;  		color:#fff;  		margin-top:11px;  		font-style:italic;  		line-height:18px;  	}    	.about p {  		font-size:13px;  		color:#fff;  		margin:15px 0 0 0;  		line-height:20px;  	}    	.basic-info {  	    width:310px;  		float:left;  		margin:10px 0 0 0;  		padding:20px 0 0 20px;  		min-height:240px;  		margin-left:10px;  	}    	.basic-info li {  		font-size:14px;  		margin: 0 0 10px 0;  		overflow: hidden;  	}    	.basic-info li label {  		color:#ffef6a;  		float:left;  		padding:4px 7px;  		font-weight: bold;    	}    	.basic-info li h3 {  	font-size: 18px;  	font-weight: bold;  	color: #ffef6a;  	margin: 0;  	padding: 0;  	}    	.basic-info li span {  	    width:170px;  		color:#fff;  		float:right;  		font-weight: bold;  	}

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.

     #resume {  		padding:20px;  		overflow:hidden;  	}  	.skills-section, .resume-section {  		float:left;  	}    	.resume-section {  		width:460px;  		padding:0 60px 0 0;  	}  	 h3.main-heading{  		font-size:21px;  		color: #999;  		margin:0 0 10px 0;  		text-align: center;  		font-weight: bold;  	}    	.date {  		padding:10px 0 0 0;  	}  	.date li {  		margin:0 0 20px 0;  	}       .date li .date-box .date-range {  		font-size:14px;  		color: #444;  		float:right;  		font-weight: normal;  		line-height:17px;  		margin: 0 0 0 10px;  		padding:2px 6px;  	}    	.date li .date-box {  		line-height:17px;  		margin-left:11px;  		color: #444;  		font-size:13px;  		padding-left:15px;  	}    	.date li .date-box h4 {  	   font-size:15px;  	   color: #444;  		line-height:24px;  	}  	.date li .date-box h5 {  		line-height:18px;  		font-size:13px;  		color: #999;  	}  	.date li .date-box p {  		color: #666;  		font-size:12px;  		margin-top:5px;  	}    	.skills {  		margin:25px 0 0 0;  		overflow:hidden;  	}    	.skills-section {  		width:305px;  	}    	.skills li {  		margin:0 0 15px 0;  		float:left;  		padding:0 0 0 30px;  	}    	.skills li h4 {  	    font-size:15px;  		color: #444;  		width:140px;  		float:left;  	}

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.

        #portfolio {  		padding:0 20px 20px 20px;  		overflow:hidden;  	}  	#portfolio .heading {  		font-size:21px;  		color: #999;  		text-align: center;  		margin:0 0 10px 0;  		padding:24px 0;  		font-weight: bold;  	}    	#portfolios li {  		width:180px;  		height:185px;  		float:left;  		margin:0 12px 20px 13px;  		text-align:center;  	}    	#portfolios li:hover {  		height:185px;  	}    	#portfolios img {  	    width:180px;  		height:120px;  		border: 3px solid #dadada;  	}    	#portfolios img:hover {  		height:120px;  		width:180px;  		border: 3px solid #ffef6a;  		transform:rotate(7deg);  		-ms-transform:rotate(7deg); /* IE 9 */  		-webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */  	}    	#portfolios li a {  		text-decoration: none;  	}    	#portfolios li .portfolio-title {  		font-size:16px;  		color: #999999;  		margin:11px 0 0 0;  	}    	#portfolios li .desc {  		font-size:12px;  		color:#999;  		font-style: italic;  		line-height:25px;  	}

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.

     #connect {  		padding:30px 0;  		overflow:hidden;  	}    	.contact-form .main-heading {          font-size:21px;  		color: #999;  		font-weight: bold;  		text-align: center;  		margin:0 0 10px 0;  		padding:0;  	}    	.contact-form {  		float:left;  		width: 810px;  		padding:0 auto;  	}    	#connectform {  		padding:0 0 0 30px;  	}  	#connectform p {  		margin:0 0 15px 0;  	}  	#connectform p label {  		display:block;  		color:#999;  		margin-bottom:8px;  		font-size:14px;  	}  	#connectform .input {  		width:60%;  	    height: 20px;  		line-height: 20px;  	}    	#connectform .textarea {  		width:95%;  	}  	#connectform .submit {  		color:#fff;  		background: #b8b8b8;  		padding:10px 8px;  		border:none;  		cursor:pointer;  		font-size:15px;  	}  	#connectform .submit:hover {  	    color: #ffef6a;  		background: #01bdf3;  	}    	#connectform .input, .textarea {  	    font-size: 15px;  		color:#999;  		background:#f5f5f5;  		padding:7px;  		border: 1px solid #ccc;  	}

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.

    @media only screen and (min-width: 768px) and (max-width: 959px) {  	#container {  		width:750px;  	}    	.about {  		width:410px;  	}  	.about h1 {  		line-height:38px;  		font-size:30px  	}  	.about h3 {  		font-size:14px;  		line-height:14px;    	}  	.basic-info {  		width:280px;  		margin-right:10px;  	}    	.resume-section {  		width:420px;  		padding-right:30px;  	}    	.skills-section {  		width:300px;  	}    	#portfolios {  		width:750px;  	}  	#portfolios li {  		margin-right:60px;  	}    	.contact-form {  		width:720px;    	}  }    @media only screen and (min-width: 480px) and (max-width: 767px) {  	#container {  		width:470px;  	}    	.about {  		width:420px;  		display:block;  	}  	.about h1 {  		line-height:38px;  		font-size:30px  	}  	.about h3 {  		font-size:14px;  		line-height:14px;  	}    	.basic-info {  		margin-top:0;  		display:block;  		width:420px;  		background:none;  		border-top:1px solid #fdc62a;  	}    	.tabs {  		padding-left:5px;  	}  	.resume-section {  		width:420px;  		padding-right:60px;  	}    	.skills-section {    		width:420px;  	}    	.skills li h4 {  		width:260px;  		list-style-type: circle;  	}    	#portfolios {  		width:450px;  	}  	#portfolios li {  		margin:0 40px 0 0;  	}    	.contact-info {  		width:420px;  	}  	.contact-form {  		margin-top:20px;  		width:420px;  	}  }    @media only screen and (max-width: 479px) {    	#container {  		width:300px;  		margin:20px auto;  	}    	.about {  		width:280px;  		margin:10px 0 15px 10px;  		display:block;    	}  	.about .profile-photo {  		margin: 0 20px 0 40px;  	}    	.about h1 {  		font-size:30px;  		line-height:38px;  		text-align:center;  	}    	.about p {  		text-align:center;  	}    	.about h3 {  	   line-height:14px;  		font-size:14px;  		text-align:center;  	}    	.basic-info {  		width:280px;  		background:none;  		margin:0 0 0 10px;  		padding-left:0;  		display:block;  		border-top:1px dashed #ffef6a;  		min-height:220px;  	}    	.basic-info li {  		font-size:13px;    	}    	.tabs {  		padding-left:0px;  	}    	.tabs li.active {  		background: none;  	}    	.tabs li > a {  	    font-size:14px;  		width:75px;  	}    	#resume {  		padding:10px;  	}  	.resume-section {  		width:280px;  		padding: 0 60px 0 0;  	}  	.skills-section {  		width:280px;  	}  	.skills li h4 {  		width:120px;  	}    	#portfolios {  		width:280px;  	}    	#portfolios li {  		margin: 0 0 0 40px;  	}    	.contact-form {  		margin:20px 0 0 0;  		width:280px;  		padding: 0;  	}  }

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.

    	jQuery(document).ready(function(){  			var $content 		= $("#content");  			$content.easytabs({  			  animate			: true,  			  transitionIn		:'slideDown',  			  transitionOut		:'slideUp',  			  animationSpeed	:500,  			  tabs				:"> .menu > ul > li",  			  tabActiveClass	:'active',  			});  		});

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?

Web Design Academy

Tuesday, May 27, 2014

1stwebdesigner

1stwebdesigner

Resources You Will Need to Complete This Tutorial:

Final Product

File Structure

The HTML Markup

The CSS

Responsive with Media Queries

The JQuery

Final Words

No comments:

Post a Comment