CV Portfolio Jekyll Theme Documentation

Thank you so much for purchasing our item from themeforest.

  • Created: 28 Jul, 2022
  • Update: 12 May, 2020

If you have any questions that are beyond the scope of this help file, Please feel free to email via Item Support Page.

Prerequisite

Prior to installation your development environment must consist of:

  1. Below are the programming lanuages required installation on your local development environment:
    • Warning - Mark sure installation is installed correctly.
      • GNU/Linux, Unix, or macOS
        • Git - version control
        • Ruby - version 2.6 or above, including all development headers
        • RubyGem - Safe, customer-facing template language for flexible web apps.
        • Bundler - Bundler provides a consistent environment for Ruby projects
        • jekyll - Transform your plain text into static websites and blogs.
        • Rack - a Ruby Webserver Interface.
        • Liquid - Safe, customer-facing template language for flexible web apps.

Installation

Follow the steps below to setup and install Jekyll:

  1. Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server using FTP or localhost in order to use it on your website.
  2. Below is the folder structure and needs to be uploaded to your website or localhost root directory:
    • HTML/assets - Contains all of the assets referenced
      • $ gem install jekyll bundler - Stylesheet files
      • $ jekyll new myjekyll - Images files
      • $ cd myjekyll && bundle exec jekyll serve - Javacript files
      • HTML/sass - Sass files
      • HTML/vendor – All external libs.
    • HTML/index.html - Homepage
  3. You should upload all or specific HTML files as per your need.
  4. You are good to go for adding your content now!

Installation

Follow the steps below to setup and install Jekyll:

  1. Fork CV-Portfolio repo from GitHub change repository name to YourProjectName.github.io
  2. Clone CV-Portfolio and starting making changes
  3. Below is the folder structure and needs to be uploaded to your website or localhost root directory:
    • HTML/assets - Contains all of the assets referenced
      • HTML/css - Stylesheet files
      • HTML/images - Images files
      • HTML/js - Javacript files
      • HTML/sass - Sass files
      • HTML/vendor – All external libs.
    • HTML/index.html - Homepage
  4. You should upload all or specific HTML files as per your need.
  5. You are good to go for adding your content now!

HTML Structure

iDocs follows a simple and easy to customize coding structure. Here is the sample for your reference:
The template is based on Bootstrap Framework

If you need more information, please visit bootstrap site: https://getbootstrap.com

Sass

We have added SASS .scss files in template. If you know how to use SASS you can change sass files and compile the css as well. You can find sass file here - HTML/assets/sass

Open the sass/_variables.scss and Edit the values according to your needs. If you need more Advanced Setup then you can Edit the Respective Files yourself which have been branched inside the same Folder. It is completely at your discretion only to include the Required .scss Files you need to minimize the amount of CSS & including only the Styles of the Blocks you need. This can be setup in your stylesheet.scss File.

Color Schemes

You can change your Website's Color Scheme in an instant. We have build 10 Color css file for change template primary color.

Simply add Color CSS file link it in the Document <head>.
Make sure you add the css/color-blue.css stylesheet in your head after the css/stylesheet.css file linking from above mentioned 10 color css file.

For Example:

Theme Customization

We have include a Custom CSS File in the css Folder so that you can better handle your Customizations for New Styles or Overwriting Default Theme Styles. Simply add all your Custom CSS Codes in the css/custom.css File and link it in the Document <head> after the css/stylesheet.css Linking. Also make sure that this is the Last Linked CSS File in the Document <head> so that your Custom CSS Styles are Overwritten properly.

Logo Settings

The Logo Container can be found in the Header Container - <header>

Layout

Documentation and examples for header, navbar, sidebar, footer

Header

The list of various header types & its descriptions are provided below for your reference:

Light

Header with white background Color & Dark text. See below image and code for more inforamtion.

Dark

Header with dark background & Light text. See below image and code for more inforamtion.

Navbar

Documentation and examples for powerful responsive navigation header

Left align

Header with Navigation alligned Left. See below image and code for more inforamtion.

Right align

Header with Navigation alligned Right. See below image and code for more inforamtion.

Add the .justify-content-end class to the element of collapse to display a align right navbar.

Center Align

Header with Navigation alligned Center. See below image and code for more inforamtion.

Sidebar

We have built fixed sidebar navigation with bootstrap scrollspy function for docs layout. which is automatically update navigation based on scroll position to indicate which link is currently active in the viewport.

The example below sidebar vertical navigation with bootstrap navs and scrollspy components and section of docs content.

