Live Demo – Download Source Code

Setting the Layout

Aside from the single index file I’m also creating a separate stylesheet named styles.css. We also need a copy of the jQuery library, either local or hosted externally.
The page itself is held within a wrapper fixed at the maximum width of 700px. Within this wrapper I’m using a secondary container div which adds the white background and natural page body effects.


You’ll notice each navigation HREF value points towards the ID of a page element. This could be updated to link towards separate pages, then overridden using jQuery to keep the dynamic effects. If you don’t care much about indexing separate pages, Google is still able to crawl through all your content with ease.


The inner portions are split into section elements with each using a specific ID value. The example HTML above is from the default profile view which loads immediately on the page. I want to go over the jQuery first because it’s quick and simple to understand. There is a bit for the navigation along with another small section to handle the non-functioning contact form.

Dynamic jQuery Effects

Down towards the very bottom of the page you’ll notice a script block. There isn’t anything overly complex but it is worth an explanation. I’ve copied the entire section of code below:


Whenever a user clicks onto any of the navigation links I’m using event.preventDefault() to stop the action. This is how you can include links to external pages for Google which aren’t accessible to most users.
I also define 3 variables which are useful throughout the function. current represents the currently selected page link, and the .sel class needs to be removed from that link when switching to new content. The other two variables newpg and oldpg represent the new page we are switching onto, and the older page which needs to be hidden out of view. This is accomplished using the fadeOut()/fadeIn() methods along with removeClass()/addClass().
At the very bottom I’m targeting #contactform as a selector. When anyone submits the contact form I want to stop the submission because there isn’t any code in place to send out an e-mail. If you plan to implement a real contact form, be sure to remove those 3 lines of code.

Inner Content Designs

Not everything in this vCard layout is exciting, but there are some cool CSS features. Specifically I’d like to explain the design characteristics for the skillbars along with the basic responsive portfolio items.
When searching on CodePen I found these cool animated bars which had a very polished design. I chose to leave out the animation and simplify the design even more. These skills are located on the second tab for “Resume”.


Each .skillbar is a unique item with a full-length background behind another lengthened bar. One inner span element contains text labeling the skill, along with total years of experience. Colors and width values are applied in CSS by targeting special classes for each skill.


By keeping all the widths fluid everything will wrap naturally based on device resolution. This is another reason I’ve avoided animation on the skill bars – although I did write a very similar tutorial about that technique.


The portfolio layout is a bit simplistic, although it does work out great for this demo. The images are linked to Dribbble shots using dimensions of 800×600. The images will be resized based on the container’s total width. Each list item is 45% the width of the page, and the secondary images float right to create the illusion of a middle margin.

Responsive Updates

At the bottom of my CSS file there are some media queries for handling responsive devices. I’m working at breakpoints of 550px and 450px. Hitting the first break at 550, each portfolio item breaks into full-length instead of stacking like thumbnails.


By 450px I need to handle the navigation items which begin to fall apart onto new lines. The nav links adapt to 100% width. Also the h1/h2 headers are resized to appear more natural on smartphone screens. The homepage portrait image is also resized, and the contact form inputs are shortened in length.
Some of these examples are minor cosmetic touch-ups, while the navigation is a necessary feature. If you add more page elements the number of responsive styles could go up – along with the possibility of writing new breakpoints.
Live Demo – Download Source Code