Advanced Personal Resume / CV vCard Template


Explore it! Purchase now!
Docs by


Ja is a HTML/CSS template based on Bootstrap 4 framework. It allows to built modern, fast and mobile friendly personal webistes. It is perfect as a virtual busiess card or online resume / CV.

HTML Structure

This is the base of each HTML file:

Grid System

Template supports all features of Bootstrap 4 Grid System - go to Bootrstrap's page and check how does it work.


Neat & Useful elements to create content.


All HTML Tags made to create nice texts.


h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading


Phasellus et sagittis odio. Sed in enim condimentum, lacinia metus id, sollicitudin libero. In ac ultricies justo.

Maecenas a risus quis ipsum convallis fringilla in ut magna. Phasellus et sagittis odio. Sed in enim condimentum, lacinia metus id, sollicitudin libero. In ac ultricies justo.

Curabitur sit amet turpis eu diam luctus viverra. Sed viverra ornare ex, quis lobortis diam vehicula a. In imperdiet est tristique, malesuada odio quis, volutpat ante. Nulla ullamcorper, nisl sed faucibus posuere, dui turpis mattis turpis, in porttitor massa odio nec sapien.


It was the best coach I’ve ever had!

Mark Johnson, Google

Icons & Images


Templates includes two types of icons with different colors.

Icon sizes

All icons are available in three types of sizes.

Social Icons

This product supports lots of social icon types.


... ...

Progress Bar



Create nice donut charts - set your components look by data-bar-color, data-track-color and data-percent attributes.



10.2011 - 09.2014
IT Engineer
University of Oxford
11.2014 - 09.2016
Webdesigner & Front-End Developer
09.2016 - 04.2017
Junior Front-End Developer
Company Ltd.
04.2017 -
Senior Front-End Developer
Company Inc.




Speed & Adrenaline

Pricing Tables

Easy & effectife way pricing tables. Add featured class to highlight the table.

HTML to WordPress
2 busiess days
from $49 per view
  • High-quality code
  • Visual Composer
  • Dedicated Support
Front-End Development
2 busiess days
$39 per hour
  • Well-organized code
  • Quick turnaround
  • Available 12h per day


There are few types of media items.

Basic Image

Being yourself

Inner Title

Being yourself


It is also required to put video modal html code somewhere before the </body> tag.


Really solid & creatve front-end developer and great teammate!

Poul McCartney
Smashing Magazine


09:00 - 12:00 St. John's Hospital Room 24C
14:00 - 19:00 St. Elisabeth Hospital Room 24C
09:00 - 12:00 St. John's Hospital Room 24C
14:00 - 16:00 St. Elisabeth Hospital Room 24C
16:30 - 18:30 St. John's Hospital Room 24C
09:00 - 12:00 St. John's Hospital Room 24C
14:00 - 19:00 St. Elisabeth Hospital Room 24C
09:00 - 12:00 St. John's Hospital Room 24C
14:00 - 19:00 St. Elisabeth Hospital Room 24C


Easy & effectife way to present code. More at Bootstrap's 4 page.


Best Trainer 2017

Inline code

For example, <span></span> should be wrapped as inline.

Code block

                        <p>Sample text here...</p>
                        <p>And another line of sample text here...</p>


Thanks to the prepared components you will be able to create really useful and easy to use websites. Let's start exploring them!



Default Primary Success Info Warning Danger


The template includes defferent types of buttons with various sizes.

Default Buttons

Outline Buttons


To validate the form please add data-validate attribute and required atribute to input / textarea.



Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.
Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.


Below are listed important configuration options for whole template.


Primary and secondary color depends on picked color scheme.

Helper Classes

Text Colors

It is possible to add any color form Available Colors section by .text-[color-name] class

This is awesome primary text!


Similar to text colors it is possible to add backgorund color from Available Colors section by .bg-[color-name] class.

For dark background colors it is necessary to add dark class to adjust font colors and other styles. Sometimes, if inside dark element is placed element with light background you should add light class to such element.

Text on primary background with padding and rounded corners.

Other Utlities

More useful helper classes are listed on Bootstrap's 4 website!


The template includes some configurable elements - here you will find informations how to use them!


