Overview

About Template

Géno is a Responsive Personal Resume / CV, Bootstrap based template built for creative designers, developers and freelancers. It’s very easy to use with clean code and rich documentation.

Template Preview

Since Géno Template is based on Bootstrap, I will document only the new features. The rest of the components documentation you can find it in Bootstrap website.

Features

This template has everything that you need to develop your own resume/CV. Check out some of features that we have in this template. Continue reading our documentation and check our available components.

Responsive

The template works on any device: desktop, tablet or mobile.

Clean Code

You can find my code well organized, commented and readable.

Cutomizable

You can easily read, edit, and write your own code, or change everything.

Cutomizable

You can easily read, edit, and write your own code, or change everything.

Documented

This Documentation provides you with all necessary knowledge of the theme, though you can quickly set up your own website.

Cutomer Support

You are not alone. I will be glad to assist you when you need help.

What's Included

Once you download the template, you can see a folder with several files and sub folders. You can read description of some important files in continue.

Template Files
  • CSS
    •   custom.css - Write your custom styles in this file
    •   geno.min.css - Minified version of all required CSS files
  •   img - place your images here
  • JS
    • custom.js - Write your custom scripts in this file
    • geno.min.js - Minified version of all required Javascript files
  • PHP
    • contact.php - php file for handling contact form
  • Sass contains sass files
  • vendors - Bootstrap, jQuery, Retina ...
  • index.html

HTML Structure

A basic HTML markup.

Example
<!-- Main Header -->
<header id="header">

	<!-- Navigation -->
	<nav> ... </nav>
</header>

<!-- Hero Section -->
<section id="hero"> ... </section>

<!-- About Me Section -->
<section id="about"> ... </section>

<!-- Skills Section -->
<section id="skills"> ... </section>

<!-- Education & Experience Section -->
<section id="experience"> ... </section>

<!-- MileStones Section -->
<section id="milestones"> ... </section>

<!-- Portfolio Section -->
<section id="portfolio"> ... </section>

<!-- Hire Me Section -->
<section id="hire"> ... </section>

<!-- Services Section -->
<section id="services"> ... </section>

<!-- Contact Me Section -->
<section id="contact"> ... </section>

<!-- Newsletter Section -->
<section id="newsletter"> ... </section>

<!-- Footer -->
<footer> ... </footer>

CSS

Typography

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

h1 . Template Heading

h2 . Template Heading

h3 . Template Heading

h4 . Template Heading

h5 . Template Heading
h6 . Template Heading

Blockquotes

Blockquotes have a new style:

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quaerat ratione recusandae repudiandae sint! A autem incidunt magnam minima nesciunt odit officiis porro quia! Eius et fuga id laboriosam sed!

You can use .blockquote-footer if you want to add author's name.

Example
Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quaerat ratione recusandae repudiandae sint! A autem incidunt magnam minima nesciunt odit officiis porro quia! Eius et fuga id laboriosam sed!

Author

Using Sass

Géno's CSS is built on Sass, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS.

Color Variables

Example

Layouts

Banners

Banner is a combination of an image, some heading text, paragraphs, buttons, etc. which comes to header of your page and gives your readers an important message and make your page more fancier.

Example

To make a better contrast between texts and image, it's better to use overlay helper classes with banners. You can use either .banner-overlay-black or .banner-overlay-white with your banner.

If you want to control the height of the banner, you can use some of these classes: .banner-sm, .banner-md, .banner-lg.
For full height banner user .banner-fh class.

Segments

Segments are quite similar to banners, the only difference is you get to choose whether or not to set a background image.

Example

<section class="segment segment-background segment-overlay-light" data-background="path/to/image.jpg">
	<div class="container">
		<header>
			<h3 class="segment--heading">Heading</h3>
			<p class="segment--description">Some Text</p>
		</header>
	</div>
</section>

Example

<section class="segment segment-default">
	<div class="container">
		<header>
			<h3 class="segment--heading">Heading</h3>
			<p class="segment--description">Some Text</p>
		</header>
	</div>
</section>

Elements

Timeline

Example

  • Heading

  • from - to

    Title

    Subtitle

    Summary

Portfolio

Portfolio includes two parts: MixitUp filtering Plugin & Portfolio Box.

MixitUp

More information on MixitUp Plugin

Portfolio Box

Example

Example

brand

Promo

If you need to make some information box with icons, you can use this component to beautify your presentation.

Example

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis excepturi nobis nulla, rem similique voluptatum.

You can add class .promo-left or .promo-right to .promo tag, if you want to change alignment.

Contact Info

Example
  • pin_drop address example
  • mail contact@example.com

Scripts




All the scripts are located in js folder, external libraries (such as jquery, bootstrap, etc) are located in vendors.

Template Scripts

  • Scripts.min.js - Compiled Version.
  • Scripts.js - uncompiled Version for developers.
  • custom.js - you can write your own script here.

Vendors Scripts

  • Bootstrap.min.js - Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
  • jquery.mixitup.min.js - MixItUp is a jQuery plugin providing animated filtering and sorting.
  • magnific-popup.min.js - Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.

Releases & Updates







All Images are demo purpose only not included in the download file.