Light Sidebar:

Light background Color & Dark text for light sidebar. See below image and code for more inforamtion.

Add the .bg-light class to the main sidebar navigation div element to display a light sidebar.

Dark Sidebar:

Dark background Color & Light text for dark sidebar. See below image and code for more inforamtion.

Box Layout Style

Default Layout Style is wide. Please add the .box class to the <body> Tag for box layout.

Content

Documentation and examples for displaying typography, code, table, image and video and more..

Typography

Documentation and examples for typography, headings, body text, lists, and more.

Headings

Lead

Make a paragraph stand out by adding .lead

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Inline Text elements

Code

Documentation and examples for displaying inline and multiline blocks of code

Inline code

Wrap inline snippets of code with <code>. Be sure to escape HTML angle brackets.

For example, <section> should be wrapped as inline.

Code blocks

Use <pre>s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the .pre-scrollable class, which will set a max-height of 340px and provide a y-axis scrollbar.

For example:

Have to use something like:

Syntax highlighter

We use Highlight Js for syntax highlight code snippet.

You can refer more information here: How to use highlight.js

Table

Documentation and examples for opt-in styling of tables.

iDocs is based on Bootstrap 4, so you can easily use Bootstrap's table classes to style your table. Bootstrap Documentation

Bordered

Striped

NoteYou can refer more information in Bootstrap Documentation here: Bootstrap Documentation

Icons

Font Awesome icon sets are used in iDocs.

NotePlease go to their official documentation pages for a full list of icons: Font Awesome

Image

Documentation and examples for opting images into responsive behavior and add lightweight styles to them—all via classes.

Responsive Images

Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

Image lightbox

Show image popup when click on image:

Image Lightbox with Link

Image lightbox with Button

Video

Create responsive video embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.

Embedded Video

Wrap any embed like an <iframe> in a parent element with .embed-responsive and an aspect ratio. The .embed-responsive-item isn’t strictly required, but we encourage it.

NotePlease go to official bootstrap documentation for a full information of embed video: Bootstrap Documentation

Popup with Video

Show Youtube and Vimeo video popup when click on link:

Components

Setting up components is very easy. Here is the Some of shortcodes describe. also, iDocs is based on Bootstrap 4, so you can easily use Bootstrap's components: Bootstrap Documentation

Accordion

You can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use .accordion as a wrapper.

See below image and code for more inforamtion.

Options:

Tabs

Default Bootstrap Nav component combined with iDocs for unique tabs.

See below image and code for more inforamtion.

Options:

Social Icon

Social links with different styles. See below code for more information.

Options:

Helper Classes

We have created some really useful helper classes for you. Here are a few of them. also, You can refer other default bootstrap helper classes here: Bootstrap Documentation

Text Size:
Borders, Sizing, Spacing (margin & padding) and also much more....
You can refer for use other default bootstrap helper classes here - https://getbootstrap.com/docs/4.4/utilities/

FAQ

A FAQ is a list of frequently asked questions (FAQs) and answers on a particular topic.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Iisque Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Iisque persius interesset his et, in quot quidam persequeris vim, ad mea essent possim iriure. Mutat tacimates id sit. Ridens mediocritatem ius an, eu nec magna imperdiet.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Ad vegan excepteur butcher vice lomo.

Source & Credits

Images:

Fonts:

Scripts:

Support

If this documentation doesn't answer your questions, So, Please send us Email via Item Support Page

We are located in GMT +5:30 time zone and we answer all questions within 12-24 hours in weekdays. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).

Note: While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our template like bugs and errors. Custom modifications or third party module implementations are not included.

Don’t forget to Rate this template

Please Add your Review (Opinion) for Our template. It would be a great support for us.
Go to your Themeforest Profile > Downloads Tab > & then You can Rate & Review for our template.
Thank You.

More Templates

Checkout Our Below Premium Templates

Simone - Personal Portfolio Template
Kenil - Responsive Bootstrap 4 One Page Portfolio Template

Our Portfolio

Changelog

See what's new added, changed, fixed, improved or updated in the latest versions.

For Future Updates Follow Us @themeforest / @facebook / @twitter / @Dribbble

Version 1.1 (12 Oct, 2020)

  • Added Your information here for added new feature
  • Fixed Some minor bugs for browser compatibility
  • Fixed Some minor bugs for responsive
  • Updated FontAwesome to Latest Version
  • Updated Bootstrap to Latest Version
  • Updated Improvements in CSS and JS

Version 1.0 (8 April, 2020)

Initial Release