The template allows to add really cool animations for each of html elements. Let's check how to use it!

Entrance animation

This animation fires when element appears in the browser viewport. To add such animation you need to place .animated class in the animted element and preciese which animation do you want to use by data-animationattribute. It is also possible to add some delay to the animation (in ms) by data-animation-delay attribute.

Bounce In
Bounce In Up
Bounce In Right
Bounce In Down
Bounce In Left
Fade In
Fade In Up
Fade In Right
Fade In Down
Fade In Left
Flip In X
Flip In Y
Light Speed In
Rotate In
Rotate In Up Left
Rotate In Up Right
Rotate In Down Left
Rotate In Down Right
Roll In
Zoom In
Zoom In Up
Zoom In Right
Zoom In Down
Zoom In Left
Slide In
Slide In Up
Slide In Right
Slide In Down
Slide In Left

Google Maps

To configure Google Map it is necessary to set latitude and longitude parameters by data-latitude and data-longitude attributes of #google-map element. To get it please visit site like this.

Contact Form

To configure booing form please open offer-form.php file from /assets/php/ directory and go the line with an e-mail address to change it to your own - like this.

After that you will recieve the messages from your websites to this e-mail address.

SentMail function must be enabled on your hositng. Otherway I recommend use and configure plugin like "PHPMailer".

Local Scroll

If you want to use local scroll somewhere in the content please add data-local-scroll attribute in the parent tag of a link to local element.

Developer Tools

The template was made with NPM package manager and Grunt.js task manager.


The template includes two package.json files:


This file includes necessary grunt tasks to make developemnt process nice and easy. Run npm install task to install them.


This file includes all plugins used in this theme. To install those plugins you need to run npm install as previously but after that you have to run grunt copy and grunt removetasks to move them into right directory



The package includes some grunt tasks to make development process easier:

  • grunt - runs grunt sass tasks after each .scss file change
  • grunt sass - compiles all .scss files
  • grunt validation - makes HTML5 validation of each .html file

Files & Credits

Check all template's assets which was usead while development proccess.

CSS Files

The template uses couple of CSS files:

CSS Theme has - was divided into some important sections:

CSS Theme is also available in couple of different color versions:

SASS Files

CSS files are generated thanks to well organized SCSS files.

  • theme-[color-scheme].scss is a main SCSS file where main colors have been set.
  • _base.css file is a base for each theme which imports other partials.
  • _config.css file with SASS variables which configure colors, fonts and more.
Go to Developer Tools to check how to compile SASS in the easiest way.

JS Files

On the end of the body of each html file there are placed JavaScrpt files:

  • Third-part plugins - third-part plugins sources
  • core.js / core.min.js - main JavaScript file
  • Google Map API

PHP Files

The template includes few PHP scripts:

  • /php/contact-form.php - configuration file for contact form


The template is so awesome because of some third-part plugins and external assets!


  1. Poppins -


  1. Themify Icons -
  2. Font Awesome -


  1. jQuery -
  2. Bootstrap 4 -


  1. Tether -
  2. Moment -
  3. Appear -
  4. LocalScroll -
  5. ScrollTo -
  6. Waypoint -
  7. Validate -
  8. Slick -
  9. Snap.svg -
  10. Typed.js -
  11. EasyPieChart -
  12. Masonry -
  13. ImagesLoaded -
  14. Isotope -
  15. Fullpage -
All plugins may be installed by npm install; grunt copy; grunt remove tasks in /assets/plugins/.


Some images used in the template was free and have been included in a package. Rest of them was blurred becouse of licensing reasons.

Included images:


Let's check what has changed since the first version...

v 1.11 - 20.10.2017

FIX - Ajax Modal Scroll Top

Files affected:
UPDATE - js/core.js, js/core.min.js

v 1.10 - 15.10.2017

ADD - 3x Designer Concept
ADD - 3x Recruiter Concept
FIX - Minor Bugs

Files affected:
UPDATE - js/core.js
UPDATE - css/themes/*.css
NEW - case-study-designer.html, index-designer-*.html, index-recruiter-*.html

v 1.01 - 15.09.2017

FIX - Footer Fixes

Files affected:
UPDATE - js/core.js
UPDATE - css/themes/*.css